众所周知,html是前端刚开始学习时的第一门语言。然而,在我们日常的实际开发中,一直注重的是实践和应用。但是殊不知的是,很多小伙伴都忽略了很多关于 html
相关的基础入门知识。那么在接下来的文章中,将讲解 html
是什么,其发展历史又是怎么样的?还有 html
如何使用,以及如何写出更加语义化的 html
。
接下来我们来一起学习⑧~🧐
大家都知道,对于网页来说,有三大基本元素。那就是大家所熟悉的 html
, css
和 js
。对于这三者来说,主要描述如下:
html
:网页的基本结构;
css
:网页的展现效果;
js
:网页的功能行为。
HTML
,全称为 HyperText Markup Language
, 即超文本标记语言),它是用于构建网页基本结构及其内容的一门标记语言。接下来我们来看一下超文本和标记语言分别是什么:
超文本: 文本中包含指向其他文本的链接;
标记语言: 将文本以及文本相关的其他信息结合起來,展现出文档结构,如: HTML
、 XML
、 KML
、 Markdown
等等。
看完定义之后,我们再来看下 HTML
的一个发展历史。具体如下:
伯纳斯-李
在1989年提出了基于互联网的超文本系统。IETF
(互联网工程任务组)发布首个 HTML
提案,由此, HTML
语言的第一版就诞生啦。HTML 2.0
于1995年发布,包括了基于表单的文件上传、表格、国际化等功能。W3C
成立,随后接管了 HTML
的标准化工作,并在1997年发布了 HTML3.2
。HTML4.0
中采用许多特定浏览器的元素类型和属性。HTML5
作为 W3C
的推荐标准发布。我们来看一段 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
代码中,包括 html
、 head
、 meta
、title
和 body
等等标签,由上面的这些标签,就构成了 html
的结构。
接下来我们来看一下 html
具有哪些特点。
HTML
文档包含多个 HTML
元素,元素具备不同的特性。HTML
元素 = 开始标签 + 结束标签 + 元素内容。img
、 input
、 br
等。HTML
元素标签不区分大小写。接下来我们来看下以上这几个标签各自的作用。
<DocTYPE HTML>
,常放在 HTML
文档最前面的位置,加上之后就会按照 W3C
的 HTML5
标准来解析渲染页面。
<html>
,是网页的根元素,包含整个页面的内容。
<head>
,此标签对用户不可见,其中包括像面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等内容。
<body>
,该元素包含能够被用户访问到的内容,包括文本、图像、视频、游戏、音频等等内容。
<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 复制代码
<title>
,表示页面的标题,经常显示在浏览器的标签页上。
<style>
,是 CSS
的样式。
<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"> 可替换的样式表 复制代码
<script>
表示可执行脚本。通常引用的方式如下:
<script type="text/javascript" src="javascript.js"></script> 复制代码
下面我们来了解它的两个属性:
defer
:立即下载,延迟执行,表示脚本可以等到 dom
被完全解析和显示之后再执行,只对外部脚本有效。有 defer
属性的脚本会阻止 DOMContentLoaded
事件,直到脚本被加载并且解析完成。async
:立即下载脚本,且不妨碍其他操作,比如在下载其他资源或者加载其他脚本的时候,只对外部脚本有效。我们用一张图来展示这两者的区别,具体如下图:
大家可以看到, async
支持在遇到 js
文件时,立即下载脚本。而对于 defer
来说,它只能前面的 js
内容先全部加载完,再进行执行操作。
<a>
、 <span>
、 <br>
、 <i>
、 <em>
、 <strong>
、 <label>
、 <q>
、 <var>
、 <cite>
、 <code>
。<img>
、 <input>
、 <td>
。<div>
、 <p>
、 <h1>-<h6>
、 <ol>
、 <ul>
、 <dl>
、 <table>
、 <address>
、 <blockquote>
、 <form>
。下面我们用一张图来来了解这三种常用该元素的区别。具体如下图:
所谓语义化,即根据内容的结构,选择合适的标签来构建出便于开发者阅读的可维护性更高的代码结构,同时能够让机器更好地解析。如下所示:
<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> 复制代码
接下来我们来看一下一些常见的语义化标签,具体如下。
header
主要用于展现一些介绍性信息。Logo
、搜索框、作者名称等 。<footer>
、 <address>
或者另⼀个 <header>
元素内部。比如:
<header> <h1>HTML</h1> <P><time pubdate datetime="2021-08-15"></time></P> </header> 复制代码
footer
⾥置于底部。比如:
<nav> <ol> <li><a href="#">HTML</a></li> <li><a href="#">css</a></li> <li><a href="#">js</a></li> </ol> </nav> 复制代码
比如:
<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> 复制代码
<section>
通常出现在⽂档的⼤纲中。<section>
作为普通容器来使用,比如说用于美化片段样式,此时用 <div>
更合适。<article>
。比如:
<h1>选择一个苹果</h1> <section> <h2>介绍</h2> <p>这个文档将提供一个引导,帮助选择一个正确的苹果</p> </section> <section> <h2>标准</h2> <p>对于选择一个苹果来说,有很多不同的标准,比如尺寸,颜色,甜度等等标准</p> </section> 复制代码
tips
、引用内容等等。比如:
<p>今天天气还不错,我决定去踏青</p> <aside> <h4>野餐</h4> <P>准备号各种各样的食物,大概早上9点钟出发去野餐。</P> </aside> 复制代码
footer
内的元素不属于章节内容,不包含在大纲中。比如:
<footer> <h1>版权号 by monday</h1> <P><time pubdate datetime="2021-08-15"></time></P> </footer> 复制代码
<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> 复制代码
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> 复制代码
<dl> <dt>FireFox</dt> <dd>A free, open source, cross-platform.</dd> </dl> 复制代码
<cite>
元素通常用于引用作品标题。datetime
表示此元素关联的时间日期,若不指定则该元素不会被解析为日期。src
属性是必须的,嵌⼊图⽚的⽂件路径。alt
属性包含⼀条对图像的⽂本描述,⾮强制。屏幕阅读器会将这些描述读给需要使⽤阅读器的使⽤者听,让他们知道图像的含义。图像⽆法加载时(⽹络错误、内容被屏蔽或链接过期时),浏览器会在⻚⾯上显示 alt
属性中的⽂本。decoding
解码⽅式:异步、同步。loading
懒加载。<source>
元素和⼀个 <img>
元素来为不同的。media
属性:依据的媒体条件渲染相应的图⽚,类似媒体查询。type
属性: MIME
类型,根据浏览器⽀持性渲染相应的图⽚。所谓音视频标签,即 <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是如何进行解析的。
所谓 DOM
,即对节点的结构化进行表述,并定义了一种方式可以使程序对该结构进行访问,它将 web
页面和脚本语言链接起来。
对于 DOM
树来说,其构建过程如下:
DOM
树;CSSOM
树;DOM
和 CSSOM
组合成一个 Render
渲染树;具体如下图所示:
在上文中,我们了解到了网页的三大元素, HTML
的简介、结构和其解析过程。当然,同样很重要的一点是语义化标签。对于语义化标签来说,它可以很一目了然地让我们知道是什么意思,很大程度上地提升了开发效率。
到这里,关于 HTML
的基础知识讲到这里就结束啦!希望对大家有帮助~
创作不易,如果对大家有所帮助,希望大家点赞支持,有什么问题也可以在评论区里讨论😄~
如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star: http://github.crmeb.net/u/defu 不胜感激 !来自 “开源独尊 ” ,链接: https://ym.baisou.ltd/post/854.html
|