列表

无序

Emmet 语法

ul>li{无序列表项目}*2

<ul>
    <li>无序列表项目</li>
    <li>无序列表项目</li>
</ul>

有序

Emmet 语法

ul>li{有序列表项目}*2

<ol>
    <li>有序列表项目</li>
    <li>有序列表项目</li>
</ol>

自定义

Emmet 语法!

dl>dt{标题}+dd{内容}*2

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
</dl>

表格

Emmet 语法

table

注意

建议使用tbody、tfoot结构化标签

<table>
<caption>标题</caption>
    <thead>
        <th>行标题1</th>
        <th>行标题2</th>
    </thead>
<tbody>
    <tr>
        <td>项目1</td>
        <td>项目2</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td></td>
        <td></td>
    </tr>
</tfoot>
</table>

colspan：跨列合并
rowspan：跨行合并

表单

Emmet 语法

form

重要

表单练习

<form action="">
</form>

input

Type	说明	属性	Emment语法	图片
text	文本框	placeholder、width、height	input:t
password	密码	name、placeholder	input:p
radio	单选框	name、checked	input:r
checkbox	多选框	name、checked	input:c
file	文件选择	value	input:f
submit	提交	value	input:s
reset	重置	value
button	普通	value	input:b

注意

通常不会使用button属性

• placeholder 提示文字
• checked 默认状态
• value 可修改按钮名称

button

Type	说明	属性
submit	提交	value
reset	重置	value

select

Emmet 语法

select>option*2

<select>
    <option>red</option>
    <option selected>blue</option>
</select>

textarea

Emmet 语法

textarea

<textarea></textarea>

cols：可见宽度
rows：可见行数

label

性别<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<label><input type="radio" name="sex"> 女</label>

blockquote

内容

无语义标签

• div
• span

有语义标签

<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>

字符实体

 <!-- 网页不认识多个空格, 只认识一个 -->
这是HTML文档, 现在要学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;习字符实体.