前端基础

1-1 标签

<标签名>标签体</标签名>

标签一般成对出现（存在自结束标签），结束标签名前要加 “/”

1-1.1 标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
......
<hn>n级标题</hn> (n<=6)

1-1.2 段落

<p>文本</p>

1-2 基本结构

<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签（元素），网页中的所有内容都要写在根标签里面 -->
<html>
<!-- 元数据，给浏览器搜索引擎看的，网页中不可见 -->
<head>
    <meta charset="utf-8">
    <!-- 网页标题（出现在标题栏） -->
    <title>网页的标题</title>
</head>

<!-- 主体，网页中的可见内容 -->
<body>
</body>
</html>

1-3 自结束标签和注释

1-3.1 自结束标签

<img>
<img/>
<input>
<input/>

1-3.2 注释

<!--
需注释的内容
-->

HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源代码中查看注释

注释要求简单明了

注释不能嵌套

如：

<!--
	<!--
		注释中的注释
	-->
-->

在网页中仍会显示

-->

浏览器在解析网页时是自上向下逐行解析

1-4 标签中的属性

在标签中（开始标签或自结束标签）还可以设置属性

名值对结构（x=y）

用来设置标签中的内容如何显示

属性和标签名或其他属性应该使用空格隔开

属性不能瞎写，应该根据文档中的规定来编写

有些属性有属性值，有些没有，属性值应该用引号引起来

1-5 文档声明

用来告诉浏览器当前网页的版本

<!doctype html> 声明网页版本HTML5
<html>
<head></head>
<body></body>
</html>

1-6 关于进制

十进制（日常使用）
- **特点：**满 10 进 1
- **计数：**0 1 2 3 4 5 6 7 8 9 10 11 … 19 20 …
- **单位数字：**10 个（0-9）
二进制（计算机底层的进制）
- **特点：**满 2 进 1
- **计数：**0 1 10 11 100 101 …
- **单位数字：**2 个（0-1）
  - 扩展：
    - 所有数据在计算机底层都会以二进制的形式保存
    - 可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个 1 或一个 0，这一个小格子在内存中被称为 1 位（bit）
      
      8bit = 1byte（字节）
      
      1024byte = 1kb（千字节）
      
      1024kb = 1mb（兆字节）
      
      1024mb = 1gb（吉字节）
      
      1024gb = 1tb（特字节）
      
      1024tb = 1pb（派字节）
八进制（很少用）
- **特点：**满 8 进 1
- **计数：**0 1 2 3 4 5 6 7 10 11 … 17 20 …
- **单位数字：**8 个（0-7）
十六进制（一般显示一个二进制数字时，都会转换为十六进制）
- **特点：**满 16 进 1
- **计数：**0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 14 15 …1A 1B 1C 1D 1E 1F 20 …
- **单位数字：**16 个（0-F）

1-7 字符编码

所有数据在计算机中存储时都是以二进制形式存储的，文字也不例外，所以一段文字在存储到内存中时，都需要转换为二进制编码。当我们读取这些文字时，计算机会将编码转换为字符，供我们阅读

编码

将字符转换为二进制码的过程
解码

将二进制码转换为字符的过程
字符集（charset）

编码和解码所采用的规则
乱码问题

如果编码和解码所采用的字符集不同就会出现乱码的问题
常见的字符集

ASCII

ISO88591

GB2312

GBK

UTF-8 (万国码)：在开发时我们常使用

可以通过 meta 标签设置网页的字符集（写在 head 标签中）
```
<meta charset="utf-8">
```

1-8 文档的使用

w3school 在线教程

1-9 VSCode 的安装

!+Tab 键可以快速生成基本结构

Ctrl+/ 可以快速注释

1-10 配置 LiveServer

可在其服务器中自动更新所更改的内容

1-11 实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格

在 HTML 中有些时候，我们不能直接书写一些特殊符号
- 比如，多个连续的空格、字母两侧的大于号和小于号
如果我们需要在网页中书写这些特殊字符，则需要使用 HTML 中的实体（转义字符）
实体的语法：
- &实体的名字；
  - &nbsp；空格
  - &gt；大于号
  - &lt；小于号
  - &copy；版权符号

