H5-常用标签

特殊标记符号

特殊符号	描述	字符代码
	空格符	 
<	小于号	&lt;
>	大于号	&gt;
&	和号	&amp;
¥	人民币	&yen;
©	版权	&copy;
®	注册商标	&reg;
°	摄氏度	&deg;
±	正负号	&plusmn;
×	乘号	&times;
÷	除号	&divide;
²	平方2（上标2）	&sup2;
³	立方3（上标3）	&sup3;

常用标签

hr 横杠标记

横杠

---

了

br 换行标记

换行
了

del

<del>这是 del 标签，中划线</del>

这是 del 标签，中划线

em

<em>这是 em 标签，斜体</em>

这是 em 标签，斜体

ins

<ins>这是 ins 标签，下划线</ins>

这是 ins 标签，下划线

strong

<strong>这是 strong 标签，粗体</strong>

这是 strong 标签，粗体

img

<img src="图片地址" alt="图片描述" title="图片移动上去显示的文字">

a

超链接标签属性：
href：链接地址，也可以定义为“#定义过的 id”来达到锚点的功能
target：默认“_self” 本页面打开，“_blank” 新页面打开

<a href="http://www.baidu.com/" target="_self">这是个超链接 a 标签</a>

这是个超链接 a 标签

ul

无须列表 ul 有属性 type，用于控制显示状态，起取值有3个：
默认实心圆：disc
方块：square
空心圆：circle

<!-- 列表，无须列表 ul -->
<ul type="circle">
    <li>无须列表1</li>
    <li>无须列表2</li>
    <li>无须列表3</li>
</ul>

• 无须列表1
• 无须列表2
• 无须列表3

ol 有序列表

属性：
- type：项目符号类型
- 1:数字表示
- a:小写字母表示
- A:大写字母表示
- i:小写罗马数字表示：i,ii,iii…
- I:大写罗马数字表示：I,II,III…
- start：起始编号 例如 2

<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

2. 有序列表1
3. 有序列表2
4. 有序列表3

dl 自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

<dl>
    <dt>自定义列表1</dt>
    <dd>自定义列表1的解释1</dd>
    <dd>自定义列表1的解释2</dd>
    <dt>自定义列表2</dt>
    <dd>自定义列表2的解释1</dd>
    <dd>自定义列表2的解释2</dd>
</dl>

自定义列表1

自定义列表1的解释1

自定义列表1的解释2

自定义列表2

自定义列表2的解释1

自定义列表2的解释2

meta 标签

属性有两种：
- name 主要用于描述网页，对应与 content（网页内容）
- <meta name="Generator" contect=""> 用以说明生成工具（如Microsoft FrontPage 4.0）等；
- <meta name="KEYWords" contect=""> 向搜索引擎说明你的网页的关键词
- <meta name="DEscription" contect=""> 告诉搜索引擎你的站点的主要内容
- <meta name="Author" contect="你的姓名"> 告诉搜索引擎你的站点的制作的作者
- <meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">
- 设定为all：文件将被检索，且页面上的链接可以被查询；
- 设定为none：文件将不被检索，且页面上的链接不可以被查询；
- 设定为index：文件将被检索
- 设定为follow：页面上的链接可以被查询；
- 设定为noindex：文件将不被检索，但页面上的链接可以被查询；
- 设定为nofollow：文件将不被检索，页面上的链接可以被查询。

• http-equiv
  
  • <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
  • <meta http-equiv="Content-Type" contect="text/html"; charset=gb_2312">
    
    • gb2312 简单中文
    • GBK包含全部中文字符 繁体
    • BIG5 繁体中文
    • UTF-8则包含全世界所有国家需要用到的字符

table 表格标签

属性名	释义	常用属性值
border	边框宽度	px、默认0无边框
cellspacing	设置单元格之间的距离	px、默认2px
cellpadding	文字与单元格之间的距离	px、默认1px
width	表格宽度	px
height	表格高度	px
aligh	表格对齐方式	left、right、center
bgcolor	设置背景颜色	white、red、green

<table border="0px" >
    <!-- 行标签 tr -->
    <tr>
        <!-- 每一行的每一个表格 td -->
        <td>这是 td 标签1</td>
        <td>这是 td 标签2</td>
    </tr>
    <tr>
        <td>这是 td 标签1</td>
        <td>这是 td 标签2</td>
    </tr>
</table>

这是 td 标签1	这是 td 标签2
这是 td 标签1	这是 td 标签2

caption 标签

caption 标签，标题标签，必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上

th 标签

表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标记替代相应的单元格标记即可。

<table>
    <tr>
        <th>th1</th>
        <th>th2</th>
        <th>th3</th>
    </tr>
    <tr>
        <th>th4</th>
        <td>td1</td>
        <td>td2</td>
    </tr>
</table>

th1	th2	th3
th4	td1	td2

表格的结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚，一般，将表头放到头部标签，数据体放到主体中，底部的其他信息放到页脚部分，起使用只是将数据为包括一层特定下面的标签；具体 如下所示：
- <thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的logo和导航等头部信息。
- <tfoot></ tfoot >：用于定义表格的页脚，位于<table></table>标记中<thead></thead>标记之后，一般包含网页底部的企业信息等。
- <tbody></tbody>：用于定义表格的主体，位于<table></table>标记中<tfoot></tfoot>标记之后，一般包含网页中除头部和底部之外的其他内容。

<table>
    <thead>
    <!-- 比如下面将第一行包括到 thead 标签中 -->
        <tr>
            <th>th1</th>
            <th>th2</th>
            <th>th3</th>
        </tr>
    </thead>
    <tr>
        <th>th4</th>
        <td>td1</td>
        <td>td2</td>
    </tr>
</table>

th1	th2	th3
th4	td1	td2

form 表单标签

表单的作用：主要负责数据采集功能。
- 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
- 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
- 表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器
语法：
<form name="form_name" action="url" method="get|post">…</form>


名字	定义
name	表单名称
method	数据传输方式
action	地址，处理表单的程序地址
fieldset	表单分组
legend	分组名称

input 控件

属性	属性值	描述
type	text	单行文本输入框
	password	密码文本输入框
	radio	单选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像样式的提交按钮
	hidden	隐藏域
	file	文件域
name	用户自定义	控件名称
value	用户自定义	input 控件中的默认值
size	正整数	input 控件在页面中显示的大小
readonly	readonly	内容只读
disable	disable	第一次加载页面时禁用该控件（显示为灰色）

textarea

如果需要输入大量的信息，就需要用到<textarea></textarea>标记。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数" style=“scrollbar:overflow”>
       文本内容
</textarea>

select

下拉菜单
`html
<!-- 页面可见的大小、是否支持多选 -->
<select size="4" multiple="multiple">
<optgroup label="1">
<option>1-1</option>
<option>1-2</option>
<option>1-3</option>
</optgroup>
<optgroup label="2">
<option>2-1</option>
<option>2-2</option>
<option>2-3</option>
</optgroup>
<option>1</option>
<option>2</option>
<!-- 是否选中 -->
<option selected="selected">3</option>
<option>4</option>
</select>