认识 HTML

邂逅 HTML

超文本标记语言 (HyperText Markup Language，简称：HTML) 是一种用于创建网页的标记语言。
- HTML 元素是构建网站的基石；
什么是标记语言(markup language);
- 由无数个标记（标签、tag）组成；
- 是对某些内容进行特殊的标记，以供其他解释器识别处理；
- 比如使用
  标记的文本会被识别为 ”标题“ 进行加粗、文字放大显示；
- 由标签和内容组成的部分称为元素（element）；
什么是超文本（HyperText）；
- 不仅仅可以插入普通的文本，还可以插入图片、音频、视频等内容；
- 还可以表示超链接（HyperLink），从一个网页跳转到另一个网页；

HTML 结构

<html>
    <head></head>
    <body></body>
</html>

认识元素

HTML 本质上是由一系列的元素（Element）构成的；
元素的定义：
- 元素是网页的一部分；
- 一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含；
HTML 包含的元素：

developer.mozilla.org/zh-CN/docs/…

元素的组成

HTML 元素的组成：
- 开始标签（Opening tag）：包含元素的名称，被左右尖括号所包围。表示元素从这里开始或者开始起作用；
- 结束标签（Closing tag）：与开始标签类似，只是在元素名前包含了一个斜杠。表示着元素的结尾；
- 内容（Content）：元素的内容；
- 元素（Element）：开始标签、结束标签与内相结合，便是一个完整的元素；

单标签元素 — 双标签元素

双标签元素：大部分元素是双标签的；
- html、body、head、h2、p、a 元素；
单标签元素：一部分元素只有一个标签；
- br、img、hr、meta、input；
```
<input type="text">
```
注意事项：
- HTML 元素不区分大小写，推荐小写；

元素的属性

元素也可以拥有属性（Attribute）：
属性包含元素的额外信息，这些信息不会出现在实际内容中；
一个属性必须包含如下内容：
- 一个空格，在属性和元素名称之间。（如果已经有一个或多个属性，就与前一个属性之间有一个空格。）；
- 属性名称，后面跟着一个等于号；
- 一个属性值，由一对引号 "" 引起来。

创建一个超链接元素 a：

<!-- 超链接元素 -->
<a href="http://www.baidu.com">百度一下</a>

元素属性的分类

有些属性是公共的，每一个元素都可以设置；
- 比如 class、id、title 属性；
有些属性是元素特有的，不是每一个元素都可以设置；
- 比如 meta 元素的 charset 属性、img 元素的 alt 属性的等；

元素的嵌套关系

某些元素的内容除了可以是文本之外，还可以是其他元素，这样就形成了元素的嵌套。

  <body>
    <!-- alt + shift + 向下箭头 = 快速复制这一行 -->
    <ul>
      <li>
        <div>
          <span></span>
          <span></span>
        </div>
        <div></div>
      </li>
      <li></li>
    </ul>
  </body>

元素之间的关系：
- 父子关系，比如 ul 和 li，li 和 div 之间；
- 兄弟关系，比如两个 div，两个 span 之间；

HTML 注释

注释的含义：
- 注释就是一段代码说明；
- ;
- 注释只是给开发者看的，浏览器并不会把注释显示给用户看；
注释快捷键：ctrl + /;

完整的 HTML 结构

完整的 HTML 结构包含：
- 文档声明；
- html 元素：
  - head 元素；
  - body 元素；

<!DOCTYPE html>
<html>
  <title>HTML文档结构</title>
</head>
<body>
  <h1>我是标题</h1>
</body>
</html>

文档声明

HTML 最上面的一段文本称之为文档类型声明，用于声明文档类型；
```
<!DOCTYPE html>
```
- HTML 文档声明，告诉浏览器当前页面是 HTML5 页面； - 让浏览器用 HTML5 的标准去解析识别内容； - 必须放在 HTML 文档的最前面，不能省略，不然会出现兼容性问题；

html 元素

