HTML学习笔记

本文记录于字节跳动青训营马超老师讲述的HTML基础课程观后整理。

网页三大元素

基本网页的构成由前端三件套组成

HTML:网页的基本结构
CSS:网页的展现效果
JS:网页的功能与行为那人类做对比的话HTML就是人类的骨架，CSS就是人类的皮囊，而JS就是人类的行为动作

HTML简介

HTML是Hypertext Markup Language（超文本标记语言）的缩写，是一种基于SGML（标准通用标记语言）的标记语言，是Web用于编辑网页的主要工具。在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的“母语”。WWW（World Wide Web）所使用的出版语言就是HTML语言。

发展历史

1989年由伯纳斯-李提出的基于互联网的超文本系统。
1993年有IETF发布首个HTML提案，HTML第一版诞生
1995年HTML2.0发布，包括基于表单的文件上传，表格，国际化等功能
1994年W3C组织成立，接管HTML标准化工作，并于1997年发布HTML3.2
HTML4.0采用许多特定浏览器的元素类型和属性
2014年HTML5作为W3C推荐标准发布

HTML结构

HTML文档包含多个HTML元素,元素具备不同的特性
HTML元素=开始标签+结束标签+元素内容
一些元素只有一个标签,如img、 input、br等
HTML元素标签不区分大小写
元素可以嵌套在其他元素中间
元素可以拥有属性,属性包含有元素的额外信息

<!DOCTYPE html>:放在HTML文档最前面的位置，加上之后就会按照W3C的HTML 5标准来解析渲染页面

<html>:根元素，包含整个页面的内容

<head>:对用户不可见，其中包含例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等

<body>:该元素包含能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等

HTML页面结构

head中的元素详解

meta

meta中有4属性分别是charset/name/http-equiv/content

charset	name	http-equiv	content
声明当前文档的字符编码	把content属性关联到http头部	把content属性关联到一个名称	包含`http-equiv`或`name`属性的值

定义文档字符编码
<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">

http头部自定义meta,用于向特定网站提供一些信息https://wiki.whatwg.org/wiki/MetaExtensions
<meta "http-equiv="expires" content="31 Dec 2021">

title

HTML <title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

base

HTML 元素 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个元素。

link

HTML外部资源链接元素 ( <link> ) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

当前页面的favicon
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

链接到样式表
<link rel="stylesheet" href="my- CcSs file.css">

可替换的样式表(非所有浏览器支持)
<link href-"fancy.css" rel="alternate styleshet" type="text/css" title="Fancy">

script

可执行脚本
<script type="text/javascript" src="javascript.js">

script中有2个属性

defer：立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后在执行，只对外部脚本有效。有defer属性的脚本会阻止DOMContentL oaded事件，直到脚本被加载并且解析完成。
async：立即下载脚本，不妨碍其他操作，比如下载其他资源或载其他脚本，只对外部脚本有效

style

HTML的元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。

常用元素

body中的元素

内联元素

只占据它对应标签的边框所包含的空间

只能容纳文本或其他内联元素

只能通过修改水平边距、边框或者行高的方式改变尺寸

常用的内联元素: <a>、 <span>. <br>、 <i>、 <em>、<strong>、<label>、 <q>. <var>、 <cite>、<code>

块级元素

占据其父元素的整行，总是从新行上开始

能容纳其他块元素或者内联元素

可以控制宽高、行高、边距、边框等改变其尺寸

常用的块级元素<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address> 、<blockquote> 、<form>

行内块级元素

元素在行内排列，不会独占一行

支持设置宽高以及垂直边距、边框

常用的内联元素: <img>、 <input>、 <td>

语义化

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

比如用button定义按钮而不是div一把梭

区块

header

展现介绍性信息

通常包含一组介绍性或是辅助导航的元素，如标题、Logo、搜索框、作者名称等

能放在、或者另-个元素内部

nav

在当前文档或其他文档中提供导航链接，如菜单、目录、索引等

用来放置一些热门的链接，不常用的链接通常放到footer里置于底部

article

独立的文档、页面、应用、站点

可独立分配的或可复用的结构，如论坛帖子、新闻文章、博客、用户提交的评论、交互式组件等

section

按主题将内容分组，通常会有标题

通常出现在文档的大纲中

不要把作为普通容器来使用，比如说用于美化片段样式，此时用
更合适

如果元素里边是独立的整块的内容，可以单发布，则更适合用

aside

表示一个和其余页面内容几乎无关的部分，或者说单独拆出来不会影响整体的内容

通常放在侧边栏，用于展示广告、tips、引用内容等

footer

表示最近一个章节的页脚

通常包含该章节作者、版权数据或者文档链接等信息

footer内的元素不属于章节内容，不包含在大纲中

分组

figure figcaption

<figure>包裹被独立引用的内容:图表、插图、代码等,通常会有一个标题

<figcaption>与其相关联的图表的说明/标题，通常位于<figure>的第一个或最后一个

blockquote

块级引用元素

cite属性表示该来源的url

dl ,dt ,dd

用于描述-组键值对

通常用于元数据、术语定义等场景

文本

cite

元素通常用于引用作品标题.

包括论文、文件、书籍、电影等的引用

time

机器可读的时间和日期

datetime表示此元素关联的时间日期，若不指定则该元素不会被解析为日期

<address>某个人或组织的联系信息

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

<code>代码片段

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

多媒体元素

图片

img

src属性是必须的，嵌入图片的文件路径

alt属性包含一条对图像的文本描述，非强制。屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。图像无法加载时(网络错误、内容被屏蔽或链接过期时)，浏览器会在页面上显示alt属性中的文本

decoding 解码方式:异步、同步

loading懒加载

picture

元素通过包含零或多个元素和一个元素来为不同的显示/设备场景提供相应的图像版本

media属性:依据的媒体条件渲染相应的图片，类似媒体查询

type属性: MIME类型，根据浏览器支持性渲染相应的图片

音视频

video

src属性是必须的，嵌入视频文件路径

controls 是否展示浏览器自带的控件，可以创建自定义控件

autoplay是否自动播放

source元素表示视频的可替代资源(不同格式、清晰度，读取失败或无法解码时可以依次尝试)

HTML解析

大致步骤如下

构建DOM树

样式计算，构建CSSOM树

将DOM和CSSOM组合成- -个Render树

布局计算

绘制

DOM(文档对象模型)：对节点结构化表述，并定义了一种方式可以使程序对该结构进行访问将web页面和脚本语言连接起来