标题段落换行
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<hr/> 表示换行,加划分线
<br/> 表示换行
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>nihao</h1>
<h2>nihao</h2>
<h3>nihao</h3>
<h4>nihao</h4>
<h5>nihao</h5>
<h6>nihao</h6>
<h7>nihao</h7>
<p>
zhfkhfksdjhffhsdfjksdfsdkfklsdklf
fsdkfhsdjfhsdklkfs
sfskfjsdflsd<br/>
fss
</p>
<!--
<br/><br/><br/>
-->
<br/><br/><br/>
<hr/>
<p>
kljsdkofgjhsdklfjsdklf
safsdihjfgsdkfgsd<br/>
safsdihjfgsdkfgsdfsdklsds
</p>
</body>
</html>列表标签
有序列表 ol
无序列表 ul
列表项 li
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>一花</li>
<li>二乃</li>
<li>三玖</li>
<li>四叶</li>
<li>五月</li>
</ol>
<ul>
<li>五等份的新娘</li>
<li>中二病也要谈恋爱</li>
<li>可塑性记忆</li>
<li>我独自升级</li>
<li>吞噬星空</li>
<li>剑来</li>
<li>仙逆</li>
</ul>
<ul>
<li>五等份的新娘
<ol>
<li>一花</li>
<li>二乃</li>
<li>三玖</li>
<li>四叶</li>
<li>五月</li>
</ol>
</li>
<li>中二病也要谈恋爱</li>
<li>可塑性记忆</li>
<li>我独自升级</li>
<li>吞噬星空</li>
<li>剑来</li>
<li>仙逆</li>
</ul>
</body>
</html>超链接标签
a
href用于定义要跳转的目标资源的地址
1.完整的url
2.相对路径 以当前资源的所在的路径为出发点去找目标资源
./表示当前资源的所在路径，可省略
../表示上一资源的所在路径，需要时必须写
3.绝对路径 无论资源在哪，使用固定的位置作为出发点去找目标资源
target用于定义目标资源的打开方式
_self当前页面打开
_blank开启新的窗口打开
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
a
href用于定义要跳转的目标资源的地址
1.完整的url http://www.atguigu.com/
2.相对路径 以当前资源的所在的路径为出发点去找目标资源
./表示当前资源的所在路径，可省略
../表示上一资源的所在路径，需要时必须写
3.绝对路径 无论资源在哪，使用固定的位置作为出发点去找目标资源
target用于定义目标资源的打开方式
_self当前页面打开
_blank开启新的窗口打开
-->
<a href = "http://www.atguigu.com/" target = "_blank"> 尚硅谷</a>
<!-- 相对路径 -->
<a href="a/b/test.html">测试超链接</a>
<!-- 绝对路径 -->
<a href="/demo1-html/a/b/test.html">测试超链接</a>
</body>
</html>图片
img
src 定义图片的路径
1 url
2 相对路径
3 绝对路径
title 定义鼠标悬浮时提示的文字
alt 定义图片加载失败时提示的文字
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
img
src 定义图片的路径
1 url
2 相对路径
3 绝对路径
title 定义鼠标悬浮时提示的文字
alt 定义图片加载失败时提示的文字
-->
<!-- 相对路径 -->
<img src="img/六花图片.png" width="300px" title="小鸟游六花" alt="六花图片"/>
<!-- 绝对路径 -->
<img src="/demo1-html/img/六花图片.png" width="500px" title="中二病也要谈恋爱" alt="六花图片"/>
</body>
</html>表格标签（重点）
table 整张表格
thread 表头
tbody 表体
tfoot 表尾
tr 表格中的一行
td 行中的一个单元格
th 自带加粗居中效果的td
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
table 整张表格
thread 表头
tbody 表体
tfoot 表尾
tr 表格中的一行
td 行中的一个单元格
th 自带加粗居中效果的td
-->
<h3 style="text-align: center;">好感度评判</h3>
<table border="1px" style="margin: 0px;width: 400px;">
<thread>
<tr>
<th>位次</th>
<th>人物</th>
<th>好感度</th>
<th>备注</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>六花</td>
<td>better</td>
<td rowspan="6">
我是六花王
</td>
</tr>
<tr>
<td>2</td>
<td>四叶</td>
<td>good</td>
</tr>
<tr>
<td>3</td>
<td>艾拉</td>
<td>not bad</td>
</tr>
<tr>
<td>人物数</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>最喜欢</td>
<td colspan="2">六花</td>
</tr>
<tr>
<td>其次</td>
<td colspan="2">四叶</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>表单标签（重点）
form 表单标签
action 定义数据的提交地址
1 url
2 相对路径
3 绝对路径
method 定义数据的提交方式
GET
1.参数以键值对的形式放在url的后面
url?key=vaule&key=vaule
2.数据直接暴露在地址栏上，相对不安全
3.地址栏的长度有限，所以数据量不大
4.地址栏上只能是字符，不能提交文件
5.相比与post效率高一些
POST
1.参数不默认放在url后
2.数据不直接暴露在地址栏上，相对安全
3.数据是单独打包通过请求，提交的数据比较大
4.请求体中，可以是字符，也可以是字节数据，可以提交文件
5.相比于get效率低一些
表单项标签
表单项标签一定要定义name属性，该属性用于提交时的参数名
还需要定义value属性，用于明确提交时的实参
input
type 输入信息的表单项类型
text 单行普通文本框
passwrod 密码框
submit 提交按钮
reset 重置按钮
radio 单选框 多个选项选一个
多个单选框使用相同的name属性值，则会有互斥的效果
checkbox 复选框 多个选项选多个
hidden 隐藏域 不显示在页面上，提交时会携带
textarea 文本域 多行文本框
select 下拉框
option 选项
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="08welcome.html" method="get">
<!-- 添加表单项标签 用户输入信息的标签 -->
<input type="hidden" name="id" value="123">
<input type="text" name="tid" value="345" readonly>
<input type="text" name="cid" value="567" disabled>
用户名：<input type="text" name="username">
<br/>
密码：<input type="password" name="passwrod">
<br/>
性别：
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2" checked>女
<input type = "radio" name = "gender" value="3">人机
<br/>
人物：
<input type="checkbox" name="1">六花
<input type="checkbox" name="2">一花
<input type="checkbox" name="3">二乃
<input type="checkbox" name="4">三玖
<input type="checkbox" name="5">四叶
<input type="checkbox" name="6">五月
<br/>
个人简介：
<textarea name="introdution" style="width: 200xp;height: 100xp;">123</textarea>
<br/>
所在国家
<select name="address">
<option value="chinese">中国</option>
<option value="US">美国</option>
<option value="JP">日本</option>
<option value="F">法国</option>
<option value="0" selected>-请选择-</option>
</select>
<br/>
选择头像：
<input type="file">
<br/>
<input type="submit" value="进入"/>
<input type="reset" value="清空"/>
</form>
</body>
</html>布局
css 设置样式的
通过元素的style属性进行设置
style = "样式名:样式;值样式名:样式值样式名:样式值...."
块元素：自己独占一行元素，块元素的css样式的宽 高等等 往往都是生效的
div h1-h6
行内元素：不会自己独占一行元素，块元素的css样式的宽 高等等 往往都不是生效的
span img
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color: blanchedalmond;">
<div style="border: 1px solid red;height: 200px;width: 400px;margin: 10px auto;background-color: aquamarine;">六花</div>
<div style="border: 1px solid red;height: 200px;width: 400px;margin: 10px auto;background-color: aquamarine;">六花</div>
<div style="border: 1px solid red;height: 200px;width: 400px;margin: 10px auto;background-color: aquamarine;">六花</div>
<div style="border: 1px solid red;height: 200px;width: 400px;margin: 10px auto;background-color: aquamarine;">
<div><span style="font-size: 30px;color: blanchedalmond;font-weight: bold;">六花</span> 一花 二乃 三玖 四叶 五月
</div>
<span style="border: 1px solid yellow;width: 100px;height: 300px;">五等份的新娘</span>
</body>
</html>特殊字符
对于html代码来说，某些符号是由特殊含义的，那么需要转义（需要时可以直接查询表格）
<h1>六花</h1>
<br/>
&gt;