第一章：HTML基础

第零章：概论

1.1HTML概述

Hello World

一级标题

段落内容

指定HTML版本+告诉浏览器使用的渲染模式；不写：页面展示效果不好 root；root=head+body 元数据 = 页面编码 + 页面标题 页面编码 页面标题 页面内容

一级标题

段落内容

1.1.1DOM树

1.1.2HTML语法

标签和属性不区分大小写，推荐小写

空标签可以不闭合，比如input、meta

属性值推荐用双引号包裹

某些属性值可以省略，比如required、readonly

1.2文本类标签

1.2.1一个完整的URL

可以省略某些部分

浏览器会根据当前页面的URL进行补全。

1.2.2相对路径和绝对路径

绝对路径：完整域名or路径以 / 开头

相对路径：不以 / 开头（相对当前页面URL所在目录）

Hash：定位指定ID的元素（页面内链接）

Hash可以追踪页面的锚点

一个指定了hash的URL，在打开之后，可以自动滚动到页面中id元素的位置

target：链接打开方式

_self：当前页面打开

_blank：新窗口打开

当前窗口打开 新窗口打开

1.2.3引用

blockquote长引用：引用别的文章中的几个内容

q短引用：不超过几句话

cite引用来源（书、影视、页面）

天才并不是自生自长在荒野里的怪物

维基百科上说 JavaScript 最初命名为 Mocha

1.2.4强调

em强调重读

strong强调重要性

猫是可爱的动物

猫是可爱的动物

猫是可爱的动物

用法和用量：每日三次，每次1片，饭后服用。 警告：孕妇和儿童请遵医嘱。

1.2.5代码

code代码段

var变量名

samp输出示例

kbd键盘操作

1.2.6空白符

HTML会默认对空白符和换行进行处理

多个连续的空格或换行符会被一个空格进行合并

使用pre标签，保留空白格

Hello World!

你好， 世界！

1.2.7Entity - 实体字符

  空格 < < > > & &

1.3多媒体类标签

1.3.1图片

img：设置属性

src：URL

“属性值”

alt：替代性文本

图片加载失败时展示alt属性指定的文字

不指定会以原本的大小展示

只设置一个，另一个会自动适应

jpg：照片，色彩丰富

png：颜色少，支持透明度

webp：体积更小，兼容性一般

gif：动画，体积大

1.3.2视频

mp4：浏览器支持最广泛

webm：尺寸小，加载地更快

controls：是否显示播放空间

autoplay：视频自动播放

您的浏览器不支持视频播放。

WEBVTT

00:00:00 -->00:00:03 电影开始

00:00:03 -->00:00:05 第一句字幕

00:00:06 -->00:00:08 第二句字幕

1.3.3音频

1.4组织页面内容

header：页面or区块头部的信息，可放介绍性或引导性的的内容，例如logo、导航链接、搜索框etc

main：页面主体内容

aside：侧边栏，不属于正文的内容、相关推荐、小广告etc

foooter：参考链接，版权信息

1.4.1标题

h1 - h6：一级~六级标题

合理使用h1-h6标签可以让页面的层级关系很清晰，不仅有利于代码的可读性，还可以提升页面无障碍性。

1.4.2 article§ion

内容划分

article：一篇独立的内容，新闻、帖子

section：区分章节

1.4.3有序列表

ol：有序列表

li：每一项

start：序号从什么开始

世界票房排行榜

1. 你好，李焕英
2. 唐探3

世界票房排行榜

1. 你好，李焕英
2. 唐探3

1.4.4无序列表

计划

• 学习
• 吃饭

每一项前都有一个小圆点，这是浏览器的默认展示

1.4.5列表嵌套

列表嵌套：子集的链表放在父集的 l i 里

有缩进展示层级关系

烧饼
• 鸡蛋
• 面筋

1.4.6定义列表

你好，李焕英

导演：

贾玲

主演：

贾玲

张小斐

上映日期：

2021-1-1

1.4.7导航

1.5HTML表格

table：整个表格

thead：表头

tbody：表中数据

tr：表中的每一行数据

th：表头单元格

td：数据单元格

1.5.1跨行和跨列

把表头换一下，就实现了跨行还是垮列

我开始用的是强调strong为了实现垮列的时候那些颜色深一点的，但是发现它看起来并没有垮列，然后把表头变了一下，就垮列了。

1.6caption和tfoot

caption：表格标题（直接嵌套在table标签下面即可）

tfoot：汇总

1.6表单

1.6.1单行文本

form：表单

p：表单项

label：输入框对应文本