HTML标签

 标题和段落标签

标题标签 h headline

一级标签 h1 最重要，搜索引擎非常看重，放重点内容，如网页logo等，一般只放一个，多放会被视为作弊

二级标签 h2

三级标签 h3

四级标签 h4

五级标签 h5

六级标签 h6

段落标签<p></p> 为了在页面中有换行效果，文字必须放到该标签内

---

div标签 division

<div></div>用来将相关的内容组合到一起，和其他内容分割，使文档更清晰，可以结合css使用，实现网页的布局，叫做“DIV+CSS”

div标签可以添加class属性表示类名，类名服务于css

div常见类名：

区域   类名

页头   header

logo    logo

导航条  nav

横幅   banner

内容区域  content

页脚   footer

---

 三种列表标签

无序列表<ul></ul>：没有刻意顺序，每个列表项都是<li><li>标签，互为父子组合标签。要注意代码正确缩进，<ul></ul>中不能放其他标签，<li><li>中能放任何标签。

有序列表<ol></ol>：有刻意顺序，每个列表项都是<li><li>标签，互为父子组合标签。

定义列表<dl></dl>：子标签为<dt></dt>data term 数据项；<dd></dd>数据定义

 

无序列表的type属性可以定义前导符号的样式，在HTML5中已被废弃，建议用css替代

disc   默认值，实心圆

circle   空心圆

square   实心方块

 

有序列表的属性

1.type属性，用来设置编号的类型

有：a；A；i；I；1。阿拉伯数字是默认的

2.start属性，必是整数，指定了编号起始值，值必是阿拉伯数字

3.reversed属性，指定条目是否是倒序排列的，不需要值，只需要写reversed单词即可，是HTML5全新概念

---

图片标签

<img src="images/chinese_icon.png" alt="">

src-source 图片存储目录和完整文件名

alt属性alternate 是对图像的文本描述，不是强制性的。如果无法加载图像，会在页面上显示alt属性中的备用文本。供视力不方便的人使用网页朗读器朗读备用文本

width、height属性，指宽度和高度，单位是像素，不需要写单位；如果省略其中一个属性，则表示按照原始比例缩放图片

网页支持的图片格式

.bmp  画图软件默认保存的格式，位图

.gif  支持动画

.jpeg（jpg）  有损压缩图片，用于照片

.png  便携式网络图像，用于logo、背景图形等，支持透明和半透明

.svg  矢量图片

.webp  最新的压缩算法非常优秀的图片格式

 

相对路径：描述从网页出发，如何找到图片；随着网页和图片位置关系不同，插入图片的代码随之改变，如果需要退回层级，使用“../”这样的写法

绝对路径：描述图片精准地址，不管网页在哪里，绝对路径不需要改变

---

 超级链接

将网页和网页连结在一起

<a href="2.html">去第二个网页</a>

a ：anchor 锚

href：hypertext reference 超文本引用

href支持相对路径和绝对路径，和图片插入类似

 

<a>标签的title属性，用于设置鼠标的悬停文本

如何在新窗口中打开网页？将<a>标签的target属性设置为blank

如何给图片设置超级链接？只需要用<a>标签包裹<img>标签

 

页面内锚点：

较长的页面，可以适当的给h系列标签添加id属性，它将成为页面的锚点

<h1 id=”wuxi”>无锡美景</h1>

<a href=”#top”>返回顶部（html特色）

 

下载链接：

指向exe、zip、rar等文件格式的链接，将自动成为下载链接

<a href=”1.zip”>下载</a>

 

邮件链接mailto：系统将自动打开email相关软件

<a href=”mailto：me@test.com”>发送邮件</a>

电话链接tel：系统将自动打开拨号盘

 

---

音频和视频标签

<audio>标签，插入音频，兼容到IE9

<audio controls src=”音频地址”>请升级浏览器</<audio >

controls:表示显示播放控件

autoplay属性：自动播放

loop属性：循环播放

常用音频格式：mp3，ogg，wav

 

<video>标签，插入视频，兼容到IE9

< video controls src=”视频地址”>请升级浏览器</<audio >

autoplay属性：自动播放

loop属性：循环播放

常用音频格式：mp4，ogv，webm，avi

 

拓展

<source>标签，可规定多个格式的音/视频文件，供浏览器选择适用的格式

<a href=”tel：12306”>打电话买火车票</a>

---

 HTML5区块标签

<section>文档的区域，语义比div大

<article>文档的核心内容，会被搜索引擎抓取

<aside>文档的非必要内容，比如广告等

<nav>导航条

<header>页头

<main>网页核心部分

<footer>页脚

---

语义化标签

<span>标签是文本中的“区块”标签，本身没有任何特殊显示效果，可以结合css来丰富样式

<b><u><i>标签表示加粗，下划线和倾斜效果，在网页中表示需要强调的文本

<strong><em><mark>标签均表示强调语义，默认样式是加粗、倾斜、高亮，后续可以通过css修改

<figure><figcaption><figure>元素代表一段独立的内容，与说明<figcaption>配合使用

---

表格标签——三级嵌套

<table> 表格

<tr> table row 表格行

<td> table data 表格数据

<table border="1" > 

        <caption>表格标题</caption>

        <tr>

            <td>A</td>

            <td>B</td>

            <td>C</td>

            <td>D</td>

        </tr>

    </table>

border属性：为了让表格能够显示边框，单位是像素

caption属性：表格的标题，常常作为<table>的第一个子元素出现

 

<th>标签是“标题小格”，可以替代<td>的作用，表示标题小格

 

单元格的合并

colspan属性用来设置td或者th的列跨度

rowspan属性用来设置td或者th的行跨度

可以同时有列跨度和行跨度

 

表格的其他特性

<thead>标签定义表头

<tbody>标签定义表核心内容

<tfoot>标签定义表脚，通常是汇总行

 

cellspacing属性（使用百分比或像素）定义了两个单元格之间空间的大小，已废弃，但实际开发中仍可使用

cellpadding属性定义了表格单元的内容和边框之间的空间，已废弃，但实际开发中仍可使用