这是我参加「第四届青训营 」笔记创造活动的第6天

由于之前这节课请假了，一向没机会做笔记，所以课程结束后借着有空，再来复习一边课程，所以记录一下笔记。

1. HTML 起步

1.1 网页的“三驾马车”

HTML基础 | 青训营笔记

  • HTML：网页的根本结构
  • CSS：网页的展现作用
  • JavaScript：网页的功能与行为

今天要学习/复习的便是网页的根本结构HTML，能够说这便是一个网页的“骨架”

1.2 HTML 是什么

HTML 全称 HyperText Markup Language 翻译过来便是 超文本符号言语 是用来构建网页根本结构及其内容的符号言语

那，什么是超文本，什么又是符号言语呢？

  • 超文本：文本中包含指向其他文本的链接
  • 符号言语：将文本以及文本相关的其他信息结合起来，展现出关于文档的结构。常见的符号言语有HTML、XML、Markdown等

疑问符号言语是编程言语嘛？ 回答不是，符号言语不具有编程言语的逻辑与行为的能力

1.3 HTML的开展前史

  • 1989 伯纳斯 李在1989年提出了根据互联网的超文本体系
  • 1993 1993年IETF(互联网工程使命组)发布首个HTML提案,由此HTML言语第一版诞生
  • 1995 在经历过几个草案之后HTML2.0于1995年发布，包含了根据表单的文件上传、表格、国际化等功能
  • 1997 1994年W3C成立，随后接管了HTML的规范化工作，并在1997年发布了HTML3.2
  • 1997 随后发布的 HTML4.0 中采用许多特定阅览器的元素类型和特点
  • 2014 2014年HTML5作为W3C引荐规范发布

从呈现至今也不过二三十年嘛~是个新常识，必须搞懂他！！

2. HTML 深化

下面的内容引荐你按下键盘上的F12键，选到Elements选项中，跟着网站的html文件，一起探索HTML文档的结构

2.1 HTML元素

HTML文档包含多个HTML元素，元素具备不同的特性

HTML基础 | 青训营笔记

  • HTML元素 = 开端标签 + 结束标签 + 元素内容
  • 一些元素只要一个标签，如img、input、br等
  • HTML元素标签不区分大小写
  • 元素能够嵌套在其他元素中间
  • 元素能够具有特点，特点包含有元素的额定信息

其实在我平时运用和阐明的时分都把元素直接称为标签，所以后面的博文，可能会混用这两种说法~

2.2 HTML结构

虽然HTML元素能够恣意组合，可是HTML是有一些固定的结构的~

先来看一个规范的HTML文档的示例

<!DOCTYPE html>
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title> 页面标题</title> 
    </head> 
    <body> 
        <h1>我的第一个标题</h1> 
        <p>我的第一个段落。</p> 
    </body> 
</html>
  • <!DOCTYPE html> 放在HTML文档最前面，阅览器会按照W3C的HTML5规范来解析烘托页面
  • <html> 根元素，包含整个页面的内容
  • <head> 对用户不行见，其间包含例如面向搜索引擎的关键字、页面描绘、字符编码声明、CSS款式等
  • <body> 该元素包含能够被用户访问到的内容，包含文本、图画、视频、游戏、音频等

HTML基础 | 青训营笔记

下面咱们来深化了解一下<head>标签和<body>标签以及一个很重要的<script>标签

2.3 <head> 标签

<meta>：元数据标签

作用 阐明文档、描绘数据的标签

下面是主页的html文件中meta标签的内容

HTML基础 | 青训营笔记

meta标签分为三类： charset/name/http-equiv

  1. charset 界说文档字符编码
<meta charset="utf-8">
  1. name 用名/值对界说元数据 用来 阐明文档

① keywords 页面关键字

<meta name="keywords" content=",稀土,Vue.js,前端面试题,nginx配置,Kotlin,RxJava,React Native,灵敏开发,Python">

② description 页面描绘

这儿能够去看各大网站的页面描绘与关键字，要写好可是一个技术活~ 由于这有利于网站的SEO

