HTML标签总结（上）

行内元素：仅仅包裹内容的元素

a标签：超链接标签，双标签

href：指定打开的页面；锚点；

target：用于指定在哪个窗口打开href标签属性指定的页面，常用属性值有_self 、_blank 等；

 

<a href="http://www.baidu.com" target="_blank">百度一下</a>

 

img标签：图片标签，单标签

src：设置图片路径；

alt：设置图片不存在时替代文本，该属性的显示效果与浏览器以及浏览器版本有关；

height和width：设置图片的高度和宽度，单位为像素或%；

title：设定鼠标移到元素上时显示的信息；

注意：

1.任何标签都有title属性，它不是img标签特有的；

2.img标签中src和alt标签属性不能省略；

<img src="img/favicon.ico" title="熊掌" alt="熊掌"/>

span标签：常用于组合文档中的行内元素，双标签

注意：

1.span标签没有固定的格式表现，只有对它应用CSS样式时才会产生视觉上的变化；

2.推荐使用 <span> 来组合行内元素，以便通过样式来格式化它们：

说明：如果span标签没有CSS样式，那么span标签中的文本与前面文本没有任何视觉上的差异；span标签的定义方便了通过CSS样式格式化标签内的内容。

<span>span</span>

块级元素：占满整个父类标签的元素

 

div标签：常用于文档中分区，双标签

p标签：段落标签，双标签

常用属性：

align：设定文本显示的位置，属性值如下：

值	描述
left	把文本排列到左边。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。

注意：不建议使用align标签属性，推荐使用text-align样式属性代替，该样式属性常用值如下：

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	从父元素继承 text-align 属性的值。注：IE（包括 IE8）不支持该属性值。

<p style="text-align: center;">段落标签</p>

 

hn标签：标题标签，双标签，n的值为1~6，其中<h1></h1> 定义最大的标题；<h6></h6> 定义最小的标题

常用标签属性：

align：设定文本显示的位置，但不建议使用该align属性，推荐使用text-align样式代替，其使用方法和值参见p标签。

<h1 style="text-align: center;">标题标签1</h1>
<h6 style="text-align: center;">标题标签6</h6>

 

ol标签：有序列表标签，双标签

常用标签属性：

1.type：指定ol子标签li的编号类型，其属性值有：

值	描述
1	数字，默认值
A	大写字母
a	小写字母
I	大写罗马数字
i	小写罗马数字

2.start：指定ol子标签li序号起始点，默认为1，必须为整形数字。

3.reversed：HTML5新增标签属性，用于设定列表顺序为降序，其属性值为reversed

注意：type和start标签属性在HTML4.01有兼容性问题。

<ol type="A">
			<li>小说</li>
			<li>文艺
				<ol type="a">
					<li>文学</li>
					<li>传记</li>
					<li>艺术</li>
					<li>摄影</li>
				</ol>
			</li>
			
				
			
			<li>励志/成功
				<ol type="a">
					<li>职场</li>
					<li>成功</li>
					<li>人际</li>
					<li>心灵修养</li>
				</ol>
			</li>
			<li>童书
				<ol type="a">
					<li>0-2
						<ol type="i">
							<li>数字</li>
							<li>图形</li>
							<li>图画</li>
						</ol>
					</li>
					<li>3-6</li>
					<li>7-10</li>
					<li>11-14</li>
				</ol>
			</li>
			<li>生活</li>

 

ul标签：无序列表标签，双标签

常用标签属性：

type：指定ul子标签li的编号类型，其属性值有：

值	描述
disc	实心圆，默认值
square	实心方块
circle	空心圆

 

<ul>
			<li>小说</li>
			<li>文艺
				<ul>
					<li>文学</li>
					<li>传记</li>
					<li>艺术</li>
					<li>摄影</li>
				</ul>
			</li>
			
				
			
			<li>励志/成功
				<ul>
					<li>职场</li>
					<li>成功</li>
					<li>人际</li>
					<li>心灵修养</li>
				</ul>
			</li>
			<li>童书
				<ul>
					<li>0-2
						<ul>
							<li>数字</li>
							<li>图形</li>
							<li>图画</li>
						</ul>
					</li>
					<li>3-6</li>
					<li>7-10</li>
					<li>11-14</li>
				</ul>
			</li>
			<li>生活</li>