HTML（2）——深入学习各类常用元素

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编码，涵盖了世界上几乎所有的文字；

      <meta charset="UTF-8">
三、’'元素

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

四、h元素

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

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

五、img元素

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

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

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

    • 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
    • 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；

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

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

✓网络图片：一个URL地址（后续会专门讲URL），网络图片的设置非常简单，给一个地址即可；
✓本地图片：本地电脑上的图片，后续会和html一起部署到服务；

六、a元素（anchor）
  1. a元素有两个常见的属性：

  • href：Hypertext Reference的简称
    ✓ 指定要打开的URL地址；
    ✓ 也可以是一个本地地址（指向一个html文件）；

  • target：该属性指定在何处显示链接的资源。
    ✓ _self：默认值，在当前窗口打开URL；
    ✓ _blank：在一个新的窗口中打开URL；

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

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

  • 在要跳到的元素上定义一个id属性
  • 定义a元素，并且a元素的href指向对应的id
<h1 id="theme">标题1</h1>
<a href="#theme" target="_blank">跳转到标题1</a>

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

  • a元素中不存放文字，而是存放一个img元素
  • 也就是img元素是a元素的内容
<a href="http://baidu.com" target="_blank">
	<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度">
</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属性如<h1 class="h1 h2 h3">,id只能唯一。

  • style：给元素添加内联样式css
  • title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。
posted @ 2025-04-16 15:50  卡卡max  阅读(25)  评论(0)    收藏  举报