主页 页面描绘 示例

<meta name="description" content="是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品司理用的 Medium。的技术文章由稀土上聚集的技术大牛和极客共同修正为你筛选出最优质的干货,其间包含：Android、iOS、前端、后端等方面的内容。用户每天都能够在这儿找到技术国际的头条内容。与此一起,内还有沸点、翻译计划、线下活动、专栏文章等内容。即便你是 GitHub、StackOverflow、开源我国的用户,咱们相信你也能够在这儿有所收获。">

百度主页 页面描绘 示例

<meta name="description" content="全球抢先的中文搜索引擎、致力于让网民更快捷地获取信息，找到所求。百度超越千亿的中文网页数据库，能够瞬间找到相关的搜索结果。">

③ author 页面作者

<meta name="author" content="君莫惜">

④ viewport 界说设备屏幕上用来显现网页的区域（首要用于移动端）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=0">
  1. http-equiv 模仿 HTTP 标头字段

此例将标头字段expires用于指定网页缓存时刻的期限，一旦网页缓存时刻过期，网页就必须从服务器上重新缓存一次，才干够持续阅览页面

<meta http-equiv="expires" content="25 Aug 2021">

此例将标头字段refresh的值设置为5，其作用是让阅览器每隔5秒就再次载入页面

<meta http-equiv="refresh" content="5">

此例来自百度主页html文件，是另一种声明HTML页面所用字符编码的方法

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  1. 当然还能够自界说meta标签

⾃界说meta，⽤于向特定⽹站供给⼀些信息wiki.whatwg.org/wiki/MetaEx…

<title> 标题标签

页面的标签。显现在阅览器的标签页上

<title>【青训营】HTML根底 - 语义化标签 - 阅览器烘托进程 - 笔记及拓宽</title>

<style> 款式标签

这儿是咱们熟悉的放CSS款式的标签，可用来界说HTML文档内嵌的CSS款式

HTML基础 | 青训营笔记

<link> 链接标签

链接标签用来指定外部资源（CSS款式表是最典型的情况），建立HTML文档与外部资源的联系

  • rel 特点用来阐明HTML页面与相关资源的联系类型，如 icon、license、help、author
  • type 特点用来指定所相关资源的MIME类型，如text/css、image/x-icon
  • href 特点用来指定外部资源的URL

HTML基础 | 青训营笔记

当时⻚⾯的favicon

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

链接到款式表

<link rel="stylesheet" href="my-css-file.css">

2.4 <body>标签

在此标签内写的结构，是用户能够看到的，能够将这儿的元素分为三类

HTML基础 | 青训营笔记

内联元素 inline

  • 只占有它对应标签的边框所包含的空间
  • 只能容纳⽂本或其他内联元素
  • 只能经过修正⽔平边距、边框或许⾏⾼的⽅式改动尺⼨

常见的内联元素有：<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>

块级元素 block

  • 占有其⽗元素的整⾏，总是重新⾏上开端
  • 能容纳其他块元素或许内联元素
  • 能够操控宽⾼、⾏⾼、边距、边框等改动其尺⼨

常⽤的块级元素： <div> <p> <h1>-<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>

行内块级元素 inline-block

  • 元素在⾏内摆放，不会独占⼀⾏
  • ⽀持设置宽⾼以及垂直边距、边框

常⽤的内联元素：<img>、<input>、<td>

2.5 <script> 可履行脚本标签

能够经过src特点引入外链的js，也能够在标签体里写js代码（内嵌脚本）

PS: 设置了src特点的script元素不能含有任何内容。不能用同一个script元素既界说内嵌脚本又引用外部脚本。

<script type="text/javascript" src="javascript.js"> </script>
<script type="text/javascript"> console.log('I am YK菌') </script>

<script>标签虽然能够放在文档的恣意位置，可是一般仍是引荐放在<head>标签中，方便查看网页用到哪些脚本

