HTML基础架构
作者：互联网
<!DOCTYPE html>
<!--doctype 文档声明，告诉浏览器当前网页的版本-->
<html lang="zh">
<!-- lang 属性规定元素内容的语言，zh中文，en英文 -->
<head>
<!--head是网页的头部，主要用来帮助浏览器或搜索引擎来解析网页-->
<!--
meta标签设置网页的元数据（底层的数据）
charset：指定网页的字符集
name：数据的名称
content：数据的内容
-->
<meta name="description" content="这是一个网站的描述，网站的自我介绍；网站的描述会显示在搜索引擎的描述上">
<meta name="keywords" content="HTML5,前端，CSS3">
<meta charset="UTF-8">
<!-- <meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> 将页面重定向 -->
<!--title中内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容-->
<title>title标签的内容会作为搜索结果超链接上的文字显示</title>
</head>
<body>
<!--
进制：
十进制：
- 特点：满10进1
- 计数：0 1 2 3 4 5 6 7 8 9 10 11 12...19 20
- 单位数字：10个（0-9）
二进制：
- 特点：满2进1
- 计数：0 1 10 11 100 101 110 111
- 单位数字：2个 （0 1）
- 扩展：内存可以想象为一个有多个小格子组成的容器，每个小格子可以存储一个1或一个0，这个小格子在内存中被称为1位（bit）
1byte（字节） = 8bit
1kb = 1024byte
1mb = 1024kb
1gb = 1024mb
1tb = 1024gb
1pb = 1024tb
八进制（很少用）：
- 特点：满8进1
- 计数：0 1 2 3 4 5 6 7 10 11 12 13... 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... 1a 1b 1c 1d 1e 1f
- 单位数字：16个（0-f）
字符编码：
- 编码：将字符转换为二进制码的过程
- 解码：将二进制码转换为字符的过程
- 字符集（charset）：编码和解码所采用的规则
- 乱码问题：编码和解码所采用的字符集不同，就会出现乱码问题
- 常见字符集：ASCII（2^7） ISO8859-1（2^8） GB2312（国标） GBK（国标扩充） UTF-8（万国码）
-->
<!--
HTML不能直接书写特殊字符，比如：连续空格，大于号或小于号，所以需要使用HTML中的试题（转义字符）
https://www.w3school.com.cn/tags/html_ref_entities.html
实体的语法：
&实体的名字;
空格
> 大于
< 小于
©版权符号
-->
<p>a < b > c</p>
<br>
<!--
标题标签重要的是其语义
标题标签：
h1~h6 重要性递减
h1在页面中的重要性仅次于title标签（搜索引擎查询title后，可能会查询html标签），一般情况下一个页面只有一个h1
hgroup标题分组
-->
<hgroup>
<h1>Calculus I</h1>
<h2>Fundamentals</h2>
</hgroup>
<br>
<!--
em（斜体） 标签表示语音语调的加重
strong（加粗） 标签表示强调重要的内容
-->
<p>This course will start with a <b>brief</b> introduction about the limit of a function.</p>
<br>]
<!--
块元素（block element）
- 在网页中一般通过块元素对页面进行布局
行内元素（inline element）
- 主要包裹文字
一般情况下块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本上什么都能放
p元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如：p元素嵌套块元素，或标签写到html标签外边,可以通过F12->element查看h1
元素所在位置
Element：查看的是网页在内存中的结构
-->
<p>
<h1>p元素中不能放任何的块元素</h1>
</p>
<br>
<!--
F12中各个元素的样式
Element：查看的是网页在内存中的结构
-->
<!--
（由于是h5标签，存在兼容性问题，很少使用）
布局标签（结构化语义标签）
header：头部
main：主体（一个页面只有一个main）
footer：底部
nav：导航
aside：和主体相关的其他内容（侧边栏）
article：独立的文章
section：其他（别的标签不能表示的时候，用section标签）
div：没有语义，可以用div表示上面所有标签
span：没有任何的语义，用于在网页中选中文字
-->
<!--
列表（list）
ol（有序列表）
ul（无序列表）
dl（定义列表）
-->
<dl>
<dt>结构</dt>
<dd>结构的描述</dd>
</dl>
<br>
<!--
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他位置
a标签是一个行内元素，可以嵌套除自身外的任何元素
href：指定跳转的目标路径
相对路径会使用.或..开头
target：用来指定超链接打开的位置
_self 默认值 在当前页面打开超链接
_blank 空白的 在新的页面中打开超链接
页面内跳转，通过id进行跳转，只需要将href设置为#id
-->
<a href="javascript:;">站位符</a>
<a href="http://www.baidu.com">超链接</a>
<a href="./index.html"></a>
<a href="#bottom">去底部</a>
<p id="bottom">底部</p>
<br>
<!--
图片标签用于引入外部图片，img元素属于替换元素（介于块和行内元素之间）
src：图片地址
alt：图片的描述，图片加载不了时显示，搜索引擎会根据alt中的内容来识别图片
width：图片的宽度（像素）
height：图片的高度
- 宽度和高度如果只修改一个，则另一个会等比缩放
注意：
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
jpeg
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示图片
gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 专为网页而生
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别小
- 缺点：兼容性不好
base64（对数据进行加密，将图片用字符格式打开，直接粘贴到网页中）
- 将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引用图片
- 一般都是需要和网页一起加载的图片才会使用base64
效果一样用小的，效果不一样用好的。
-->
<img src="http://n.sinaimg.cn/news/crawl/573/w550h823/20210110/fc5b-khmynua1600645.jpg" alt="你懂得">
<br>
<!--
内联框架，用于向当前页面中引入一个其他页面
src：指定要引入网页的路径
frameborder：内联框架的边框
存在问题：内联框架里的内容不会被搜索引擎检索
-->
<iframe src="http://www.baidu.com" frameborder="0"></iframe>
<br>
<!--
audio：用来向网页中引入一个外部的音频文件
音视频文件引入时，默认情况下不允许用户自己控制播放停止
controls：是否允许用户控制播放
autoplay：音频文件是否自动播放，但是目前大部分浏览器都不对自动对音乐进行播放
loop：音乐是否循环播放
-->
<audio
src="https://m801.music.126.net/20210213000144/1e8031eea500f25cf867dc1f4300811f/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/7154686968/3813/a309/7aa8/ff02a1f1509208ad76b6bf022a50c106.m4a"
controls autoplay loop></audio>
<br>
<!--
除了通过src来指定外部文件的路径意外，还可以通过source来指定文件
ie8不支持source，支持embed
-->
<audio controls>
对不起，您的浏览器不支持播放!请升级浏览器！
<source
src="https://m801.music.126.net/20210213000144/1e8031eea500f25cf867dc1f4300811f/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/7154686968/3813/a309/7aa8/ff02a1f1509208ad76b6bf022a50c106.m4a">
<embed
src="https://m801.music.126.net/20210213000144/1e8031eea500f25cf867dc1f4300811f/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/7154686968/3813/a309/7aa8/ff02a1f1509208ad76b6bf022a50c106.m4a"
type="audio/m4a">
</audio>
<br>
<!--
video：向网页中引用一个外部的视频文件，使用方式和audio基本一样
-->
<video controls>
对不起，您的浏览器不支持播放!请升级浏览器！
<source
src="https://m801.music.126.net/20210213000144/1e8031eea500f25cf867dc1f4300811f/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/7154686968/3813/a309/7aa8/ff02a1f1509208ad76b6bf022a50c106.mp4">
<embed
src="https://m801.music.126.net/20210213000144/1e8031eea500f25cf867dc1f4300811f/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/7154686968/3813/a309/7aa8/ff02a1f1509208ad76b6bf022a50c106.mp4"
type="video/mp4">
</video>
</body>
</html>
标签：浏览器,对不起,--,元素,HTML,基础架构,超链接,播放 来源： https://blog.csdn.net/u012613869/article/details/113842011