HTML基础

网页三要素

HTML：网页的基本结构
CSS：网页的展示效果
JS：网页的功能与行为

HTML简介

HTML（HyperText Markup Language，超文本标记语言），用于构建网页的基本结构及其内容的标记语言

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

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

HTML文档结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的测试站点</title>
    </head>
    <body>
        <p class="editor-note">
            我的猫咪脾气暴
        </p>
        <img src="cat.png" alt="猫咪照片" />
    </body>
</html>
复制代码

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

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

<head>

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=1.0″> 主要用于移动端，定义设备屏幕上用来显示网页的区域

<meta http-equiv=”expires” content=”31 Dec 2021″>HTTP头部自定义meta，用于相特定的网站提供一些信息详情可参照 wiki.whatwg.org/wiki/MetaEx…

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

<style>:CSS样式

<link>:

<link rel=”shortcut icon” href=”https://juejin.cn/post/favicon.ico” type=”image/x-icon”> 当前页面的图标

<link rel=”stylesheet” href=”https://juejin.cn/post/my-css-file.css”> 链接到样式表

<link href=”https://juejin.cn/post/fancy.css” rel=”alternate stylesheet” tyle=”text/css” title=”Fancy”>可替换的样式表

使用示例：mdn.github.io/css-example… 仅在一些特定的浏览器中支持例如火狐浏览器

<script>可执行脚本

<script type=”text/javascript” src=””>

属性：

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

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

script解析时序图

<body>

元素样式

内联元素

只占据它对应标签的边框所包含的空间
只能容纳文本或其他内联元素
只能通过修改水平边距、边框或者行高的方式改变尺寸
常用的内联元素：
1. <a>：超链接
2. <span> ：
3. <br>：换行
4. <i>：
5. <em>：
6. <strong>：加粗
7. <label>：标签
8. <q>：
9. <var>：
10. <cite>：参考引用
11. <code>：代码片段

块级元素

占据其父元素的整行，总是从新行开始
能容纳其他块元素或者内联元素
可以通过控制宽高、行高、边距、边框等改变尺寸
常用的块级元素：
1. <div>
2. <p>
3. <h1>-<h6>
4. <ol>
5. <ul>
6. <dl>
7. <table>
8. <address>
9. <blockquote>
10. <form>

行内块级元素

元素在行内排列，不会独占一行
支持宽高以及垂直边距边框
常用的内联元素：
1. <img>
2. <input>
3. <td>

语义化标签

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

不适用语义化标签

<div class="header"></div>
<div class="section">
    <diy class="article">
        <div class="figure">
            <img>
        	<div class="figcapt ion"></div>
        </div>
    </div
</div>
<div class="footer"></div>
复制代码

使用语义化标签表达

<header></header>
<section>
    <article>
    	<figure>
            <img>
        	<figcaption></figcaption>
        </figure>
    </article>
</section>
<footer></footer>
复制代码

语义化-区块

<header>

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

使用示例：

<header>
    <h1>HTML</h1>
    <p>
        <time pubdate datetime="2021-08-15"></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>
    <h1>Weather forecast for Beijing</h1>
    <article>
        <h2>15 August 2021</h2>
        <p>Rain</p>
    </article>
    <article>
        <h2>16 August 2021</h2>
        <p>Periods of rain</p>
    </article>
    <article>
        <h2>17 August 2021</h2>
        <p>Heavy rain</p>
    </article>
</article>
复制代码

<section>

按主题将内容分组，通常会有标题
section通常出现在文档的大纲中
不要把section当作普通容器使用，比如说用于美化页面片段样式，此时用dic更合适
如果元素里边时独立的整块内容，可单发布，则更适合用article

使用示例：

<h1>Choosing an Apple</h1>
<section>
    <h2>Introduction</h2>
    <p>This document provides a guide to help with the important task of choosing the correct Apple</p>
</section>
<section>
    <h2>Criteria</h2>
    <p>There are many different criteria to be considered when choosing an Apple -size,color,firmness,sweetness,tertness...</p>
</section>
复制代码

<aside>

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

使用示例：

<p>我今天要去参加字节跳动青训营</p>
<aside>
    <h4> 青训营 </h4>
    <p>青训营是字节跳动技术团队发起的技术系列培训&人才选拔项目</p>
</aside>
复制代码

<footer>

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

使用示例：

<footer>
    <p>Posted by:ByteFE</p>
    <p><time pubdate datetime="2021-08-15"></time></p>
</footer>
复制代码

使用语义化标签的案例

语义化标签案例

语义化-分组

<figure>/<figcaption>

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

使用示例：

<figure>
    <img src="cat.jpeg" alt="a cat">
    <figcaption>Cat Picture</figcaption>
</figure>
复制代码

<blockquote>

块级引用元素
cite属性表示该来源的url

使用示例：

<blockquote cite="http://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>
复制代码

<dl>/<dt>/<dd>

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

使用示例：

<dl>
    <dt>Firefox</dt>
    <dd>
        A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
    </dd>
</dl>
复制代码

<cite>

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

<time>

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

<p><time pubdate datetime="2021-08-15"></time></p>
复制代码

<address>

某个人或组织的联系信息

<mark>

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

<code>

代码片段

<small>

免责声明、注意事项

多媒体元素

图片

<img>

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

使用示例：

<img src="smiley.gif" alt="Smiley face">
复制代码

<picture>

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

使用示例：

<picture>
    <source media="(min-width:600px)" srcset="mdn-logo-wide.png">
    <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

<picture>
    <source srcset="xxx.webp" type="image/webp">
    <img src="xxx.jpg" decoding="async" loading="lazy">
</picture>
复制代码

音视频

<video>/<audio>

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

使用示例：

<video controls>
    <source src="/flower.webm" type="video/webm">
    <source src="/flower.mp4" type="video/mp4">
    Sorry,your browser doesn't support embedded videos.
</video>

<audio controls src="xxx.mp3">
    your browser does not support the <code> audio </code> element.
</audio>

<video src="friday.mp4">
    <!-- 字幕文件 -->
    <track default kind="captions" srclang="en" src="friday.vtt"/>
    sorry ,your browser does not support embedded video.
</video>
复制代码