【字节青训营】| HTML学习笔记

网页三大元素

HTML：网页的基本结构
CSS：网页的展现效果
JS：网页的功能与行为

HTML简介

HyperText Markup Language，超文本标记语言，用于构建网页的基本结构及其内容的标记语言。
超文本：文本中包含指向其他文本的链接
标记语言：将文本以及与文本相关的其他信息结合起来，展现出关于文档结构，比如HTML、XML、KML、Markdown。

发展历史
伯纳斯李在1989年提出了基于互联网的超文本系统。
2014年HTNL5作为W3C推荐标准发布。

HTML结构

HTML文档包含多个HTML元素，元素具有不同特性。
HTML元素不区分大小写
元素可以嵌套在其他属性中间

HTML标签

< !DOCTYPE html> 放在HTML文件最前面，加上之后就会按照W3C的HTML5的标准来渲染页面
< html>根元素，包含整个页面的内容
< head> 用于不能直接看到的内容，包括面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等。
< body> 能够被用户访问到的内容，包括文本、图像、视频、音频、游戏等。
< meta> charest 定义文档字符编码/ name-keyword关键字 name-description 页面描述 name-viewport 用于移动端，定义设备屏幕上用来显示网页的区域 / http-equiv 自定义meta,用于向特定网站提供信息。
< title>页面标题，显示在浏览器的页面上
< style>CSS 样式
< link> 链接、链接外部样式
< script> 可执行脚本defer：立即下载，延迟执行，表示脚本可以等到dom被完全解析之后执行，只对外部脚本有效。 async：立即下载脚本，不妨碍其他工作，比如下载其他资源或加载其他脚本，只对外部脚本有效。

常用元素

内联元素

• 只占据它对应标签的边框内包含的内容
• 只能容你文本或其他内联元素
• 只能通过修改水平边距、边框或行高的方式修改大小
• 常用的内联元素：a span br i em strong label q var cite code

行内块元素

• 元素在一行内排列，不会单独占一行
• 支持设置宽高以及垂直边距，边框
• 常见的行内块元素 img input td

块级元素

• 占据父元素的整行，总是从新的一行开始
• 能够容纳其他块级元素或者内联元素
• 可以控制宽高、行高、边距、边框等来改变大小
• 常见的块级元素 div p h1-h6 ol ul dl table address blockquote form

语义化

根据内容的结构，选择合适的标签构建出便于开发者阅读和维护的代码结构，同时也能够让机器更好的解析。

语义化标签

< header>

• 展现介绍性的信息
• 通常包含一组介绍性或是辅助导航的元素，比如标题、logo、搜索框、作者名称等
• 不能放在< footer>< address>或者另一个< header>标签内部。

< nav>

• 在当前文档或其他文档中提供导航链接。如菜单、目录、索引、导航栏等
• 用来放置一些热门的链接，不常用的链接就放在footer的底部

< article>

• 独立的文档、页面、应用、站点
• 可独立分配的或者可以复用的结构、比如论坛的帖子、新闻、博客、用户评论、交互式组件等

< section>

• 按主题分组，通常会有标题
• 通常出现在文本的大纲中
• 不要把section用作普通容器，div给使用与美化样式
• 如果元素内是独立整块的内容，可以单独发布，建议用section

< aside>

• 通常用于侧边栏–广告、tips、引用内容
• 表示一个和其余页面内容无关的部分，单独领出来对页面无影响

< footer>

• 表示最近一个章节的页脚
• 通常包含该章节的作者、版权信息或者友情链接等内容
• footer中的元素不属于章节内容，不包含在大纲中

分组语义化标签

< figure>
包被独立引用的内容：图标、插图、代码等，通常会有标题

< figcaption>
与figure相关联的说明，通常位于figure的第一个或最后一个

< blockquote>

• 块级引用元素
• cite表示该来源的URL

< dl>< dt>< dd>

• 用于描述一组键值对
• 通常用于元数据、术语定义的场景

文本类语义化标签

< cite>

• 常用与引用作品标题
• 包括论文、文件、书籍、电影的引用

< time>

• 机器可读的时间和日期
• datatime表示与此元素相关联的时间日期，若不指定则该元素不会被解析为日期

< address>

• 某人或组织的联系信息

< mark>
在引用中使用，表示需注意

< code>代码片段

< small> 免责声明、注意事项

多媒体元素

图片

< img>

• src嵌入图片的路径
• alt 图像的文本描述
• decoding 解码方式：同步、异步
• loading 懒加载

< picture>

• picture标签内可以包含source元素和img元素来为不同设备提供相应的图像格式
• media 根据媒体条件渲染图片
• type 根据浏览器的支持性渲染图片

音视频

< video>/< audio>

• src 嵌入视频音频文件的路径 必须
• controls 是否展示浏览器自带的控件、可以创建自定义控件
• autoplay是否自动播放
• source 表示视频的不可替代资源：格式、清晰度

< track> 字幕标签

HTML解析

DOM文本对象类型 连接web页面和脚本语言