web前端三大核心技术就是HTML丶CSS丶JavaScript
根据 W3C 标准，一个网页主要由三部分组成：结构、表现和行为组成。HTML负责负责网页的结构，CSS：负责网页的表现， JS：负责网页的行为。
Web 标准提出的最佳体验方案：结构、样式、行为相分离。简单理解： 结构写到 HTML 文件中， 表现写到 CSS 文件中， 行为写到 JavaScript 文件中。
什么是HTML？
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)，标记也可以叫标签、元素。
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标签来描述网页
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>我们称为 双标签。 。标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为 单标签。
- HTML编程语言中所有标签都是预先定义好，不允许开发人员自行创建新的标签
- HTML编程语言中所有标签和属性不区分英文字母大小写，比如<BR> <br> <Br> 都是合法标签
- 语义化：在合适地方使用合理的标签，就叫满足标签语义化；可以在搜索引擎排名中更靠前！点击率更高，带来更多的收益！
- html代码因为历史原因，导致语法较为松散；测试细节的时候，以浏览器最终运行效果为准；
HTML单标签和双标签：
- 单标签书写规则： <单标签名称 /> ，例如 <br/>
- 双标签书写规则： <双标签名称>xxx</双标签名称> ，例如 <a>xxx</a>
标签关系
双标签关系可以分为两类：包含关系和并列关系。
HTML属性
- HTML属性指的是标签属性
- HTML标签可以拥有属性，属性提供了有关 HTML 元素的更多的信息
- 属性总是以名称/值对的形式出现，比如：name="value"
- 属性总是在 HTML 元素的开始标签中规定，比如： <a href="http://www.baidu.com">百度</a>
骨架标签
每个网页都会有一个基本的结构标签（也称为骨架标签）。它可以通过集成开发环境新建HTML文档时候默认生成的那些标签。 HTML页面也称为 HTML 文档。下面代码就是HTML的骨架标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>骨架标签详解
<!DOCTYPE> 声明
- <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
- <!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
- 在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。HTML5 不是基于 SGML，因此不要求引用 DTD。
- 总是给您的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。
<html> 标签
- <html> 标签告知浏览器这是一个 HTML 文档。
- <html> 标签是 HTML 文档中最外层的元素。
- <html> 标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。
-
属性lang="en"用来定义当前文档显示的语言。en定义语言为英语 丶zh-CN定义语言为中文 。这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的。
<head> 标签
- <head> 元素是所有头部元素的容器。
- <head> 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。设置基础参数信息
- 以下列出的元素能被用在 <head> 元素内部：<title> （在头部中，这个元素是必需的）丶<style>丶<base>丶<link>丶<meta>丶<script>丶<noscript>
<meta> 标签
- 元数据（Metadata）是数据的数据信息。
- <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，当时会被浏览器解析。
- META元素通常用于指定网页的描述，关键词，的文件的最后修改，作者，和其他元数据。
- 元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
- 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
- 在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。属性 charset=" UTF-8" 告知浏览器要使用什么字符集解码。
<head>
<!--meta
一般定义一些当前网页的特殊属性
通过meta标签的属性定义页面的特征
<标签名 属性1='' 属性2=''></标签名>
charset属性 定义当前页面的字符集 告诉浏览器以什么字符集解析当前页面
name属性 一般用于定义当前网页的一些简单描述 便于在搜索引擎上根据描述搜索到当前网页
keywords 关键字
author 作者
description 描述 一段陈述文字,描述当前网页
html 属性值使用单引号或者是双引号 皆可
-->
<meta charset="UTF-8" />
<meta name="keywords" content="新湖农场"/>
<meta name="author" content="苦行僧" />
<meta name='description' content="路漫漫其修远兮，吾将上下而求索" />
<!--在5秒后 对网页进行刷新 ,并且跳转到http://www.baidu.com -->
<meta http-equiv="refresh" content="5;http://www.baidu.com" />
<title>one</title>
</head><title> 标签
- <title> 标签定义文档的标题，在所有 HTML 文档中是必需的。
- <title>元素：定义浏览器工具栏中的标题丶提供页面被添加到收藏夹时的标题丶显示在搜索引擎结果中的页面标题
- 一个 HTML 文档中不能有一个以上的 <title> 元素。
- 如果您遗漏了 <title> 标签，文档作为 HTML 是无效的。
<body> 标签
- <body> 标签定义文档的主体。负责通知浏览器将指定内容以指定方式在窗口展示
- <body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
HTML 常用标签
<!--...--> 注释标签
- <!--...--> 注释标签用来在源文档中插入注释。注释不会在浏览器中显示。
- 如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。 HTML中的注释以“<!--”开头，以“ -->”结束。
- 选中文字 按 ctrl +shift + / 注释/取消注释
-
测试要注意：项目上线之前，要求程序员删除注释的内容，目的是加快网页的加载速度例： <!-- 这里的文字就当做注释来实现了 -->
标题标签 <h1> - <h6>
为了使网页更具有语义化，我们会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题， 即<h1> - <h6> 。
- 加了标题的文字会变的加粗，字号也会依次变大。 一个标题独占一行。
- <h1> - <h6> 标签被用来定义 HTML 标题。
- <h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。
<body>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
</body>特殊字符
HTML 页面，一些对HTML有特殊含义的符号，此时我们就可以使用下面的字符来替代。其他特殊符号，对于HTML没有特殊含义 ，但是又不好打出来的符号，也可以使用字符实体。字符实体查询地址 https://www.w3school.com.cn/html/html_entities.asp。
重点记住：空格 、大于号、 小于号 这三个， 其余的使用很少，如果需要回头查阅即可。
<body>
<!--
字符实体
对于HTML有特殊含义的符号
想以普通文本的形式展现出来
那么就需要使用字符实体进行转义处理
-->
<!--左右尖括号-->
< br/ > <br />
<!--空格-->
武汉 加油 <br>
<!-- & < -->
<!--
其他特殊符号
对于HTML没有特殊含义
但是又不好打出来的符号
-->
与符号&
</body>特殊符号查询地址 https://www.w3school.com.cn/tags/html_ref_symbols.html
<p> 段落标签
- 在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段 落，它可以将整个网页分为若干个段落。
- 文本在一个段落中会根据浏览器窗口的大小自动换行丶 段落和段落之间保有空隙
<!--
p 段落标签 被p标签包裹的文字就是独立的一个段落
段落和段落之间是自动换行
每一对p标签独立占一行
如果段落标签中的内容要换行
可以加上<br/> 换行标签 放在哪里就在哪里换行
-->
<p>心理学上有个概念，养成一个习惯，只需要28天。</p>
<p>突如其来的这场疫情，已经让不少国人度过了一个月的“闭户生活”。</p>
<p> 尽管旅游、餐饮、交运等偏服务型的消费受到了极大冲击，但以网络游戏、<br/>
到家服务、网购为代表的传统“在线经济”因此重回增长轨道，而以在线<br/>
教育、远程办公、短视频、直播为代表的新型“宅经济”更是迅速爆发。
</p>文本格式化标签
在网页中，有时需要为文字设置粗体、斜体 或下划线等各种效果，这时就需要用到 HTML 中的文本格式化标签，使 文字以特殊的方式显示。 标签语义: 突出重要性, 比普通文字更重要。下图中的推荐标签语义化强些。
详细的格式化标签，可以查询文档地址 https://www.w3school.com.cn/html/html_formatting.asp 。 注意：格式化标签的嵌套 多重格式同时生效
<hr>水平线标签
- <hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。
- <hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。
<br> 换行标签
- <br> 标签插入一个简单的换行符。
- <br> 标签是一个空标签，意味着它没有结束标签。
- 在写地址信息或者写诗词时 <br> 标签非常有用。
- 请使用 <br> 标签来输入空行，而不是分割段落。
<div> 标签
- <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
- <div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
- <div> 元素经常与 CSS 一起使用，用来布局网页。
- <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子，没有语义。
<span> 标签
- span> 用于对文档中的行内元素进行组合。
- <span> 标签没有语义。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
- <span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
- <span> 标签用来布局，一行上可以多个 <span>。小盒子
<img>图像标签
在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。 单词 image 的缩写，意为图像。 src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。 所谓属性：简单理解就是属于这个图像标签的特性。
<img src="图像URL" />图像标签的其他属性：
代码演示
<body>
<!--正常的图片：-->
<img src="timg.gif" />
<!--带有alt 替换文本：（图片不能正常显示，就显示文字）-->
<img src="timg1.gif" alt="胡歌咋吹笛子" />
<!--带有title 提示文本：（鼠标放到图片上，显示的文字）-->
<img src="timg.gif" title="胡歌还在吹笛子等霍建华" />
<!--修改图片大小 宽度 width 高度 height -->
<img src="timg.gif" title="胡歌还在吹笛子等霍建华" width="600" />
<!--带有边框的图片-->
<img src="timg.gif" title="胡歌还在吹笛子等霍建华" width="600" border="10" />
</body>图像标签属性注意点：
- 图像标签可以拥有多个属性，必须写在标签名的后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。
- 宽或高只设置其中一个属性，另外一个会按照原图的比例去进行缩放显示；如果宽和高都不设置，图片会按照原本的大小去显示
- alt中的属性会被网页阅读器读取此内容给视障用户听，提升用户体验
路径
页面中的图片会非常多， 通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需 要采用“路径”的方式来指定图像文件的位置。 路径可以分为：相对和绝对路径。
- 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。 例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。不建议使用。
- 相对路径：以引用文件所在位置为参考基础，建立出的目录路径。这里简单来说，图片相对于 HTML 页面的位置。相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是 图片相对于 HTML 页面的位置。
