值得关注的HTML基础

html封面

值得关注的HTML基础

  • 🥳序言
  • 😋一、网页三大元素
  • 😜二、HTML简介
    • 1. 定义
    • 2. 发展历史
  • 😝三、HTML结构
    • 1. 引例阐述
    • 2. 特点
    • 3. HTML页面结构
      • (1)DOCTYPE
      • (2)html
      • (3)head
      • (4)body
      • (5)meta
      • (6)title
      • (7)style
      • (8)link
      • (9)script
  • 😛四、常用元素
    • 1. 三种常用元素
      • (1)内联元素
      • (2)行内块级元素
      • (3)块级元素
    • 2. 图例
  • 😏五、语义化
    • 1. 定义
    • 2. 常见语义化标签解析
      • (1)语义化 - 区块类别标签
        • 1)header
        • 2)nav
        • 3)article
        • 4)section
        • 5)aside
        • 6)footer
      • (2)语义化 - 分组类别标签
        • 1)figure/figcaption
        • 2)blockquote
        • 3)dl/dt/dd
      • (3)语义化 - 文本标签
        • 1)cite
        • 2)time
        • 3)address
        • 4)mark
        • 5)code
        • 6)small
      • (4)语义化 - 多媒体元素标签
        • 1)img
        • 2)picture
        • 3)音视频
  • 🧐六、HTML解析
    • 1. DOM文档对象模型
    • 2. HTML的解析过程
  • 🙃七、结束语
  • 🐣彩蛋 One More Thing

🥳序言

众所周知,html是前端刚开始学习时的第一门语言。然而,在我们日常的实际开发中,一直注重的是实践和应用。但是殊不知的是,很多小伙伴都忽略了很多关于 html 相关的基础入门知识。那么在接下来的文章中,将讲解 html 是什么,其发展历史又是怎么样的?还有 html 如何使用,以及如何写出更加语义化的 html

接下来我们来一起学习⑧~🧐

😋一、网页三大元素

大家都知道,对于网页来说,有三大基本元素。那就是大家所熟悉的 htmlcssjs 。对于这三者来说,主要描述如下:

  • html :网页的基本结构;

  • css :网页的展现效果;

  • js :网页的功能行为。

😜二、HTML简介

1. 定义

HTML ,全称为 HyperText Markup Language , 即超文本标记语言),它是用于构建网页基本结构及其内容的一门标记语言。接下来我们来看一下超文本和标记语言分别是什么:

超文本: 文本中包含指向其他文本的链接;

标记语言: 将文本以及文本相关的其他信息结合起來,展现出文档结构,如: HTMLXMLKMLMarkdown 等等。

2. 发展历史

看完定义之后,我们再来看下 HTML 的一个发展历史。具体如下:

  • 伯纳斯-李1989年提出了基于互联网的超文本系统。
  • 1993年 IETF (互联网工程任务组)发布首个 HTML 提案,由此, HTML 语言的第一版就诞生啦。
  • 在经历过几个草案之后, HTML 2.01995年发布,包括了基于表单的文件上传、表格、国际化等功能。
  • 1994年 W3C 成立,随后接管了 HTML 的标准化工作,并在1997年发布了 HTML3.2
  • 随后发布的 HTML4.0 中采用许多特定浏览器的元素类型和属性。
  • 2014年的时候, HTML5 作为 W3C 的推荐标准发布。

😝三、HTML结构

1. 引例阐述

我们来看一段 HTML 代码,具体如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试站点</title>
</head>
<body><p class="editor-note">周一家的猫咪很可爱!</p><img src="cat.png" alt="猫咪图片">
</body>
</html>

大家可以看到,在上面这段 HTML 代码中,包括 htmlheadmetatitlebody 等等标签,由上面的这些标签,就构成了 html 的结构。

接下来我们来看一下 html 具有哪些特点。

2. 特点

  • HTML 文档包含多个 HTML 元素,元素具备不同的特性。
  • HTML 元素 = 开始标签 + 结束标签 + 元素内容
  • 一些元素只有一个标签,如 imginputbr 等。
  • HTML 元素标签不区分大小写
  • 元素可以嵌套在其他元素中间。
  • 元素可以拥有属性,属性包含元素的额外信息。

接下来我们来看下以上这几个标签各自的作用。

3. HTML页面结构

(1)DOCTYPE

<DocTYPE HTML> ,常放在 HTML 文档最前面的位置,加上之后就会按照 W3CHTML5 标准来解析渲染页面。

