1 简单耍一耍，body内常用的标签
代码块
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<a href="#b1">屠龙宝刀，点击就送</a> <!--内部锚点链接的定位和跳转-->
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六<br>级标题</h6> <!--<br>是换行-->
<hr> <!--水平线-->
<a href="https://www.luffycity.com" target="_blank">路飞学城</a>
<a href="https://www.luffycity.com" target="_blank">路飞学城</a>
<p>p1</p>
<p>p2</p>
<p>海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔！海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔</p>
<b id="b1">加粗</b> <!--内部锚点定位位置-->
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3803137380,2419499331&fm=26&gp=0.jpg" alt="新垣结衣">
<img src="lp.jpg" alt="新垣结衣" title="鼠标移上去">
<p>在苍茫的大海上，狂风卷积着乌云， 在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔</p>
<p>a>b</p>
<p>b<a</p>
<p>b>a</p>
<p>©</p>
<p>®</p>
<p>¥</p>
<hr>
<div>我是div标签</div>
<span>我是span标签</span>
我不是个标签
<hr>
<div>
<div>div中的div</div>
<p>div中的p标签</p>
<a href="">div中的a标签</a>
</div>
<a href="">
<div>a中的div标签</div>
</a>
<p>
<p>p中p</p>
</p>
<hr>
<p>
<div>p中的div</div>
</p>
</body>
</html>
2 body内部常用标签2，继续耍
代码块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<ul type="none">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<hr>
<ol type="A" start="30">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<hr>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
<hr>
<table border="1" cellpadding="10" cellspacing="10">
<thead> <!--表头-->
<tr>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>sylar</td>
<td>男</td>
<td rowspan="2">old woman</td>
</tr>
<tr>
<td>Gold</td>
<td>男</td>
</tr>
<tr>
<td>Eva_J</td>
<td>女</td>
<td>喝茶</td>
</tr>
<tr>
<td style="text-align: center" colspan="2">刘洋</td>
<td>耙耳朵</td>
</tr>
</tbody>
</table>
<span>span</span>
<table border="1">
<tr>
<td>sylar</td>
<td>男</td>
<td>old woman</td>
</tr>
<tr>
<td>Gold</td>
<td>男</td>
<td>假发</td>
</tr>
<tr>
<td>Eva_J</td>
<td>女</td>
<td>喝茶</td>
</tr>
<tr>
<td>刘洋</td>
<td>男</td>
<td>耙耳朵</td>
</tr>
</table>
</body>
</html>
4 创建一个表单，获取用户输入的内容
代码块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8080" method="post">
<label for="i1">用户名：</label>
<input type="text" id="i1" placeholder="请输入用户名" value="alexdsb">
<br>
<label>密码:
<input type="password">
</label>
<br>
<label>日期
<input type="date">
</label>>
<br>
<label>邮箱：
<input type="email">
</label>
<hr>
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football" checked="checked">足球
<label>
<input type="checkbox" name="hobby" value="doublecolorball">
双色球
</label>
<!--<p>是独立成行-->
<p><input type="checkbox">篮球</p>
<p><input type="checkbox" checked>足球</p>
<p><input type="checkbox">双色球</p>
<hr>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" checked name="gender">保密
<hr>
<select name="city">
<option value="010">北京市</option>
<option value="020">上海市</option>
<option value="000" selected>深圳市</option>
</select>
<select name="city" multiple>
<option value="010" selected>北京市</option>
<option value="020" selected>上海市</option>
<option value="000" selected>深圳市</option>
</select>
<hr>
<textarea name="info" cols="60" rows="20"></textarea>
<hr>
<input type="file" name="avatar">
<hr>
<input type="button" value="我是一个按钮">
<input type="reset" value="重置">
<input type="submit">
</form>
</body>
</html>
4 知识点总结
4-1 结构：给浏览器看的
代码块
title --> 标题
style --> CSS样式
link --> CSS文件
script --> JS
meta
<meta charset="UTF-8">
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
4-2 body的结构：给用户看的
块级标签：独占一行
代码块
h1-h6
p
div
hr
li
tr
行级标签：在一行显示(又叫内联标签)
代码块
a
span
img
b/i/u/s
4-3 标签的嵌套
代码块
1. 尽量不要用内联标签包块级标签
2. p标签不能嵌套p标签
3. p标签不能嵌套div标签
代码块
1. form标签
一个容器，包住所有获取用户输入的标签
- action属性
- method属性
- enctype属性
2. input标签
type
text
password
email
date
checkbox
radio
button --> 普通按钮 --> 通常用JS给它绑定事件
submit --> 提交按钮 --> 默认将form表单的数据提交
reset --> 重置按钮 --> 将当前form中的输入框都清空
3. select标签
4. textarea标签
5. form表单提交数据的注意事项
{“k1”: "v1"}
1. form标签必须把获取用户输入的标签包起来
2. form不是from， form标签必须有action属性和method
3. form中的获取用户输入的标签必须要有name属性
