【青训营】HTML基础

一棵栾树
128 阅读4分钟

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

网页三大元素：

HTML:网页的基本结构

CSS：网页的展现效果

JS：网页的功能于行为

HTML（HyperText Markup Language，超文本标记语言），用于构建网页基本结构及其内容的标记语言。

< head>

< meta>: charset/name/http-equiv

< meta charset="utf-8">定义文档字符编码

< meta name="keywords" content="HTML">关键字

< meta name="description" content="HTML基础">页面描述

< meta name="viewport" content="witdth=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">主要用于移动端，定义设备屏幕上用来显示的区域

< meta http-equiv=""expires" content="31 Dec 2021">http头部

自定义meta用于向特定网站提供一些信息

< title>：

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

< style>:

CSS 样式

< link>:

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

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

< link rel="alternate stylesheet" href="fancy.css" type="text/css" title="Fancy"> 可替换的样式表

< script>可执行脚本

< script type="text/javascript" src="javascript.js">

defer: 立即下载，延迟执行

async：异步下载，立即执行

注：如果js脚本不需要在文档解析一开始引入，建议尽量靠后引入，可以放在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>

语义化标签

在我们身边的任何地方都要依赖语义学 — 我们依靠以前的经验就知道日常事物都代表什么；当我们看到什么，我们就会知道它代表什么。举个例子, 我们知道红色交通灯表示“停止”，绿色交通灯表示”通行“。 如果运用了错误的语义，事情会迅速地变得非常棘手 (难道有某个国家使用红色代表通行？我不希望如此)。同样的道理，我们需要确保使用了正确的元素来给予内容正确的意思、作用以及外形。 --引自引用MDN

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

区块

  • < header> 介绍性信息：标题、Logo、搜索框、作者名称
  • < nav> 导航：提供导航链接，如菜单、目录、索引。用来放置热门链接，不常用链接可以放footer置于底部
  • < article> 独立文档、页面、应用、站点 可独立分配或可复用的，如博客、文章
  • < section> 按主题将内容分组，通常有标题，出现在文章的大纲中
  • < aside> 和其余页面内容无关的部分，通常放侧边栏，用于展示广告、tips、引用内容等
  • < footer>页脚，通常包含该章节的作者、版权数据或者文档链接等信息，footer内的元素不属于章节内容，不包含在大纲中

分组

  • < figure>/< figcaption>
  • < blockquote> 块级引用，cite属性表示该来源的url

文本

  • < cite> 引用作品标题，论文、文件、书籍、电影的引用
  • < time> 机器可读的时间和日期
  • < address>某人或组织的联系信息
  • < code>代码片段
  • < mark>引用中使用，表示需要引起注意
  • < small> 免费声明、注意事项

多媒体元素

< img>

  • src属性 （必须）
  • alt 对图像的文本描述，非强制
  • decoding 解码方式：异步、同步
  • loading 懒加载，通常使用js去实现

< picture>

  • 通过包含零个或多个< source>元素和一个< img>元素来为不同的显示/设备场景提供相应的图像版本
  • media属性：依据媒体条件渲染相应的图片，类似媒体查询
  • type： MIME类型，根据浏览器支持性渲染相应的图片

< video>/< audio>

  • src (必须)
  • controls 是否展示浏览器自带的控件
  • source
  • autoplay 是否自动播放
  • track 字幕

HTML解析

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

  1. 构建DOM树
  2. 样式计算，构建CSSOM树
  3. 将DOM和CSSOM组合成一个Render树
  4. 布局计算
  5. 绘制

后记

在青训营结束后才开始整理的笔记，顺便做下知识的回顾。作为一篇笔记而言，本文主要还是按照青训营HTML基础PPT的结构对知识点进行整理（其实是重新打了一遍，此处有狗头），主要还是希望在整理并写成文章的过程当中，培养一下写文章的习惯。EF study，to be continued

avatar
文章
阅读
粉丝