元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。
- 所有其他元素必须是此元素的后代。
```
<html lang="en">
</html>
```
W3C 标准建议为 html 元素增加一个 lang 属性，作用是：
- 帮助语音合成工具确定要使用的发音；
- 帮助翻译工具确定要是用的翻译规则；
比如常用的规则:
- lang = 'en'表示这个 HTML 文档的语言是英文；
- lang = 'zh-CN'表示这个 HTML 文档的语言是中文；

head 元素

HTML head 元素规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等；
- 元数据（meta data），是描述数据的数据；
- 是对整个页面的配置；
常见的设置有以下两种：
- 网页的标题：title 元素
```
<title>网页的标题</title>
```
- 网页的编码：meta 元素
  - 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；
  - 一般都使用 UTF-8 编码，涵盖了世界上几乎所有的文字；

body 元素

body 元素里面的内容将是在浏览器窗口中看到的东西，也就是网页的具体内容和结构。
- 大部分 HTML 元素都是在 body 中编写呈现的；

<body>
    <input type="text">
    <ul>
        <li></li>
    </ul>
</body>

常见元素 - h 元素

在一个页面中通常会有一些比较重要的文字作为标题，可以使用 h 元素；

~

标题（Heading）元素呈现了六个不同级别的标题

Heading 通常会用来做标题；

级别最高，而

级别最低;

  <body>
    <!-- h元素 h1~h6 -->
    <h1>我是h1标题</h1>
    <h2>我是h2标题</h2>
    <h3>我是h3标题</h3>
    <h4>我是h4标题</h4>
    <h5>我是h5标题</h5>
    <h6>我是h6标题</h6>

    <!-- 浏览器通过什么来区分h1~h6（呈现时） -->
  </body>

注意：h 元素通常和 SEO 优化有关系;

常见元素 - p 元素

表示一个段落，可以使用 p 元素；
HTML
元素（或 HTML 段落元素）表示文本的一个段落；
- p 元素是 paragraph 的缩写，是段落、分段的意思；
- p 元素多个段落之间会有一定的差距；

常见元素 - img 元素

使用 img 元素可以让浏览器显示图片；
HTML 元素将一份图像嵌入文档。
- img 是 image 单词的缩写，是图像、图片的意思；
- 事实上 img 是一个可替换元素（replaced element）；
img 有两个常见的属性：
- src 属性：source 单词的缩写，表示源；
  - 是必须的，它包含了你想嵌入的图片的文件路径；
- alt 属性：不是强制性的，有两个作用：
  - 作用一：当图片加载不成功时（错误的地址或者图片资源不存在），那么会显示这段文本；
  - 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让它们知道图像的含义；

img 元素 - 图片的路径

设置 img 的 src 时，需要给图片设置路径：
- 网络图片：一个 URL 地址;
- 本地图片：本地电脑上的图片，后续会和 html 一起部署到服务器；
本地图片的路径有两种方式：
- 方式一：绝对路径（几乎不用）；
  - 从电脑根目录开始一直找到资源的路径；
- 方式二：相对路径（常用）；
  - 相当于当前文件的一个路径；
  - “. ” 代表当前文件夹（1个），可以省略；
  - ”..“ 代表上级文件夹（2个）；
对于网页来说，不管是什么系统，路径分隔符都是 “/”；

img 元素 - 图片的格式

img 元素支持的图片格式非常多；

常见元素 - a 元素

在网页中我们经常需要跳转到另一个连接，这个时候使用 a 元素；
HTML 元素（或称锚（anchor）元素）：
- 定义超链接，用于打开新的 URL；

a 元素有两个常见的属性：

href：Hypertext Reference 的简称
- 指定要打开的 URL 地址；
- 也可以是一个本地地址；
target：该属性指定在何处显示链接的资源
- _self：默认值，在当前窗口打开 URL;
- _blank：在一个新的窗口打开 URL;

a 元素 - 锚点链接

锚点链接可以实现：跳转到网页中的具体位置；
两个步骤：
- 在要跳转的元素上定义一个 id 属性；
- 定义 a 元素，并且 a 元素的 href 指向对应的 id；

    <a href="#theme01">跳转到主题一</a>
    <a href="#theme02">跳转到主题二</a>
    <a href="#theme03">跳转到主题三</a>

    <h2 id="theme01">主题一</h2>
    <h2 id="theme02">主题二</h2>
    <h2 id="theme03">主题三</h2>

