浏览器F12 打开检查源代码
头文件：<head><head> //包含元数据，如文档的标题，字符集，样式表链接等
包裹整个HTML文档：<html></html>
内容：<body><body>
网页标题：<title>页面标题</title> //定义文档的标题，显示在浏览器的标题栏或标签页
网页图标：<link rel="图片格式" href="图片链接"> //包含网页的所有内容，如文本，图像，音频，视频等
注释<-- -->：ctrl+/
定宽居中（只对块标签有用）：margin: auto;
区域 块标签（独占一行）：<div>任意</div>
（可以在第一个<div>中直接设置样式：<div style=“需要的样式”>内容</div>）
（可以在第一个<div>中命名一个名字，在style中设置：<div class=".bgc"> 内容</div>）
段落 块标签：<p>段落</p>
<h1>到<h6>：定义六个级别的标题，<h1>是最大的，<h6>是最小的标题 块标签样式（最多6种）：
h${任意}*6--->
<h1>任意</h1>
<h1>任意</h1>
<h1>任意</h1>
<h1>任意</h1>
<h1>任意</h1>
<h1>任意</h1>
行标签：水平排布：<span>任意<span>（不换行）
[上标]：<sub>[任意]</sub>
[下标]：<sup>[任意]</sup>
换行：<br>
水平显示列表：display: inline-block;
超链接（作用：实现页面之间的跳转）：
<a href="网址">任意</a>
倾斜：<i>任意<i>/<em>任意<em>
删除：<s>任意</s>/<del>任意</del>
加粗：<b>任意</b>/<strong>任意</strong>
行内块（添加图片）：<img src="图片链接" alt="任意（加载失败）">
输入框：<input type(输入类型)="默认text/password密码加密" placeholder(提示语)="任意">
单选按钮：<input type="radio(单选按钮)" name="任意" id="">任意（同组按钮之间name值保持一致，按钮之间互斥）
复选框：<input type="checkbox（复选框）" name="任意" id="">任意
字体大小：font-size: 数值px；
字体颜色：color: #0f2991;
背景颜色：background-color： #0f2991;
宽度：width: 数值px;
高度：height: 数值px;
圆角：border-radius: 数值px;
文本对齐 居中：text-align: center;
行高：line-height: 数值px;
间距：margin: 数值px;
边框宽度、样式（solid实线 dashed虚线 dotted点状线）、颜色：
border:数值px solid rgb(数值, 数值,数值);
<!DOCTYPE html>
<!--html根标签 -->
<html lang="en">
<head>
<!-- <meta charset="UTF-8"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度一下，你就知道</title>
<link rel="icon" href="https://www.baidu.com/favicon.ico">
<style>
div{
/* 字体大小 */
font-size: 30px;
/* 字体颜色 */
color: blueviolet;
color: #0f2991;
/* 背景颜色 */
background-color: aqua;
/* 宽度 */
width: 300px;
/* 高度 */
height: 300px;
/* 圆角 */
border-radius: 150px;
/* 文本对齐 居中 */
text-align: center;
line-height: 300px;
}
h2{
/* 边框：宽度 样式（solid实线 dashed虚线
dotted点状线）颜色 */
border: 1px solid rgb(41, 101, 233);
}
p{
width: 300px;
line-height: 30px;
}
.bgc{
background-color: rgb(184, 65, 253);
}
</style>
</head>
<body>
<!-- ctrl / 注释 -->
<!-- 块标签：独占一行 -->
<div>新闻</div>
<!-- <div>新闻</div> -->
<div style="background-color: rgb(255, 0, 0);">a</div>
<div class="bgc">b</div>
<h1>标题标签</h1>
<!-- h${内容}*6 -->
<h1>祖国繁荣昌盛</h1>
<h2>祖国繁荣昌盛</h2>
<h3>祖国繁荣昌盛</h3>
<h4>祖国繁荣昌盛</h4>
<h5>祖国繁荣昌盛</h5>
<h6>祖国繁荣昌盛</h6>
<p>祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛祖国繁荣昌盛</p>
<p>段落</p>
<!-- 行标签：水平排布 -->
<!-- <br>换行标签 -->
<span>显示一些文字 <sub>[上标]</sub></span> <br>
<span>显示一些文字 <sup>[下标]</sup></span>
<!-- 超链接 作用：实现页面之间的跳转 -->
<a href="https://news.baidu.com/">新闻</a>
<b>加粗</b>
<strong>加粗</strong>
<i>倾斜</i>
<em>倾斜</em>
<s>删除</s>
<del>删除</del> <br>
<!-- 行内块 -->
<img src="http://opinion.people.com.cn/img/2020wbc/imgs/icon_download_video.png" alt="加载失败">
<!-- 输入框 默认 text文本 placeholder提示语
password密码
radio 单选按钮 同组按钮之间name值保持一致，按钮之间互斥
-->
<input type="text" placeholder="手机号">
<input type="password" placeholder="密码"> <br>
性别：
<input type="radio" name="sex" id="">女生
<input type="radio" name="sex" id="">男生 <br>
爱好：
<input type="checkbox" name="hobby" id="">学习
<input type="checkbox" name="hobby" id="">睡觉
<input type="checkbox" name="hobby" id="">游戏
<input type="checkbox" name="hobby" id="">音乐
in
</body>
</html>