引入

Day 3

现在的前端过于快餐化，基础牢，才能走得更远。

知识点

常用标签英文全称及释义

HTML标签	英文全称	中文释义
a	Anchor	锚
alt	alter	替用
b	Bold	粗体（文本）
br	Break	换行
cite	Citation	引用
dd	Definition Description	定义描述
dl	Definition List	定义列表
dt	Definition Term	定义术语
div	Division	分隔
em	Emphasized	加重（文本）
hr	Horizontal Rule	水平尺（分割线）
href	hypertext reference	超文本引用
i	Italic	斜体（文本）
iframe	Inline frame	内联框架
ins	Inserted	插入（的文本）
kbd	Keyboard	键盘（文本）
li	List Item	列表项目
ol	Ordered List	排序列表
p	Paragraph	段落
pre	Preformatted	预定义格式（文本）
q	Quotation	引用语
rel	Reload	加载
s/ strike	Strikethrough	删除线
samp	Sample	示例（文本
span	Span	范围
src	Source	源文件链接
sub	Subscripted	下标（文本）
sup	Superscripted	上标（文本）
td	table data cell	表格中的一个单元格
th	table header cell	表格中的表头
tr	table row	表格中的一行
u	Underlined	下划线（文本）
ul	Unordered List	不排序列表

JavaScript本名LiveScript，是为了指示与Java语言的市场关系而改名

script标签

可以使用<script type="text/javascript">...</script>直接写脚本

也可以使用<script type="text/javascript" src="xxx"></script>来引入外部脚本

（其实type属性经常被省略）

script标签可以放置在html的任意位置，head、body，甚至是div。

按由上至下串行的顺序执行。首次加载(包括下载，解析，执行等步骤)script期间，会阻塞HTML页面解析，可能出现暂时白屏等情况。

所以，首屏渲染时建议将script标签放到<body>元素的最下方，以保证页面先显示再加载脚本。

特殊字符

&xxxx; 可以表示特殊字符

列举几个常用的英文特殊字符

", "
&, &
<, <
>, >

（稍稍涉及到XSS攻击）

斜体对应的属性为font-style

可选 normal, italic, oblique

加载在线字体

在css文件中

@font-face {
    font-family: "some_name";
    src:url("some_location");
}

p{
    font-family:"some_name";
}

text-align用处

text-align属性可用调整块级元素内的布局：left, right, center

最常用于div, h1等，也可以用于section, header等

三类列表标签

ol 有序列表
ul 无序列表

可以通过list-style-type属性修改列表项前面的样式

dl 定义列表(特殊)

<dl>
  <dt>术语的键</dt>
  <dd>可以理解为术语的值</dd>
  <dt>Course Helper</dt>
  <dd>
  厦门大学course平台第三方客户端，一个Electron+Vue3作为前端，Python作为本地后端的桌面端软件。
  </dd>
</dl>

效果如图：

表格

表格相关标签

表格从table标签开始

每个tr标签代表一行(table row)

每个td标签代表一个单元格(table data cell)

每个th标签代表一个表头单元格(table header cell)

thead, tbody, tfoot标签，可以用于给表格的行进行分组，从而设置不同的样式，增强语义化

表格边框

\*
设置border-collapse属性可以将这些元素间的边框共享（避免边框宽度不一致）
*\
table, tr, th, td{
    border: 1px solid black;
    border-collapse: collapse;
}

还可以对thead, td等标签使用background-image:url(a.jpg);来实现背景图片填充

表格的宽度

表格默认会自动扩展宽度以适应内容

可以通过设定表头单元格宽度来调整一列的宽度

表格的对齐

默认情况下会左对齐、垂直居中

可以对任何tr, td, th使用text-align和vertical-align样式来修改对齐

对tr修改会调整整行，td, th只能调整自己一个单元格(优先级最高)。

表格的跨越

对th, td使用colspan="n"属性可以将一个单元格扩大占据n列，rowspan同理

使用表格进行页面布局

早期常见使用表格来实现页面布局，但现在有别的代替方案，所以table还是仅仅用于显示表格。

在新的浏览器窗口打开链接

<a href="/xxx/xxx.html" target="_blank">新窗口</a>

用于a标签的伪类

伪类可以用于设置不同环境下的元素样式（比如用户与元素交互的多种不同状态）

适用于a标签的有link, visited, hover, active

a:link描述未被访问过的链接，a:visited相反

a:hover描述用户鼠标悬停的链接, a:active描述正在被点击，但鼠标未被释放的链接。

vertical-align

vertical-align可以使该元素与父元素按一定方式进行对齐

主要用于inline元素、inline-block元素和普通的文本(也可以看做内联)

vertical-aligh默认为baseline

vertical-aligh来实现垂直居中时注意调整父元素的line-height，参考学习笔记02

此外还可以取text-top来实现与行内最高的元素顶部对齐（一般用于图像+文本同一行的情况）

map标签

很少使用，作用为给图片设置不同区域的点击跳转（图像映射）

（可以用在地图图片上，实现点击不同省份跳转到不同页面）

<img src="xxx.jpg" alt="pic" usemap="#the_map">
<map id="the_map">
    <area shape="rect" coords="20,20,80,80" href="#rect" alt="矩形">
    <area shape="circle" coords="200,50,50" href="#circle" alt="圆形">
    <area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly" alt="多边形">
</map>

object标签（不常用）

<object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

embed标签（不常用）

<embed> 标签定义嵌入的内容，比如插件。

audio、video标签

H5常用的音频、视频播放方式。

HTML、CSS和JavaScript入门经典 学习笔记（03）

引入

知识点