a 元素 - 图片链接

图片也是可以作为链接的；
- img 元素跟 a 元素一起使用，可以实现图片链接；
实现思路：
- a 元素中不存放文字，而是存放一个 img 元素；
- img 元素作为 a 元素的内容；

  <body>
    <a href="https://www.mi.com/redmik50"
      ><img
        width="500"
        src="https://cdn.cnbj1.fds.api.mi-img.com/product-  images/redmik504qyoae2/12292.png"                     
    /></a>
  </body>

a 元素 - 其他 URL 地址

a 元素还可以用作其他用途，如：
- 下载资源；
- 发送邮件；

iframe 元素

利用 iframe 元素可以实现：在一个 HTML 文档中嵌入其他 HTML 文档；
frameborder 属性；
- 用于规定是否显示边框；
  - 1：显示；
  - 2：不显示；
a 元素 target 的其他值：
- _parent：在父窗口中打开 URL;
- _TOP：在顶层窗口中打开 URL;

div 元素、sapn 元素的区别

div 元素和 span 元素都是“纯粹的”容器，或者说”盒子“，用来包裹内容；
- div 元素：多个 div 元素包裹的内容会在不同的行显示；
  - 一般作为其他元素的父容器，把其他元素包住，代表一个整体；
  - 用于把网页分割为多个独立的部分；
- span 元素：多个 span 元素包裹的内容会显示在同一行；
  - 默认情况下，跟普通文本几乎没差别；
  - 用于区分特殊文本和普通文本，比如用来显示一些关键字；

不常用元素（一部分）

strong 元素：内容加粗、强调；
i 元素：内容倾斜；
code 元素：用于显示代码；
- 偶尔使用用来显示等宽字体；
br 元素：换行元素（已不使用）；

HTML 全局属性

有些属性只能设置在特定元素中：
- 比如 img 元素的 src、a 元素的 href；
还有一些全局属性：所有 HTML 都可以设置和拥有的，如下：
- id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接、脚本或样式时标识元素；
- class：一个以空格分隔的元素的类名列表，它允许 CSS 和 JavaScript 通过类选择器或者 DOM 方法来选择和访问特定的元素；
- style：给元素添加内联样式；
- title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的；

字符实体

HTML 代码会被浏览器解析;
HTML 实体是一段以连字号（& ）开头，以分号（；）结尾的文本（字符串）；
- 实体常常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如：“不换行空格”）；
- 可以用实体代替其他难以用标准键盘输入的字符；
常见的字符实体，如：
- &lt；：表示小于号"<";
- &gt；：表示大于号">";
- &nbsp；：表示空格；

元素的语义化

理论上来说，所有的 HTML 元素，可以实现相同的事情：

    <h1>我是h1元素</h1>



      .box {
        font-size: 32px;
        font-weight: 700;
        margin: 22px 0;
      }
    <div class="box">我是div元素</div>

认识 SEO

搜索引擎优化 SEO（search engine optimization）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式；

认识字符编码

为了在计算机上能表示，存储和处理像文字、符号等之类的字符，就必须将这些字符转换成二进制数字；

HTML5 语义化元素

在 HTML5之前，网站分布层级通常包括：
- header、nav、main、footer；
弊端：
- 过多使用 div，通过 id 或 class 来区分元素；
- 对浏览器来说不够语义化；
- 对于搜索引擎来说，不利于 SEO 的优化；
HTML5 新增了语义化的元素：
- header：头部元素；
- nav：导航元素；**
- section：定义文档某个区域的元素；**
- article：内容元素；**
- aside：侧边栏元素；**
- footer：尾部元素；**

HTML5 其他新增元素

增加了对媒体类型的支持
- 音频：;
- 视频：;
Video 和 Audio 的使用方式有两个：
- 一方面可以直接通过元素使用 video 和 audio；
- 另一方面可以通过 JavaScript 的 API 对其进行控制；

HTML5 新增元素 - video

