Bluemsun第二周预习

HTML常用标签

文本元素

1.h标签
h标签表示标题，从h1~h6共有六级标题，在代码中经常出现。
下面展示一些

// <h1>标题</h1>
//h$*6>{$级标题}+TAB(简写)

2.p标签
p标签表示段落，经常蕴含文章体或表示内容。
代码同理于h标签

3.span标签
span标签无实际语义，仅用于设置样式。

<p>These words are <span color="red">red</span>,<span color="blue">blue</span> and <span color="green">green</span>. </p>

此段代码可实现段落中出现的颜色单词显示它们本身的颜色。
4.pre标签
预格式化文本元素（保留其原本格式）
例如我用标点符号实现了一个颜文字（笑），那我就可以使用pre元素来保留其原本格式，以防止空白折叠。
空白折叠：源代码中的连续空白字符在页面显示时会被折叠成一个空格，

pre内部含有默认的css属性

5.实体字符
实体字符就是例如’<‘’>'的字符表达，为了防止与代码发生冲突产生歧义而诞生，其写法为

&+单词
&+#+数字

其中实体字符的具体对应表达可在MDN中查找
链接: link.
几个常用的实体字符

&lt    <
&gt    >
&nbsp  空格
&copy  版权符号
&amp   &

a元素

a元素本身代表超链接，是前端常客，各类跳转用到很多，鉴于其特殊地位，这里单独分析其属性。
1.href属性
hyper refrence的缩写，表示引用超链接
介绍三个使用方法
一.跳转地址
老生常谈了，就跳转到蓝旭官网吧

<a href="http://39.105.3.107:9080/index.html#/">蓝旭官网</a>

这样就完成了一次跳转
二.跳转到锚点
锚点的作用就类似与markdown编译器中的蓝色字体，点击后就能跳转到文章的某一点，具体实现方式则是要利用“id”这一属性,对想要标点的位置进行命名（实际上id是独一无二的）

<a href="#+id">锚点1</a>
速写:a[href="#chapter$"]*(锚点数)>{内容}+tab

三.功能性链接
功能性链接表示点击后会触发某种功能；例如执行Javascript代码等

JS:<a href="javascript:alert('你好')">
发邮件：mailto
拨号：tel

2.target属性
target属性表示跳转的窗口位置，由其取值决定。

_self     在当前页面打开
_blank    在新标页面打开

图片元素

1.img元素
img元素一般有两个属性：src和alt
src：source的简写，来源，其中包含图片的路径（站内资源使用绝对或者相对路径，站外资源使用绝对路径）
alt：表示在图片失效时，此属性中的内容来代替图片（该图片已丢失？？）
2.与a元素联用
作用就是在点击图片时进行链接跳转

<a href="http://39.105.3.107:9080/index.html#"><img src="图片链接"></a>

3.与map元素联用
通过map属性可以实现点击图片的某一区域来跳转到不同链接的效果
具体实现方式类似与锚点之于a元素
map子元素：area元素
area元素是配合map属性在图片上面截取相应区域的元素，其属性有shape，coords，href，alt等，其中shape表示形状，coords表示坐标，shape的不同取值决定coords的取值。
shape取值有：圆形 circle（圆心横坐标，纵坐标，半径）
矩形 rect（左上点，右下点）
多边形 poly（有n条边就写n个坐标）
图像的坐标是从左上点沿横向为x轴，沿左下为y轴。

4.与figure元素联用
指代，定义，通常用于把图像，标题，描述包裹起来。

多媒体元素

video元素与audio元素
两者分别指代视频与音频，其表达方式类似于img元素，其属性大多数为布尔属性。
布尔属性：只有两种状态的属性，要么不写，要么取值为其属性名。
布尔属性有：
controls：表示控制控件的显示。
autoplay：自动播放。
muted:静音播放。
loop：循环播放。
需要注意的是不同浏览器的兼容性，旧版浏览器可能不支持。

列表元素

1.无序列表：ul li
ul：unorderlist li：list item，二者为父子元素关系，其中ul元素可对li的样式产生影响
（这里尽量不用，CSS是实现其样式的主要方式，二者有些冲突，具体参考MDN），多数用于制作菜单，新闻列表。
type属性：取值决定了其列表以什么序列开头（CSS中样式更多。。。）
reversed属性：表示列表倒序，
2.有序列表ol li
同理于ul，但是应用范围远小于ul

ul>li*4>内容+tab

3.定义列表
一般用于术语的定义
dl，dt，dd等

容器元素

此类元素比较重要，内部用于放置其他元素，绝大多数网页需要其来实现结构。
1.div元素
div元素无语义，十分的万金油，遇事不决就用div，人生无常，大div包小div。
出现频率极高。
2.语义化容器元素
字面意思，就是特定的容器元素：
header：通常用于表示页头，也可以表示文章头部
footer：通常用于表示页尾，也可以表示文章尾部
article：整篇文章
section：文章章节
aside：通常表示侧边栏，附加信息

浏览器

浏览器结构

用户界面 －包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了页面窗口之外的其他部分
浏览器引擎 －可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心
渲染引擎 －解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎
网络 －用来完成网络调用或资源下载的模块
UI 后端 －用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的。
JS解释器 －用来解释执行JS脚本的模块，如 V8 引擎、JavaScriptCore
数据存储 －浏览器在硬盘中保存 cookie、localStorage等各种数据，可通过浏览器引擎提供的API进行调用

由于渲染引擎工作原理我看不懂，这里就不再过多赘述了 。
写于2022/4/5 23：50.