文章目录
1.HTML标签说明
双边标记，如：<div> 和 </div>；
单边标记，如：<br />、<hr />和<img src="images/1.jpg" />等。
属性与标记和其它属性之间需要以空格隔开，属性值以双引号括起来。
2.HTML骨架
| 标签名 | 定义 | 说明 |
|---|---|---|
<!DOCTYPE html> | 文档类型声明 | 告诉浏览器文档使用的是哪种HTML或XHTML标准 |
<html></html> | HTML标签 | 页面中最大的标签，我们成为根标签 |
lang="en" | 页面语言 | 指定页面的语言类型为英文,zh-CN为中文，放在html标签中 |
<head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放到body里面的 |
2.1 头标签 head
head标签里面，表示的是页面的配置，有字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。
头标签内部的常见标签如下：
<title>：指定整个网页的标题，在浏览器最上方显示。<base>：为页面上的所有链接规定默认地址或默认目标。<meta>：提供有关页面的基本信息<body>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。<link>：定义文档与外部资源的关系。
2.1.1 meta标签
meta表示"元"，"元"配置，即基本的配置项目。
常见的几种meta标签如下：
（1）字符集 charset：
<meta charset="UTF-8">
用来指定网页文档的字符编码为UTF-8。
如果没有这个标签或者设置了错误的字符集，那么当网页中有非ASCII字符（如中文字符）时，浏览器可能会无法正确显示这些字符，导致乱码出现。
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312等。
（2）视口 viewport：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
主要用于响应式设计中，确保无论在大屏幕还是小屏幕设备上，网页都能够适当地缩放和重排版，提供良好的用户体验。如果没有这个标签，移动设备可能会使用默认的固定宽度视口，导致网页在小屏幕上显示不适，用户需要手动缩放才能浏览整个页面。
name="viewport": 视口（viewport）是指用户在设备屏幕上看到网页的区域。在桌面浏览器中，视口通常就是浏览器窗口本身。在移动设备上，视口可以比物理屏幕更大，允许网页被缩放。
content="width=device-width": 这个参数设定视口的宽度等于设备的宽度。device-width是一个关键词，代表设备屏幕的实际宽度（以CSS像素为单位），在不同的设备上会有不同的值。这使得网页能够适应不同尺寸的屏幕。
initial-scale=1.0: 这个参数设定了页面初始的缩放比例。1.0意味着页面将以100%的比例显示，即没有缩放。这确保了页面在加载时不会自动放大或缩小，而是根据设备宽度自动调整布局。
（3）定义"关键词"：
默认骨架中没有，举例如下：
<meta name="Keywords" content="游戏,新闻,体育" />
用于指定网页的关键词（keywords）。这些关键词在过去被搜索引擎用于帮助索引网页的内容。但是，现在的搜索引擎算法变得更为复杂和智能，许多搜索引擎并不重视标签，或者只将其作为次要因素考虑。
尽管如此，一些SEO（搜索引擎优化）专家仍然建议包含标签，因为：
- 兼容性：虽然主要的搜索引擎可能不再依赖这个标签，但它可能仍然对某些较小的搜索引擎或特殊用途的爬虫有用。
- 信息性：它可以作为一个快速参考，向开发人员或其他人展示页面预期的关键词。
- 历史原因：在SEO的历史中，这是一个长久以来的标准实践，即使现在作用不大，保持一致性有时也被视为一种好的习惯。
（4）定义“页面描述”：
只要设置Description页面描述，那么搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
默认骨架中没有，举例如下：
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
定义了网页的描述摘要。这个描述摘要通常是一段简短的、概括性的文字，用来说明网页的主要内容。它有以下几个主要用途：
- 搜索引擎优化（SEO）：搜索引擎会抓取中的内容，并可能使用它作为搜索结果列表中网页的摘要。一个清晰、吸引人的描述可以帮助提高点击率（CTR），从而间接提升网页的排名。
- 社交分享：当网页被分享到社交媒体平台时，的内容经常被用作分享预览的一部分，帮助吸引用户点击。
- 用户信息：在搜索引擎结果页（SERP）中，提供了关于网页内容的初步信息，帮助用户决定是否要访问该页面。
- 网页快照：在某些情况下，如果网页的某个部分无法正常加载，浏览器可能会显示中的文本作为网页的快照或替代文本。
效果如下：
（5）HTML重定向
默认骨架中没有，举例如下：
<meta http-equiv="refresh" content="3;http://www.baidu.com">
在这个例子中，它告诉浏览器在3秒后将用户重定向到百度的主页（http://www.baidu.com）。
http-equiv属性在这里相当于HTTP头部的Refresh指令，而content属性则包含了两部分信息：
第一部分是一个整数，表示等待的时间（以秒为单位）；
第二部分是一个分号后跟的URL，表示重定向的目标地址。
这种机制常用于以下场景：
- 在完成表单提交或交易确认后，告知用户操作成功并自动跳转回主页或另一个页面。
- 当一个页面需要定期更新其内容时，可以设置一个较短的刷新间隔。
- 在服务器迁移或域名更改的情况下，临时使用来自动重定向用户到新地址。
然而，使用也有一些缺点，例如它可能中断用户的浏览体验，特别是在没有明确提示的情况下突然跳转。
此外，搜索引擎可能无法正确处理这种重定向，影响SEO效果。
因此，在设计用户体验时应谨慎使用，并考虑是否有更合适的替代方案，如JavaScript的window.location.replace()或服务器端的HTTP 301/302重定向。
2.1.2 title标签:
<title>网页的标题</title>
<title>用来设置网页的标题
<title>标签的内容对于SEO非常重要，它有助于搜索引擎理解页面的主题，且常被用作搜索结果中的标题。
此外，当用户将网页添加到收藏夹或书签时，<title>标签的内容也会被用作书签的名称。
2.1.3 base标签：
默认骨架中没有，举例如下：
<base href="https://www.baidu.com/" target="_blank">
href属性：用于定义基本URL，所有的相对URL都会基于这个基本URL进行解析。
target属性：用于指定文档的默认目标框架或窗口。例如，target="_blank"会使所有没有明确target属性的<a>标签都在新窗口或新标签页中打开。
base 标签用于指定基础的路径。指定之后，所有的<a>标签都以这个路径为基准。
2.2 <body>标签
<body>标签的属性有：
bgcolor：设置整个网页的背景颜色。background：设置整个网页的背景图片。text：设置网页中的文本颜色。leftmargin：网页的左边距。IE浏览器默认是8个像素。topmargin：网页的上边距。rightmargin：网页的右边距。bottommargin：网页的下边距。
<body>标签另外还有一些属性：
当我们对跳转到百度这几个字使用超链时，link属性表示默认显示的颜色、alink属性表示鼠标点击但是还没有松开时的颜色、vlink属性表示点击完成之后显示的颜色。
2.3 快速生成HTML骨架
方式1:输入!
方式1:输入html:5
生成如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
3.HTML的基本语法特性
3.1 HTML页面结构与换行缩进无关
HTML只在乎标签的嵌套结构鱼嵌套的关系，换行与tab缩进都不影响页面结构。
HTML不依靠缩进来表示嵌套的，而是看标签的嵌套关系。但是正确缩进标签，有利于代码的可读性。
3.2 空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
如图：
3.3 标签要封闭
如图，由于title标签没有封闭，导致后面内容全被误认为是标题：
594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