如：

源码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">

    <title>实体</title>
</head>
<body>

<p>
    今天&nbsp;天气真不错！
</p>

<p>
    a&gt;b&lt;c
</p>

<p>
    &copy;
</p>

</body>
</html>

效果：

1-12 meta 标签

meta 主要用于设置网页的元数据，元数据并不是给用户看的

组成：

name 指定数据名称
content 指定数据内容

meta 并不是键，name 才是，例如<meta charset="UTF-8">中 charset 是键，UTF-8 是值

常见的键值对：

charset: 网页采用的字符集，他的写法是另一种键值对的，见下
keywords: 搜索引擎用的关键词，用逗号隔开
description: 搜索引擎蓝字下面的那个
auther: 作者
title: 标题，会作为搜索引擎的结果标题表示
http-equiv 协议，其中 http-equiv=“refresh” 几秒后跳转网页到

<meta charset="UTF-8">
<meta name="keywords" content="HTML5,前端，CSS">
<meta name="description" content="LaLaLaLaLaLaLaLa">
<meta http-equiv="refresh" content="3;url=http://www.swu.edu.cn">

1-13 语义化标签

语义化标签在 HTML 中表示特定的结构，但是会在显示的时候存在样式的变化。但是注意 HTML 是专门负责网页结构的，所以在使用 html 标签时应该关注的是标签的语义而不是标签的样式。

标题标签
- h1~h6 一共有 6 级标题，重要性递减
- h1 是最重要的仅次于 title，一般只有一个 h1
- 一般只用到 h1 到 h3
p 标签 表示一个段落，也是一个块元素
hgroup 标签 将 h 标题分组
em 是语音语调的加重，是一个行内元素
strong 表示强调
blockqueue 表示一个长引用
q 表示一个短引用
br 换行
块元素 主要对元素进行布局
行内元素 用来包裹文字，一般是块内放行

如：

源码：

<h1>一级标题</h1>
<h2>二级标题</h2>
<p>123</p>
<p>456</p>

<hgroup>
    <h1>回乡偶书</h1>
    <h2>其一</h2>
</hgroup>

<p>今天天气<em>真</em>不错</p>

<p>你今天必须要<strong>完成作业</strong></p>

鲁迅说：
<blockquote>我是从来没有说过的</blockquote>

子曰<q>学而时习之</q>
<br>
<br>
<br>
今天天气真不错

效果：

p元素里不能放任何块元素,浏览器会对网页自动修正，例如在 html 外的元素，把h1放在p 里面，浏览器不会再源码里纠正，但是会在加载的内存中纠正，在检查元素中显示纠正结果。

1-13.1 结构化语义标签(用的不多)

header 网页头部
main 网页的主体部分(只有一个)
footer 网页底部
nav 网页的导航
aside 侧注释，与主体相关的其他内容
article 独立的文章
section 其他的独立区块

1-13.2 结构化无意义标签

div 没有语义，表示一个独立区块
span 行内元素，没有语义，用来选中文字

1-14 列表

无序列表 ul
有序列表 ol
定义列表 dl
- dt 定义的内容
- dd 对定义进行解释说明
内容用 li

列表间可以互相嵌套

如：

源码：

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

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

<dl>
    <dt>结构</dt>
    <dd>解释解释解释解释</dd>
    <dd>解释解释解释解释</dd>
    <dd>解释解释解释解释</dd>
</dl>

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

效果：

1-15 超链接

超链接让页面跳转到另一个位置或者其他页面

用 a 定义超链接

a 是一个行内元素可以嵌套除他自身以外块的元素

a 的属性：

href 目标跳转路径
- 值可以是外部网站地址，也可以是内部页面地址
- #是回到顶部
- #ID 跳转到页面指定位置
- 在开发中可以用 javascript:;这样什么也不发生
target 属性，可选值
- _self 默认值，在当前页面打开
- _blank 在新的页面打开

注意： ID 是唯一属性，不能一样，字母开头，区分大小写，靠前的元素优先生效

如：

源码：

<a href="https://www.baidu.com/" target="_blank">超链接（打开百度）</a>
<a href="#but">去底部</a>
<a href="javascript:;">什么也不发生</a>