HTML 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放；
```
<video src="../video/fcrs.mp4" controls></video>
```
video 常见的属性：
- src：视频播放的 URL 地址；
- width：设置 video 的宽度；
- height：设置 video 的高度；
- controls: 是否显示控制栏，包括音量，跨帧，暂停/恢复播放；
- autoplay：是否视频自动播放（某些浏览器需要添加 muted）；
- muted：是否静音播放；
- preload：是否需要预加载视频，metedata 表示预加载元数据；
- poster：一海报帧的 URL；

video 的兼容性写法

在元素中间的内容，是针对浏览器不支持此元素时候的降级处理；
- 内容一：通过元素指定更多视频格式的源；
- 内容二：通过 p/div 等元素指定在浏览器不支持 video 元素的情况下，显示的内容；

<video src="../video/fcrs.mp4" controls>
    <source src="./video/fcrs.webm">
    <p>
        你的浏览器不支持 video 元素，请更换浏览器查看！
    </p>
</video>

HTML5 新增元素 - audio

HTML 元素用于在文档中嵌入音频内容，和 video 的用法非常类似；
```
<audio src="../media/yhbk.mp3" controls autoplay muted></audio>
```
常见属性：
- src：音频播放的 URL 地址；
- controls：是否显示控制栏，包括音量，进度，暂停/恢复播放；
- autoplay：是否音频自动播放；
- muted：是否静音播放；
- preload：是否需要预加载视频，metedata 表示预加载元数据；

audio 的兼容性写法

在元素中间的内容，是针对浏览器不支持此元素时候的降级处理；
- 内容一：通过元素指定更多音频格式的源；
- 内容二：通过 p/div 等元素指定在浏览器不支持 audio 元素的情况下，显示的内容；

<audio src="../media/yhbk.mp3" controls autoplay muted>
        <source src="./media/yhbk.ogg">
    <p>
        你的浏览器不支持 audio 元素，请更换浏览器查看！
    </p>
</audio>

input 元素的拓展内容

HTML5 对 input 元素也进行了拓展：
- placeholder：输入框的占位文字（输入内容后自动消失）；
- multiple：多个值；
- autofocus：自动聚焦处；

新增全局属性 data-

在 HTML5 中，新增一种全局属性的格式 data-，用于自定义数据属性：
- data 设置的属性可以在 JavaScript 操作中通过 dataset 轻松获取到；
- 通常用于 HTML 和 JavaScript 数据之间的传递；

<div class="box" title="abc" data-name="why" data-age="18"> 
    box
</div>

<script>
   const boxEl = document.querySelector(".box")
   console.log(boxEl.dataset)
</script>

认识 HTML

认识 HTML

邂逅 HTML

HTML 结构

认识元素

元素的组成

单标签元素 — 双标签元素

元素的属性

元素属性的分类

元素的嵌套关系

HTML 注释

完整的 HTML 结构

文档声明

html 元素

head 元素

body 元素

常见元素 - h 元素

~

级别最高，而

级别最低; <body>  <h1>我是h1标题</h1> <h2>我是h2标题</h2> <h3>我是h3标题</h3> <h4>我是h4标题</h4> <h5>我是h5标题</h5> <h6>我是h6标题</h6>  </body>

常见元素 - p 元素

常见元素 - img 元素

img 元素 - 图片的路径

img 元素 - 图片的格式

常见元素 - a 元素

a 元素 - 锚点链接

a 元素 - 图片链接

a 元素 - 其他 URL 地址

iframe 元素

div 元素、sapn 元素的区别

不常用元素（一部分）

HTML 全局属性

字符实体

元素的语义化

认识 SEO

认识字符编码

HTML5 语义化元素

HTML5 其他新增元素

HTML5 新增元素 - video

video 的兼容性写法

HTML5 新增元素 - audio

audio 的兼容性写法

input 元素的拓展内容

新增全局属性 data-

级别最低;

`<body>  <h1>我是h1标题</h1> <h2>我是h2标题</h2> <h3>我是h3标题</h3> <h4>我是h4标题</h4> <h5>我是h5标题</h5> <h6>我是h6标题</h6>  </body>`