1. ！+ Tab
这个操作可以直接生成一个 html 模板。
<!DOCTYPE html>
<html lang="en"> 表示当前网页使用的语言 english
<head>
<meta charset="UTF-8"> 表示当前网页的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> 表示当前网页的 title
head里面方的内容主要是页面的一些属性
</head>
<body>
这里写需要展示的内容
</body>
</html>
2.html注释
<!-- 注释内容 -->
<!-- 注释不能嵌套 -->
3.6级标题
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<!-- 注意这种标签 没有 <br> 也能独占一行 -->
<!-- 能独占一行的叫 ： 块级元素 -->
<!-- 不能独占一行的叫 ： 行内元素 -->
4.段落
<p> 段落内容 </p>
<!-- 同样没有 <br> 也能独占一行 -->
<!-- 使用 lorem + tab 快捷键 就可以生成一串随机的字符 -->
<!-- 首行缩进需要配和 CSS 使用，才能完成 -->
<style>
p{
text-indent: 2em;
}
</style>
5.换行
<br>
6.转义字符
| 字符 | 转义字符 |
|---|---|
| " | "； |
| & | &； |
| 小于号(<) | <； |
| 大于号(>) | >； |
| 空格( ) |  ； |
注意：上表中的 ; 为英文标点。
7.格式化标签
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
<!-- 不能独占一行（行内元素） -->
8.img标签
<!-- 绝对地址 -->
<img src="C:\Users\19833\Desktop\图片\12.jpg" alt="这里有一张图片">
<!-- 图片不能成功加载就会显示 alt信息 -->
<!-- 相对路径 -->
<img src="12.jpg" alt="Java图标" title="Java开发" >
<!-- 当前文件夹下 -->
<img src="./12.jpg" alt="" width="800px" height="500px">
<!-- 网络路径 -->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
在标签里面可以添加一些属性，比如 img 里面可以添加：
src:图片路径
alt:图片显示失败后需要显示的信息
title:鼠标指向图片时，显示的信息
width:图片的宽度，单位 像素 （width 和 height 随便设置一个，另一个就会等比例缩放）
height:图片的高度，单位 像素
注意：属性的表示是 键值对 的方式，key不用引号引起来，value需要使用引号引起来。
9.超链接
直接写网址
<a href="https://www.baidu.com/">百度超链接</a>
访问当前工程目录
<a href="TestDemo1.html">TestDemo1</a>
占位符，表示空链接
<a href="#">空链接</a>
如果href是一个普通文件，就表示是下载链接
<a href="test.zip">这是一个下载链接</a>
<!-- 点击图片跳转 -->
<a href="https://www.baidu.com/">
<img src="12.jpg" alt="">
</a>
锚点链接
<a href="#tab">锚点链接</a>
<p>1</p>
<p>2</p>
<p>3</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>1</p>
<p>2</p>
<p>3</p>
<h1 id="tab">锚点跳转到了这里</h1> 点击锚点链接后直接跳转到这里
区分一组词：
连接：connection，表示客户端和服务器的一种就绪状态
链接：link，一个快捷方式
10.表格标签
<style>
td{
这里通过 CSS 来更改每一个数据位置为居中
text-align:center;
}
</style>
table标签里可以添加一些属性
border：边框的粗细
width：表格的宽度
height：表格的高度
cellspacing：边框之间的间距
<table border="2px" width="500px" cellspacing="0px">
tr表示每一行的内容
<tr>
th表示是表头，它会自定 加粗并居中
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
td表示每一列的内容
<td>张三</td>
<td>111</td>
</tr>
<tr>
<td>李四</td>
<td>125</td>
</tr>
</table>
11.列表标签
<h1>无序列表</h1>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<h1>有序列表</h1>
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<h1>自定义列表</h1>
<dl>
<dt>路人甲集合</dt>
<dd>张三</dd>
<dd>李四</dd>
<dd>王五</dd>
</dl>
12.表单标签
<form>
单行文本框
<input type="text"><br>
单行密码输入文本框
<input type="password"><br>
单选框，搭配 label 标签可以实现点击文字选中效果
搭配 label 标签需要使用 id 属性
想要实现互斥效果，需要添加 name 属性
想要默认选中，需要添加 checked 属性
<input type="radio" name="sex" id="male">
<label for="male">男</label>
<input type="radio" name="sex" id="fomale" checked="checked">
<label for="fomale">女</label><br>
复选框，也可以搭配 label 标签实现点击文字选中效果
<input type="checkbox" id="eat"><label for="eat">吃饭</label>
<input type="checkbox" id="sleep"><label for="sleep">睡觉</label>
<input type="checkbox" checked="checked" id="game"><label for="game">打游戏</label>
<input type="checkbox" id="learn"><label for="learn">学习</label>
<!-- 按钮的第一种写法 -->
<!-- 这里的onclick是一种js的代码，onclick表示点击按钮触发引号的内容，alert表示弹出一个对话框 -->
<input type="button" value="按钮" onclick="alert('hello word')">
<!-- 按钮的第二种写法 -->
<button onclick="alert('hello')">也是一个按钮</button>
<!-- 上传文件选项框 -->
<input type="file"><br>
<!-- 下拉菜单，可以使用 selected属性 来选择默认选项 -->
<select>
<option>请选择科目</option>
<option >语文</option>
<option >数学</option>
<option selected="selected">英语</option>
</select><br>
<!-- 多行编辑文本框，cols 和 rows 表示默认显示的尺寸 -->
<textarea cols="30" rows="10"></textarea>
</form>
13.无语义标签
div：它会独占一行（块级元素）
span：不会独占一行（行内元素）
无语义标签可以替换绝大部分有语义标签，但是 form 这一系列不行。
行
<div>
列
<span>张三</span>
<span>李四</span>
<span>王五</span>
</div>
<div>
<span>王五</span>
<span>李四</span>
<span>张三</span>
</div>
<div>
<span>李四</span>
<span>王五</span>
<span>张三</span>
</div>
14.案例一：个人简历
<body>
<h1>张三的简历</h1>
<h2>基本信息</h2>
<img src="./3.jpg" alt="个人照片" width="300px">
<p>
求职意向：java 开发工程师
</p>
<p>
联系电话：12345685246
</p>
<p>
邮箱：1983314528@qq.com
</p>
<p>
<a href="https://www.github.com">我的 github</a>
</p>
<p>
<a href="https://www.csdn.com">我的 博客</a>
</p>
<h2>教育背景</h2>
<ol>
<li>1990 - 1993 小葵花幼儿园</li>
<li>1994 - 2000 小葵花小学</li>
<li>2001 - 2004 小葵花初中</li>
<li>2005 - 2008 小葵花高中</li>
<li>2008 - 2012 小葵花大学</li>
</ol>
<h2>专业技能</h2>
<ul>
<li>熟悉并掌握java基础语法,理解面向对象编程的思想。</li>
<li>熟悉并掌握基本数据结构,如：链表、二叉树、哈希表、优先级队列。</li>
<li>熟悉网络原理与网络编程相关的知识，如：TCP、UDP、IP协议的底层核心机制。</li>
<li>熟练掌握web开发的能力。</li>
</ul>
<h2>我的项目</h2>
<ol>
<li>
<h3>留言墙</h3>
<p>开发时间：2022年7月 到 2022年8月</p>
<p>功能介绍：</p>
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</li>
<li>
<h3>学习小助手</h3>
<p>开发时间：2022年8月 到 2022年 9月</p>
<p>功能介绍：</p>
<ul>
<li>支持错题检索</li>
<li>支持同学探讨</li>
</ul>
</li>
</ol>
<h2>个人评价</h2>
<p>在校期间表现优异，多次获得过校级奖学金。</p>
</body>
15.案例二：填写简历信息
<body>
<h3>请填写简历信息</h3>
<table>
<tr>
<td>姓名</td>
<td><input type="text"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" id="male" checked="checked">
<label for="male">
<img src="./男.png" width="15px"> 男
</label>
<input type="radio" name="sex" id="female">
<label for="female">
<img src="./女.png" width="15px"> 女
</label>
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<select>
<option>--请选择年份--</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
</select>
<select>
<option>--请选择月份--</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select>
<select>
<option>--请选择日期--</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
</td>
</tr>
<tr>
<td>就读学校</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>应聘岗位</td>
<td>
<input type="checkbox" id="A"><label for="A">前端开发</label>
<input type="checkbox" id="B"><label for="B">后端开发</label>
<input type="checkbox" id="C"><label for="C">测试开发</label>
<input type="checkbox" id="D"><label for="D">运维开发</label>
</td>
</tr>
<tr>
<td>掌握的技能</td>
<td>
<textarea cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td>项目经历</td>
<td>
<textarea cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="checkbox" id="E"><label for="E">我已仔细阅读过公司的招聘要求</label>
</td>
</tr>
<tr>
<td> </td>
<td>
<a href="Test1.html">查看我的状态</a>
</td>
</tr>
<tr>
<td> </td>
<td>
<h3>请应聘者确认:</h3>
<ul>
<li>以上信息真实有效</li>
<li>能够尽早去公司实习</li>
<li>能接受公司的加班文化</li>
</ul>
</td>
</tr>
</table>
</body>
