HTML基础知识总结

1.文档类型

&nbsp 在 HTML中，文档类型 doctype 的声明是必要的。在所有文档的头部，你都将会看到"<!DOCTYPE html>" 的身影。这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“怪异模式(兼容模式)”的渲染模式。“<!DOCTYPE html>" 确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。

2.页面语言

<html lang=" ">

(language:语言)指定html语言种类

<html lang="en">定义语言为英语
<html lang="zh-CN">定义语言为中文

3.实体

在网页中编写多个空格默认情况会自动被浏览器解析为一个空格在html中有些时候，我们不能直接书写一些特殊符号比如多个连续的空格，比如字母两侧的大于和小于如果我们需要在网页中书写这些特殊的符号，则需要使用html的实体（转移字符）

实体的语法：& 实体名

常用实体:

符号	描述	实体
	空格
<	小于（less-than）	<
大于号（greater-than）		>
×	乘号（times）	×
¥	人民币	¥
©	版权（copyright）	©
™	商标	™
®	注册商标	®

4.meta（元标签）

meta主要用来设置网页中的一些元数据，元数据不是给用户看的

4.1 charset 字符集

charset用来指定网页的字符集 utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字 GUO BIAO
BIG5 繁体中文 港澳台等用
GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则基本包含全世界所有国家需要用到的字符

注意：这句代码必须要写，否则可能引起乱码的情况

    <meta charset="UTF-8">

4.2 name 数据的名称 &&content 数据内容

4.2.1 keywords

数据名称（name）	描述	代码
keywords	表示网站的关键字，可以同时指定多个关键字用逗号隔开，用户搜索关键字得到的	`<meta name="keywords" content="HTMLS,前端，css">`

4.2.2 description

数据名称（name）	描述	代码
description	用于指定网站的描述,网站的描述会显示在搜索引擎中	`<meta name="description" content="网站的描述">`

4.2.3 viewport

每一款移动设备设计时，都会有一个最佳像素比，一般我们只需将像素比设置为该值，即可得到一个最佳像素比。将像素比设置为最佳像素比的视口大小，我们称为完美视口将网页的视口设置为完美视口