效果：

1-16 图

img 标签用于引入图片

使用 img 标签引入外部标签，img 是一个自结束标签

img 属于替换元素，属于行内元素和替换元素之间的一种元素，即 img 这段代码被具体的东西给替换了

1-16.1 图片的属性

src 属性指定的外部路劲
alt 对于图片的描述，描述默认情况下是不会显示的，会在图片显示不出来的时候显示，搜索引擎会通过 alt 来搜索图片
width 指定图片的宽度(单位是像素)
height 指定图片的高度(单位是像素)

****注意：****如果只修改了一个，图片会被等比例缩放，如果指定了两个图片就不会等比例变化；

一般在 PC 端不建议修改图片的大小，为了节省网络资源，最好直接在做图的时候改好,但是在移动端经常会把图片缩小

1-16.2 图片的格式

jpg(jpeg)
- 颜色多，不支持透明，不支持动图
- 一般用于显示照片
gif
- 支持的颜色少，支持简单透明，支持动图
- 颜色单一的动图
png
- 颜色丰富，支持透明，不支持动图
- 颜色丰富，复杂透明（专为网页而生）
webp
- 谷歌新推出的，专业用于网络的格式
- 具有其他图片格式的优点，文件特别小
- 兼容性不好（例如 IE）
base64
- 使用 base64 进行编码，这样可以直接把图片转化为字符，通过字符格式引入
- 一般都是需要与网页一起加载的图片

原则：效果一样用小的(快)，效果不一样用效果好的

如：

源码：

<img src="https://z3.ax1x.com/2021/07/11/WCgGWQ.md.jpg" alt="小狗" width=300px>
<img src="https://z3.ax1x.com/2021/07/11/WCgcl9.md.jpg" alt="鹦鹉" height=350px>

网页端：

1-17 内联框架

内联框架，用于向当前页面中引入其他页面

src 指定要引入的网页路径
frameborder 只有 0 或 1 就是显示与不显示边框

内联框架是把一个网页做为窗口引入现在的网页

注意的是内联框架的内容不会被搜索框架所索引

如：

源码：

<iframe src="https://www.baidu.com/" frameborder="0" width=1400 height=400></iframe>
<iframe src="https://www.baidu.com/" frameborder="1" width=1400 height=400></iframe>

1-18 音视频

audio 向网页引入音频文件，音视频文件引入的时候默认情况下是不允许用户操作的

属性:

controls 只有键没有值是否允许用户控制播放
autoplay 音频是否自动播放(兼容性差，例如火狐不自动播放)

如：

源码：

<audio src="https://m10.music.126.net/20210711231048/a1eb01b59d9425f3cd290d2a2a7b122e/yyaac/525d/5153/5653/e7660ef20cf93a9df000a93788621a1b.m4a"
       controls autoplay></audio>

效果：

除了通过 src 实现之外，还可以通过 source 实现,这样可以实现对于不同浏览器提供最佳匹配文件,IE8 不支持，所以要输出提示

原理是：进入 audio 标签，如果匹配到 source,那么浏览器会自动忽略内部其他代码，实现选择，IE8 不认识 source 所以会自动忽略所有 source 标签，于是只找到提示信息，自动补全 p 标签，输出提示

如：

源码：

<audio controls>
    <source src="https://m10.music.126.net/20210711231048/a1eb01b59d9425f3cd290d2a2a7b122e/yyaac/525d/5153/5653/e7660ef20cf93a9df000a93788621a1b.m4a">
    <source src="https://m10.music.126.net/20210711231048/a1eb01b59d9425f3cd290d2a2a7b122e/yyaac/525d/5153/5653/e7660ef20cf93a9df000a93788621a1b.ogg">
    <embed src="https://m10.music.126.net/20210711231048/a1eb01b59d9425f3cd290d2a2a7b122e/yyaac/525d/5153/5653/e7660ef20cf93a9df000a93788621a1b.m4a"
           type="">
</audio>

视频标签是 video，同理：

如：

源码：

<video src="https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4" controls></video>

<video controls>
    <source src="https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4">
    <source src="https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.webm">
    <embed src="https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4" type="">
</video>

效果：