# 标签语义化

# HTML常用标签

html文档：

<html></html>

文档头部：

<head></head>

文档主体:

<body></body>

标题：

<h1></h1><h2></h2>...<h6></h6>

段落：

<p></p>

水平线：

<hr>

换行：

<br>或</br> 
最好使用后者，html标签追求闭合

超链接：

<a href = "url" target = "_blank">css</a>

文档分区：

<div></div>块级元素

span标签：

<span></span>

表格：

<table border="1"></table>
定义表格,border属性为表格边框
<caption>表格题目</caption> 
<th>表格表头</th>
<tr>表格行</tr>
<th>表格单元</th>
<col>列属性</col>

表单：

<input>输入框
<select>下拉选项框
<textarea>多行文本输入框
<button>按钮
<datalist>预定义选项列表

input输入框:

text类型(文本输入)、radio类型（多选一按钮）、submit类型、password、number、email等

text类型：

<input type = "text" placeholder = "文本输入"/>

radio类型：

<span>男</span>
<input type ="radio" name="sex" value="男" checked>

<span>女</span>
<input type = "radio" name = "sex" value = "女">

submit类型

<input type = "submit" value="提交">

password类型

<input type = "password" placeholder = "输入密码"/>

下拉选项框

<select name="fruits">
<option value="apple">apple</option>
<option value="pear">pear</option>
<option value="bnana">bnana</option>
</select>

多文本输入

<textarea name="message" rows="3" cols="5">
hello
</textarea>

button按钮

<button type="button" onclick="alert('你好')">点我</button>

# 代码实例

<table border="2">
    <caption>横跨两列的单元格</caption>
        <tr>
            <th>姓名</th>
            <th colspan="2">电话</th>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>111111111</td>
            <td>222222222</td>
        </tr>
    </table>
    <br/>
    <table border="1">
    <caption>横跨两行的单元格</caption>
        <tr>
            <th>姓名</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">电话</th>
              <td>6666666</td>
        </tr>
        <tr>
            <td>8888888</td>
        </tr>
    </table>

# 有序列表

<ol>有序列表定义
     <li>列表项目1</li>
     <li>项目列表2</li>
</ol>

# 无序列表

<ul>
   <li>无序列表1</li>
   <li>无序列表2</li>
</ul>

# 自定义列表

<dl>
   <dd>
        <dt>定义列表1</dt>
        <dt>定义列表2</dt>
   </dd>
</dl>