`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

4.3 http-equiv

refresh 网页跳转 content指定延迟时间和跳转链接url=

例子：<meta httpequiv="refresh"content="3;url=https:www.baidu.com" 将页面定向到另一个网站 3秒后跳转到https:www.baidu.com

5.title (网页标题)

显示在浏览器的标题栏或页面的选项卡中。它只包含文本;元素内的标记将被忽略。

<title>我是标题</title>

6.语义化标签

在网页中HTML专门用来负责网页的结构所以在使用html标签时，应该关注标签的语义，而不是它的样式,

常见标签：

6.1.标题标签（headline）

标题标签：h1 ~ h6 一共有六级标题，重要性递减网页中重要性仅次于title标签，一般情况下只会有一个h1，一般情况下标签只会使用到h\1~h3,而h4~h6很少使用，在网页中独占一行的元素称为块元素（block element），标题标签就是块元素

    <h1>一级标</h1>
    <h2>二级标</h2>
    <h3>三级标</h3>
    <h4>四级标</h4>
    <h5>五级标</h5>
    <h6>六级标</h6>

6.2.段落标签（ paragraph）

在p标签中的内容就表示一个段落,所以p也是一个块元素

    <p>在p标签中的内容就表示一个段落</p>
    <p>在p标签中的内容就表示一个段落</p>

6.3.标题分组标签 ( hgroup )

hgroup 标签用来标题分组，可以将相关的标签放到一组

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

6.4.换行（the line break element）

<br>用来处理文字之间的换行

<p>我在第一行，<br>我在第二行，<br>我在第三行</p>

6.5 加粗（strong）

<p>你<strong>必须</strong>给我做好</p>

6.6其它标签

水平线（Horizontal Rule 水平线）
<hr color="red" size = "9" width="9">

预先格式（preformat）不会将多个空格转换为一个空格

<pre>我是是</pre>

7.语义结构化标签（布局）

header 表示网页的头部
main 表示网页的主体 (一个网页只有一个)
footer 表示网页的底部
nav 表示网页中的导航
aside 表示和主体相关的其他内容
article 表示独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div 没有语义，就用来表示一个区块，最常用可以代表上面所有的
span 是一个行内元素，没有语义，一般用来在网页中选中文字

8.列表（List）

8.1、有序列表 Ordered List

有序列表，使用<ul></ul>标签创建无序列表使用li表示列表项

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

8.2、无序列表 Unordered List

无序列表，使用<ol></ol>标签创建无序列表使用li(list items)表示列表项

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

8.3、描述列表 description list

定义列表，使用<dl></dl>标签创建无序列表使用<dt></dt>表示定义的内容 description term使用<dd></dd>来对内容进行解释说明 description details

    <dl>
        <dt>结构</dt>
        <dd>结构就是。。。。。。</dd>
        <dd>结构就是。。。。。。</dd>
        <dt>表现</dt>
        <dd>表现就是。。。。。。</dd>
        <dd>表现就是。。。。。。</dd>
        <dt>行为</dt>
        <dd>行为就是。。。。。。</dd>
        <dd>行为就是。。。。。。</dd>
    </dl>

9.超链接

超链接可以让我们从一个页面跳转到其他页面,或者是从当前页面的其他页面使用 a 标签来定义超链接

其href属性，创建一个超链接到网页、文件、电子邮件地址、同一页面中的位置，或任何URL可以访问的内容。每个中的内容应该指示链接的目的地。

属性：
href 指定跳转的路径
    -值可以是一个外部网站的地址
    -也可以写内部页面的地址

a 标签也是一个行内元素，在a标签中可以嵌套任何元素除了a标签

    <a href="https://www.baidu.com">超链接</a>
    <a href="#bottom">到底部(跳转id为"bottom的元素")</a>
    <a href="#p3">去第三个自然段（跳转到id为"p3"的元素）</a>
    <a href="javascript:;">占位符<a> javascript:;占位，点击后不会发生任何反应

10.图片

10.1图片格式

jpeg(jpg)

支持的颜色丰富，不支持透明效果，不支持动图
一般用来显示照片

gif

支持的颜色较少，支持简单透明，支持动图
适合颜色单一的图片，动图 png
支持颜色丰富，支持复杂透明，不支持动图
颜色丰富，复杂透明图片（专为网页而生） webp
这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
它具备其他图片格式的所有优点，而且文件特别小
兼容性不好 base64
将图片使用base64进行编码，这样将图片转化为字符，通过将字符引入图片
一般都是一些需要和网页一起加载的图片才会使用base64

10.2 常用图片标签

<img src="" alt=""  width=""  height="">
<!--
src属性：图片路径
alt属性：图片描述，默认情况下不会显示，有些浏览器加载失败时会显示，如果不写alt属性图片则不会被搜索引擎所找到
width属性：图片宽度
height属性：图片高度，如果只修改高度和宽度了一个，则；另一个根据比例随着改变
-->

注：图片标签用于当前页面中引用外部的图片，使用img来引入外部图片 ，img标签是一个自结束标签,路径规则与超链接一样，img属于替换元素（基于行内元素和块元素之间，具有两种元素的特点，内置的宽高属性，所以可以设置）

一般在pc端不建议修改图片大小，需要多大就裁多大但是在移动端经常对图片进行缩放（大图缩小）

11.内联框架

<iframe src+"" alt="" weidth="" height="">
<!--
和图片非常像，向当前页面引入其他页面
src 指定引入网页的路径
frameborder 指定内联框架的边框
-->

12.音视频

12.1音频 audio

<audio src="" controls autoplay loop>
 <!--
audio 是行内元素
audio 标签用来向页面 引用一个外部音频文件音视频文件引入时，默认情况下不允许用户自己控制播放停止
    controls 是否被用户控制播放
    atuoplay 是否自动播放
        -设置了就会自动播放，打开页面会自动播放
        -但是目前来讲大部分浏览器都不会自动播放
    loop 自动循环播放    
    -->

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径，解决浏览器不兼容的问题

支持的浏览器显示播放器，不支持的显示文字
依次使用source 或者embad 全不能使用则显示文字

<audio controls>
        对不起，你的浏览器不支持播放音频！请升级浏览器
        <source src="./source/怎么了 - 周杰伦&袁咏琳.mp3">
        <source src="./source/怎么了 - 周杰伦&袁咏琳.ogg">
        <embed src="./source/怎么了 - 周杰伦&袁咏琳.mp3" type="audio/mp3" width="200" height="200">
</audio>

12.2视频 video

   <!--
        使用video标签用来向网页引用视频文件
            -使用方式和audio基本上一样
    -->
    <video src="./source/4e1cf5ded7759caa8f679d90a5418109.mp4" controls></video>
    <!--解决兼容-->
    <video controls>
        <source src="./source/4e1cf5ded7759caa8f679d90a5418109.webm">
        <source src="./source/4e1cf5ded7759caa8f679d90a5418109.mp4">
        <embed src="./source/4e1cf5ded7759caa8f679d90a5418109.mp4" type="video/mp4">
    </video>