「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

✨HTML5 介绍

HTML（Hyper Text Marked Language，超文本标记语言）是一种用来制作超文本文档的简单标记语言
用HTML编写的超文本文档称为HTML文档，HTML稳当常用的扩展名是.html
HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超链接”点就是一种URL指针，通过激活（单击）它，可使浏览器方便地获取新的页面
可见网页的本质就是HTML，通过结合使用其他的web技术，可以创造出功能强大的网页

✨HTML 编译工具

刚开始接触HTML的话推荐以下两种练练手：

记事本—Windows自带的编译附件，使用简单方便，编写的页面很简洁。
Notepad++—相比记事本而言，功能强大一点，它支持HTML标签的颜色标识、代码缩进、搜索等功能，上手起来也比较容易。 PS:VS也不错。

✨HTML 基本结构

HTML的基本结构分为头部（head)和主体(body)两部分，头部包括网页标题（title）等基本信息，主体包括网页的内容信息（如图片、文字等）。

✨HTML元素和属性

元素

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）

属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"

✨编写第一个网页

<!doctype html>声明为HTML5文档
<html>元素是HTML页面的根元素
<head>元素包含了文档的元数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
<title>元素描述了文档的标题
<body>元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

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

✨实体

在 HTML 中，某些字符是预留的
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。例如：

显示	实体名称
空格	&nbsp
<	&lt
&gt
&	&amp
"	&quot

✨mate标签

在<head>部分中，主要用于设置网页的一些元数据，元数据不是给客户看的。
如 charset 指定网页的字符集，name指定数据的名称，content 指定数据的内容

<head>
    <mate name="keywords" content="前端，HTML，css">
    <mate name="description" content="前端之路漫漫">
</head>

✨语义化标签

标题标签<h>，段落标签<p>, 语气加重标签<en>, 强调标签<strong>
<header>表示头部,<main>表示主体,<font>表示尾部,<nav>表示网页的导航，<aside>表示侧边栏，<article>表示文章，<section>表示独立的区块，<span>表示行内元素,<div>块元素表示一个区块，是我们主要的布局元素

列表标签

无序列表：<ul>标签（用得较多）
有序列表：<ol>标签
定义列表：<dl>标签注意：列表之间可以互相嵌套

<p>
    <ul>
          <li>结构</li><li>表现</li><li>行为</li>
    </ul>
</p>

<p>
    <ol>
        <li>结构</li><li>表现</li><li>行为</li> 
   </ol>
</p>

<p>
<dt>结构</dt>
            <dd>结构表示网页的结构</dd>
</p>

✨超链接

链接介绍

HTML使用标签 <a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

链接语法

<a href="url">链接文本</a>
href 属性描述了链接的目标。

<a href="https:/www.baidu.com" >百度</a>

链接 - target 属性

target属性：_self默认值，_blank在一个新的页面中打开 ,如target="_blank"

<a href="https:/www.baidu.com" target="_brank">百度</a>

链接- id 属性

id 属性可用于创建一个 HTML 文档书签。

注意: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分
</a>

✨内联框架

用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径

<iframe src="https://www.bilibili.com" frameborder="0"  width=400 height=200>

<!-- frameborder 等于0表示无边界，等于1表示有边界；
width、height可进行修改指定网页的长和宽 -->

</iframe>

✨图片

图片标签<img>：属于替换元素，用于向当前页面中引入一个外部图片
src 属性指定的外部图片的路径；alt 属性指图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示,搜索引擎会根据alt中的内容来识别图片，
width 图片的宽度,height 图片的高度；宽度和高度中如果只修改了一个，另一个会等比例缩放。
单位是像素注意：一般情况下在pc端不改变图片的大小

 <img src="./Saved Pictures/草帽路飞.jpg" alt="海贼王">

ps: 也可以复制网页中图片的地址过来，因为图片地址太长了这里就用的我自己文件夹中的图片路径。

✨音视频播放

音频 audio

controls属性 供添加播放、暂停和音量控件
autoplay属性 音频文件是否自动播放
loop属性 音乐是否循环播放
<audio> 元素允许使用多个 <source> 元素, <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

<audio src="./拥抱 - 五月天.mp3" controls autoplay loop></audio>

或者这种格式也行：

<audio controls>
            <source src="拥抱 - 五月天.mp3"  >
            </audio>

视频video

<video> 元素提供了 播放、暂停和音量控件来控制视频
元素也提供了 width 和 height 属性控制视频的尺寸；如果没有设置这些属性页面就会根据原始视频的大小而改变
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的 <video> 元素支持多个<source>元素，<source> 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式

<video src="./Videos/WeChat_20220125213107.mp4"
controls loop height="=300" width="400" >
</video>

✍ 写在最后：HTML的学习笔记在这里就告一段落啦，挑的一些重点记在文章中，接下来继续迈向CSS啦。学习前端的一个小开始，前端长路漫漫昂，加油记得坚持鸭😉😉

HTML学习笔记