一、标题<H1-6>,段落<p>,块<div>,分割线<hr>,换行<br>
示例:
<h1>一级标题</h1>
<!-- 分割线 -->
<hr>
<h2>二级标题</h2>
<!-- 分割线 -->
<hr>
<h3>三级标题</h3>
<!-- 分割线 -->
<hr>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 分割线 -->
<hr>
<div>块级元素,单独一块
<p>段落段落段落段落段落段落段落段落段落段落段落段落
<!-- 换行 -->
<br>
段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
</div>
二、字体相关标签
<div>
<h1>字体相关标签</h1>
<p>
<span>普通文本</span>
<b>粗体</b>
<strong>粗体</strong>
<i>斜体</i>
<u>下划线</u>
<del>删除线</del>
<sup>2上标</sup>
<sub>3下标</sub>
H<sub>2</sub>CO<sub>3</sub> = 2H<sup>+</sup> + CO<sub>3</sub><sup>2-</sup>
</p>
</div>
三、列表
<div>
<h1>无序列表</h1>
<!-- ul>li*3>{有序列表$} -->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
</div>
<div>
<h1>有序列表</h1>
<!-- ol>li*3>{有序列表$} -->
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
</div>
<div>
<h1>自定义列表</h1>
<dl>
<dt>项目1</dt>
<dd>自定义列表项1</dd>
<dt>项目2</dt>
<dd>自定义列表项2</dd>
<dt>项目3</dt>
<dd>自定义列表项3</dd>
</dl>
</div>
<!-- (div>(h1>{段落})+(p*3>{段落$})+div>{结尾})+div>(h1>{隔离})+span*5>{span$} -->
<div>
<h1>段落</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<div>结尾</div>
</div>
<div>
<h1>隔离</h1>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
<span>span5</span>
</div>
四、单元格
<table border="10" cellspacing="10" cellpadding="10" align="center" width="80%">
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
<th>表头单元格3</th>
</tr>
<tr>
<td colspan="2">普通单元格11</td>
<td>普通单元格2</td>
</tr>
<tr>
<td>普通单元格1</td>
<td colspan="2" rowspan="2">
<table border="" width="100%">
<tr>
<td>列1</td>
<td>列2</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>普通单元格1</td>
</tr>
</table>
五、插入音频,视频,图片,超链接
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<span id="t666">666</span>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<span id="t888">888</span>
<hr>
<hr>
<hr>
<hr>
<hr>
<div>
<h1>声音</h1>
<audio src="./audio/bg1.mp3" controls></audio>
<audio src="./audio/bg1.mp3" controls></audio>
<audio src="./audio/bg1.mp3" controls></audio>
</div>
<div>
<h1>视频</h1>
<video src="./video/video.mp4" controls width="300"></video>
<video src="./video/video.mp4" controls width="300"></video>
<video src="./video/video.mp4" controls width="300"></video>
</div>
<div>
<h1>图片</h1>
<img src="./img/1.jpeg" alt="" width="300">
<img src="./img/1111.jpeg" alt="图片飞走了" width="300">
<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/cbb49ae06c674b3aa70ba9b2026136d4.jpeg?x-bce-process=image/crop,x_0,y_0,w_1873,h_1031" alt="" width="300">
</div>
<div>
<h1>超级连接</h1>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.google.com">Google</a>
<a href="./2.第一批标签.html">打开第一批标签</a>
<a href="./3.第二批标签.html" target="_blank">打开第二批标签</a>
<a href="#t666">充当锚点666</a>
<a href="#t888">充当锚点888</a>
</div>
六、框架标签
<div>
<h1>框架标签</h1>
<p>可以嵌套其他页面</p>
<iframe src="./1.helloworld.html" frameborder="0" width="33%" height="400"></iframe>
<iframe src="./2.第一批标签.html" frameborder="0" width="33%" height="400"></iframe>
<iframe src="./3.第二批标签.html" frameborder="0" width="33%" height="400"></iframe>
<iframe src="https://csdn.net" frameborder="0" width="100%" height="500"></iframe>
</div>
七、表单标签用于提交信息到服务器
<form action="http://httpbin.org/post" method="post">
<div>
<label for="un">用户名</label> <input required placeholder="请输入名字" name="username" id="un" type="text">
</div>
<div>
<label for="pwd">密码</label> <input name="password" id="pwd" type="password">
</div>
<div>
<span>性别</span>
<label for="man">男</label> <input name="sex" value="man" checked id="man" type="radio">
<label for="woman">女</label> <input name="sex" value="women" id="woman" type="radio">
</div>
<div>
<span>爱好</span>
<label for="footbal">足球</label> <input name="hobby" value="footbal" checked id="footbal" type="checkbox">
<label for="basketball">篮球</label> <input name="hobby" value="basketball" checked id="basketball" type="checkbox">
<label for="newball">信球</label> <input name="hobby" value="newball" id="newball" type="checkbox">
</div>
<div>
<span>年纪</span> <input name="age" type="range" min="0" max="100" step="1">
</div>
<div>
<span>喜爱颜色</span> <input name="color" type="color">
</div>
<div>
<label for="more">附件</label> <input name="file" id="more" type="file">
</div>
<div>
<span>居住地址</span>
<select name="address">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</div>
<div>
<span>学习语言</span>
<select name="lang" multiple>
<option value="python" >Python</option>
<option value="c++" selected>C++</option>
<option value="java" selected>Java</option>
</select>
</div>
<div>
<span>交友宣言</span>
<textarea name="info" cols="100" rows="5"></textarea>
</div>
<div>
<!-- <input type="submit" value="注册"> -->
<input type="reset" value="清空">
<button type="submit">注册</button>
</div>
</form>