HTML之常见的元素 (三)：HTML结构分析、常见的标签、div元素与span元素、HTML全局属性

AHuSjCoding

已于 2023-06-10 15:04:35 修改

阅读量512

点赞数 1

分类专栏： HTML5 文章标签： html 前端 javascript

于 2023-03-05 20:50:58 首次发布

本文链接：https://blog.csdn.net/Sedrick_/article/details/129350910

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

跳转目录🚀

篇章	知识点
HTML之邂逅(一)	软件开发和应用程序开发、网站和网页的关系、网页的显示过程、网页的组成部分、浏览器和浏览器内核
HTML之网页开发(二)	第一个网页、认识HTML、开发工具、HTML元素、注释编写
HTML常见的元素(三)	HTML结构分析、常见的标签、div元素与span元素、HTML全局属性
HTML额外知识补充(四)	字符实体、URL地址、元素语义化、SEO优化、字符编码字符实体、URL地址、元素语义化、SEO优化、字符编码

1. HTML结构分析✨

一个完整的HTML结构包括：文档声明 、 html元素

1.1 文档声明⭐

文档类型声明: HTML最上方的一段文本我们称之为文档类型声明，用于声明文档类型
作用: HTML文档声明，告诉浏览器当前页面是HTML5页面；，让浏览器用HTML5的标准去解析识别内容；
注意点:
1. 必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题
2. 其中,如今的HTML5文档声明比HTML 4.01、XHTML 1.0简洁非常多(了解即可)

1.2 html 元素⭐

html 元素: 又被称为根元素表示一个html文档里的顶级元素是所有其它元素的父元素
html 的属性
- lang：它是有W3C标准为html元素增加的属性，作用是帮助语音合成工具确定要使用的发音，帮助翻译工具确定要使用的翻译规则。其中，lang=“en”、 lang=“zh-CN” 分别表示文档语言为英文中文

1.3 head 、title 、meta 元素⭐

head 元素 ：在head标签中来规定文档相关的配置信息(也称之为元数据)，包括文档的标题，引用的文档样式和脚本等。因此有很多标签是规定写在head中的。
1. title 元素：设置网页的标题
2. meta 元素 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字,不设置或者设置错误会导致乱码；一般都使用utf-8编码，涵盖了世界上几乎所有的文字。

其中，元数据(meta data) 是描述数据的数据，是一些文件自己本身的信息,可以理解成对整个页面的配置

<head>
  <meta charset="UTF-8">
  <title>网页的标题</title>
</head>

在这里插入图片描述

1.4 body 元素⭐

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

2. 常见的标签 ✨

推荐查阅MDN文档：https://developer.mozilla.org/zh-CN/

2.1 h 标题标签⭐

了解：h元素通常和SEO优化有关系(SEO介绍在下一篇笔记)

h 元素： 在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们需要使用h元素来强调该文字为标题。
- 标题标签的不同级别：呈现了六个不同的级别的标题，本质上只是增加了不同的css样式而已

<body>
  
  <h1>我是h1标题</h1>
  <h2>我是h2标题</h2>
  <h3>我是h3标题</h3>
  <h4>我是h4标题</h4>
  <h5>我是h5标题</h5>
  <h6>我是h6标题</h6>

</body>

在这里插入图片描述

2.2 p 段落标签⭐

p元素： 如果我们想表示一个段落，这个时候可以使用p元素。p元素是paragraph单词的缩写，是段落、分段的意思； p元素多个段落之间会有一定的间距；本质也是增加了css样式，其中段落与段落之间的距离会合并，后续可以使用BFC来避免

<body>
  <p>我是第一个段落元素</p>
  <p>我是第二个段落元素</p>
</body>

在这里插入图片描述

2.3 img 图像标签⭐

img元素：将一份图像嵌入文档，即在浏览器上显示一张图片，img是image单词的所以是图像、图像的意思；
img两个常见的属性：
1. src 路径 ：source单词的缩写，表示源。是必须有的，它包含了你想嵌入的图片的文件路径。
2. alt 替换文本 ：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；
3. title 提示文本：鼠标放在悬停在图片上会有图片的描述
**注意：**事实上img是会显示在文档中，是一个可替换元素（ replaced element ）。会请求src路径上的资源下载到浏览器上，并且替换掉原本的位置。并且现在已经不推荐在img标签内使用 width、height、border

<body>
  <img src="./images/xiaowangzi.jpeg" alt="小王子">
</body>

img元素支持的图片格式
补充：webp格式

2.4 a 超链接标签

a 超链接标签：锚（anchor）定义超链接，用于打开新的URL；
a元素的两个常见属性：
1. href（Hypertext Reference的简称）
  - 指定要打开的URL地址或本地地址
2. target：该属性指定在打开显示链接资源的方式
  - _self： 默认值，在当前窗口打开新URL
  - _blank： 在一个新的窗口中打开URL
    以下两个主要是跟iframe结合使用
  - _parent：在父窗口中打开URL
  - _top：在顶层窗口中打开URL

