小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

本文同时参与掘力星计划，赢取创作大礼包，挑战创作激励金

前言

HTML全称为HyperText Markup Language，译为超文本标记语言。HTML不是一种编程语言，是一种描述性的标记语言。它的作用是：负责描述文档语义的语言。

网页三大要素

QQ截图20210928164628.png - HTML- 网页的基本结构

- CSS- 网页的展示效果

- JS- 网页的功能与行为

HTML简介

HTML全称HyperText Markup Language翻译过来就是超文本标记语言，是用于构建网页基本结构及其内容的标记语言。

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

标记语言将文本以及文本相关的其他信息结合起来，展现出关于文档结构，如：HTML、XML、KML、Markdown等

发展历史

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

HTML元素

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

HTML结构

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title> 页面标题</title> 
    </head> 
    <body> 
        <h1>我的第一个标题</h1> 
        <p>我的第一个段落。</p> 
    </body> 
</html>

<!DOCTYPE html>：放在HTML文档最前面的位置，加上之后就会按照W3C的HTML 5标准来解析渲染页面
<html>：根元素，包含整个页面的内容
<head>：对用户不可见，其中包含例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等
<body>：该元素包含能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等

HTML标签

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

http头部自定义meta,用于向特定网站提供一些信息https://wiki.whatwg.org/wiki/MetaExtensions
<meta "http-equiv="expires" content="31 Dec 2021">

`<title>` 标题标签

<title>：页面的标题，显示在浏览器标签页上

`<style>` 样式标签

<style>: CSS样式

`<link>` 链接标签

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

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

当前页面的favicon
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

链接到样式表
<link rel="stylesheet" href="my- CcSs file.css">

可替换的样式表(非所有浏览器支持)
<link href-"fancy.css" rel="alternate styleshet" type="text/css" title="Fancy">

`<script>` 可执行脚本标签

可执行脚本
<script type="text/javascript" src="javascript.js">

属性

defer立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后在执行，只对外部脚本有效。有defer属性的脚本会阻止DOMContentL oaded事件，直到脚本被加载并且解析完成。

async立即下载脚本，不妨碍其他操作，比如下载其他资源或载其他脚本，只对外部脚本有效。

body标签

在此标签内写的结构，是用户可以看到的，可以将这里的元素分为三类 QQ截图20210928225829.png

内联元素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>

HTML 语义化

根据内容的结构，选择合适的标签构建出便于开发者阅读的可维护性更高的代码结构，同时能够让机器更好地解析。 QQ截图20210928232519.png

语义化-区块

`<header>`

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

<header>
    <h1>HTML</h1>
    <p><time pubdate datetime="2021-9-28"></time></p>
</header>

`<nav>`

在当前文档或其他文档中提供导航链接，如菜单、目录、索引等
用来放置一些热门的链接，不常用的链接通常放到<footer>里置于底部

<nav>
    <ol>
        <li><a href=" #">HTML</a></li>
        <li><a href=" #">CSS</a></li>
        <li><a href=" #">JS</a></li>
    </ol>
</nav>

`<article>`

独立的文档、页面、应用、站点
可独立分配的或可复用的结构，如论坛帖子、新闻文章、博客、用户提交的评论、交互式组件等

<article class="forecast">   
    <h1>Weather forecast for Beijing</h1>
    <article class="day-forecast">
        <h2>15 August 2021</h2>
        <p>Rain.</p>
    </article>
    <article class="day-forecast">
        <h2>16 August 2021</h2>
        <p>Reriods rain.</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>Posted by: ByteFE</h1>
    <p><time pubdate datetime="2021-09-28"></time></p>
</footer>

可以看看MDN这个页面的语义化

语义化—分组

<figure>/<figcaption>

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

<figure>
    <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" 
         alt="鸟">
    <figcaption>img</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>

<dl>/<dt>/<dd>

用于描述-组键值对
通常用于元数据、术语定义等场景

<dl>
    <dt>Firefox</dt>
    <dd>青训营</dd>
    <dd>字节跳动</dd>
</dl>

语义化—文本

`<cite>`

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

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

`<time>`

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

<p>青训营<time datetime="2021-09-30 12:00">Aug 30</time>.</p>

<address>某个人或组织的联系信息
<mark>在引用中使用，表示需要引起注意
<code>代码片段
<small>免责声明、注意事项等

多媒体元素

图片

`<img>`

src 属性是必须的，嵌入图片的文件路径
alt 属性包含一条对图像的文本描述，非强制。屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。图像无法加载时(网络错误、内容被屏蔽或链接过期时)，浏览器会在页面上显示alt属性中的文本
decoding 解码方式：异步、同步
loading 懒加载

`<picture>`

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

音视频

`<video>/<audio>`

src 属性是必须的，嵌入视频文件路径
controls 是否展示浏览器自带的控件，可以创建自定义控件
autoplay 是否自动播放
source 元素表示视频的可替代资源(不同格式、清晰度，读取失败或无法解码时可以依次尝试)

HTML解析

DOM(文档对象模型)：对节点结构化表述，并定义了一种方式可以使程序对该结构进行访问将web页面和脚本语言连接起来。

构建DOM树
样式计算，构建CSSOM树
将DOM和CSSOM组合成- -个Render树
布局计算
绘制

参考

结语

如以上有错误的地方，请在评论区中指出，谢谢！

小可爱们看完点个赞再走一走~~

【青训营】- HTML 基础

前言

网页三大要素

HTML简介

发展历史

HTML元素

HTML结构

HTML标签

<meta> 元数据标签

<title> 标题标签

<style> 样式标签

<link> 链接标签

<script> 可执行脚本标签

body标签

内联元素inline

块级元素block

行内块级元素inline-block

HTML 语义化

语义化-区块

<header>

<nav>

<article>

<section>

<aside>

<footer>