HTML初识总结
这两天学习了web基础课程中的HTML的一些知识，有了一些认识，决定写篇文章总结和记录一下！在此和大家分享，共同进步==
什么是HTML？
**HTML是超文本标记语言（HyperText Markup Language）**的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
一.基本概念
1.网页和网站
网页全称Web Page，网页中包含：文字，图片，视频，音频，链接，程序等
网页内容由HTML技术实现，后缀通常都是.html
网站由N个网页组成（N>=1）
2.网页三层结构
结构层：使用HTML技术实现，给网页提供元素和内容
样式层：使用CSS，给网页提供样式，如：颜色、大小等（布局，美化）
交互层：使用JavaScript实现，进行页面交互，让网页动起来，是前端程序员最需要掌握的技术
3.浏览器和渲染引擎
常见的五大浏览器：谷歌（Chrome），火狐(Firefox)，IE，Safari，欧朋(Opera)
不同的浏览器有不同的内核（渲染引擎）:浏览器中专门对代码进行解析渲染的部分
4.开发工具
常见的前端使用的编辑器：WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver
前端开发神器：VS Code ，优点：速度快、体积小、插件多
安装插件（增加功能）：右侧图标最后一项，Extensions，查找需要的插件（联网）
中文插件：Chinese
颜色主题：atom one dark
文件夹图标：VSCode Great Icons
在浏览器中打开网页：open in browser、Live Sever
自动重命名标签：auto rename tag
VSCode的配置：
Auto Save 自动保存
Font Size 修改代码字体大小
Word Wrap 代码自动换行
Render Whitespace 空格的渲染方式(个人推荐) p Tab Size 代码缩进
推荐2个空格（公司开发项目基本都是2个空格）
VS Code基础快捷键：
ctrl + / => 注释
shift + alt + 向下箭头 => 复制上一行
tab => 向后移动代码
shift + tab => 向前移动代码
! + tab => html基本骨架 !是英文的!
div.wraper + tab => 生成一个带名字的div
鼠标中键 + 向下拽 => 同时选中多行
键盘上的del键 => 删除文件
F2 => 重命名
shift + alt + f => 格式化代码
ctrl + f => 查找内容并替换内容
vscode下载地址：code.visualstudio.com/Download
5.标签，属性，元素
标签：
由<、>、/、英文单词或字母组成,并且把标签中<>包括起来的英文单词或字母称为标签名。
常见标签由两部分组成，称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
属性：
写在开始标签中，以xxx="xxx"这种形式出现，一个标签中可以有N个属性，属性分两类：公有属性，特有属性。公有属性：class, id, title, style属性等。特有属性：meta元素的charset属性，img元素的alt属性等
元素：
元素是网页的一部分
元素就是标签+属性+标签之间的内容
一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含
元素嵌套关系：父子关系（嵌套关系）；兄弟关系（并列关系）
二.骨架标签
<!-- 文档声明：告诉浏览器，你按HTML5标准来解析此网页 -->
<!DOCTYPE html>
<!-- html是网页的根标签 -->
<!-- lang="zh-CN" lang是语言的意思 zh-CN表示HTML网页的语言是中文 en表示英文 -->
<html lang="zh-CN">
<!-- 在head中可以对网页进行设置 -->
<head>
<!-- title表示网页的小标题 -->
<title>我的第2个网页</title>
<!-- meta是设置网页的元信息 -->
<!-- utf-8 基本上涵盖了世界上所有的文字，如果不写，在有的浏览器中可能会乱码 -->
<meta charset="utf-8" />
</head>
<!-- 表示网页的主体内容 -->
<body>
</body>
</html>
1.文档声明
HTML最上方的一段文本我们称之为文档类型声明，用于声明文档类型,下面是HTML5的文档声明 作用：告诉浏览器，以什么样的标准来解析我们写的代码
<!DOCTYPE html>
2.html元素
是一个网页的根元素，只有这一个 lang属性
指定网页的语言 lang=“en”表示这个HTML文档的语言是英文 lang=“zh-CN”表示这个HTML文档的语言是中文
3.head元素
网页的头部，基本上对网页的设置都会在head实现，包括文档的标题，引用的文档样式和脚本等。
title元素：指定网页的标题 meta元素:网页的编码，如果不指定，会出现乱码，一般使用charset="utf-8"
4.body元素
body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构，大部分HTML元素都是在body中编写呈现的
三.常见标签
1.标题标签（h标签）
heading的缩写，头部的意思，通常用来做标题，h1-->h6,逐渐级递减,特点如下：
1.文字都有加粗
2.文字都有变大，并且从h1 → h6文字逐渐减小
3.独占一行
4.h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
5.h元素通常和SEO优化有关系
2.段落标签（p标签）
paragraph的缩写，段落的意思，用于分段显示，特点如下：
1.段落之间存在间隙
2.独占一行
3.p元素多个段落之间会有一定的间距
4.可以配合br标签进行换行
<!-- p标签表示一个段落 -->
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
3.换行标签（br标签）
让文字强制性换行，特点如下：
1.单标签
2.让文字强制换行
<!-- 在一个p标签内部，你还想换行，可以使用br标签 br标签是一个单标签 用来强制换行的 -->
<!-- 单标签，/ 可以写 也可以不写 <br> <br/> -->
<p>我是一个p标签<br/>我是一个p标签<br/>我是一个p标签<br/>我是一个p标签<br/>我是一个p标签</p>
4.水平线标签（hr标签）
分割不同主题内容的水平线，特点如下：
1.单标签
2.在页面中显示一条水平线
<!-- hr是单标签 /可写可不写 -->
<!-- hr标签是男标签 特点：独占一行 -->
<hr>
<!-- color表示设置水平线的颜色 size表示设置水平线的高度 width表示设置水平线的宽度 -->
<!-- 默认情况下，水平线在浏览器最中间，可以设置它的对齐方式 -->
<!-- align用来设置对齐方式 left 左对齐 right 右对齐 center居中对齐（默认） -->
<hr color="red" size="50px" width="50%" align="left">
5.文本格式化标签（双标签）
让文字有加粗、下划线、倾斜、删除线等效果
注意：strong、ins、em、del，表示的强调语义更强烈！
<b>今天开始学习HTML了，明天学习CSS</b> <br>
<i>今天开始学习HTML了，明天学习CSS</i> <br>
<s>今天开始学习HTML了，明天学习CSS</s> <br>
<u>今天开始学习HTML了，明天学习CSS</u> <br>
<!-- b标签仅仅是加粗，strong标签不只可以加粗，还可以强调，有利于SEO -->
<strong>今天开始学习HTML了，明天学习CSS</strong> <br>
<!-- em标签也有强调的意思，表示形式和 i 标签是一样，会倾斜-->
<em>今天开始学习HTML了，明天学习CSS</em> <br>
<!-- 使用strong和em能达到的效果，使用css也可以达到，但是stong和em有强调作用 -->
6.图片标签（img标签）
image的缩写，图像的意思，可以在网页中显示图片，特点如下：
1.单标签
2.img标签需要展示对应的效果，需要借助标签的属性进行设置
3.img并排显示（人妖标签）
属性：
1.src: 图片的路径（来源）
2.alt：当图片加载错误时显示的文字
3.title:当鼠标悬停在图片上显示的文字
4.width:图片的宽度
5.height：图片的高度
6.border:图片的边框
<!-- 使用img是在网页上插入一张图片，叫前景图 -->
<!-- 有前景图，也有背景图，背景图是通过CSS来设置的 -->
<!-- src叫属性，用来指定图片的路径 -->
<!-- ./表示当前目录 谁的当前 此文件的当前-->
<!-- 此处的./表示 02-常见的元素这个文件夹 -->
<!-- 图片多大，在网页上显示的就多大，也就是说，默认这个图片是不放大，也不缩小的 -->
<img src="./images/01.webp" alt="" > <br>
<!-- src是source的简写 -->
<!-- 如果图片加载失败了，就显示alt对应的文本中的内容 -->
<img src="./images/01.webp" alt="这是一张非常漂亮的图片"> <br>
<!-- 所有的标签都有一个title属性，表示鼠标去摸时，提示内容 -->
<img src="./images/01.webp" title="这是一张非常漂亮的图片"> <br>
<!-- width是宽度的意思 height是高度的意思 -->
<!-- 如果设置了width，那么高度会等比缩放 -->
<!-- 如果设置了height，那么宽度会等比缩放 -->
<img src="./images/01.webp" alt="" width="300px">
<img src="./images/01.webp" alt="" height="300px">
<!-- 宽高可以同时设置，同时设置，可能会造成图片变形 -->
<img src="./images/01.webp" alt="" width="300px" height="300px">
7.路径
页面需要加载图片，需要先找到对应的图片，分为两类，绝对路径和相对路径 绝对路径：
1.指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径，如：D:\day01\images\1.jpg
2.完整的网络地址：www.baidu.com/images/logo…
相对路径：
1.从当前文件开始出发找目标文件的过程
2.分同级目录，下级目录，上级目录
3.当前目录用./表示
4.向下用/表示
5.上级文件夹用../表示
8.超链接（a标签）
anchor的缩写，点击之后，从一个页面跳转到另一个页面，特点如下：
1.双标签，内部可以包裹内容
2.如果需要a标签点击之后去指定页面，需要设置a标签的href属性
3.a标签默认文字有下划线
4.a标签从未点击过，默认文字显示蓝色
5.a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
6.外部链接 写完整的 协议 域名 网址
7.内部链接 直接写文件名即可
属性：
1.href:指定跳转的页面
2.title：鼠标悬停显示的文字
3.target: 窗口的打开方式: _self(默认会覆盖原来的窗口) _blank(会以新的窗口打开)
4.#：会阻止页面跳转但是会刷新页面,空链接
锚点：
1.链接使用#
2.目标标签id值与连接#号后面一致
9.无语义标签（div标签 span标签）
div：division，分开、分配的意思。span：跨域、涵盖的意思。 特点:
1.div标签：一行只显示一个（独占一行）
2.span标签：一行可以显示多个
注意：
1.理论上来说，我们的页面可以没有div、span
2.理论上来说，我们的页面也可以全部都是div、span
两者区别：
1.div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的
2.div元素：多个div元素包裹的内容会在不同的行显示，用于把网页分割为多个独立的部分
3.一般作为其他元素的父容器，把其他元素包住，代表一个整体
4.多个span元素包裹的内容会在同一行显示,默认情况下，跟普通文本几乎没差别
5.用于区分特殊文本和普通文本，比如用来显示一些关键字
四.列表类标签
在开发一个网页的过程中, 很多数据都是以列表的形式存在的，如：新闻列表、排行榜、账单等 分为:无序列表、有序列表、自定义列表
1.无序列表（unordered list）
1.ul标签：表示无序列表的整体，ul标签中只允许包含li标签
2.li标签：表示无序列表的每一项，li标签可以包含任意内容
3.li标签可以包含任意内容
4.列表的每一项前默认显示圆点标识
2.有序列表（ordered list）
1.ol标签:表示有序列表的整体，ol标签中只允许包含li标签
2.li标签可以包含任意内容
3.ol标签中只允许包含li标签
3.自定义列表（definition list）
1.dl标签:只允许包含dt（definition term）/dd（definition description）标签
2.dt/dd标签可以包含任意内容
3.dd前会默认显示缩进效果
4.列表中每一项的具体描述，是对 dt 的描述、解释、补充
5.一个dt后面一般紧跟着1个或者多个dd
五.表格类标签
1.标签
1.table：表格
2.tr：table row，表格中的行
3.td: (table data),行中的单元格
4.th：表格的表头单元格，加粗，加黑，自动居中
5.caption：表格的标题，写在内部，显示外部，居中
6.thead：表格的表头
7.tbody：表格的主体
8.tfoot：表格的页脚
2.属性
1.border:表格的边框，默认的0
2.width：宽度
3.height：高度
4.cellspacing:单元格与单元格之间的距离
5.cellspadding：单元格与内容之间的距离
6.align: left/center/right（注：当给表格设置居中整个表格会居中，文字不会居中，当指定tr或者td文字居中）
7.colspan:列合并
8.rowspan：行合并
3.表格标题和表头单元格标签
1.在表格中表示整体大标题和一列小标题
2.caption定义表格大标题，caption标签书写在table标签内部
3.th定义表头单元格， th标签书写在tr标签内部（用于替换td标签）
4.合并单元格
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
<table border="1" width="500px" height="220px" align="center">
<tr align="center">
<th>排名</th>
<th>股票名称</th>
<th>股票代码</th>
<th>股票价格</th>
<th>股票涨跌</th>
</tr>
<tr align="center">
<td>1</td>
<td>贵州茅台</td>
<td>600519</td>
<td>1800</td>
<td>5%</td>
</tr>
<tr align="center">
<td>2</td>
<td>腾讯控股</td>
<td>00700</td>
<td>400</td>
<td>3%</td>
</tr>
<tr align="center">
<td>3</td>
<td>五粮液</td>
<td>00858</td>
<td>160</td>
<td>8%</td>
</tr>
<tr align="center">
<td>4</td>
<td>东方财富</td>
<td>30059</td>
<td>25</td>
<td>4%</td>
</tr>
</table>
六.表单类标签
表单可以在网页中显示收集用户信息的表单效果，如：登录页、注册页。
一般情况下，其他表单相关元素都是它的后代元素
1.input表单控件
1.text:文本输入框（明文输入）,在网页中显示输入单行文本的表单控件, 可以使用placeholder，提示用户输入内容。
2.password：文本输入框（密文输入）,在网页中显示输入密码的表单控件, 可以使用placeholder，提示用户输入内容。
3.radio：单选框,在网页中显示多选一的单选表单控件，可以使用name实现多选一，可以使用checked表示默认选中。
4.checkbox：复选框,在网页中显示多选多的多选表单控件，可以使用checked表示默认选中。
5.button：普通按钮 场景：在网页中显示不同功能的按钮表单控件。
6.reset：重置按钮,点击之后，恢复表单默认值。
7.submit：提交表单数据给服务器,提交按钮，点击后之后提交数据给后端服务器。
8.file：文件上传,在网页中显示文件选择的表单控件，可以使用multiple表示多文件选择。
9.type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框
<form action="http://www.baidu.com">
<!-- 文本输入框，明文 -->
用户名：<input type="text" placeholder="请输入你的用户名~"> <br>
密 码：<input type="password" placeholder="请输入你的密码~"> <br>
性别：男<input type="radio" checked="checked" name="sex"> 女<input type="radio" name="sex"> <br>
爱好：篮球<input type="checkbox"> 足球<input type="checkbox"> 双色球<input type="checkbox" checked="checked"> <br>
<!-- type=button在谷歌浏览器中具备提交功能，在其它浏览器中不具备提交功能 -->
<input type="button" value="登录"> <br>
<!-- 所谓的重置，就是清空输入框中的内容，项目中基本不用 -->
<input type="reset" value="重置"> <br>
<!-- 是一个按钮，具有提交功能 -->
<!-- 如果不写value，默认就是提交两个字 -->
<input type="submit"> <br>
<!-- 文件选择按钮 -->
<input type="file"> <br>
<!-- type是没有abc这个属性值，写错了，type此时就是text -->
<input type="abc">
</form>
input元素中的其它属性:
1.readonly：只读
2.disabled：禁用
3.checked：默认被选中，只有当type为radio或checkbox时可用
4.autofocus：当页面加载时，自动聚焦
5.name：名字，在提交数据给服务器时，可用于区分数据类型，当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义,后端接收到数据的格式是：name的属性值 = value的属性值
6.value：取值 用户输入的内容，提交之后会发送给后端服务器
<!-- value="hello world~" 表示输入框中的内容 -->
<!-- readonly 只读 意思就是只能看，不能修改（写） -->
<!-- autofocus auto是自动的意思 focus是获取焦点的意思 自动获取焦点 -->
<!-- 对于input来说，value是正儿八经扔给服务器的数据，name是给这个数据起一个名字 -->
<form action="">
<input type="text" value="hello world~" readonly="readonly"> <br>
<input type="text" autofocus="autofocus"> <br>
<input type="button" value="注册"> <br>
<input type="button" value="注册" disabled="disabled"> <br>
<hr>
用户名：<input type="text" name="uname" value="wangcai"> <br>
密码：<input type="password" name="upwd" value="123"> <br>
<input type="submit"> <br>
</form>
2.select下拉菜单
1.select标签：下拉菜单的整体
2.option标签：下拉菜单的每一项
3.selected：下拉菜单的默认选中
<select name="address">
<option value="001">BJ</option>
<option value="002" selected="selected">SH</option>
<option value="003">GZ</option>
<option value="004">TJ</option>
<option value="005">ZZ</option>
<option value="006">LY</option>
</select>
3.button元素
在网页中显示用户点击的按钮
1.button的type的取值，可以是button,submit,reset
2.谷歌浏览器中button默认是提交按钮
3.button标签是双标签，更便于包裹其他内容：文字、图片等
<!-- button是女标签 -->
<!-- 一般情况下，不会写type属性，了解就OK -->
<!-- 如果不写type属性，在谷歌浏览器下，默认是提交按钮 -->
<button type="button">我是一个孤独的按钮(普通按钮)</button> <br>
<button type="reset">我是一个孤独的按钮(重置按钮)</button> <br>
<button type="submit">我是一个孤独的按钮(提交按钮)</button> <br>
<!-- 图片按钮 -->
<button type="submit">
<img src="./images/logo.png" alt="" width="100px">
</button> <br>
4.textarea文本域
在网页中提供可输入多行文本的表单控件
1.cols：规定了文本域内可见宽度
2.rows：规定了文本域内可见行数
3.右下角可以拖拽改变大小
4.禁止缩放：resize: none;
5.水平缩放：resize: horizontal;
6.垂直缩放：resize: vertical;
7.水平垂直缩放：resize: both;
5.lable元素
常用于绑定内容与表单标签的关系
1.使用方式一：label for id
2.使用方式二：label包裹整个元素
<!-- label的使用方式一：label for id -->
<label for="user">用户名：</label><input id="user" type="text">
<hr>
<!-- label的使用方式二：包裹整个元素 -->
<!-- 此时点击用户名，也可以让输入框获取焦点 -->
<label>
用户名：<input type="text">
</label>
<hr>
6.布尔属性
1.常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
2.布尔属性可以没有属性值，写上属性名就代表使用这个属性
3.如果要给布尔属性设值，值就是属性名本身
7.form表单中的其他属性
1.form通常作为表单元素的父元素，将整个表单作为一个整体来进行操作
2..action属性：用于提交表单数据的请求URL
3.method属性：请求方法（get和post），默认是get
4.target属性：在什么地方打开URL（参考a元素的target）
七.补充
1.全局属性
1.id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素
2.class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素
3.style：给元素添加内联样式
4.title：包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的
<!-- box 是盒子的意思 -->
<!-- class起的名字可以重名 -->
<!-- id起的名字不能重名（潜规则） -->
<!-- 你非要重名，也没有问题 -->
<!-- id 唯一的意思 -->
<!-- style属性是用来写CSS样式的-->
<div title="xixi" class="box1" id="item1" style="color: red;">我是一个DIV</div>
<div title="xixi" class="box1" id="item2" style="color: green;">我是一个DIV</div>
<div title="xixi" class="box2" id="itme3" style="color: blue;">我是一个DIV</div>
2.实体字符
在网页中展示特殊符号效果时，需要使用字符实体替代
<!-- 有多个空格，解析时会合并成一个空格 -->
<p>你好 HTML</p>
<!-- 如果我们就想要多个空格，怎么做？答：实体字符。 -->
<p>你好 HTML</p>
<p>你好 < HTML</p>
<p>你好 > HTML</p>
3.emmet语法
在网页中展示特殊符号效果时，需要使用字符实体替代
1.!和html:5可以快速生成完整结构的html5代码
2.>子代）和+（兄弟） 如：div>ul>li， div+div>p>span+i， div+p+ul>li
3.（多个）和^（上一级）如：ul>li x 5， div+div>p>span^h1， div+div>p>span^^^^h1
4.()（分组） 如：div>(header>ul>li2>a)+footer>p
5.属性(id属性、class属性、普通属性) {}（内容） 如：div#header+div#main>.container>a[href]，a[href="www.baidu.com"]{百度一下}
6.*5
