1. <a> 插入超链接
示例
| <a href="http://www.baidu.com" target="_blank">百度</a> |
属性
| 说明
|
href
| 可使用绝对路径或相对路径，亦可使用锚点（页面内跳转）
<a href="#1">jump to "here"</a>
<a name="1">here</a> |
target
| 指定新页面的打开方式，取值如下：
_blank，在新标签页中打开
_self，在当标签页中打开 |
2. 分组元素
① <p> 段落，中间空行
② <div> 无实际效果
③ <blockquote> 段落，前后都缩进 ，中间空行
④ <pre> 按照编辑器内的排版格式显示（不完全一致）
⑤ <hr> 水平分割线
⑥ <ul> 添加无序列表，用法：
<ul>
<li>第一项</li> //li的value属性可设置此项开始的编号
<li>第一项</li>
<li>第一项</li>
</ul>
⑦ <ol> 添加有序列表，start属性可指定起始编号，type可指定编号形式(a, A, i, I, 1)
⑧ <dl><dt><dd> 生成说明列表，用法：
<dl>
<dt>这是第一章</dt>
<dd>第一章第一节</dd>
<dd>第一章第二节</dd>
</dl>
⑨ <figure> 插图，用法：
<figure>
<figcaption>这是一张图片</figcaption>
<img src="img.png">
</figure>
3. <table> 表格元素，用法：
<table border="1" >
<caption>这里是标题</caption>
<colgroup>
<col> //占位
<col background="red;"> //第二列背景色设为红色
</colgroup>
<tfoot> //表尾-始终在最后一行显示
<tr>
<td colspan="3">共计：1人</td>
</tr>
</tfoot>
<tbody> //表体
<tr>
<td>张三</td>
<td>男</td>
<td>27</td>
</tr>
</tbody>
<thead> //表头-始终在第一行显示
<tr>
<th rowspan="3">基本情况</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<thead>
</table>
4. 文档元素，基本无显示效果，主要表示语义以方便CSS进行样式标记，示例：
<body>
<header>
这里放置LOGO，标题，导航等
<hgroup>
<h2>这是一个大标题</h2>
<h5>这是一个小标题</h5>
</hgroup>
<nav>这是一个导航</nav>
</header>
<section>
这是一个主题部分
</section>
<article>
<header>...</header>
<section>...</section>
<address>这里放置联系信息</address>
<footer>...</footer>
</article>
<aside>
这是一个注释栏
<nav>这是注释栏内的导航</nav>
</aside>
<footer>
<h5>这是尾部的小标题</h5>
<address>这里放置联系信息</address>
</footer>
5. 嵌入元素，将外部资源插入到HTML中：
① <img> 插入图片
示例
| <a href="index.html"><img src="img.png" alt="风景" width="30" height="20"></a> |
属性
| 说明
|
src
| 图像的url |
| width,height | 宽度，高度
|
ismap
| 获取点击位置的坐标，并在请求的地址后添加该坐标值
|
usemap
| 创建分区响应，点击不同区域转到不同超链接 <img src="img.pne" usemap="#Map"> <map name="Map"> <area shape="rect" coords="44,33,123,102" href="www.baidu.com" target="_blank" alt="百度">
</map>
|
② <iframe> 嵌入另一个文档
示例
| <a href="www.baidu.com" target="in">百度</a> <iframe src="www.soso.com" width="200" height="300" name="in"></iframe>
|
属性
| 说明
|
src
| 初始化时显示的页面 |
| width,height | 宽度，高度
|
name
| 被其他标签的target属性引用时，使用的名称
|
③ <embed> 嵌入插件内容
示例
| <embed src="视频.swf" type="application/x-shockwave-flash" width="600" height="800"></embed>
|
属性
| 说明
|
src
| 视频源 |
type
| 视频类型，自动识别后缀因而可省略
|
| width,height | 宽度，高度
|
④ <progress> 进度条，IE10及以上支持，一般通过JS控制进度动态效果
示例
| <progress value="30" max="100"></progress>
|
属性
| 说明
|
value
| 进度值
|
max
| 进度最大值 |
⑤ <meter> 类似于进度条，可设置警示范围，IE不支持
示例
| <meter value="90" min="10" max="100" low="30" high="80"></meter>
|
属性
| 说明
|
value
| 进度值 |
min
| 最小值，value小于等于该值不显示
|
max
| 最大值 |
low
| 下阙值，小于该值进度条变×××
|
high
| 上阙值，大于该值进度条变×××
|