等等，你是否还记得之前学习中遇到过说，有些JS应该放页面的底部，由于有些脚本需求操作DOM，要等DOM都解析好了才干操作，别慌<script>标签中有两个特点，能够推迟加载与运行js文件代码

  • defer：⽴即下载，推迟执⾏，表明脚本能够比及dom被完全解析和显现之后在执⾏，只对外部脚本有效。有defer 特点的脚本会阻⽌DOMContentLoaded 事情，直到脚本被加载而且解析完结。
  • async：⽴即下载脚本，不阻碍其他操作，⽐如下载其他资源或许加载其他脚本，只对外部脚本有效
  • 没有 defer 或 async，阅览器会立即加载并履行指定的脚本，也便是说不等候后续载入的文档元素，读到就加载并履行。

这张图很形象的展现了js异步加载履行方法的区别，蓝色表明加载js，红色表明履行js，绿色表明解析HTML

HTML基础 | 青训营笔记

defer-script 加载时HTML并未停止解析，这两个进程是并行的。整个 document 解析结束且 defer-script 也加载完结之后，会履行一切由 defer-script 加载的 JavaScript 代码，然后触发 DOMContentLoaded 事情。

async-script与 defer-script的区别在于，假如已经加载好，就会开端履行。这种方法加载的 JavaScript 依然会堵塞 load 事情 （加载好就会履行）。 async-script 可能在 DOMContentLoaded 触发之前或之后履行，但一定在 load 触发之前履行

在加载多个JS脚本的时分，async-script是无次序的加载，而defer-script是有次序的加载。

补充常识： window.onload 与 DOMContentLoaded 的区别

  • window.onload资源悉数加载完结才干履行，包含图片
  • DOMContentLoadedDOM烘托完结即可，图片可能尚未下载

3. 阅览器烘托进程

  1. 构建DOM树 HTML字符串描绘了一个页面的结构，阅览器会把HTML结构字符串解析转换DOM树形结构。

HTML基础 | 青训营笔记

  1. 款式核算，构建CSSOM树CSS 解析CSS会发生CSS规则树，它和DOM结构比较像。
  2. 加载js脚本文件 经过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree。
  3. 将DOM和CSSOM组合成⼀个Render树 解析完结后，阅览器引擎会经过DOM Tree 和 CSS Rule Tree 来结构 Rendering Tree。

HTML基础 | 青训营笔记

  1. 布局核算
  2. 制作 最终经过调用操作体系Native GUI的API制作。

4. HTML5 语义化

最终，咱们来聊聊HTML5的标签语义化~ 为什么要有语义化标签？ 由于根据内容的结构，选择适宜的标签构建出便于开发者阅览的可维护性更⾼的代码结构，一起能够让机器更好地解析。

HTML基础 | 青训营笔记

运用语义化前都用div标签，不太好读~~

4.1 区块

HTML基础 | 青训营笔记

<header>

  • 展现介绍性信息
  • 一般包含⼀组介绍性或是辅助导航的元素，如标题、Logo、搜索框、作者名称等
  • 不能放在<footer>、<address> 或许另⼀个<header> 元素内部
<header>
    <h1>That good</h1>
    <p><time pubdate datetime="2022-08-24"></p>
</header>

<nav>

  • 在当时⽂档或其他⽂档中供给导航链接，如菜单、目录、索引等
  • ⽤来放置⼀些热⻔的链接，不常⽤的链接一般放到<footer>里置于底部
<nav>
    <ol> 
        <li><a href="#"> 君莫惜 </a></li> 
        <li><a href="#"> 小明 </a></li> 
        <li><a href="#"> 小花 </a></li> 
    </ol> 
</nav>

<article>

  • 独⽴的⽂档、⻚⾯、应⽤、站点
  • 可独⽴分配的或可复⽤的结构，如论坛帖⼦、新闻⽂章、博客、⽤户提 交的谈论、交互式组件等
<article class="yk">
    <h1>君莫惜的博客</h1>
    <article class="markdown">
        <h2>=HTML根底</h2>
        <p>此博客点赞超越一百，我就倒立洗头</p>
    </article>
    <article class="markdown">
        <h2>=CSS根底</h2>
        <p>此博客谈论超越一百，我就坚持早起</p>
    </article>
