HTML基础
网页三大元素
- HTML:网⻚的基本结构
- CSS:网⻚的展现效果
- JS:网⻚的功能与行为
HTML简介
HTML(HyperText Markup Language, 超文本标记语言)，用于构建网⻚基本结构及其内 容的标记语言。
超文本:文本中包含指向其他文本的链接 标记语言:将文本以及文本相关的其他信息结合起来，展现出关于文档结构，如:HTML、XML、KML、Markdown等
发展历史
- 伯纳斯-李在1989年提出了基于互联网的超文本系统
- 1993年IETF(互联网工程任务组)发布首个HTML提案，由此HTML语言第一版诞生
- 在经历过几个草案之后HTML 2.0于1995年发布，包括了基于表单的文件上传、表格、国际化等功能
- 1994年W3C成立，随后接管了HTML的标准化工作，并在1997年发布了HTML 3.2
- 随后发布的 HTML4.0 中采用许多特定浏览器的元素类型和属性
- 2014年 HTML5 作为W3C推荐标准发布
HTML结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
<p class="note">一段文字</p>
<img src="cat.png" alt="猫咪照片">
</body>
</html>
- HTML文档包含多个HTML元素，元素具备不同的特性
- HTML元素 = 开始标签 + 结束标签 + 元素内容
- 一些元素只有一个标签，如img、input、br等
- HTML元素标签不区分大小写
- 元素可以嵌套在其他元素中间
- 元素可以拥有属性，属性包含有元素的额外信息
<!DOCTYPE html>
放在HTML文档最前面的位置，加上之后就会按 照W3C的HTML5标准来解析渲染⻚面
它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.
DOCTYPE的目的是告诉浏览器，以什么文档类型来定义解析文档，不同的渲染模式会影响浏览器对文档的解析。
<html>
根元素，包含整个⻚面的内容
<head>
- 对用户不可⻅，其中包含例如面向搜索引擎的关键字、⻚面描述、字符编码声明、CSS 样式等
- 是所有头部元素的容器, 绝大多数头部标签的内容不会显示给读者
- 该标签下所包含的部分可加入的标签有 , , ,
<body>
- 该元素包含能够被用户访问到的内容，包括文本、图像、视 频、游戏、音频等
- 用于定义文档的主体, 包含了文档的所有内容
- 该标签支持 html 的全局属性和事件属性.
HTML⻚面结构
<meta>: charset/name/http-equiv
<meta charset="utf-8"> 定义文档字符编码
<meta name="keywords" content="HTML"> 关键字
<meta name="description" content="HTML 基础"> ⻚面描述
<meta name="viewport" content="width=device-width, initial- scale=1.0, maximum-scale=1.0, user-scalable=0"> 主要用于移动端，定义设备屏幕上用来显示网⻚的区域
<meta "http-equiv="expires" content="31 Dec 2021"> http头部 自定义meta，用于向特定网站提供一些信息
<link>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 当前⻚面的favicon
<link rel="stylesheet" href="my-css-file.css"> 链接到样式表
<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"> 可替换的样式表
<script> 可执行脚本
<script type="text/javascript" src="javascript.js">
属性 • defer:立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后在执行，只对外部脚本
有效。有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。 • async:立即下载脚本，不妨碍其他操作，比如下载其他资源或者加载其他脚本，只对
外部脚本有效
常用元素
内联元素
- 只占据它对应标签的边框所包含的空间
- 只能容纳文本或其他内联元素
- 只能通过修改水平边距、边框或者行高的方式来改变尺寸
- 常见的内联元素：a、b、img、input、select、span、br、i、em、strong、label、code、cite、q
块级元素
-
占据其父元素的整行，总是从新的一行开始
-
能容纳其他块级元素或者内联元素
-
可以控制宽高(widt、height)、行高(line-height)、边距(margin/padding)等修改其尺寸
-
常见的块级元素：div、ul、ol、li、dl、dt、dd、h1-h6、p、address、form
行内块级元素
- 元素在行内排列，不会独占一行
- 支持设置宽高以及垂直边距、边框
- 常见的内联元素：img、input、td
空元素
没有内容的HTML元素，空元素在开始标签中闭合。
常见：br、hr、img、input、link、meta
语义化
根据内容的结构，选择合适的标签构建出便于开发者阅读的可维护性更高的代码结构，同时能够让机器更好地解析。
<header></header>
<section>
<article>
<figure>
<img>
</figure>
</article>
</section>
<footer></footer>
语义化-区块
header
- 展现介绍性的信息
- 通常包含一组介绍或是辅助导航的元素，如标题、logo、搜索框、作者名称等。
- 不能放在footer、address或者另一个header元素内部
nav
- 在当前文档或者其他文档中提供导航链接，如菜单、目录、索引等
- 用来放置一些热门的链接、不常用的链接通常放到footer里置于底部
article
- 独立的文档、页面、应用、站点
- 可独立分配的或可复用的结构，如论坛帖子、新闻文章、博客、用户提交的评论、交互式组件等
section
- 按主题将内容分组，通常会有标题
- section通常出现在文档的大纲中
- 建议不要把section当作普通容器使用
- 如果元素里边是独立的整块的内容，可以单发布，则更适合用article
aside
- 表示一个和其余页面内容几乎无关的部分，或者说单独拆分出来不会影响整体的内容
- 通常放在侧边栏，用于展示广告、引用内容等
footer
- 表示最近一个章节的页脚
- 通常包含该章节作者、版权数据或者文档链接等信息
- footer内的元素不属于章节内容，不包含在大纲中
<header></header> 头部
<nav></nav> 导航栏
<section></section> 区块（有语义化的div）
<main></main> 主要区域
<article></article> 主要内容
<aside></aside> 侧边栏
<footer></footer> 底部
语义化-分组
figure,figcaption
<figure> 包裹被独立引用的内容:图表、插图、代码等，通常会有一 个标题
<figcaption> 与其相关联的图表的说明/标题，通常位于<figure>的第 一个或最后一个
blockquote
- 块级引用元素
- cite属性表示该来源的url
dl\dt\dd
- 用于描述一组键值对
- 通常用于元数据、术语定义等场景
语义化-文本
cite
- 用于引用作品的标题
- 包括论文、文件、书籍、电影等的引用
time
- 机器可读的时间和日期
- datetime表示此元素关联的时间日期，若不指定该元素不会被解析为日期
address某个人或组织的联系信息
mark在引用中使用，表示需要引起注意
code代码片段
small免责声明、注意事项等
多媒体元素
图片
img
- src属性是必须的，嵌入图片的文件路径
- alt属性包含一条对图片的文本描述。屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图片的含义。图片无法显示时，浏览器会在页面上显示alt属性中的文本。
- decofing：解码方式：异步或者同步
- loading：懒加载
picture
- 元素通过包含零个或多个
source元素和一个img元素来为不同的显示/设备场景提供相应的图像版本 - media属性：依据的媒体条件渲染相应的图片，类似媒体查询
- type属性：MIME类型，根据浏览器支持性渲染相应的图片
音视频
video/audio
- src属性是必须的，嵌入视频文件的路径
- controls是否显示浏览器自带的空间，可以创建自定义的控件
- autoplay是否自动播放
- source元素表示视频的可替代资源
audio常用属性
| 属性 | 属性值 | 注释 |
|---|---|---|
| src | url | 播放的音乐的url地址（火狐只支持ogg的音乐，而IE9只支持MP3格式的音乐。chrome貌似全支持） |
| preload | preload | 预加载（在页面被加载时进行加载或者说缓冲音频），如果使用了autoplay的话那么该属性失效。 |
| loop | loop | 循环播放 |
| controls | controls | 是否显示默认控制条（控制按钮） |
| autoplay | autoplay | 自动播放 |
audio音乐格式的支持
| 音频格式 | Chrome | Firefox | IE9 | Opera | Safari |
|---|---|---|---|---|---|
| OGG | 支持 | 支持 | 支持 | 不支持 | 不支持 |
| MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
| WAV | 不支持 | 支持 | 不支持 | 支持 | 不支 |
audio属性
| 属性 | 注释 |
|---|---|
| duration | 获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN |
| paused | 如果媒体文件被暂停，那么paused属性返回true，反之则返回false |
| ended | 如果媒体文件播放完毕返回true |
| muted | 用来获取或设置静音状态。值为boolean |
| volume | 控制音量的属性值为0-1;0为音量最小，1为音量最大 |
| startTime | 返回起始播放时间 |
| error | 返回错误代码，为uull的时候为正常。否则可以通过Music.error.code来获取具体的错误代码： 1.用户终止 2.网络错误 3.解码错误 4.URL无效 |
| currentTime | 用来获取或控制当前播放的时间，单位为s。 |
| currentSrc | 以字符串形式返回正在播放或已加载的文件 |
常用的控制用的函数：
| 函数 | 作用 |
|---|---|
| load() | 加载音频、视频软件 |
| play() | 加载并播放音频、视频文件或重新播放暂停的的音频、视频 |
| pause() | 暂停出于播放状态的音频、视频文件 |
| canPlayType(obj) | 测试是否支持给定的Mini类型的文件 |
常用audio的事件：
| 事件名称 | 事件作用 |
|---|---|
| loadstart | 客户端开始请求数据 |
| progress | 客户端正在请求数据（或者说正在缓冲） |
| play | play()和autoplay播放时 |
| pause | pause()方法促发时 |
| ended | 当前播放结束 |
| timeupdate | 当前播放时间发生改变的时候。播放中常用的时间处理哦 |
| canplaythrough | 歌曲已经载入完全完成 |
| canplay | 缓冲至目前可播放状态。 |
HTML解析
DOM(文档对象模型):对节点结构化表述，并定义了一种方式可以使程序对该结构进行访问， 将web⻚面和脚本语言连接起来
- 构建DOM树
- 样式计算，构建CSSOM树
- 将DOM和CSSOM组合成一个Render树
- 布局计算
- 绘制