(2)html

<html> ,是网页的根元素,包含整个页面的内容。

(3)head

<head> ,此标签对用户不可见,其中包括像面向搜索引擎的关键字页面描述字符编码声明CSS样式等内容。

(4)body

<body> ,该元素包含能够被用户访问到的内容,包括文本、图像、视频、游戏、音频等等内容。

(5)meta

<meta> ,常设置的内容有: charset/name/http-equiv 。下面给出一些常用的配置信息。

<meta charset="utf-8">定义文档字符编码
<meta name="keywords" content="HTML"> 关键字
<meta name="description" content="HTML基础">页面描述
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">主要用于移动端,定义设备屏幕上用来显示网页的区域
<meta http-equiv="expires" content="31 Dec 2021">http头部下面给出一个自定义meta的网站,大家可以自行查阅~
https://wiki.whatwg.org/wiki/MetaExtennsions

(6)title

<title> ,表示页面的标题,经常显示在浏览器的标签页上。

(7)style

<style> ,是 CSS 的样式。

(8)link

<link> ,表示跳转链接。下面给出几种常见的 link 方式。具体如下:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
当前页面的favicon<link rel="stylesheet" href="my-css-file.css">
链接到样式表<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
可替换的样式表

(9)script

<script> 表示可执行脚本。通常引用的方式如下:

<script type="text/javascript" src="javascript.js"></script>

下面我们来了解它的两个属性:

  • defer:立即下载,延迟执行,表示脚本可以等到 dom 被完全解析和显示之后再执行,只对外部脚本有效。有 defer 属性的脚本会阻止 DOMContentLoaded 事件,直到脚本被加载并且解析完成。
  • async:立即下载脚本,且不妨碍其他操作,比如在下载其他资源或者加载其他脚本的时候,只对外部脚本有效。

我们用一张图来展示这两者的区别,具体如下图:

async和defer

大家可以看到, async 支持在遇到 js 文件时,立即下载脚本。而对于 defer 来说,它只能前面的 js

内容先全部加载完,再进行执行操作。

😛四、常用元素

1. 三种常用元素

(1)内联元素

  • 只占据它自己对应标签的边框所包含的空间
  • 只能容纳文本或其他内联元素。
  • 只能通过修改水平边距、边框或者行高的方式改变尺寸。
  • 常用的内联元素有: <a><span><br><i><em><strong><label><q><var><cite><code>

(2)行内块级元素

  • 元素在行内排列,不会独占一行。
  • 支持设置宽高以及垂直边距、边框。
  • 常用的内联元素: <img><input><td>

(3)块级元素

  • 占据其父元素的整行,总是从新的一行开始。
  • 能容纳其他块元素或者内联元素。
  • 可以控制宽高行高边距边框等改变其尺寸。
  • 常用的块级元素: <div><p><h1>-<h6><ol><ul><dl><table><address><blockquote><form>

2. 图例

下面我们用一张图来来了解这三种常用该元素的区别。具体如下图:

3种常用元素

😏五、语义化

1. 定义

所谓语义化,即根据内容的结构,选择合适的标签来构建出便于开发者阅读的可维护性更高的代码结构,同时能够让机器更好地解析。如下所示:

<div class="header"></div>
<div class="section"><div class="article"><div class="figure"><img><div class="figcaption"></div></div></div>
</div>
<div class="footer"></div>
<header></header>
<section><section><figure><img><figcaption></figcaption></figure></section>
</section>
<footer></footer>

2. 常见语义化标签解析

接下来我们来看一下一些常见的语义化标签,具体如下。

(1)语义化 - 区块类别标签

1)header

  • header 主要用于展现一些介绍性信息。
  • 通常包含⼀组介绍性或是辅助导航的元素,如标题、 Logo 、搜索框、作者名称等 。
  • 不能放在 <footer><address> 或者另⼀个 <header> 元素内部。

比如:

<header><h1>HTML</h1><P><time pubdate datetime="2021-08-15"></time></P>
</header>

2)nav

  • 在当前⽂档或其他⽂档中提供导航链接,如菜单、⽬录、索引等。
  • ⽤来放置⼀些热⻔的链接,不常⽤的链接通常放到 footer ⾥置于底部。

比如:

<nav><ol><li><a href="#">HTML</a></li><li><a href="#">css</a></li><li><a href="#">js</a></li></ol>
</nav>

