HTML常用元素1. 文本类元素 2. 列表元素 3. 表格元素 4. 表单元素 5. 功能类元素

1. 文本类元素

Element	Description	Element	Description
p	段落	em	强调
strong	重点	i	图标 / 外文 / 分类
b	关键字 / 产品名称 / 引导句	u	专有名词
a	超链接	img	图片
abbr	缩写	code	代码
cite	引用	blockquote	块引用
address	地址	q	短引用

<p>：d:block，不能被<a>元素包裹
<a>: d:inline，不继承颜色，自带下划线
- target：_self, _blank
- download：指定下载文件的文件名
- href="mailto:link"
img：d:inline-block（底部会留白）默认图片大小
i：d-inline，自带斜体
site：引用出处
address：地址、姓名、联系方式、邮件地址

a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

img {
    width: 100%;
    vertical-align: middle;
}

i {
    font-style: normal;
}

2. 列表元素

ul	ol	li	dl	dt	dd
无序	有序	列表项	描述列表	列表项	描述

ul, ol {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
}

3. 表格元素

table	caption	tr	th	td
表格	表格标题	行	单元格（thead）	单元格（tbody）

<table>：d: table
- cellspacing: number：单元格边框间距
- border：number, width：Number%, height: Number%
<tr>：width：Number%, height: Number%
<th>：d: table-cell 自动水平垂直居中
<td>：d: table-cell 自动垂直居中（padding 填充）
- rolspan: number：占据几个单元格位置（x轴 & 横向）
- colspan: number：占据几个单元格位置（y轴 & 纵向）

table {
    table-layout: fixed; /* automatic(d) | fixed 自适应布局（单元格始终完全包裹文本）固定布局（文本可能溢出）*/
    border-collapse: collapse;  /* separate(d) | collapse 消除单元格间距, 等同于cellspacing="0"*/ 
    border-spacing: 10px 10px; /* 1value = xy; 2value = x, y; 单元格间距，需 collepase */
    empty-cells: hide; /* show(d) | hide 空单元格显示/隐藏 */
}

caption {
    caption-side: bottom; /* top(d) | bottom 表格名上 / 下显示 */
}

<table>
    <caption>table title</caption>
    <tr>
        <th>首行单元格</th>
        <th>首行单元格</th>
        <th>首行单元格</th>
    <tr>
    </tr>
        <td rowspan="2">普通单元格</td>
        <td>普通单元格</td>
    </tr>
</table>

4. 表单元素

form	input	select	option	button	textarea	label	fieldset	legend
表单	输入框	下拉列表	下拉项	按钮	文本域	输入锚点	子域	子域说明

<form>: target
- action: 表单提交的地址
- method: GET(d) | POST 提交方式
- enctype: application/x-www-form-urlencoded 发送前编码字符
- accept-charset: 提交的字符集
<input>：type

text password radio checkbox button submit reset date time

文本密码单选多选按钮提交重置日期时间
- checked：默认选择
- autofocus：自动聚焦
- disabled：禁用
- palceholder：提示文本
- required：必填
- readonly：只读
- list：备选列表
  - <datalist id="datalist"> <option>
<textarea>：
- rows, cols：行宽，列高
- maxlength：最大字符数
<button>：type: submit | reset | button
<label>：for="el.id"

text	password	radio	checkbox	button	submit	reset	date	time
文本	密码	单选	多选	按钮	提交	重置	日期	时间

input, select, button {
    outline: none;
}

textarea {
    resize: none; /* both(d) | horizontal | vertical | none 宽高，宽，高，无 */
}

<form action="/" method="POST">
    <label>用户名：
        <input type="text" name="username" placeholder="请输入用户名" required></label>
    </br>
    <label>密码：
        <input type="password" name="password" required></label>
    <div>性别：
        <input type="radio" name="sex" value="male" checked>男
        <input type="radio" name="sex" value="female">女
    </div>
    <div>爱好：
        <input type="checkbox" name="hobby" value="football" checked>足球
        <input type="checkbox" name="hobby" value="bike">单车
        <input type="checkbox" name="hobby" value="music">音乐
    </div>
    <div>
        <select name="education">
            <option value="1">初中</option>
            <option value="2">高中</option>
            <option value="3">大学</option>
        </select>
    </div>
    <textarea cols="10" rows="20"></textarea>
</form>

5. 功能类元素

script	link	meta	base	div	span
脚本	引用	源信息	链接根	块域	行域

<script>：async：异步执行脚本（外部）
<link>：rel: shortcut icon, type: image/png
<meta>：

<meta charset="UTF-8">
<meta name="keywords" content="页面关键字">
<meta name="decription" content="页面描述">
<meta name="author" content="作者">
<meta name="viewport" content="width=device-width, inital-scale=1.0, userscalable=no">
<!-- width=device-width：可视区域宽度为设备宽度 inital-scale=1.0: 初次缩放倍数为1 userscalable=no 禁止缩放-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 让IE浏览器以最新的渲染引擎渲染页面 -->