html5标准网页声明
<!DOCTYPE html>
必要结构
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
渲染效果：
body部分：
<h1>标题标签</h1>
渲染效果
标题标签
<p>段落标签</p>
渲染效果：
段落标签
<strong>加粗</strong>
渲染效果
加粗
<em>斜体</em>
渲染效果
斜体
<p>
添加在结尾，换行标签，单闭合<br/>
表示一个空格<br>
</p>
渲染效果：
添加在结尾，换行标签，单闭合
表示一个空格
<hr>水平分割线
<h2>无序列表</h2>
<!--unordered list -->
<ul>
<li>当代女大学生人美心善！</li>
<li>当代女大学生双商爆表！</li>
</ul>
渲染效果:
无序列表
- 当代女大学生人美心善！
- 当代女大学生双商爆表！
<h2>有序列表之web前端课程排行</h2>
<!--ordered list -->
<ol>
<li>vue框架学习</li>
<li>Javascript高级编程</li>
<li>react全家桶</li>
</ol>
<hr>
渲染效果：
有序列表之web前端课程排行
- vue框架学习
- Javascript高级编程
- react全家桶
<h2>定义列表</h2>
<!--definition list-->
<dl>
<dt>
帮助中心
</dt><!--definition title-->
<dd>购物指南</dd><!--definition description-->
<dd>订单操作</dd>
<dd>账户管理</dd>
</dl>
<hr>
渲染效果：
<h2>制作表格</h2>
<table border="1" cellspacing="0">
<caption>商品清单</caption>
<tr>
<th>产品名称</th>
<th>品牌</th>
<th>数量</th>
<th>入库时间</th>
</tr>
<td>电视机</td>
<td>小米</td>
<td>200</td>
<td>2018</td>
<tr>
<td>电冰箱</td>
<td>海尔</td>
<td>200</td>
<td>2019</td>
</tr>
<tr>
<td>电风扇</td>
<td>小米</td>
<td>2000</td>
<td>2015-09</td>
</tr>
<tr>
<td>电视机</td>
<td>奇异果</td>
<td>200</td>
<td>2018</td>
</tr>
</table>
<hr>
渲染效果：
制作表格
| 产品名称 | 品牌 | 数量 | 入库时间 |
|---|---|---|---|
| 电视机 | 小米 | 200 | 2018 |
| 电冰箱 | 海尔 | 200 | 2019 |
| 电风扇 | 小米 | 2000 | 2015-09 |
| 电视机 | 奇异果 | 200 | 2018 |
<h2>表格横向使用和纵向合并</h2>
<table border="1" cellspacing="0">
<caption>商品清单</caption>
<tr>
<th>产品名称</th>
<th>品牌</th>
<!--横向合并,合并的列数-->
<th colspan="2">数量和入库时间</th>
</tr>
<td>电视机</td>
<td rowspan="3">小米</td>
<!--纵向合并，合并的行数-->
<td>200</td>
<td>2018</td>
<tr>
<td>电冰箱</td>
<td>200</td>
<td>2019</td>
</tr>
<tr>
<td>电风扇</td>
<td>2000</td>
<td>2015-09</td>
</tr>
<tr>
<td>电视机</td>
<td>奇异果</td>
<td>200</td>
<td>2018</td>
</tr>
</table>
<hr>
渲染效果：
表格横向使用和纵向合并
| 产品名称 | 品牌 | 数量和入库时间 | |
|---|---|---|---|
| 电视机 | 小米 | 200 | 2018 |
| 电冰箱 | 200 | 2019 | |
| 电风扇 | 2000 | 2015-09 | |
| 电视机 | 奇异果 | 200 | 2018 |
<h2>a标签</h2>
<a href="http://www.baidu.com" title="点击一下，了解更多">百度一下</a><br>
<a href="http://www.baidu.com" target="_blank">用新的标签页打开百
渲染效果：
a标签
百度一下用新的标签页打开百度
<h2>img标签</h2>
<img src="https://t8.baidu.com/it/u=1484500186
,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?
sec=1594699637&t=ae0a8e42ac2
1d1a2e8940c7932176230" width="350" height="200"
alt="母子" title="可可爱爱">
<hr>
渲染效果：（图片加载不出来，主要看alt和tittle属性的效果）
img标签
<!--表单控件-->
<h2>form标签</h2>
<form action="http://www.baidu.com" method="post">
<p>
<input type="text" placeholder="请输入用户名">
</p>
<p>
<input type="password" placeholder="请输入密码">
</p>
<p>
<input type="submit" value="立即注册">
</p>
</form>
渲染效果：
<!--表单控件-->
<h2>form标签</h2>
<form action="http://www.baidu.com" method="post">
<em>单选框的实现</em><br>
male:<input type="radio" name="sex" >
female:<input type="radio" name="sex" checked="checked">
<!--给类型加同样的属性值，就能达到互斥效果 checked是选中的意思-->
</p>
渲染效果：
<form action="http://www.baidu.com" method="post">
<em>复选框</em>
<br>
<h5><strong>你喜欢的课程：</strong></h5>
web前端<input type="checkbox">
django<input type="checkbox">
algorithm<input type="checkbox">
</p>
<hr>
</form>
渲染效果：
form action="http://www.baidu.com" method="post">
<p>
<strong>下拉列表实现单选</strong>
<br>
<select name="class">
<option>html5</option>
<option>css</option>
<option selected="selected">javascript</option>
<option>vue</option>
</select>
</p>
</form>
渲染效果
form action="http://www.baidu.com" method="post">
<p>
<strong>下拉框实现多选</strong>
<br>
<select multiple="multiple" name="核心价值观">
<option>爱国</option>
<option>敬业</option>
<option 诚信="selected">javascript</option>
<option>友善</option>
</select>
</p>
</form>
渲染效果：
form action="http://www.baidu.com" method="post">
<strong>文本预输入框，多行输入,内容重置</strong>
<br>
<h4>个人简介</h4>
<p>
<textarea cols="50" rows="10"></textarea>
<input type="submit" value="保存">
<input type="reset" value="重置">
</p>
</form>
渲染效果
form action="http://www.baidu.com" method="post">
<h4>lable标签</h4>
<label for="birthday">你的生日:</label>
<input type="text" id="birthday">
</form>
渲染效果：
<h2>div标签类似于一个容器，可以对各种内容进行包裹</h2>
<div>
<p>div</p>
</div>
渲染效果：
div标签类似于一个容器，可以对各种内容进行包裹
div