3)article

  • 独⽴的⽂档、页面、应⽤、站点。
  • 可独⽴分配的或可复⽤的结构,如论坛帖⼦、新闻⽂章、博客、⽤户提交的评论、交互式组件等。

比如:

<article class="forecast"><h1>广州的天气预报</h1><article class="day-forecast"><h2>2021.08.15</h2><p>多云</p></article><article class="day-forecast"><h2>2021.08.16</h2><p>晴天</p></article></article>

4)section

  • 按主题将内容分组,通常会有标题。
  • <section> 通常出现在⽂档的⼤纲中。
  • 不要把 <section> 作为普通容器来使用,比如说用于美化片段样式,此时用 <div> 更合适。
  • 如果元素里边是独立的整块的内容,可以单独发布,则更适合用 <article>

比如:

<h1>选择一个苹果</h1>
<section><h2>介绍</h2><p>这个文档将提供一个引导,帮助选择一个正确的苹果</p>
</section>
<section><h2>标准</h2><p>对于选择一个苹果来说,有很多不同的标准,比如尺寸,颜色,甜度等等标准</p>
</section>

5)aside

  • 表示一个和其余页面内容几乎无关的部分,或者说单独拆出来不会影响整体的内容。
  • 通常放在侧边栏,用于展示广告、 tips 、引用内容等等。

比如:

<p>今天天气还不错,我决定去踏青</p>
<aside><h4>野餐</h4><P>准备号各种各样的食物,大概早上9点钟出发去野餐。</P>
</aside>

6)footer

  • 表示最近一个章节的页脚。
  • 通常包含该章节作者、版权数据或者文档链接等信息。
  • footer 内的元素不属于章节内容,不包含在大纲中。

比如:

<footer><h1>版权号 by monday</h1><P><time pubdate datetime="2021-08-15"></time></P>
</footer>

(2)语义化 - 分组类别标签

1)figure/figcaption

  • <figure> 包裹被独⽴引⽤的内容:图表、插图、代码等,通常会有个标题;
  • <figcaption> 与其相关联的图表的说明/标题,通常位于 <figure> 的第⼀个或最后⼀个。

比如:

<figure><img src="https://developer.mozilla.org/static/img/favicon144.png" alt="A robotic monster over the letters MDN."><figcaption>MDN logo</figcaption>
</figure>

2)blockquote

  • 块级引⽤元素。
  • cite 属性表示该来源的 url

比如:

<figure><blockquote cite="https://www.huxley.net/bnw/one.html"><p>Words can be X-rays, if you use them properly - they'll go through anything.</p></blockquote><figcaption>-Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>

3)dl/dt/dd

  • 用于描述一组键值对。
  • 通常用于元数据、术语定义等场景。
<dl><dt>FireFox</dt><dd>A free, open source, cross-platform.</dd>
</dl>

(3)语义化 - 文本标签

1)cite

  • <cite> 元素通常用于引用作品标题。
  • 包括论文、文件、书籍、电影等的引用。

2)time

  • 机器可读的时间和日期。
  • datetime 表示此元素关联的时间日期,若不指定则该元素不会被解析为日期。

3)address

  • 表示某个人或组织的联系信息。

4)mark

  • 在引用中使用,表示需要引起注意。

5)code

  • 表示代码片段。

6)small

  • 表示免责声明、注意事项等等信息。

(4)语义化 - 多媒体元素标签

1)img

  • src 属性是必须的,嵌⼊图⽚的⽂件路径。
  • alt 属性包含⼀条对图像的⽂本描述,⾮强制。屏幕阅读器会将这些描述读给需要使⽤阅读器的使⽤者听,让他们知道图像的含义。图像⽆法加载时(⽹络错误、内容被屏蔽或链接过期时),浏览器会在⻚⾯上显示 alt 属性中的⽂本。
  • decoding 解码⽅式:异步、同步。
  • loading 懒加载。

2)picture

  • 元素通过包含零或多个 <source> 元素和⼀个 <img> 元素来为不同的。
  • 显示/设备场景提供相应的图像版本。
  • media 属性:依据的媒体条件渲染相应的图⽚,类似媒体查询。
  • type 属性: MIME 类型,根据浏览器⽀持性渲染相应的图⽚。

