一、梦开始的地方
1、hello world
<html>
<head>
<body>
hello world
</body>
</head>
</html>
2、emmet快捷键
输入 ! + table键 ，即可自动生成简单的网页结构，只需改变body标签里的内容即可。
（主流开发工具都有，例如vscode，webStrom，idea等等）
<!DOCTYPE html> <!----声明了以下文件的类型，是html文件---->
<html lang="en"> <!----lang是language的缩写，en是english的缩写，声明了当前网页的语言是英语--->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!----meta标签是单标签，没有结束标签---->
<title>Document</title> <!----title标签，描述了网页的名称---->
</head>
<body>
<!----在此处写入内容---->
</body>
</html>
3、开发者选项
F12 / 鼠标右键，检查元素
4、HTML相关文档
搜索mdn，有中文版和英文版
二、标签详解
1、注释标签
<!----这是一个注释---->
注释不会在网页页面上显示，但是查看网页源文件的时候，可以看到
2、标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
从h1到h6，由最大最粗逐渐变为最小最细。
<!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>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
3、段落标签
<p></p>
在段落标签中输入Lorem，按下回车，将会自动生成随机文本，用于测试
<!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>
<p>这是一个段落Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus quos veritatis unde perspiciatis ipsum dolore hic temporibus sunt ipsam ab corrupti deleniti vel, deserunt sit omnis ex consectetur dignissimos maxime!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam voluptates quis eligendi incidunt. Commodi numquam totam nemo praesentium unde animi rem eius cumque, hic ipsam soluta sequi quaerat cupiditate Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio deleniti magnam iure deserunt harum, excepturi voluptatem impedit! Debitis, sapiente eum, aliquid aut sint quae obcaecati ex molestiae alias consectetur nemo?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus aperiam quasi ullam quo veritatis laborum id, quae cupiditate! Sint maiores rerum porro debitis suscipit voluptate harum libero quos cumque ipsum?Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur voluptate dolor animi veniam cupiditate voluptatum esse nihil ad officia natus nulla, libero et ipsum repudiandae. Provident veniam aperiam rem. Voluptatum!
</p>
</body>
</html>
4、换行标签
<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>
<p>这是一个段落<br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. <br>Repellendus quos veritatis unde perspiciatis ipsum dolore hic temporibus sunt ipsam ab corrupti deleniti vel, deserunt sit omnis ex consectetur dignissimos maxime!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. <br>Totam voluptates quis eligendi incidunt. <br>Commodi numquam totam nemo praesentium unde animi rem eius cumque, hic ipsam soluta sequi quaerat cupiditate Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>Optio deleniti magnam iure deserunt harum, excepturi voluptatem impedit! Debitis, sapiente eum, aliquid aut sint quae obcaecati ex molestiae alias consectetur nemo?Lorem, ipsum dolor sit amet consectetur adipisicing elit. <br>Delectus aperiam quasi ullam quo veritatis laborum id, quae cupiditate! Sint maiores rerum porro debitis suscipit voluptate harum libero quos cumque ipsum?Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>Consequatur voluptate dolor animi veniam cupiditate voluptatum esse nihil ad officia natus nulla, libero et ipsum repudiandae. Provident veniam aperiam rem. <br>Voluptatum!
</p>
</body>
</html>
5、格式化标签
<strong>变粗！</strong>
<b>变粗！</b>
<em>倾斜！</em>
<i>倾斜！</i>
<del>删除线！</del>
<s>删除线！</s>
<ins>下划线！</ins>
<u>下划线！</u>
<!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>
<strong>变粗！</strong>
<b>变粗！</b>
<em>倾斜！</em>
<i>倾斜！</i>
<del>删除线！</del>
<s>删除线！</s>
<ins>下划线！</ins>
<u>下划线！</u>
</body>
</html>
6、图片标签
输入ｉｍｇ+Eｎｔｅｒ
ｉｍｇ标签的属性 ｓｒｃ是必填项，描述了该图片的路径。
可以是本地的绝对路径，也可以是相对路径，还可以是网络路径。
ａｌｔ属性，在图片挂了的时候（由于一些原因，导致图片显示不出来），会跟着显示ａｌｔ属性里的文本
ｔｉｔｌｅ属性，当鼠标悬停在图片上时，会给出提示，提示内容为ｔｉｔｌｅ属性里的文本。
ｗｉｄｔｈ属性，设置图片宽度，单位为ｐｘ，像素 ｈｅｉｇｈｔ属性，设置图片宽度，单位为ｐｘ。可以ｗｉｄｔｈ和ｈｅｉｇｈｔ同时修改，也可以只修改其中一个，剩下的属性会等比例缩放，防止图片走样。
<!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 width="1000px" title="这张图片是上海陆家嘴" alt="这是上海！" src="https://ts1.cn.mm.bing.net/th/id/R-C.83df6b446f636598123261919e8a19b7?rik=2e7sXyiqQ%2byBqQ&riu=http%3a%2f%2fimg1.qunarzz.com%2ftravel%2fpoi%2f201404%2f11%2f737ccfab0fe8d0baddb12cfb.jpg_r_1024x683x95_f7afd2a5.jpg&ehk=vWB9xHJRMAQ8A7DHh4%2bfSvZoluNAfju2LB6e7Ke5Bzg%3d&risl=&pid=ImgRaw&r=0" >
</body>
</html>
7、超链接标签
输入ａ+Eｎｔｅｒ
超链接标签属性：
ｈｒｅｆ：存放网址，域名可以替换成ｉｐ地址。
ｔａｒｇｅｔ：一般写作ｔａｒｇｅｔ＝＂＿ｂｌａｎｋ＂，就可以打开一个新的标签页（而不会替换原有页面）。
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.sogou.com" target="_blank">搜狗</a>
</body>
8、表格标签
ｔａｂｌｅ表示整个表格。
ｔｒ表示一行，ｔｄ表示一个单元格，ｔｈ表示表头中的一个单元格（默认会加粗）。
<!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 width="500px" height="300px" border="1px" cellspacing="0">
<!---width和height表示单元格的宽度和高度---->
<!---border表示给每一个单元格加上边框---->
<!---cellspacing="0"表示将相邻单元格的边框合二为一--->
<tr>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<td>x</td>
<td>110</td>
</tr>
<tr>
<td>b</td>
<td>119</td>
</tr>
<tr>
<td>s</td>
<td>114</td>
</tr>
</table>
</body>
</html>
想让表格中的文字居中，用html做不到，需要使用CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!----让表格中的文字居中，用css中的style标签，让页面中所有td标签中的文字都水平居中-->
<style>
td{
text-align: center;
}
</style>
</head>
<body>
<table width="500px" height="300px" border="1px" cellspacing="0">
<tr>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<td>x</td>
<td>110</td>
</tr>
<tr>
<td>b</td>
<td>119</td>
</tr>
<tr>
<td>s</td>
<td>114</td>
</tr>
</table>
</body>
</html>
9、列表标签
有序列表 ol，ordered list
无序列表 ul，unordered list
列表项 li， list item
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!----让表格中的文字居中，用css中的style标签-->
<style>
td{
text-align: center;
}
</style>
</head>
<body>
<!-- 有序列表-->
<h3>我的学生</h3>
<ol>
<li>bsn</li>
<li>bsn1</li>
<li>bsn2</li>
</ol>
<!--无序列表--->
<ul>
<li>xsj</li>
<li>xsj1</li>
<li>xsj2</li>
</ul>
</body>
</html>
10、form标签
使用form进行前后端交互 把页面上，用户进行的操作/输入提交到服务器上。
11、input标签
有很多形态，能够表现成功各种用户用来输入的组件
改变type的属性值
type="text" 单行文本框
type="password" 密码当行文本框
type="radio" 单选框（但不互斥）
type="radio" name="gender" 单选框（只能单选，互斥）
type="checkbox" 复选框（无默认选中）
type="checkbox" checked="checked" 复选框（有默认选中）
type="button" value="我是一个按钮" 按钮
type="submit" 提交按钮
type="file" 文件选择框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!----让表格中的文字居中，用css中的style标签-->
<style>
td{
text-align: center;
}
</style>
</head>
<body>
<!--单行文本框-->
<input type="text">
<br>
<!--专门输入密码的单行文本框,输入之后会自动变成小黑点，加密-->
<input type="password">
<br>
<!--单选框-->
<!--这种方式两个选项都可以同时选-->
请选择性别：
<input type="radio"> 男
<input type="radio"> 女
<br>
<!--为了避免这种情况，要加一个name属性，name属性相同的单选框里的值是互斥的-->
请选择性别：
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
<br>
<!--复选框，可以选多个-->
大学生每天都在干什么：
<input type="checkbox"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 学习
<br>
<!--如果想设置默认选中，则加一个checked属性-->
大学生每天都在干什么：
<input type="checkbox" > 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox" checked="checked"> 学习 <!--默认设置为选中学习-->
<br>
<!--按钮-->
<input type="button" value="我是一个按钮">
<br>
<!--提交按钮，搭配form使用，会触发form与服务器的交互-->
<input type="submit">
<br>
<!--文件选择框-->
<input type="file">
</body>
</html>
12、select标签
下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!----让表格中的文字居中，用css中的style标签-->
<style>
td{
text-align: center;
}
</style>
</head>
<body>
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
<option>杭州</option>
</select>
</body>
</html>
13、textarea标签
多行编辑框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!----让表格中的文字居中，用css中的style标签-->
<style>
td{
text-align: center;
}
</style>
</head>
<body>
<textarea cols="30" rows="10"></textarea>
<!--cols和rows表示几列几行-->
</body>
</html>
14、div标签
无语义标签
15、span标签
无语义标签
三、综合应用（简单个人简历）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
</head>
<body>
<h1>XXX的简历</h1>
<h2>基本信息</h2>
<img width="200px" src="C:\Users\86188\Desktop\文件\头像\22222.jpg" alt="我的照片">
<div>
求职意向：软件开发工程师
</div>
<div>
联系方式：q3366210684
</div>
<div>
邮箱：3366210684@qq.com
</div>
<div>
<a href="http://www.blog.csdn.net/m0_71927557" target="_blank">我的博客</a>
</div>
<div>
<a href="https://github.com" target="_blank">我的github</a>
</div>
<h2>教育背景</h2>
<ol>
<li>
2012-2018 国立哔哩哔哩小学
</li>
<li>
2018-2021 国立哔哩哔哩中学
</li>
<li>
2021-2025 国立哔哩哔哩大学
</li>
</ol>
<h2>专业技能</h2>
<ul>
<li>
熟练掌握java的基本语法，熟悉面向对象程序设计思想
</li>
<li>
熟悉常用的数据结构和算法，比如顺序表、链表、二叉树、堆、哈希表等。
</li>
<li>
熟悉操作系统中的典型概念，熟练掌握并发编程，对于多线程，线程安全，加锁等操作有深刻的认识
</li>
<li>
熟练掌握网络编程，熟悉网络通信原理，熟悉TCP/IP协议栈中的典型协议工作机制
</li>
<li>
熟练掌握SQL，能够进行基础的增删改查，熟悉mysql的索引和事务等机制。
</li>
</ul>
<h2>我的项目</h2>
<ol>
<li>
<h3>留言墙</h3>
<p>开发时间：********</p>
<div>功能介绍</div>
<ul>
<li>支持留言发布</li>
<li>支持匿名留言发布</li>
</ul>
</li>
</ol>
<h2>获奖经历</h2>
<div>
************************
</div>
</body>
</html>