<body>
  
  <!-- href属性 -->
  <a href="http://www.baidu.com">百度一下</a>
  <a href="http://www.bing.com">必应一下</a>

  <!-- target属性 -->
  <!-- http://www.baidu.com-> 百度服务器->index.html文件 -->
  <a href="http://www.baidu.com" target="_self">百度一下</a>
  <!-- 链接到本地的网页（本地的资源地址） -->
  <a href="./09_相对路径和绝对路径.html" target="_blank">百度一下</a>

</body>

2.4.1 a 设置锚点链接⭐

作用：锚点链接可以实现跳转到网页中的具体位置
设置锚点链接的步骤：
1. 在要跳转到的元素上定义一个id属性；
2. 定义a元素，并且a元素的href指向对应的id；

2.4.2 设置图片链接⭐

在很多网站我们会发现图片也是可以点击进行跳转的，img元素跟a元素一起使用，可以实现图片链接

实现思路：
a元素中不存放文字，而是存放一个img元素，也就是img元素是a元素的内容

<a href="http://www.mi.com">
    <img src="./images/xiaomi_01.jpeg" alt="">
  </a>

2.4.3 元素其它的URL地址⭐

a元素还可以下载zip压缩包，和通过mailto发送邮件

<!-- 指向链接：zip压缩包 -->
  <a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip">下载zip包</a>
  <!-- 指向其他协议地址：mailto 协议头让我们当前的系统打开对应发邮件的app来发送邮件-->
  <a href="mailto:12345@qq.com">coderwhy gmail</a>

2.5 iframe内联框架标签✨

作用：在一个HTML文档中嵌入其他HTML文档
iframe元素的两个常见属性
1. frameborder：用于规定是否显示边框，1：显示，0：不显示
  
  我们可以看到，当请求百度是失败的，为什么呢？因为百度做了同源的限制

2.5.1 iframe结合a的target⭐

  <iframe name="why" src="./a元素的target_top.html" frameborder="1"></iframe>

  <!-- target _parent  _top -->
  <a href="https://www.taobao.com" target="_top">淘宝</a>

在这里插入图片描述

3. div元素与span元素✨

3.1 历史过程⭐

在HTML中有两个特殊的元素 div元素(division 分开，分隔)；span元素(跨域、涵盖)
产生的历史 : 在早期网页的发展中是没有css的，我们需要通过语义化元素来告知浏览器一段文字如何显示。比如h1元素就是一段普通的文本+CSS修饰样式；后面由于代码难以维护，才出现了css并且变成了一个标准，产生了结构和样式分离的概念，这个时候html只需要负责结构，因此出现了div、span来编写HTML结构所有的结构，样式都交给css来处理
结论： div 、 span 都是没有语义的。我们在编写网页时，不能过度滥用 div 和span。目前有一个新的概念：“让最正确的元素做最正确的事情” => 即元素语义化。在上面我们了解了很多的标签，他们都是具备明确的语义的，即便它们本身自带了一定的样式，当该内容为标题时我们就应该使用 h 标题标签。

3.2 div元素、span元素的区别⭐

相同点：div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的。
区别：
- div元素： ：
  1. 多个div元素包裹的内容会在不同的行显示；
  2. 一般作为其他元素的父容器，把其他元素包住，代表一个整体
  3. 用于把网页分割为多个独立的部分
- span元素：
  1. 多个span元素包裹的内容会在同一行显示；
  2. 默认情况下，跟普通文本几乎没差别
  3. 用于区分特殊文本和普通文本，比如用来显示一些关键字

4. 绝对路径和相对路径

在设置img的src时，需要给图片设置路径，路径分为 绝对路径 和 相对路径：

绝对路径：
1. 从电脑的根目录开始一直找到资源的路径
2. 网络地址，即一个URL地址
相对路径：相对于当前文件的一个路径
1. . /代表当前同级文件夹（1个），可以省略
2. .. /代表上级文件夹（2个）

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

5. HTML全局属性✨

全局属性：所有HTML都可以设置和拥有的属性我们称之为 “全局属性（Global Attributes）”
常见的全局属性如下：
- id ： 定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符就是锚点），脚本(DOM获取元素)或样式（使用 CSS）时标识元素。
- class： 一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素
- style： 给元素添加内联样式；
- title： 包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。

全局属性有很多：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes

AHuSjCoding

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML之常见的元素 (三)：HTML结构分析、常见的标签、div元素与span元素、HTML全局属性

我们发现页面可以不用div、span，也可以全部都用，但这样会导致页面全都是div，为了避免这种极端现象，目前有一个新的概念。，即让最正确的元素做最正确的事情，该是标题就用h元素，样式可以通过css再修饰。在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素。a元素中不存放文字，而是存放一个img元素，也就是img元素是a元素的内容。我们可以看到，当请求百度是失败的，为什么呢？在很多网站我们会发现图片也是可以点击进行跳转的，.大部分的HTML元素都是在body中呈现的。
复制链接

扫一扫