【前端】字节青训营学习笔记-HTML基础

【前端】字节青训营学习笔记-HTML基础

HTML根底

网页三要素

HTML：网页的根本结构

CSS：网页的展示效果

JS：网页的功能与行为

HTML简介

HTML〔HyperTextMarkupLanguage，超文本标记语言〕，用于构建网页的根本结构及其内容的标记语言

超文本：文本中包含指向其他文本的链接

标记语言：将文本以及文本相关的其他信息结合起来，展现出关于文档的结构，如HTML，XML，KML，Markdown等等

HTML文档结构

我的测试站点

我的猫咪脾气暴

HTML文档包含多个HTML元素，元素具备不同的特性

HTML元素=开始标签+结束标签+元素内容

一些元素只有一个标签，如：img，input，br等

HTML元素标签不辨别大小写

元素可以嵌套在其他标签中

元素可以拥有属性，属性包含元素的额外信息

：放在HTML文档最前面，加上之后就会按照W3C的HTML5规范来解析渲染页面:根元素，包含整个页面的内容：对用户不可见，其中包含示例面向搜索引擎的关键字，页面描述、字符编码声明、CSS样式：该元素包含能够被用户访问到的内容，包含文本、图像、视频、游戏、音频等

meta:charset

/name/http-equiv

定义文档字符编码

关键字

页面描述

主要用于移动端，定义设备屏幕上用来显示网页的区域

HTTP头部自定义meta，用于相特定的网站提供一些信息

详情可参照/wiki/MetaExtensions

:页面的标题，显示在浏览器的标签页上

:CSS样式

:

当前页面的图标

链接到样式表

可替换的样式表

使用例如：https://mdn.github.io/css-examples/alt-style-sheets仅在一些特定的浏览器中支持示例火狐浏览器

可执行脚本

属性：

defer：立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后在执行，只对外部脚本有效。有defer属性的脚本会阻止DOMContentLoaded事件，直到脚本被加载并且解析完成。

async：立即下载脚本，不阻碍其他操作，比方下载其他资源或者加载其他脚本，只对外部脚本有效

script解析时序图

元素样式

内联元素

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

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

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

常用的内联元素：

：超链接

：

：换行

：

：

：加粗

：标签

：

：

：参考引用

：代码片段

块级元素

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

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

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

常用的块级元素：

-

行内块级元素

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

支持宽高以及垂直边距边框

常用的内联元素：

语义化标签

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

不适用语义化标签

使用语义化标签叙述

语义化-区块

展现介绍性信息

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

不能放在footer，address或者另一个header元素内部

使用例如：

HTML

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

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

使用例如：

HTML

CSS

JS

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

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

使用例如：

WeatherforecastforBeijing

15August2008

Rain

16August2008

Periodsofrain

17August2008

Heavyrain

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

section通常出现在文档的大纲中

不要把section当作普通容器使用，比方说用于美化页面片段样式，此时用dic更适宜

如果元素里边是独立的整块内容，可独自发布，那么更适合用article

使用例如：

ChoosinganApple

Introduction

ThisdocumentprovidesaguidetohelpwiththeimportanttaskofchoosingthecorrectApple

Criteria

TherearemanydifferentcriteriatobeconsideredwhenchoosinganApple-size,color,firmness,sweetness,tertness...

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

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

使用例如：

我今天要去加入字节跳动青训营

青训营

青训营是字节跳动技术团队发起的技术系列培训&人才选拔工程

表示最近一个章节的页脚

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

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

使用例如：

Postedby:ByteFE

使用语义化标签的案例

语义化标签案例

语义化-分组

/

包裹被独立引用的内容，图标、插图、代码等，通常会有一个标题

与其相关联的图表的表明/标题，通常位于第一个或者最后一个

使用例如：

CatPicture

块级引用元素

cite属性表示该来源的url

使用例如：

WordscanbelikeX-rays,ifyouusethemproperlythey'llgothroughanything

//

用于描述键值对

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

使用例如：

Firefox

Afree,opensource,cross-platform,graphicalwebbrowserdevelopedbytheMozillaCorporationandhundredsofvolunteers.

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

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

机器可读的时间和日期

datetime表示此元素关联的时间日期，假设不指定那么该元素不会被解析为日期

某个人或组织的联系信息

在引用中使用表示需要引起注意

代码片段

免责声明、考前须知

多媒体元素

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

alt属性包含一条对图像的文本描述，非强制的。屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。图像无法加载时，浏览器会在页面上显示alt属性的文本。

decoding解码方式：异步，同步

loading懒加载

使用例如：

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

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

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

使用例如：

音视频

/

src:嵌入视频文件的路径

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

autoplay是否自动播放

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

使用例如：

Sorry,yourbrowserdoesn'tsupportembeddedvideos.

yourbrowserdoesnotsupporttheaudioelement.