初入门 HTML

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

---恢复内容开始---

1.h标签(标题标签）
h1~h6
2.br标签（换行标签）
<br/>
3.hr标签(水平线标签）
<hr/>
4.strong（加粗）
em（倾斜）
5.特殊
&nbsp；（空格）
&gt；(大于)
<（小于）
"（引号）
&copy；（版权符号）
6.图片标签img
<img src="" alt="" title="" width="" height="">
src:图片的地址（路径+图片名称)
alt:图片找不到时的提示信息
title：当鼠标悬停在图片上的提示信息
width：宽度.（px）
height：高度.（px）
注意：怎么找图片
第一步：确定当前html的位置
第二步：如果图片在同级目录直接写图片名称
如果图片在上级目录就用../图片名称
如果是在下级就用目录名称/图片名称
7.超链接
<a href=" target="">跳转到***</a>
href:要跳转的文件路径名称
target：_self(目标页面覆盖当前页面）
_blank(目标页面弹出新的框来显示）

8.锚链接
创建步骤
第一步：创建锚点 <a name=“ding”>xxx</a>
第二步：访问锚点链接 <a href=“#ding”>访问锚点</a>
9.功能性作用

<href="mailto:邮箱地址”></a>

10.第二章
11.无序列表
<ul>.......声明无序列表
<li></li>......列表项
</ul>
补充：type属性：circle,square...
12.有序列表
<ol>.........声明有序列表
<li></li>.......列表项
</ol>
补充：type属性：1,a,A....

13.定义列表
<dl>......声明定义列表
<dt></dt>......列表项内容声明
<dd></dd>.....列表项内容
</dl>
14.表格
<table>...表格标签...
<tr>...行标签...
<td></td>...单元格
</tr>
</table>

table属性： align水平 left 左对齐 center 居中对齐 right 右对齐
valign 垂直： top 顶端对齐 middle 居中对齐 bottom 低端对齐 baseline 基线对齐
callspacing：单元格与单元格之间的距离 cellpadding：单元格边界与单元格文字之间的距离
bgcolor：背景颜色
td属性：colspan：表示这一单元格占几格 rowspan：跨行

15. 框架标签
<frameset> <!+/....框架标签....>
<frame src="html的路径加名称"></frame> <!....引用html标签....>
</frameset>

16.刷新框架指定区域
第一步：在指定的frame中指定name属性值
第二步：在超链接部分指定target的值为name的属性值
17.内联框架<iframe>
<iframe src="html路径+名称" frameborder="0|1" scrolling="yes|no >

.......

frameborder:0表示无边框 1表示有边框
scrolling:yes表示有滚动条 no表示没有滚动条

刷新内联框架步骤
第一步：在指定的feame中指定name属性值
第二步：在超链接部分指定target的值为那么的属性值

第三章：表单
1.语法
<form action="" method="get|post>
<p><input type="" name="" value=""/></p>

</form>
post：规定如何发送表单数据

2.type属性的值
text:表示输入框（文本框）
password：表示密码框
submit：表示提交按钮
reset：表示重置按钮
radio：单选按钮
checkbox：复选按钮

3.下拉框
<select name=""> 
<option value=""></option> 
</select>

注意：

a.默认选中<option selected="selected"></option>
b.radio,checkbox的默认选中是checked="checked"

4.图片按钮
<input type="image" src="图片路径+名称"/>
5.文本域
<input type="file"/>
注意：提交方式是post，并且在form中指定enctype="multipart/form-data"
6.多行文本域
<textarea cols="多列" rows="多行"> </textarea>
7.域
<fielsdet> //域标签
<legend>xxxx</legend> //域标题
<input type="xxx">
</fielsdet>
8.表单元素标注
<labelfor="id属性值"></label>标注
步骤：
第一步：给指定的标签加上id属性
第二步：在label中加上for="id的属性的值"
9.只读和禁用
只读：readonly="readonly"
禁用：disabled="disabled"

第四章css
1.css的语法
1.位置

<head>
<style type="text/css"
//css代码
</style>
</head>
2.语法
选择器{ 属性值1：属性值1；
属性值2：属性值2；
}
例：
h1{ font:size:12px; --字体大小 color：red； --字体颜色
注意：多个属性用分号分隔
2选择器
1.标签选择器
语法：
标签名{
...
}
2.类选择器
语法：
class属性值{
....
}
步骤：
第一步：给指定的html标签加上class属性
第二步：在stlye中写
class属性值{
.....
}
3.id选择器
语法：
#id属性值{
.....
}
步骤：
第一步：给指定的html标签加上id属性
第二步：在style中写
#id属性值{
....
}
3.引用样式的方法
1.行内样式
使用style属性引入样式
例：<h1 style="font-size: 60px;color: chartreuse;">进进进进</h1>
2.内部样式表
在head中写style
例：h1{
xxx
}
3.外部样式表
把css代码保存在css结尾的文件中（层叠样式文件）
把css引入html

引入方法有两种：
第一种：链接方式
<link rel="stylesheet" href="文件路径" type="text/css"/>
第二种：导入方式
<style>
@import url("文件路径");
</style>
1.优先级
行内样式>内部样式>外部样式（就近原则）
id选择器>class选择>标签选择器
2.交集选择器
标签选择器（class选择器|id选择器）{
....
}
3.并集选择器
选择器1，选择器2，选择器3，选择器4....选择器n{
...
}
1.字体样式
font-family:字体类型
font-size:字体大小
font-weight:字体粗细（bold）
font-style:字体倾斜(italic)
font:倾斜粗细大小类型
2.文本样式
color：颜色
text-align:文本对齐方式
text-indent:文本缩进
line-height：行高
text-decoration：装饰
vertical-align：垂直对齐方式
注意：vertical-align用于td中
3.超链接伪类
a:link：表示没有访问
a:visited：表示被访问后
a:hover：鼠标悬浮
a:active：鼠标按下了松开
填写顺序：link>visited>hover>active
4.背景样式
background-color：背景颜色
background-image:url（图片路径）
background-repeat:图片平铺方式
background-position:图片的位置
简：background：颜色，图片位置，平铺方式
5.列表样式
list-style-type:列表样式
list-style-image:url（图片路径）
list-style-position:位置（inside|outsid）
list-style：样式图片位置

第六章盒子模型
1盒子模型属性
width：宽
height：高
border：边框
padding：内边框
margin：外边框
2边框
border：简写
border-color:颜色
border-width:边框宽度
border-style:边框风格
注意：边框可以分为上，下，左，右可以分别设置值

3外边距
margin:外边距
margin-left:左外边距
margin-top:上外边距
margin-right：右外边距
margin-bottom：底外边距

4内边距
padding:内边距
padding-top：上内边距
padding-left：左内边距
padding-right：右内边距
padding:-bottom：底内边距

5 display
display:none:表示的隐藏元素
display:block；块级元素（显示）
display:inline；内联元素（显示）

第七章：浮动
1浮动
float：left，right，none，
注意：a.浮动元素会把当前的块级元素变成内联元素
b.不在标准文档流中.（不会被普通元素排版）
2清除浮动
clear：both（清除左右浮动），
left（清除左浮动），
right（清除右浮动），
3溢出处理
overflow：none（moren）
hidden（隐藏）
scroll（滚动）
auto（自动（滚动效果））
注意：可以通过overflow：hidden设置浮动元素的父元素
的高度，使它包裹整个浮动元素.

第八章
1 元素定位（position）
static：默认
relative：相对定位
absolute：绝对定位
fixed：固定（建议不要使用，部分浏览器必兼容）
注意：a.相对布局和绝对布局如果它的直接父标签是body，那么相对
位置和绝对位置的起始点不同，如果他们的直接父标签是div，那么
他们的起始点都在父标签的左上角
b.绝对布局都是从父标签的左上角开始，
相对布局遵从标准文档流格式。
c.绝对布局一定设置top或者left才会生效。
2重叠关系（z-index）
默认关系为0
值可以是任何整数
值越大，位置在越前面
3透明度
opacity：0~1值越小越透明