</article>

<section>

  • 按主题将内容分组，一般会有标题
  • <section> 一般呈现在⽂档的⼤纲中
  • 不要把<section>作为普通容器来使⽤，⽐如说⽤于美化⽚段款式，此刻⽤<div>更适宜
  • 假如元素⾥边是独⽴的整块的内容， 能够单发布， 则更适合⽤<article> 
<h1>HTML根底</h1>
<section>
    <h2>介绍</h2>
    <p>.......</p>
</section>
<section>
    <h2>起步</h2>
    <p>咱们先来看看HTML的开展前史吧~.....</p>
</section>

<aside>

  • 表明⼀个和其余⻚⾯内容⼏乎⽆关的部分，或许说单独拆出来不会影响整体的内容
  • 一般放在侧边栏，⽤于展现⼴告、tips、引⽤内容等
<p>我今天一定要把这个笔记写完！！</p>
<aside>
    <h4>笔记</h4>
    <p>是青训营上课的笔记，里面教师都很厉害...</p>
</aside>

<footer>

  • 表明最近⼀个章节的⻚脚
  • 一般包含该章节作者、版权数据或许⽂档链接等信息
  • <footer>内的元素不属于章节内容，不包含在⼤纲中
<footer>
    <h1>别忘了一键三连哦~</h1>
    <p><time pubdate datetime="2022-08-24"></time></p>
</footer>

4.2 分组

<figure>/<figcaption>

  • <figure> 包裹被独⽴引⽤的内容：图表、插图、代码等，一般会有⼀个标题
  • <figcaption> 与其相相关的图表的阐明/标题，一般位于<figure>的第⼀个或最终⼀个
<figure>
    <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/38c860bc30174872adccbe9c7c04e4c7~tplv-k3u1fbpfcp-zoom-1.image" 
         alt="faceimg">
    <figcaption>logo</figcaption>
</figure>

<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>

这是作用：

Words can be X-rays, if you use them properly – they’ll go through anything.

-Aldous Huxley, Brave New World

<dl>/<dt>/<dd>

  • ⽤于描绘⼀组键值对
  • 一般⽤于元数据、术语界说等场景
<dl>
    <dt>君莫惜</dt>
    <dd>要插入了.</dd>
    <dd>好痛.</dd>
    <dd>emm.</dd>
</dl>

这是作用：

  • 君莫惜

    • 要插入了.
    • 好痛.
    • emm.

4.3 文本

<cite>

  • <cite>元素一般⽤于引⽤著作标题
  • 包含论⽂、⽂件、书本、电影等的引⽤

<time>

  • 机器可读的时刻和⽇期
  • datetime表明此元素相关的时刻⽇期，若不指定则该元素不会被解析为⽇期
<p>这个博客写于<time datetime="2022-08-24 12:00">Aug 20</time>.</p>

<address> 某个⼈或组织的联系信息

<mark> 在引⽤中使⽤，表明需求引起留意

<code> 代码⽚段

<small> 免责声明、留意事项等

4.4 多媒体元素

图⽚

<img>

  • src 特点是必须的，嵌⼊图⽚的⽂件途径
  • alt 特点包含⼀条对图画的⽂本描绘，⾮强制。屏幕阅览器会将这些描绘读给需求使⽤阅览器的使⽤者听，让他们知道图画的意义。图画⽆法加载时(⽹络过错、内容被屏蔽或链接过期时)，阅览器会在⻚⾯上显现alt 特点中的⽂本
  • decoding 解码⽅式：异步、同步
  • loading 懒加载
<img src="yk.jpg" alt="ykjun">

<picture>

  • 元素经过包含零或多个<source> 元素和⼀个<img> 元从来为不同的显现/设备场景供给相应的图画版别
  • media特点：依据的媒体条件烘托相应的图⽚，相似媒体查询
  • type特点：MIME类型，根据阅览器⽀持性烘托相应的图⽚
<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

HTML基础 | 青训营笔记

⾳视频

<video>/<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>