html的基本标签含义Word格式.docx
《html的基本标签含义Word格式.docx》由会员分享，可在线阅读，更多相关《html的基本标签含义Word格式.docx（10页珍藏版）》请在冰豆网上搜索。
文本或图片移动显示，属性direction用来指示移动方向。
dl>
、<
dt>
dd>
/dl>
标签创建无序列表，<
/dt>
定义上层项目，<
/dd>
定义下层项目，<
和<
标签一定要放在<
标签中才能使用。
ul>
ol>
li>
/ol>
标签创建有序列表，<
/ul>
/li>
或<
dir>
目录式列表。
menu>
菜单式列表。
hi>
i=1,2,......,6,网页中文本标题，<
h1>
/h1>
显示最大的字号，<
h6>
/h6>
显示最小的字号。
b>
粗字体。
i>
斜字体。
font>
改变字体设置，有face、size、color3个属性来控制，face设置字体，size设置字号，color设置颜色。
big>
加大字号。
small>
缩小字号。
em>
斜体标签。
a>
建立超链接，有href、target、name等重要属性，其中href属性为<
标签必须具备的属性。
●href属性。
设置目标页面的链接地址，可以是绝对地址也可以是相对地址，如果为“#”表示空链接。
●target属性。
设置超链接的打开方式，共5种：
_blank指在新窗口中打开，_parent指在上一级窗口中打开，_self指在同一窗口打开，_top指在浏览器的整个窗口中打开，new指在新窗口中打开。
●name属性。
创建一个命名锚记，使用命名锚记后，会让链接直接跳转到一个页面的某一部分。
img>
图像标签，用于网页中插入图像。
标签拥有以下属性。
●src属性。
该属性为<
标签必须具备的属性，指存放图片的具体路径。
●width属性。
图像的宽度。
●height属性。
图像的高度。
●alt属性。
图像的注释，也就是代替文字。
●align属性。
图像的对齐属性，值baseline为基线对齐，值top为顶端对齐，值middle为居中，值bottom为底端对齐，值texttop为文本上方对齐，值absmiddle为绝对居中，值absbottom为绝对底端对齐，值left为左，值right为右。
●border属性。
图像的边框的宽度，值大于或等于0，以像素（px）为单位。
●vspace属性。
图像的垂直边距，图像与页面或文本之间的垂直边距。
●hspace属性。
图像的水平边距。
table>
定义表格区域。
caption>
定义表格标题。
th>
定义表格头部。
tr>
定义表格行。
td>
定义单元格。
div>
区域标签（又称容器标签），用来作为多种HTML标签的组合的容器，对该区域块进行操作和设置，就可以完成对区域块中元素的操作和设置，Div能让网页代码具有很高的可扩展性。
span>
文字图片等简短内容的容器，其意义有点类似Div，但是和Div不一样的是，span是文本级元素，默认不会占整行，可以在一行显示多个span。
span常在段落、列表条目等项目中使用，该标签不能嵌套在其他的封闭级元素中。
p{text-indent:
2em;
}表示首行缩进两字符。
line-height表示行间距，p{line-height:
}表示行间距（行高）为两字符。
letter-spacing表示字母与字母之间的间距，word-spacing表示英文单词之间的间距。
text-align:
center；
表示居中对齐，text-align:
left;
表示居左对齐，text-align:
right;
表示居右对齐。
在CSS中，html中的标签元素大体被分为三种不同的类型：
块状元素、内联元素（又叫行内元素）和内联块状元素。
常用的块状元素有：
...<
、<
form>
常用的内联元素有：
br>
strong>
label>
q>
var>
cite>
code>
常用的内联块状元素有：
input>
在html中<
、<
和<
就是块级元素。
设置display:
block就是将元素显示为块级元素。
将内联元素a转换为块状元素表示为a{display:
block;
}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
在html中，<
和<
就是典型的内联元素（行内元素）。
块状元素也可以通过代码display:
inline将元素设置为内联元素。
如：
div{display:
inline;
}块状元素div转换为内联元素，从而使div元素具有内联元素特点。
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:
inline-block就是将元素设置为内联块状元素。
（css2.1新增），<
标签就是这种内联块状标签。
内联块状元素特点：
border-style（边框样式）常见样式有：
dashed（虚线）|dotted（点线）|solid（实线）。
border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:
#888;
//前面的井号不要忘掉。
border-width（边框宽度）中的宽度也可以设置为：
thin|medium|thick（但不是很常用），最常还是用象素（px）。
只设置下（上、右、左）边框的设置：
div{border-bottom:
1pxsolidred;
border-top:
border-right:
border-left:
元素内容与边框之间是可以设置距离的，称之为“填充”。
填充也可分为上、右、下、左（顺时针）。
如下代码：
div{padding:
20px10px15px30px;
如果上、右、下、左的填充都为10px;
可以这么写
10px;
如果上下填充一样为10px，左右一样为20px，可以这么写：
10px20px;
元素与其它元素之间的距离可以使用边界（margin）来设置。
边界也是可分为上、右、下、左。
div{margin:
如果上右下左的边界都为10px;
可以这么写：
div{margin:
如果上下边界一样为10px，左右一样为20px，可以这么写：
总结一下：
padding和margin的区别，padding在边框里，margin在边框外。
流动模型
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
实际上，块状元素都会以行的形式占据位置。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
（内联元素可不像块状元素这么霸道独占一行）
浮动模型
任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。
（在设置完边框数据后设置浮动模型）
并排显示左对齐：
float:
一左一右显示：
#div1{float:
}
#div2{float:
并排显示右对齐：
层模型
层模型有三种形式：
1、绝对定位（position:
absolute）2、相对定位（position:
relative）3、固定定位（position:
fixed）
如果想为元素设置层模型中的绝对定位，需要设置position:
absolute（表示绝对定位），这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
width:
200px;
height:
border:
2pxredsolid;
position:
absolute;
left:
100px;
top:
50px;
divid="
div1"
>
/div>
（要向什么方向移动就输入多少距离就输入相反的方向和距离）
如果想为元素设置层模型中的相对定位，需要设置position:
relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static（float）方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
#div1{
position:
relative;
Positionfixed：
表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。
由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:
fixed;属性功能相同。
（想将层模型固定在什么位置就在Positionfixed后加上位置，默认是固定在左上角）
运用position:
relative可以相对于其他元素进行定位。
1、参照定位的元素必须是相对定位元素的前辈元素
2、参照定位的元素必须加入position:
3、定位元素加入position:
absolute，便可以使用top、bottom、left、right来进行偏移定位了。
行内元素怎么进行水平居中：
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置
center
来实现的。
（父元素和子元素：
如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。
反之这个文本是div的子元素
）
当被设置元素为块状元素时用text-align：
center就不起作用了。
定宽块状元素（定宽块状元素：
块状元素的宽度width为固定值）
style>
div{
/*为了显示居中效果明显为div设置了边框*/
/*定宽*/
margin:
20pxauto;
/*margin-left与margin-right设置为auto*/
/style>
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
加入table标签
设置
display:
inline
方法：
与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
设置position:
relative
和left:
50%：
利用
相对定位
的方式，将元素向左偏移
50%
，即达到居中的目的
利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：
为需要设置的居中的元素外面加入一个table标签（包括<
tbody>
）。
第二步：
为这个table设置“左右margin居中”（这个和定宽块状元素的方法一样）。
如下：
html代码：
<
我是第一行文本<
我是第二行文本<
我是第三行文本<
/td>
/tr>
/tbody>
/table>
css代码：
table{border:
1pxsolid;
margin:
0auto;
第二种方法：
改变块级元素的display为inline类型（设置为行内元素显示），然后使用text-align:
center来实现居中效果。
divclass="
container"
ahref="
#"
1<
/a>
2<
3<
.container{
center;
}/*margin:
0;
padding:
0（消除文本与div边框之间的间隙）*/
.containerul{
list-style:
none;
padding:
}/*margin-right:
8px（设置li文本之间的间隔）*/
.containerli{
margin-right:
8px;
display:
方法三：
通过给父元素设置float，然后给父元素设置position:
relative和left:
50%，子元素设置position:
relative和left:
-50%来实现水平居中。
float:
50%
padding:
-50%;
.containerli{float:
margin-right:
设置垂直居中：
分两种情况：
父元素高度确定的单行文本，以及父元素高度确定的多行文本。
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的
height
和line-height高度一致来实现的。
（height:
该元素的高度，line-height:
顾名思义，行高（行间距），指在文本中，行与行之间的
基线间的距离
line-height与font-size的计算值之差，在CSS中成为“行间距”。
分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：
当文字内容的长度大于块的宽时，就有内容脱离了块。
输入：
.wrap{text-align:
}表示垂直居中。
升级会员 