web（三）html标签

标签的层级特性

　　闭合的html标签内可以包含一个或多个子标签，因此html的标签是一个多叉树的数据结构，多叉树的根是html标签。

标签的属性描述

　　每个标签都具备一组公用或当前标签独有的属性，属性的作用是描述标签的外观行为或识别当前标签的标识。

属性的声明语法

　　<标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

标签的公用属性

　　所有标签都具备的属性。

　　class：规定当前元素所引用的样式类名称。

　　id：规定当前元素在网页上的唯一标识，一般在css、js中会根据id检索当前元素。

　　name：当前元素在文档上的名称，可以重复。

　　style：规定当前元素的显示样式，取值为css样式表。

　　title：规定当前元素的标题，类型为文本，可在工具提示中显示。

　　　　以上是html4标准常用的公用属性

标签功能分类

　　布局标签：控制子元素所在位置，并不独立显示。

　　文本标签：用来显示文本的标签。

　　框架标签：在网页内嵌入其他子网页的标签。

　　超链接标签：超链接标签。

　　图片以及图像映射：用来显示图片、图像的标签。

　　表单类标签：用来控制用户输入的一组标签。

　　表格标签：用来按照一定长度、宽度显示的表格标签。

　　默认显示分类：Html标签具备的默认显示方式（table系列具备特殊方式）。

　　　　块级元素（ block ）展示方式 独立占有一行，宽度缺省值为100% 大小、内边距、外边距可以调整。

　　　　内联元素（ inline ）展示方式 不独立占有一行 大小、内边距、外边距不可以调整，取决于内容的大小。

　　　　内联块级元素（ inline-block ） 一个可以调整大小的内联元素

　　1、布局标签

　　　　目的是控制子元素所在位置，并不独立显示的html标签。

　　　　常用布局标签

　　　　p标签：是段落（paragraph）的缩写，包裹的内容为一个段落的文字或修饰文字的文字标签，默认自带内边距，块级元素。

　　　　div标签：一般配合css对网页内大块区域进行布局。块级元素。布局作用

　　　　span标签：一般用来包裹非特殊显示文本进行，内联元素。

　　　　列表标签：是这一组样式相同，功能相同的元素的集合，列表不同于表格（多行多列）。

　　　　　　列表标签的分类

　　　　　　　　　1）自定义列表：用来表示一组无序的、具备标题的列表数据。(<dl><dt>标题</dt><dd>内容</dd></dl>)

　　　　　　　　　2）有序列表：用来显示有顺序的列表数据信息，可显示顺序号。

　　　　　　　　　　　　ol标签：有序列表

　　　　　　　　　　　　li标签:有序列表项

　　　　　　　　　　　　type属性：规定列表的项目符号的类型，取值范围：A、a、1、i、Ι。

　　　　　　　　　3）无序列表 :用来显示无顺序的列表数据信息，可以设置列表符号。

　　　　　　　　　　　　ul标签：无序列表，块级元素

　　　　　　　　　　　　li标签:有序列表明细项，块级元素。

　　　　　　　　　　　　type属性：列表的明细符号类型，取值范围 circle(空心圆)、disc(实心圆)、square(正方形)

　　　　　文本标签：用来修饰小段用于阅读的文字的标签。

　　　　　　　　1）u标签：内容默认以下划线方式显示。

　　　　　　　　2） strong标签：内容默认以强调文字方式显示。

　　　　　　　　3）em标签：内容默认以一般强调文字显示。

　　　　　　　　4）h1—h6：标题文字标签，从h1到h6默认字体大小依次减少。

　　　　　　　　　　h标签在搜索引擎搜索时优先级别较高

　　　　　框架标签

　　　　　　　　iframe标签：该标签可以在当前网页上引入其他网页资源（支持引入非同源网页）。

　　　　　　　　　　

　　　　　　

　　　　　超链接标签

　　　　　　　　A标签：又称为超链接标签，通过a标签可以访问（链接）到其他网页。

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

　　　　　　　　　　href的取值可以为如下两种类型。

　　　　　　　　　　　　　　绝对路径：完整的网页访问路径，与当前网页位置无关。

　　　　　　　　　　　　　　相对路径：需要访问的网页资源与当前网页资源路径的相对位置。

　　　　　　　　　　锚点：超链接的一种，又叫命名锚记。在网页中的作用是快速定位器。

　　　　　　　　　　　　　　锚点的声明

　　　　　　　　　　　　　　　　　　<a href="#jump">点我看看</a>

　　　　　　　　　　　　　　　　　　<p id="jump">我是该区域的相应内容</p>

　　　　　　　　　　　　　　　　　　<p name="jump">我是该区域的相应内容</p>

　　　　　　　　　　　　　　　　　　在老版本浏览器中最初都是使用name作为锚点位置的声明方式。

　　　　　　　　　　　　　　　　　　网页中name属性的取值不唯一，因此造成锚点定位不准，所以后期浏览器都支持使用id作为锚点声明位置。

　　　　　　　　　　　　　　　　　　Html5规范中已经声明取消name的锚点声明方式，建议使用id。

　　　　　　　　　　　　　　跨网页的锚点访问：<a href="test.html#jump">跨网页锚点</a>

　　　　　　　　　　链接到第三方资源

　　　　　　　　　　　　　　

<a href="mailto:wangwu001@chinasofti.com">邮件</a>

<a href="tel:18310132010">电话</a>

<a href="sms:18310132010">短信</a>

<a href="a.mp4">视频</a>

　　　　　　　　　　

　　　　　　　　　　链接的打开方式：被访问的网页以哪种方式打开，使用target属性设置。

　　　　　　　　　　　　　　target属性的取值范围

　　　　　　　　　　　　　　　　_blank:在新窗口中打开链接文档

　　　　　　　　　　　　　　　　_self:默认，在当前浏览器窗口中打开被链接文档。

　　　　　　　　　　　　　　　　_parent:在父框架中打开被链接文档。

　　　　　　　　　　　　　　　　_top:在当前网页的最顶层框架中打开被链接文档。

　　　　　　　　　　　　　　　　framename：在指定的框架中打开被链接文档。

　　　　　　

　　　　　　图片以及图像映射

　　　　　　　　　图片标签（img）：在网页上显示图片。

　　　　　　　　　　

　　　　　　　　　　

<img src="coder.jpg" width="100px" height="100px" alt="图片"/>

　　　　　　　　　　src与href的区别：Link、a标签使用href，其余使用src

　　　　　　　　图片映射：将一个图片区域划分为若干个子区域，每个区域都可以设定为超链接。

　　　　　　　　　　

 <img src="1.png" usemap="#Map"/>

 <map name="Map">

 　<area >

 　<area>//划分多个区域

 </map>

area常用属性说明

 <img src="1.png" usemap="#Map"/>
 <map name="Map">
   <area shape="circle" coords="64,36,19" href="eye.html"alt="眼睛">
   <area shape="rect" coords="35,87,59,126" href="mouse.html" alt="鼻子">
 </map>