3)音视频

  • 所谓音视频标签,即 <video></video><audio></audio> 标签。

  • src 属性是必须的,嵌⼊视频⽂件路径。

  • controls 表示是否展示浏览器⾃带的控件,同时可以创建⾃定义控件。

  • autoplay 是否⾃动播放。

  • source 元素表示视频的可替代资源(不同格式、清晰度,读取失败或⽆法解码时可以依次尝试)。

比如:

<video controls><source src="/flower.webm" type="video/webm"><source src="/flower.mp4" type="video/mp4">Sorry, your brower doesn't support embedded videos.
</video><audio controls src="/xxx.mp3">Your brower deos not support the <code>audio</code> element.
</audio><video controls src="/friday.mp4"><track default kind="captions" srclang="en" src="friday.vtt"/>Sorry, your brower doesn't support embedded videos.
</video>

🧐六、HTML解析

我们来看一下HTML是如何进行解析的。

1. DOM文档对象模型

所谓 DOM ,即对节点的结构化进行表述,并定义了一种方式可以使程序对该结构进行访问,它将 web 页面和脚本语言链接起来。

2. HTML的解析过程

对于 DOM 树来说,其构建过程如下:

  • 首先先构建 DOM 树;
  • 其次要对样式进行计算,此时构建 CSSOM 树;
  • 接着将 DOMCSSOM 组合成一个 Render 渲染树;
  • 现在,浏览器将对整个页面的布局进行计算;
  • 最后,绘制页面。

具体如下图所示:

HTML解析

🙃七、结束语

在上文中,我们了解到了网页的三大元素, HTML 的简介、结构和其解析过程。当然,同样很重要的一点是语义化标签。对于语义化标签来说,它可以很一目了然地让我们知道是什么意思,很大程度上地提升了开发效率。

到这里,关于 HTML 的基础知识讲到这里就结束啦!希望对大家有帮助~

🐣彩蛋 One More Thing

👉关注公众号星期一研究室,第一时间关注优质文章,更多精选专栏待你解锁~

👉如果这篇文章对你有用,记得留个脚印jio再走哦~

👉以上就是本文的全部内容!我们下期见!👋👋👋

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/307893.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode637. 二叉树的层平均值(层序遍历04)

一:题目 二&#xff1a;上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(n…

leetcode429. N 叉树的层序遍历(层序遍历05)

一:题目 二&#xff1a;上码 /* // Definition for a Node. class Node { public:int val;vector<Node*> children;Node() {}Node(int _val) {val _val;}Node(int _val, vector<Node*> _children) {val _val;children _children;} }; */class Solution { publi…

10分钟带你探索css中更为奇妙的奥秘

10分钟带你探索css中更为奇妙的奥秘&#x1f4d6;序言&#x1f4c3;一、css是啥1. CSS是什么2. 诞生背景3. 基础规则&#xff08;1&#xff09;一些基础规则&#xff08;2&#xff09;其他重要的语法&#xff08;3&#xff09;选择器&#xff08;4&#xff09;层叠与继承1&…

将微服务部署到 Azure Kubernetes 服务 (AKS) 实践

介绍本文的目的是&#xff1a;通过使用 DockerHub 和 Azure Kubernetes Service (AKS) 将之前 使用 .NET 和 Docker 构建的微服务 部署到微软 Azure 云上&#xff0c;来介绍微服务的基本部署过程。推送到 Docker HubDocker Hub 是世界上最大的容器镜像库和社区。许多产品&#…

leetcode 515. 在每个树行中找最大值(层序遍历06)

一:题目 二&#xff1a;上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(n…

前端只是切图仔?来学学给开发人看的UI设计

给开发人看的UI设计&#x1f5bc;️序言&#x1f3a8; 一、背景1. 想做一个好的作品2. 没有专业UI&#x1f9f5;二、功能导向1. 设计中最重要的事2. 例子阐述2. 简约设计3. 设计简单的、完整的功能&#x1f9f6;三、设计原则1. 层级&#xff08;1&#xff09;层级是什么&#x…

Debian 新负责人发表演讲:Debian 的现状与面临的一些问题

喜欢就关注我们吧&#xff01;Debian GNU/Linux 年度主要的会议 DebConf20 已于近期举办&#xff0c;4 月份新当选的 Debian 项目负责人 Jonathan Carter 在会上发表了演讲&#xff0c;概述了 Debian 的现状与面临的一些问题。Debian 的财务稳定在 $896065 美元左右&#xff0c…

leetcode116. 填充每个节点的下一个右侧节点指针(层序遍历07)

