HTML—Element/全局属性

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

一、''元素

表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代

W3C标准建议为html元素增加一个lang属性，比如’‘，作用是

帮助语音合成工具确定要使用的发音;

帮助翻译工具确定要使用的翻译规则;

如常用的规则：

lang=“en”表示这个HTML文档的语言是英文；

lang=“zh-CN”表示这个HTML文档的语言是简体中文；

二、’‘元素

规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。

什么是元数据（meta data），是描述数据的数据；

这里我们可以理解成对整个页面的配置，比如：

网页的标题：title元素，’Document‘

网页的编码：meta元素，可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；一般都使用utf-8编码，涵盖了世界上几乎所有的文字；

三、’'元素

body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。大部分HTML元素都是在body中编写呈现的；

四、h元素

问：浏览器呈现的时候通过什么区分h1-h6的效果

回答：通过渲染不同的CSS样式

五、img元素

事实上img是一个可替换元素，主要属性如下，某些其他属性目前已经不再使用

src属性：source单词的缩写，表示源，是必须的，它包含了你想嵌入的图片的文件路径。

alt属性：不是强制性的，有两个作用

作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；

作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；

img元素支持的图片格式非常多（webp格式-谷歌常用）

设置img的src时，需要给图片设置路径：

✓网络图片：一个URL地址（后续会专门讲URL），网络图片的设置非常简单，给一个地址即可；

✓本地图片：本地电脑上的图片，后续会和html一起部署到服务；

六、a元素（anchor）

a元素有两个常见的属性：

href：Hypertext Reference的简称

✓ 指定要打开的URL地址；

✓ 也可以是一个本地地址（指向一个html文件）；

target：该属性指定在何处显示链接的资源。

✓ _self：默认值，在当前窗口打开URL；

✓ _blank：在一个新的窗口中打开URL；

✓ _parent：在父窗口中打开URL

✓ _top：在顶层窗口中打开URL（iframe多级嵌套使用）

2.a元素的锚点链接：锚点链接可以实现：跳转到网页中的具体位置，锚点链接有两个重要步骤：

在要跳到的元素上定义一个id属性

定义a元素，并且a元素的href指向对应的id

标题1

跳转到标题1

3.图片链接:img元素跟a元素一起使用，可以实现图片链接。实现思路如下：

a元素中不存放文字，而是存放一个img元素

也就是img元素是a元素的内容

4.其他URL地址：a元素一定是用来跳转到新网页的么？也可以下面的压缩包和其他协议地址。

1.https://github.com/coderwhy/HYMiniMall/archive/master.zip 下载压缩包

2.mailto:12345@qq.com 邮件应用程序

补充——路径

方式一：绝对路径（几乎不用）；

✓ 从电脑的根目录开始一直找到资源的路径；

方式二：相对路径（常用）；

✓ 相当于当前文件的一个路径；

✓ . 代表当前文件夹（1个.），可以省略

✓ .. 代表上级文件夹（2个.）

对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是 \

七、iframe元素

利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档即嵌套网页。主要属性如下：

src资源属性

frameborder属性：用于规定是否显示边框

1：显示

0：不显示

补充：如果要禁止链接请求：将响应头中的X-Frame-Option设置为sameorigin

八、div（divsion）与span元素

作用:无所用、无所不用,理论上来说，我们的页面可以没有div、span；我们的页面也可以全部都是div、span。

产生的历史：div元素、span元素的历史网页的发展早期是没有css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可，比如h1元素可以是一段普通的文本+CSS修饰样式；这个时候就出现了div、span来编写HTML结构所有的结构，样式都交给css来处理。

区别：div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的；

div元素：多个div元素包裹的内容会在不同行显示；

✓ 一般作为其他元素的父容器，把其他元素包住，代表一个整体

✓ 用于把网页分割为多个独立的部分

span元素：多个span元素包裹的内容会在同一行显示；

✓ 默认情况下，跟普通文本几乎没差别

✓ 用于区分特殊文本和普通文本，比如用来显示一些关键字

九、不常用元素

strong元素：内容加粗、强调；

通常加粗会使用css样式来完成；

开发中很偶尔会使用一下

i元素：内容倾斜；

通常斜体会使用css样式来完成；

开发中偶尔会用它来做字体图标（因为看起来像是icon的缩写）；

code元素：用于显示代码，偶尔会使用用来显示等宽字体；

br元素：换行元素，开发中已经不使用；

十、全局属性

所有HTML都可以设置和拥有的，这样的属性我们称之为“全局属性"

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes

常见的全局属性如下：

id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样

式（使用 CSS）时标识元素。

class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选

择和访问特定的元素；

可以添加多个class属性如

,id只能唯一。

style：给元素添加内联样式css

title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。