HTML笔记整理
学了一点最基本的HTML，写个博客记录一下，也方便以后自己复习。欢迎指正~
标签和属性
<!DOCTYPE html>
（HTML5的）文档申明，不区分大小写。
<html lang="zh">
<!-- balabala……顺便，这是注释 -->
</html>
这是HTML的根标签。lang（language的缩写）是html根标签的一个属性。属性可以在标签中设置，和标签或其他属性名用空格隔开，是一个名值对结构（名 = 值)。就lang而言，其属性值"zh"表示中文，"en"表示英文。
<head>和<body>是根标签的两个子标签。
<head>
<meta charset="utf-8">
<title>Volumtuous</title>
</head>
其中，<meta>标签可以设置网页的元数据。所谓元数据（Metadata）可以理解为确定网页基本属性的数据。在这里使用charset属性，来设置网页的字符集，避免乱码（一般用utf-8）。
<title>标签，顾名思义，用于确定网页的标题，它会出现在浏览器的标签栏上：
<head>标签中大多进行一些网页本身的设置，其内容一般不在页面上显示，真正显示在页面上的内容写在<body>标签中。
<body>
<h1>我的<font color="red" size="18">第一个</font>标题</h1>
<h2>我的第二个标题</h2>
<h3>我的第三个标题</h3>
<h4>我的第四个标题</h4>
<p>我的第一个段落。</p>
<p>我的第二个段落。</p>
<p>我的第三个段落。</p>
<p>我的第四个段落。</p>
</body>
<hn>标签用于写网页的n级标题，最多6级，但一般只用1~3.
这里可以在h和p标签中设置一些文字的样式，比如字体颜色、字体大小等。但不推荐在HTML中实现这些功能，表现的部分交给CSS完成。
<p>标签用来写一个段落。
标签一般成对出现，但也有单独出现的自结束标签（“/” 可加可不加），如：<img />、<input />等。
meta标签和实体
meta标签
meta用于设置网页的元数据，即网页与生俱来的属性。例如，之前提到的charset：设置网页的字符集。
可以自己设置元数据，用name + content组合拳：
name：指定数据的名称
content：指定数据的内容
<meta name="keywords" content="Volumtuous,导航,HTML">
<meta name="description" content="这是一个很菜的网站！">
用keywords设置网页的关键词，便于搜索引擎分类查找，可以同时指定多个关键字，英文逗号隔开。
description：网站的自我介绍，显示在搜索引擎的搜索结果。
比如CSDN：
还有一些其他的meta标签，例如：
<meta http-equiv="refresh" content="3;url=http://course.zju.edu.cn/">
可以将网页重定向到新的网站，3秒后转到一个神奇的网站。
实体
在HTML中，多个空格默认会被解析为一个空格，因此，以下两个是等效的。
<p>真 棒！</p>
<p>真 棒！</p>
那如果我就要打好几个空格怎么办呢？类似地，如果我需要输入小于号，大于号等等，也都会存在这个问题。
这时候就需要用到“实体”，我把他理解为一种“转义字符”。例如，空格的实体是“ ”；小于的实体是“<”；大于的实体是“>”；版权符号©是“©”等等，可以在这里（来自w3school）中查询。
<p>真 棒！</p>
<p>真 棒！</p>
<p>真 棒！</p>
<p><h1> </h1></p>
<p>©</p>
<p><!-- 这不是一个注释 --></p>
语义化标签
- HTML注重的是结构和语义，而不是样式。
块元素（block element）
在页面中独占一行的元素称为块元素。所以h标签是一个块元素。在p标签中的内容表示一个段落，也独占一行，所以p标签也是一个块元素。
<hgroup>标签用来给标题分组，可以将一组相关的标题放在一个group中。
<hgroup>
<h1>hao</h1>
<h2>henyoujingshen</h2>
</hgroup>
<blockquote> 表示引用，是块元素，独占一行。
<p>鲁迅曾经说过：</p>
<blockquote>
这句话我没说过！
</blockquote>
行内元素（inline element）
有些标签不会独占一行，这种标签叫行内元素。例如：
<p><em>真</em>棒啊！</p>
<p><strong>真棒！</strong></p>
<p><mark>针不戳</mark></p>
的运行结果是
可以直观地看到，三个属性分别对应了斜体、加粗和高亮。但这些并不是HTML所关心的内容，就语义而言，使用 <em>>标签来表示强调的文本；使用 <strong>标签来表示重要文本；使用 <mark> 标签来表示标注的，或突出显示的文本。
同样表示引用，<q>标签就是一个行内元素，不独占一行：
子曰：<q>qwq</q>
布局标签（结构化语义标签）
- <header>表示网页的头部；
- <main>表示网页的主体部分（一个页面中唯一）；
- <footer>表示网页的底部。
即一个网页可以被分为 上、中、下 三部分。
- <nav> abbr.navigator导航
- <aside> 表示和主题相关的其他内容（侧边栏）
- <article> 表示一个独立的文章
- <section> 表示一个独立的区块。以上都不合适时，就可以用section；其他
以上都只表示语义，在没有CSS的情况下，显示效果都是一样的。而且是H5新增的，用得不多。
最常用的两个：
<div> 块，没有任何语义，就是用来表示一个区块。目前来讲，div还是最主要的布局元素。
<span> 行内元素，也没有任何语义，一般用于在网页中选中文字，和div一样是主要使用的布局元素。
关于规范
网页中一般用块元素对页面进行布局，行内元素主要用于包裹文字。一般情况下会在块元素中放行内元素，而不会相反。
块元素中基本上什么都能放，除了p中不能嵌套块元素。
但实际上，浏览器在解析代码时会修整不规范的内容，包括：
- 标签写在根元素外部
- p元素中出现块元素
- 根元素中出现了除head和body以外的子元素
- 漏写结束标签 / 开始标签
- … …
在存放到内存时，这些不规范操作会被纠正，但直接查看到的网页源码不会有改动，可以F12在element中看修整后的代码。
以p标签中出现块元素（h标签）为例：
<p><h1>我就要在p里面！</h1></p>
运行结果：
源码
而在控制台中已被纠正：
但这不意味着就能乱写，修正不一定符合预期，可能出现潜在的问题。
List（列表）
分类：
- 无序列表 - <ul>
- 有序列表 - <ol>
- 定义列表 - <dl> - 使用<dd>对内容进行解释
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<!-- · -->
<ol>
<li>铅笔</li>
<li>尺子</li>
<li>橡皮</li>
</ol>
<!-- 1 2 3 -->
<dl>
<dt>结构布局</dt>
<dd>用HTML实现</dd>
</dl>
运行效果
可以看到，最直观的区别就是列表的样式不同，但就如之前讲到的，样式不是HTML所关心的内容。事实上，在开发过程中，1 2 3 和 · 为了显示的统一都会去掉。
ul和ol区别不大，dl用得相对较少，ul用得最多。另外，列表之间还可以互相嵌套：
<ul>
<li>aa
<ul>
<li>aa
<ul>
<li>aa</li>
</ul>
</li>
</ul>
</li>
</ul>
超链接
利用超链接可以跳转到一个新的网页。超链接是行内元素，但它可以嵌套任何元素，除了它自己。
<a href="http://course.zju.edu.cn/">超链接1</a>
href是他的一个属性，属性值指定跳转目标的路径。这个路径可以是绝对路径（如上）；也可以是相对路径，当我们需要跳转到一个服务器内部时，一般会使用相对路径。
此外，href的属性值还可以是某一个标签的id（每一个标签都可以添加一个id属性，id是元素的唯一标识），在id前加上#就可以。比如，我在最后一个标签上加了一个id=“bottom”，那么就可以通过
<a href="#bottom">To Bottom</a>
实现跳转到页面底部。类似地，我们可以跳转到任意标签的位置。特殊地，href="#"可以回到顶部。
但如果目标位置没有标签怎么办？
事实上，超链接只是<a>标签的一种特殊用法。<a>标签的名字叫“锚”（anchor）。这个名字很生动地体现了下面这种用法：
<a id="top"></a>
<a href="#bottom">To Bottom</a></p>
<p>lorem</p>
<a href="#top">To Top</a>
<a id="bottom"></a>
即，在<a>标签上加id，以标记一个位置，就好比下了一个锚点，访问某个id就转到了相应的位置。这样我们就可以跳转到页面的任意位置。
另外，还有target属性，可以指定超链接打开的位置。
- _self 在当前页面中打开超链接（default）
- _blank 在一个新的页面中打开超链接
<!-- 试试这个！ -->
<a href="javascript:;">狂按有惊喜！</a>
替换元素
图片标签
引入一个外部的图片，是一个替换元素，介于块元素和行内元素之间，具有两种元素的特点，但他不独占一行。有以下几个常用属性：
- src属性
目标图片的路径，同样可以是绝对路径或相对路径。 - alt属性
图片内容的描述，默认情况下不会显示，但有些浏览器会在图片无法加载时显示，主要作用是给搜索引擎看（即，根据alt中的内容识别图片）。如果不写，则不会被搜索引擎找到。 - width，height属性
顾名思义。如果两个只改了一个，则会等比缩放；同时改变，则按改的来。所以很少同时改。PC端不建议修改图片大小：小改大，失真；大改小，浪费内存（让美工裁）。但是。移动端经常缩放，一般大图缩小。
<img src=".\DATA\IMG\doge.jpg" alt="gougou" width="240">
<!-- 这里用了相对路径 -->
图片格式
-
jpeg(abbr. jpg)
- 支持的颜色较多，不支持透明，不支持动图
- 一般用来显示照片
- 可以压缩 -
gif
- 支持的颜色较少，支持简单透明，支持动图
- 适合颜色单一的图片，动图 -
png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 专为网页而生 -
webp
- 谷歌专门用来表示网页中图片的一种格式
- 支持颜色丰富，支持复杂透明，支持动图，而且文件特别小
- 致命缺点：兼容性差 -
base64
- 将图片用base64进行编码，这样可以直接将图片转换为字符，通过字符的形式引入图片
- 磁力链接就是类似原理
- 一般只有需要和网页一起加载的图片才会用base64
（网页会向服务器请求引入外部图片等，导致这些图片显示出来会有延时，而base64没有延时，和网页一起出现）
原则：效果一样用小的，效果不同用好的。
内联框架
作用和img非常像，用于向当前页面中引入一个其他页面，属性：
- src 引入网页的路径
- frameborder 边框有无
- width height 一样
<iframe src="https://www.csdn.net/" width="900" height="600" frameborder="1"></iframe>
音视频
<audio>标签 用于引入一个外部的音频文件；
<video>标签 用于引入一个外部的视频文件。
音视频类似，有以下几个常用属性：
- controls 添加后允许用户控制播放，不需要属性值
- autoplay（大部分浏览器都不会自动对音乐进行播放）自动播放，也不需要属性值
- loop 循环播放，同样没有属性值
<audio src=".\DATA\audio\trash_no_3.mp3" controls></audio>
除了通过src,还可以用过source指定路径。将audio写成代码块：
<audio controls>
Sorry, your browser doesn't support this media, please upgrade it!
<!-- 这里的文本内容可以被不支持audio的浏览器看到，支持的浏览器会直接去看source里的src -->
<source src="DATA/audio/Trash_no_3.mp3">
<!-- 还可以在这里加其他格式的音频，解决兼容性问题 -->
<!-- 可以在这里加embed（见下），前面支持的就不会走到这里，写了这个就不用sorry了 -->
</audio>
<embed>标签（不推荐）
用于在辣鸡浏览器（如IE8）中植入音视频。必须指定width和height，而且自动播放，而且还要在type中指定文件格式。
1106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
