前端系统学习篇之HTML

前言

该分类目的是系统学习前端知识做的笔记，HTML5+CSS3+JavaScript+Jquery+vue+前端工程化等等，使自己成为一个全栈工程师，学完水平能达初级前端开发工程师以上。

HTML简介

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言。
HTML 不是一种编程语言，而是一种标记语言，浏览器通过解析标签表现出相应的效果。
标记语言是一套标记标签。
HTML 使用标记标签来描述网页

一个网页包含骨架+表现+行为，HTML就是起了一个骨架作用，CSS使用样式来起表现作用，JavaScript起行为交互作用。

学习HTML就是要学习HTML的各类标签及其语义，应当忽略标签带来的样式不同，只关注语义，样式统一交给CSS来处理。

辅助文档地址：https://www.w3school.com.cn/html/html_jianjie.asp

一个HTML文档的基本结构

<!-- 文档声明，声明当前网页的文档 -->
<!doctype html>
<!-- html根标签（根元素），网页中所有的内容都要写在根标签里面 -->
<html><!-- head是网页的头部，head的内容不会在网页中直接出现，主要用来帮助浏览器或者搜索引擎来解析网页 --><head><!-- meta标签用于设置网页的元数据，下面的设置时设置网页的字符集为utf-8 --><meta charset="utf-8"><!-- title标签会显示在网页的标题栏，并且搜索引擎主要根据title中的内容来判断网页的主内容--><title>HTML学习</title></head><!-- body标签是html的子元素，表示网页的主体内容，网页中所有的可见内容都应该写在body标签里面 --><body><h1>HTML学习大标题<h1></body>
</html>

实体

在网页中编写多个空格都会被浏览器解析为只有一个空格，或者数学的大于小于号，这些特殊的字符不能直接书写，如果我们要书写这些字符，就需要用到html中的实体（转义字符）。

实体的语法：以"&“开头，”;"结尾，中间是实体的名称。
&实体的名称;
比如空格是  

meta元数据简介

使用head标签的meta子标签来设置网页的元数据，这些数据不是给用户看的，而是协助浏览器或者搜索引擎进行解析。
举例子：

charset ,用于设置网页的字符集，避免字符乱码。
name，content，类型与map的key value，用法是<meta name=“keywords” content=“学习HTML”> 设置该网页的关键字，用于搜索引擎进行搜索，比如京东的。

搜索购物，会出现京东，是因为主页上设置了关键字购物。
3 .http-equiv ，常见用法是<meta http-equiv=“refresh” content=“5;https://www.baidu.com”>
浏览器会解析该元数据，导致，该网页会在5秒后重定向到 https://www.baidu.com。

语义化

html标记语言是用于编写网页的结构，所以在编写html网页时，应该关注标签的语义，而不是样式，样式要用css来控制。
h1-h6标签是表示从一级标题到6级标题，重要性从高到低，他在浏览器中默认的样式是从h1-h6逐步减少，但是我们不应该为了小字体而使用h6，为了大字体而使用h1，而应该要根据标题的重要程度（语义）来使用，具体字体的大小要用css来控制。

块元素与行内元素简介

块元素（block）：独自一行，在网页中，一般用块元素来进行布局。
行内元素（in-line）：不会独自一行，在行内，行内元素主要用于包裹文字。
一般情况下会在块元素中使用行内元素，而不会在行内元素中使用块元素。P元素不能放任何块元素。
比如div就是块元素，span就是行内元素。

因为div是块元素，所以div前面的自成一行，后面自成一行，所以变成了3行，span是行内元素，所以不会独自一行，跟前后的组成一行。

布局标签：

语义化：类似Java Spring把 @Component注解衍生出对应的语义化标签（@Controller、@Service、@Repository）
header标签：表示网页的头部。
main标签：表示网页的主体部分。
footer标签：表示网页的底部。
nav标签：标签网页的导航。

当时上面的，现在来说用的都不多，主要是有两个万能，没有语义的表情。
div标签：没有语义，就是表示一个区块，目前来讲div是主流的块布局元素。
span：没有语义，行内元素，一般用于网页中选中文字。