一:题目 二:上码 /* // Definition for a Node. class Node { public:int val;Node* left;Node* right;Node* next;Node() : val(0), left(NULL), right(NULL), next(NULL) {}Node(int _val) : val(_val), left(NULL), right(NULL), next(NULL) {}Node(int _val, Node* _left,…

程序员修神之路--略懂数据库集群读写分离而已

“灵魂拷问&#xff1a;解决数据库读写瓶颈有哪些解决方案呢&#xff1f;这些方案解决了什么问题呢&#xff1f;这些方案有那些优势和劣势呢&#xff1f;一个可以抵抗高并发流量系统的背后必定有一个高性能的数据库集群&#xff0c;就像每一个成功的男人背后总有一个强势的女人…

一张网页带你了解中秋节的前世今生

一张网页带你了解中秋节的前世今生&#x1f317;序言一、&#x1f319;题材选取1. 诗词赏析2. 原型图抢先看3. 界面设计二、&#x1f31b;编码阶段1. 项目目录结构2. html设计&#xff08;1&#xff09;nav结构设计&#xff08;2&#xff09;banner结构设计&#xff08;3&#…

leetcode117. 填充每个节点的下一个右侧节点指针 II(层序遍历08)

一&#xff1a;题目 二&#xff1a;上码 /* // Definition for a Node. class Node { public:int val;Node* left;Node* right;Node* next;Node() : val(0), left(NULL), right(NULL), next(NULL) {}Node(int _val) : val(_val), left(NULL), right(NULL), next(NULL) {}Node(…

Linq 下的扩展方法太少了,您期待的 MoreLinq 来啦

一&#xff1a;背景 1. 讲故事前几天看同事在用 linq 给内存中的两个 model 做左连接&#xff0c;用过的朋友都知道&#xff0c;你一定少不了一个叫做 DefaultIfEmpty 函数&#xff0c;这玩意吧&#xff0c;本来很流畅的 from...in...join, 突然搞进来这么一个函数&#xff0c;…

紧跟月影大佬的步伐,一起来学习如何写好JS(上)

如何写好JS - 三大原则&#x1f302;序言一、☂️什么才是好的JS代码&#xff1f;二、&#x1f9f5; 写好JS的一些原则1. 各司其职&#x1f44b;&#xff08;1&#xff09;定义&#xff08;2&#xff09;例子阐述2. 组件封装&#x1f90f;&#xff08;1&#xff09;定义&#x…

leetcode104. 二叉树的最大深度(层序遍历09)

一:题目 二:上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}*…

.NET Core 集成JWT认证

JWT(Json web token)就不用过多的介绍了&#xff0c;在 .NET Core 开发中使用JWT进行认证也是比较常见的&#xff0c;而且接入过程也比较简单&#xff0c;随便配置配置就好了。要想使用JWT&#xff0c;仅仅只需要在项目中引用微软的一个认证组件。Install-Package Microsoft.As…

leetcode111. 二叉树的最小深度(层序遍历10)

一:题目 二&#xff1a;上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(n…

拥抱.NET 5,可以从这个极速开发的Web应用框架开始

今年年初&#xff0c;微软 .NET 程序管理总监 Scott 在博客中表示&#xff0c;发布 .NET 5 的首个预览版&#xff0c;并提供SDK 和运行库下载。Scott 表示&#xff0c;.NET 5 是 .NET Framework 和 .NET Core 的未来&#xff0c;最终将成为一个统一平台&#xff0c;.NET5 将包含…

组件库实战 | 教你如何设计Web世界中的表单验证

教你如何设计Web世界中的表单验证&#x1f4ac;序言&#x1f5ef;️一、验证输入框ValidateInput1. 设计稿抢先知2. 简单的实现3. 抽象验证规则4. v-model5. 使用$attrs支持默认属性&#x1f4ad;二、验证表单ValidateForm1. 组件需求分析2. 使用插槽 slot3. 父子组件通讯&…

leetcode101. 对称二叉树(两种做法)

一&#xff1a;题目 二&#xff1a;上码 方法一&#xff1a;队列 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int …

微服务架构下的测试策略

源宝导读&#xff1a;最近几年&#xff0c;微服务架构越来越火爆&#xff0c;逐渐被企业所采用。随着软件架构的变化&#xff0c;对应的软件测试策略需要作何调整呢&#xff1f;本文将介绍云客在微服务架构下的测试策略。一、云客测试策略模型策略分析行业内的测试策略是一个先…