0x01 HTML元素
<p class="editor-note"> this is a html element </p>
其中 <p>为开始标签，</p>为结束标签，this is a html element为内容，以上三者所有相结合即为一个元素，class="editor-note"为标签的属性，“”内包含的为属性的值。
一个元素放在其他元素中。就称作嵌套:
<p> My cat is <strong> angry </strong>.</p>
<p> My cat is <strong> angry </strong>.</p>
不包含任何内容的元素称为空元素，下面给出的代码中有两个属性，但是并没有</img>结束标签，元素里也没有内容，这是因为，图像元素不需要通过内容来产生效果，它的作用是在所在位置嵌入一个图像。
<img src ="images/firefox-icon.png" alt="测试图片">
下面来看一个完整又简单的 HTML文档：
<!-- <p>我在注释里！</p> -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<img src="/2021-07-19 145450.png" alt="测试图片">
</body>
</html>
-
<!DOCTYPE html>声明文档类型。 -
<html></html>根元素，包含整个页面的内容。 -
<head></head>头元素，用于进行一些面向搜索引擎的关键词、页面描述、CSS样式表和字符编码声明等。 -
<meta charset="utf-8">指定使用UTF-8编码 -
<title></title>页面标题 -
<body></body>页面呈现内容 -
<img>包含两个属性：地址属性与替换文字描述，后者用于当图像不能显示时描述该图像
标记文本
-
标题：
<h1>主标题</h1><h2>顶层标题</h2><h3>子标题</h3><h4>次子标题</h4> -
段落：
<p1> 段落1</p1> -
列表：
<ul>无序列表</ul><ol>有序列表</ol>
示例：
<ul>
<li>firstly</li>
<li>secondly</li>
</ul>
<ul>
<li>firstly</li>
<li>secondly</li>
</ul>
引用
行内引用：<q></q>
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>
块引用：<blockquote></blockquote>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>
缩略语： <abbr>
<p> <abbr title="Royal Never Give Up">RNG </abbr> will win the game!</p>
<p> <abbr title="Royal Never Give Up">RNG </abbr> will win the game!</p>
代码
描述代码段 <code>、保留所有空字符 <pre>
标记日期<time>
<time datetime="2016-01-20">2016年1月20日</time>
字体
-
<em></em>斜体 -
<srong></strong>粗体
链接
<a href="www.baidu.com"> 百度</a>
<a href="www.baidu.com"> 百度</a>
-
<a>为锚元素：通过它的href属性创建通向其他网页、文件、同一页面内的位置、电子邮件或任何其他 URL的超链接。 -
href代表超文本引用（hypertext reference）
元素类型
-
块级元素：以一整块的形式在网页中展现，前后的内容都需要另起一行，用于展现结构化的内容如
<p> -
内联元素：通常出现在块级元素中，并包围一小段文档内容如
<em> -
空元素：没有结束标签的元素，通常用于在该位置中嵌入一些内容如
<img>
布尔属性
没有值的属性或属性值只能和属性名相同的属性，如disabled
<input type="text" disabled>
<input type="text">
<input type="text" disabled>
<input type="text">
实体引用：特殊字符编码
-
<-->< -
>-->> -
"-->" -
'-->apos; -
&-->&
<head>头部元素
-
<title>html文档标题，而<h1>为body的标题 -
<meta>元素：元数据，描述数据的数据，包含文档的各种属性，如编码类型；同时包含name和content属性name指定meta元素类型content指定内容-
如：
<meta name="author" content="Chris Mills"> <meta name="description" content="The MDN Learning Area aims to provide complete beginners to the Web with all they need to know to get started with developing web sites and applications.">
在HTML中应用CSS和JavaScript
<link rel="stylesheet" href="my-css-file.css">
CSS使用link元素,位于文档头部：
-
stylesheet表明这是文档的样式表 -
href包含样式表文件的路径
<script>一般放在文档尾部</body>标签之前，以确保在加载脚本之前浏览器已经解析了HTML内容：
<script src="my-js-file.js"></script>
统一资源定位符URL与路径Path
URL使用路径查找文件
- 当前目录
- 子目录: 子路径名/当前路径
- 上级目录： ../
相对链接与绝对链接 - 绝对URL即绝对定义的位置，包含协议、域名、文件目录等
- 相对URL即表示某一相对位置，其路径随着在不同文件夹的位置而相对变化
- 尽量使用相对URL，便于服务器查找请求文件，而无需额外进行域名解析
网站架构
-
<header>页眉 -
<nav>导航栏 -
<main>主内容，可包含<article>、<section>、<div> -
<aside>侧边栏 -
<footer>页脚
无语义元素
内联无语义元素 <span>、块级无语义元素<div>
换行 <br> 水平分割线 <hr>
Iframe嵌入
标签<iframe>用于将一个网页嵌入至另一个网页中，使用时包含一下属性：
-
allowfullscreen全屏显示该嵌入网页 -
frameborder为嵌入的网页绘制边框 -
src嵌入网页的URL路径 -
width和height宽与高 -
sandbox沙盒将嵌入内容与外部环境隔离
CSS
将CSS与Html文档联结，即可使用选择器控制文本样式
p{
color:green;
}
<p>Put on my eyes.</p>
类名
special作为一个类
.special{
color:orange;
font-weight:bold;
}
<ul>
<li>项目一</li>
<li class="special">项目二</li>
<li>项目 <em>三</em></li>
</ul>
还可单独选择某一元素中的类
li.special{
color:red
}
<ul>
<li class="special">item1</li>
<li> item2</li>
</ul>
可选择某一元素内的部分
li em {
color: rebeccapurple;
}
还可进行定位，如标题<h1>后面紧跟的<p> ：
h1 + p{
color:yellow;
}
<h1> 春江花月夜 </h1>
<p>春江潮水连海平</p> //This line will be yellow.
<p>海上明月共潮生</p> //Not this line.
根据状态确定样式
a:link {
color: pink;
} //正常链接为粉色
a:visited {
color: green;
} //点击过的链接为绿色
a:hover {
text-decoration: none;
} //悬停的链接移除下划线
选择器的优先级
- 两个选择器，后一个会覆盖前一个
- 类的优先级比选择器高
函数
.box {
padding: 10px;
width: calc(90% - 30px); //计算（块宽度的90% - 30px）
background-color: rebeccapurple;
color: white;
}
规则
当浏览器宽度大于30em时，背景为蓝色，小于为粉色
body {
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}
速记属性
padding: 10px 15px 15px 5px;
//相当于
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
//相当于
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
CSS如何工作
-
浏览器先载入html文件
<p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span> </p> -
将html文件转化为一个DOM(标记各个元素的树形结构)
P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets" 浏览器将 HTML相关的资源拉取，包括图片、音视频、CSS样式等（不包括JavaScript）
浏览器对拉取的CSS进行解析，根据不同的选择器将不同的规则应用至对应的DOM节点，这个步骤被称为渲染树
渲染后进行布局，页面显示
注：当由于版本或 CSS样式书写错误等问题，浏览器无法解析某些 CSS样式，则会跳过这些无法解析的规则，因此不会对网页显示造成影响。
JavaScript
JavaScript是在 HTML与 CSS将网页样式构建完成后才被执行，通常依靠DOM API动态修改 HTML与 CSS来更新用户界面。
使用<script>标签将 JS代码添加在 HTML文档中，<script src="script.js" async></script>，其中async表示异步执行外部脚本，是一个最小化属性，不同脚本之间的调用是相互独立的。选择defer属性时，多个关联脚本会按顺序调用而不会发生错误。
事件
浏览器进行的动作就是一个事件，侦听事件发生的结构被称为事件监听器（Event Listener），响应事件触发而运行的代码称为事件处理器（Event Handler）
guessSubmit.addEventListener('click', checkGuess);
此代码中，事件监听器为addEventListener，包含两个参数，动作click与执行函数checkGuess。注意：此处函数作为监听器的参数时，不加“（）”
