本篇博客是参考了以下教程做的笔记：开始学习 HTML:https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started
文章目录
文件处理
文件命名规范
文件夹名和文件都使用小写字母，且没有空格。因为很多计算机，特别是 Web 服务器，是对大小写敏感的。浏览器、Web 服务器，还有编程语言处理空格的方式不一致。
最好使用中划线，而不是下划线来分离单词：对比 my-file.html 和 my_file.html 。简言之，文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符， 但不会识别下划线。
文件路径
若引用的目标文件位于 HTML 文件的上级，需要加上两个点。比如，如果 index.html 在 test-site 下面的一个子目录而 my-image.png 在 test-site 目录，你可以在 index.html 里使用 ../my-image.png 引用 my-image.png 。
../文件上级目录
./文件根目录
Windows 文件系统使用反斜杠而不是正斜杠，比如 C:\Windows 。但与 HTML 没什么关系，即使在 Windows 上做 Web 开发，代码中仍应使用正斜杠/。
HTML — 构建 Web
HTML概念
HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。
HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签 <title> 写作<title>、<TITLE>、<Title>、<TiTlE>，等等都可以正常工作。不过，从一致性、可读性等各方面来说，最好仅使用小写字母。
HTML元素：
块级元素和内联元素：
块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>
空元素：
不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素<img>是用来在元素<img>所在位置插入一张指定的图片。
<img src="images/firefox-icon.png">
属性：属性值应该加上""
HTML文档结构
引用特殊字符：
重点掌握 空格 <小于号 >大于号
HTML 头部元素
HTML <head> 元素与 <body> 元素不同，它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据，大型页面的 head 会包含很多元数据。
<title> 元素用于表示整个 HTML 文档的标题（而不是文档内容）。
HTML有一个“官方的”方式来为一个文档添加元数据—— <meta> 元素，许多<meta> 元素包含了name 和 content 特性：name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。content 指定了实际的元数据内容。
许多 <meta> 特性已经不再使用。 例如，keyword <meta> 元素（<meta name="keywords" content="fill, in, your, keywords, here">）— 提供关键词给搜索引擎，根据不同的搜索词，查找到相关的网站 — 已经被搜索引擎忽略了， 因为作弊者填充了大量关键词到keyword， 错误地引导搜索结果。
在元数据中添加对自定义图标的引用，添加到HTML <head>中以引用它：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
要使用 CSS 让网页更加炫酷，就在HTML头部元素中使用 <link>元素。 link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径，例如：<link rel="stylesheet" href="my-css-file.css">
要使用JavaScript让网页有交互功能，就使用<script> 元素。<script> 部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在 标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。例如：<script src="my-js-file.js"></script>
注意： <script>元素看起来像一个空元素，但它并不是，因此需要一个结束标记。您还可以选择将脚本放入
为站点设定语言， 这个可以通过添加lang属性到HTML开始标签中来实现：
HTML 基础文字
<sub> <sup>
HTML 高阶文字排版
描述列表
描述列表使用与其他列表类型(<ol> <ul>)不同的闭合标签— <dl>;
此外，每一项都用 <dt> (description term) 元素闭合。
每个描述都用 <dd> (description description) 元素闭合
引用
如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，
你应该把它用<blockquote>元素包裹起来表示，
并且在cite属性里用URL来指向引用的资源。
行内元素用同样的方式工作，是使用<q>元素。
eg.
<p>你好！欢迎访问我的激励网页！<a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>孔子</cite></a>曰：</p>
<blockquote cite="https://zh.wikipedia.org/zh-hans/孔子">
<p>譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。</p>
</blockquote>
<p>要保持乐观，<q cite="http://www.affirmationsforpositivethinking.com/">不要说泄气的话</q>。
（源自 <a href="http://www.affirmationsforpositivethinking.com/"><cite>Affirmations for Positive Thinking</cite></a>。）</p>
缩略语
<abbr>常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）
<pre> d:</pre>
d:
HTML 布局元素
<main> 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其它元素。
<article> 包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。
<section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
<aside> 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
<header> 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼 标题）。
<nav> 包含页面主导航功能。其中不应包含二级链接等内容。
<footer> 包含了页面的页脚部分。
无语义元素<div> <span>
<br> 可在段落中进行换行
<hr> 元素在文档中生成一条水平分割线
HTML 图片
<img src="images/dinosaur.jpg"
alt="一张关于恐龙的照片"
width="400"
height="341"
>
使用 HTML5 的 <figure> 和 <figcaption> 元素，它正是为此而被创造出来的：为图片提供一个语义容器，在标题和图片之间建立清晰的关联
<figure>
<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
width="400"
height="341">
<figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>
如果图像对您的内容里有意义，则应使用HTML图像。 如果图像纯粹是装饰，则应使用CSS背景图片:为页面中的所有段落设置一个背景图片
p {
background-image: url("images/dinosaur.jpg");
}
HTML 音频和视频
HTML5 标准提出，其中有许多的新特性，包括 <video> 和 <audio> 标签
<video src="rabbit320.webm" controls>
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
浏览器并不全支持相同的 codecs，所以你得使用几个不同格式的文件来兼容不同的浏览器。如果你使用的格式都得不到浏览器的支持，那么媒体文件将不会播放。
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
浏览器将会检查 <source> 标签，并且播放第一个与其自身 codec 相匹配的媒体。
<audio> 标签与 <video> 标签的使用方式几乎完全相同
<audio> 标签不支持 width/height 属性 —
由于其并没有视觉部件，也就没有可以设置 width/height 的内容。
同时也不支持 poster 属性 — 同样，没有视觉部件
HTML 表单元素
CSS — 设计Web
text-indent: 2em;首行缩进2个字
选择器
.classname{} 类选择器
#idname{} ID选择器
*{} 通配符选择器
p{} 标签选择器
复合选择器
后代选择器：空格分隔，选的是最后一个元素，儿子孙子符合的都选
子元素选择器：大于号分隔，只选儿子，孙子不选
并集选择器：逗号分隔，全部选中
链接伪类选择器：LVHA顺序
a:link{}没点过
a:visited{} 点过
a:hover{} 鼠标滑过
a:active{} 选中时
focus伪类选择器：input:focus 表单元素焦点
元素显示模式
块元素：指定高宽，独占一行，文字块中不能放块元素
行内元素：不能指定高宽，高宽默认为内容大小，一行可以放多个行内元素，行内元素不能放块元素
行内块元素：一行可以放多个行内元素，可以指定高宽
相互转换
display:inline;
display:block;
display:inline-block;
文字居中
水平居中：text-align: center;
垂直居中：让文字的行高等于盒子的高度 height: 40px; line-height: 40px;行高偏大文字靠下，行高偏小文字偏上
图片
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；
background-attachment：
scroll 背景图像是随对象内容滚动
fixed 背景图像固定
选择器优先级
继承或* 0000
标签选择器 0001
类选择器、伪类选择器 0010
ID选择器 0100
!important 1000
权重虽然有叠加，但是永远不会有进位
2519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
