标签通用

自闭合标签可以不关闭，XML中标签必须关闭，标签的关闭有两种方式：

1
2
3
<html> (内容) </html>
<!-- 或 -->
<br/>

本文采用HTML5写法。

在标签中应用属性的方法:

1
<div 属性A="值A" 属性B="值B"> </div>

class 用于指定元素所属类；
id 指定元素唯一id；
style 设置行内样式。

style 的用法(CSS)：

1
<div style="属性A:值A;属性B:值B;属性C:值C">

HTML文档

HTML5声明（不是标签）：

1
<!DOCTYPE html>

定义HTML文档：

1
<html> </html>

HTML文档头及其内容：

1
2
3
4
5
6
<head> </head> <!-- 定义HTML文档头 -->
<title> </title> <!-- 网站标题 -->
<base> <!-- 设置默认 -->
<link> <!-- 链接外部资源 -->
<meta> <!-- 网站元数据 -->
<style> </style> <!-- 定义内部样式 -->

<base> 标签中，target 指定链接打开方式，href 指定基准URL；
<link> 标签中，rel 指定文档和被链接资源的关系，href 用于指定资源路径；
<meta> 标签中，charset 指定字符集，name 和 content 描述该文档；
<style> 标签使用CSS语法。
定义文档主体：

1
<body> </body>

内容标签

标题：

1
2
<h1> </h1>
<!-- h1~h6 -->

段落：

1
<p> </p>

链接：

1
<a> </a>

<a> 标签中，href 指定链接URL；target 指定链接打开方式；id 用于创建定点跳转(不限于a标签)，具体用法：

1
2
<a id="point1"></a> <!-- 将跳转到这 -->
<a href="#point1">点我跳转</a> <!-- 跳转入口,可以从页外跳转 -->

图像：

1
<img>

<img> 标签中，src 指定图像来源，alt 给图像一个无法显示时的替代文本，用width和height指定宽高。

换行：

1
<br>

水平线：

1
<hr>

文字装饰：

1
2
3
4
5
6
7
8
<b> </b> <!-- 粗体 -->
<i> </i> <!-- 斜体 -->
<sup> </sup> <!-- 上角标 -->
<sub> </sub> <!-- 下角标 -->
<del> </del> <!-- 删除字 -->
<ins> </ins> <!-- 插入字 -->
<code> </code> <!-- 代码 -->
<abbr> </abbr> <!-- 缩写 -->

<abbr> 标签中，title 是缩写的全称。

表格：

1
2
3
4
<table> </table> <!-- 创建表格 -->
<th> </th> <!-- table header 表头 -->
<tr> </tr> <!-- table row 表格行 -->
<td> </td> <!-- table data 格内元素 -->

表格应该如下格式(包裹顺序 table > tr > th/td)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>元素1</td>
        <td>元素2</td>
    </tr>
    <tr>
        <td>元素3</td>
        <td>元素4</td>
    </tr>
</table>

列表：

1
2
3
4
5
6
<ul> </ul> <!-- unordered list 无序列表 -->
<ol> </ol> <!-- ordered list 有序列表 -->
<li> </li> <!-- list item 列表元素 -->
<dl> </dl> <!-- definition list 定义列表 -->
<dt> </dt> <!-- definition term 定义术语 -->
<dd> </dd> <!-- definition description 定义描述 -->

列表应该如下格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 有无序列表格式相同，以无序为例 -->
<ul>
    <li>列表元素1</li>
    <li>列表元素2</li>
    <li>列表元素3</li>
</ul>
<!-- 定义列表用于解释一系列术语 -->
<dl>
    <dt>术语A</dt>
    <dd>我是术语A的描述</dd>
    <dd>我也是术语A的描述</dd>
    <dt>术语B</dt>
    <dt>术语C</dt>
    <dd>我是术语B和C共同的描述</dd>
</dt>

容器：

1
2
<div> </div> <!-- 块级容器（换行排版） -->
<span> </span> <!-- 行内容器（不换行排版） -->

Javascript引入：

1
2
<script> </script>
<noscript> </noscript> <!-- 禁用或不支持JS时显示 -->

表单：

1
2
3
4
5
<form> </form> <!-- 创建表单 -->
<input> <!-- 用户输入 -->
<select> </select> <!-- 创建下拉列表 -->
<option> </option> <!-- 下拉列表元素 -->
<textarea> </textarea> <!-- 文本域 -->

<form> 标签中，action 指定表单提交地址，method 指定提交表单的方法，target 指定提交表单后打开响应的方式；
<input> 标签中，name 设置表单元素键，type 指定用户需要输入信息的类型，value 给输入赋初始值，readonly 设置该项输入为只读，maxlength 设定输入最大长度，placeholder 设置输入提示。
表单应该如下格式：

1
2
3
4
5
6
7
8
<form>
    <input>
    <select>
        <option> 选项A </option>
        <option> 选项B </option>
    </select>
    <textarea> 预设文本... <textarea>
</form>