【青训营】- HTML基础-一一网

一、HTML结构

HTML文档包含多个具有不同特性的HTML元素
HTML元素=开始标签+（结束标签）+元素内容 ==> img、input、br等元素没有结束标签
HTML元素标签不区分大小写
元素可以嵌套在其他元素中间
元素可以有属性，属性包含元素的额外信息
<!DOCTYPE html>：放在HTML文档最前面的位置，加上之后就会按照W3C的HTML5标准来解析渲染页面
<html>：根元素，包含整个页面的内容
<head>：对用户不可见，其中包含：例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等。以下展示其中包含的内容
<meta>：charset/name/http-equiv
- <meta charset="utf-8">定义文档字符编码
  - <meta name="keywords" 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头部
- <title>：页面的标题，显示在浏览器标签页上
- <style>：CSS样式
- <link>：
  - <link rel="shortcut icon" href="https://juejin.cn/post/favicon.ico" type="image/x-icon"> 当前页面的favicon(这段代码会定义我们当前页面的图标)
  - <link rel="stylesheet" href="https://juejin.cn/post/my-css-file.css"> 链接到样式表（链接css文件）
  - <link href="https://juejin.cn/post/fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"> 可替换的样式表
- <script> 可执行脚本
  - <script type="text/javascript" src=""
  - 将script标签放到head中可能会影响html页面的解析，为解决这个问题，script标签提供了两个属性：
    - defer：立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后再执行，只对外部脚本有效。有defer属性的脚本会阻止DOMContentLoaded事件，直到脚本被加载并且解析完成。
    - async：立即下载脚本，不妨碍其他操作，比如下载其他资源或者加载其他脚本，只对外部脚本有效。
<body>：包含能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等

二、常用元素

内联元素
1. 只占据它对应标签的边框所包含的空间
2. 只能容纳文本或其他内联元素
3. 只能通过修改水平边距、边框或者行高的方式改变尺寸
4. 常用的内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
块级元素
1. 占据其父元素的整行，总是从新行上开始
2. 能容纳其他块元素或者内联元素
3. 可以控制宽高、行高、边距、边框等改变其尺寸
4. 常用的块级元素：<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
行内块级元素
1. 元素在行内排列，不会独占一行
2. 支持设置宽高以及垂直边距、边框
3. 常用的行内块级元素：<img>、<input>、<td>

三、语义化

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

<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 class="forecast">
    <h1>Weather forecast for Beijing</h1>
    <article class="day-forecast">
        <h2>16 August 2021</h2>
        <p>Periods of rain.</p>
    </article>
    <article class="day-forecast">
        <h2>17 August 2021</h2>
        <p>Heavy rain.</p>
    </article>
</article>
复制代码

<section>
- 按主题将内容分组，通常会有标题
- <section>通常出现在文档的大纲中
- 不要把<section>作为普通容器来使用，比如说用于美化片段样式，此时用<div>更合适
- 若元素里面是独立的整块内容，可以单发布，则更适合用<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,tartness...
    </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=""
         alt="A robotic..">
    <figcaption>MDN Logo</figcaption>
</figure>
复制代码

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

<figure>
    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can</p>
    </blockquote>
    <figcaption>Aldous Huxley,<cite>Brave New World</cite></figcaption>
</figure>
复制代码

<dl>/<dt>/<dd>
- 用于描述一组键值对
- 通常用于元数据、术语定义等场景
- 通常用dt表示一个关键词或一个Key；dd表示关键词所对应的描述

<dl>
    <dt>Firefox</dt>
    <dd>A free</dd>
</dl>
复制代码

文本

<cite>
- <cite>元素通常用于引用作品标题
- 包括论文、文件、书籍、电影等的引用
<time>
- 机器可读的时间和日期
- datetime表示此元素关联的时间日期，若不指定则该元素不会被解析为日期

<p>
    The concert took place on<time datetime="2021-05-15 19:00">May 15</time>.
</p>
复制代码

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

四、多媒体元素

图片
1. <img>
  - src属性是必须的，嵌入图片的文件路径
  - alt属性包含一条对图像的文本描述，非强制。图像无法加载时，浏览器会在页面上显示alt属性中的文本
  - decoding解码方式：异步、同步
  - loading懒加载
2. <picture>
  - 元素通过包含0个或多个<source>元素和一个<img>元素来为不同的显示/设备场景提供相应的图像版本
  - <source>中的media属性：依据的媒体条件渲染相应的图片，类似媒体查询
  - <source>中的type属性：MIME类型，根据浏览器支持性渲染相应的图片

音视频

<video>/<audio>

src属性是必须的，嵌入视频文件路径
controls是否展示浏览器自带的控件，可创建自定义控件
autoplay是否自动播放
source元素表示视频的可替代资源

<video controls>
    <source src="https://juejin.cn/flower.webm" type="video/webm">
</video>
<audio controls src="https://juejin.cn/xxx.mp3">
    Your browser does not support the <code>audio</code> element.
</audio>
<video controls src="https://juejin.cn/friday.mp4">
    <track default kind="captions" srclang="en" src="https://juejin.cn/friday.vtt" />
    Sorry,...
</video>
复制代码