HTML5+CSS3学习笔记（一）
本系列更多文章，可以查看专栏 HTML+CSS学习笔记
文章目录
一、网页基本结构（HTML）
1. HTML基本结构
提示：保存为后缀为.html的文件
<!-- 单行注释或多行注释，浏览器忽略注释，但源码中可以查看注释 -->
<!-- 文档声明，声明网页版本为HTML5版本，不区分大小写 -->
<!DOCTYPE html>
<!-- 网页根标签，网页内容写在此标签中间 -->
<!-- lang表示网页的语言，en表示英文网页，zh表示中文网页 -->
<html lang="en">
<!-- html子元素之一，网页头部，帮助浏览器或搜索引擎解析网页 -->
<head>
<!--
meta设置网页元数据，元数据并不是给用户看的
charset 指定网页字符集
name 指定数据的名称
content 指定数据内容
……
-->
<!-- 字符集包括ASCII、ISO88591、GB2312、GBK、UTF-8等 -->
<meta charset="UTF-8">
<!-- mata的name及content属性，可以用来指定关键词，也可以指定描述…… -->
<meta name="keywords" content="关键词1，关键词2……">
<meta name="description" content="关于网站的描述……">
<!-- 将网页进行重定向到另一个网站，"3"表示"3秒后跳转至另一网站" -->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<!-- titie内容显示在浏览器标题栏，可作为搜索引擎的超链接文字 -->
<title>网页的标题，搜索引擎给出的超链接的文字</title>
</head>
<!-- html子元素之一，网页的主题，网页中所有可见内容写在此标签内部-->
<body>
此处省略网页主体内容
</body>
</html>
展示效果如下图所示：
3秒后，重定向至第二个网站
2. 文档模式
注：可以使用 doctype 切换文档模式，最初拥有 混杂模式（quirks mode）、标准模式（standards mode），随后出现了准标准模式（almost standards mode）
- 混杂模式和标准模式，主要区别体现在通过CSS渲染的内容方面
- 准标准模式和以上两种模式，主要区别体现在如何对待图片元素周围的空白（表格中使用图片最明显）
- 一般不区分准标准模式和标准模式，非常接近
二、语义化标签
-
块元素（block element）：会独占一行，对页面进行布局
-
行内元素（inline element）：不独占一行，主要用来包裹文字
- 块元素中可以包含块元素，也可以包含行内元素
- p标签中不可以包含任何块元素
- 浏览器解析网页时，会自动对网页中不符合规范的内容进行修正，可通过F12查看修正后的代码
1. 常见的语义化标签及特殊符号
标签常常成对出现，也会单独出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见的语义化标签及特殊符号</title>
</head>
<body>
<!-- ''' 1.成对出现的标签 ''' -->
<!--
h1-h6共有六级标题，h1重要性仅次于title，h1-h6重要性依次递减
标题标签，block元素
-->
<hgroup>
标题分组标签，可将一组的多级标题放在此处
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
</hgroup>
<!-- p段落标签，block元素 -->
<p>段落标签</p>
<!-- em强调标签，inline元素 -->
<em>强调标签，斜体显示</em>
<br><br>
<!-- blockquote长引用，block元素 -->
长引用：<blockquote>会和之前的内容会换行，是块元素</blockquote>
<!-- q引用，inline元素 -->
短引用：<q>不会和之前的内容换行，会添加单个空格和一对引号，是行内元素</q>
<!-- ''' 2.自结束标签,可以不成对出现 ''' -->
<!-- br标签，换行-->
<br>
<!-- hr标签，分割线-->
<hr>
<!-- ''' 3.特殊字符/实体：格式为"&特殊字符名字;" ''' -->
<!-- 空格-->
前 端
<!-- 大于号-->
>
<!-- 小于号-->
<
<!-- 版权符号-->
©
<!-- 更多元素可以查询w3school在线文档，链接:https://www.w3school.com.cn/ -->
</body>
</html>
展示效果如下图所示：
2. 结构化语义标签 / 布局标签
- header 网页的头部
- main 网页的主体部分
- footor 网页的底部
- nav 网页中的导航
- aside 网页中的侧边栏
- article 独立的文章
- section 表示独立区块，上面标签不能表示时，可用section
实际开发中更为常用的标签
- div 没有语义，块元素，可以表示以上所有标签
- span 没有语义，行内元素，一般在网页中选中文字**
三、丰富的HTML网页
1. 列表
多种列表之间可以互相嵌套
| 列表类型 | 列表标签 | 列表项标签 | 列表项标记 | 列表与列表项之间 |
|---|---|---|---|---|
| 有序列表 | ol | li | 类似1.2.3. | 无回车 |
| 无序列表 | ul | li | 第一层默认为黑色实心圆点，嵌套层次越多标记在变化 | 无回车 |
| 定义列表 | dl | dd | 无标记 | 有回车 |
注：dl定义列表，dt定义标题，dl定义描述
<!--
以下结构快捷生成方式（不含文字和id值）
ul>((li>(ol>li*2))+(li>(dl>dd*2))) 然后按TAB键
-->
<ul id="list">
<li>
无序列表项1
<ol>
<li>无序列表项1下的有序列表项1-1</li>
<li>无序列表项1下的有序列表项1-2</li>
</ol>
</li>
<li>
无序列表项2
<dl>
注：定义列表dl与定义列表项之前会有回车
<dt>标题1</dt>
<dd>无序列表项2下的定义列表项2-1</dd>
<dt>标题2</dt>
<dd>无序列表项2下的定义列表项2-2</dd>
</dl>
</li>
</ul>
展示效果如下图所示：
2. 内联框架
iframe内联框架,将其它页面在当前页面加载，行内元素
- src，指定其它页面地址
- frameborder，0表示无边框，1表示有边框，省略默认为1（html5不支持）
- width，可以指定窗口大小的高度（单位：像素），可省略
- height，可以指定窗口大小的宽度（单位：像素），可省略
<iframe src="https://www.csdn.net/" frameborder="0" width="800" height="400"></iframe>
展示效果如下图所示：
3. 图像
img图像标签,不需要成对出现，行内元素
- src，指定本地图片路径或网络图片链接或图片Base64编码
- alt，加载不出来指定图片后显示的图片描述信息
- width，设置图片宽度（单位：像素），单独设置时，height等比例缩放
- height，设置图片高度（单位：像素），单独设置时，width等比例缩放
| 图片类型 | 特点 | 备注 |
|---|---|---|
| jpeg/jpg | 支持的颜色比较丰富，不支持透明效果，不支持动图 | 用于显示照片 |
| gif | 支持的颜色较少，支持简单透明，支持动图 | 用于颜色单一的图片、动图 |
| png | 支持的颜色丰富，支持复杂透明，不支持动图 | 用于颜色丰富、复杂透明的图片 |
| webp | 拥有以上优点且文件小，但兼容性不高 | 谷歌推出的专门用来表示网页中图片的一种格式 |
<img src="./imgs/1.jpg" alt="这里是图片1">
<img src="./imgs/2.png" alt="这里是图片2" width="500">
展示效果如下图所示：
4. 音频 / 视频
音频与视频类似，仅以音频为例
audio音频标签 / video视频标签,行内元素
- src 指定本地音频（视频）路径或网络音频（视频）路径
- controls 用户可以自主控制
<!--
方式1，插入音频
- 只能指定单一src源
- 加载不成功无其它提示信息
-->
<audio src="./source/song1.mp3" controls></audio>
<!--
方式2，插入音频
- 这种方式更为常见，兼容性更高
- 默认从上至下加载audio中的source或embed的src路径，直至加载成功；否则显示文字
-->
<audio controls>
这是第二首歌，如果未加载成功，请升级浏览器！
<source src="./source/song2.mp3"></source>
<source src="./source/song2.ogg"></source>
<!-- IE8以下的插入音频的方式,具体用法自行查阅文档 -->
<embed src="./source/song2.mp3" type="audio/mp3">
</audio>
展示效果如下图所示：
5. 超链接
a超链接标签，可以通过点击实现跳转
- href，跳转的超链接地址
- ./网页包含后缀的文件名，默认链接当前目录下的文件
- ../网页包含后缀的文件名，至当前目录的上一级目录下的文件
- 可在./或../与文件名之间添加单层或多层的目录，如./test/文件名，只当前目录下的test文件夹中的指定文件
- target，指定打开地址的方式
target的默认值为_self,指从当前页面跳转至新页面或锚点处；若为_blank，则指在新的空白页面打开指定链接。
<!-- 链接至外部页面 -->
<a href="https://www.baidu.com" target="_blank">点击打开百度首页</a><br>
<a href="html+css1-2.html">跳转至html+css1-2.html</a><br>
<!-- 链接到指定锚点处 -->
<a href="#list">回到某一标签id为list的位置</a><br>
<!-- 链接至当前页面顶部，或作为占位符，以便后续换成其它链接 -->
<a href="#">回到顶部</a><br>
<!-- 更为常用的链接占位符，没有任何效果 -->
<a href="javascript:;">无动作的占位符超链接</a>
展示效果如下图所示：
结尾
如有错误，欢迎评论区指正。
更多其它知识可查询在线文档：[w3school在线教程链接](https://www.w3school.com.cn/)
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
