[ 前端HTML | 青训营笔记]

用户3276011718750
146 阅读5分钟 
- 这是我参与[第五届青训营]伴学笔记创作活动的第一天

1. HTML

1.1 网页三兄贵

image.png

  • HTML(老大-骨架)：网页的基本结构
  • CSS(老二-样貌)：网页的展示效果
  • JavaScript(老三-行为)：网页的功能与行为

今天要复习的就是网页的基本结构HTML，可以说这就是一个网页的骨架

1.2 HTML 是什么

HTML 全称 HyperText Markup Language 翻译过来就是 超文本标记语言 用来构建网页基本结构及其内容的标记语言

那，啥是超文本，啥又是标记语言呢？

  • 超文本：文本中包含指向其他文本的链接
  • 标记语言：将文本以及文本相关的其他信息结合起来，展现出关于文档的结构。常见的标记语言有HTML、XML、Markdown等

可能有初学的hxd/hjm会问那么HTML是向**java/c++**那样的编程语言吗?
答案是--不是😁，标记语言不具有编程语言的逻辑与行为的能力

2. HTML 深入

2.1 HTML元素

image.png

  • 一个一般的HTML元素 = 开始标签 + 元素内容 + 结束标签

  • 在HTML中 一些元素只有一个标签，如img、input、br等image.png

  • HTML元素标签不区分大小写

  • 元素可以嵌套在其他元素中间image.png

注意:平时使用和说明的时候都把HTML元素直接称为标签

2.2 HTML结构

虽然HTML元素可以任意组合，但是HTML是有一些固定的结构的~

先来看一个标准的HTML文档的示例

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title> 页面标题</title> 
    </head> 
    <body> 
        <h1>我是标题</h1> 
        <p>我是段落</p> 
    </body> 
</html>
  • <!DOCTYPE html> 放在HTML文档最前面，浏览器会按照W3C的HTML5标准来解析渲染页面
  • <html> 根元素，包含整个页面的内容
  • <head> 包含例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等
  • <body> 该元素内包含其他能够被用户访问到的内容，像是文本、图像、音频等

下面我们来深入了解一下<head></head>标签和<body></body>标签以及<script></script>标签

2.3 <head> 标签

<meta>：元数据标签

meta干的事 说明文档、描述数据的标签

下面是百度(度娘)的html文件中meta标签的内容

image.png

meta标签分为三类： 

charset | name | http-equiv

  • charset 定义文档字符编码,告诉浏览器如何去解析这个网页
<meta charset="utf-8">
  • name  name和content一般是一起使用的

name 是描述网页的，对应于 content （网页内容） ，以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）

NO.1 keywords 页面关键字

<meta name="keywords" content="百度,百度一下,搜索引擎">
复制代码

NO.2 description 页面描述

推荐大家去看各大网站的页面描述与关键字，他们写的贼6, 因为这有利于网站的SEO(搜索优化)

掘金首页 页面描述 示例

<meta name="description" content="掘金是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货,其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时,掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户,我们相信你也可以在这里有所收获。">
复制代码

百度首页 页面描述 示例

<meta name="description" content="全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。">
复制代码

NO.3 viewport 定义设备屏幕上用来显示网页的区域（主要用于移动端）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=0">
复制代码
  • http-equiv

顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

expires(期限)用于指定网页缓存时间的期限，一旦网页缓存时间过期，网页就必须从服务器上重新缓存一次，才可以继续浏览页面

<meta http-equiv="expires" content="30 Jan 2023">

refresh(刷新)的值设置为1，其作用是让浏览器每隔1秒就再次载入页面

<meta http-equiv="refresh" content="1">

content-Type(显示字符集的设定) 是另一种声明HTML页面所用字符编码的方法

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

Window-target(显示窗口的设定) 强制页面在当前窗口以独立页面显示

<meta http-equiv=:"Window-target" content = "top">

2.4 <body>标签

在里面的的内容是大家在网页上看见的内容

在body标签里面包含的元素主要是三类 块级元素(block) | 内联元素(inline) | 行内块级元素(inline-block)

内联元素 inline

  • 只占据它对应标签的边框所包含的空间
  • 只能容纳⽂本或其他内联元素
  • 只能通过修改⽔平边距、边框或者⾏⾼的⽅式改变尺⼨

常见的内联元素有：<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>

块级元素 block

  • 占据其⽗元素的整⾏，总是从新⾏上开始
  • 能容纳其他块元素或者内联元素
  • 可以控制宽⾼、⾏⾼、边距、边框等改变其尺⼨

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

行内块级元素 inline-block

  • 元素在⾏内排列，不会独占⼀⾏
  • ⽀持设置宽⾼以及垂直边距、边框

常⽤的内联元素：<img>、<input>

2.5 <script> 可执行脚本标签

可以通过src属性引入外链的js，也可以在标签体里写js代码（内嵌脚本）

  • 注意: 设置了src属性的script元素不能含有任何内容。不能用同一个script元素既定义内嵌脚本又引用外部脚本。
<script type="text/javascript" src="javascript.js"> </script>
<script type="text/javascript"> console.log('xxx太美,哦哦哦哦哦') </script>
复制代码

<script>标签中有两个属性，可以延迟加载与运行js文件代码

  • defer：⽴即下载，延迟执⾏，表示脚本可以等到dom被完全解析和显示之后在执⾏，只对外部脚本有效。有defer 属性的脚本会阻⽌DOMContentLoaded 事件，直到脚本被加载并且解析完成。
  • async：⽴即下载脚本，不妨碍其他操作，⽐如下载其他资源或者加载其他脚本，只对外部脚本有效
  • 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。

这张图很形象的展示了js异步加载执行方式的区别，蓝色表示加载js，红色表示执行js，绿色表示解析HTML

image.png

defer-script 加载时HTML并未停止解析，这两个过程是并行的。整个 document 解析完毕且 defer-script 也加载完成之后，会执行所有由 defer-script 加载的 JavaScript 代码，然后触发 DOMContentLoaded 事件。

async-script与 defer-script的区别在于，如果已经加载好，就会开始执行。这种方式加载的 JavaScript 依然会阻塞 load 事件 （加载好就会执行）。 async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行

在加载多个JS脚本的时候，async-script是无顺序的加载，而defer-script是有顺序的加载。

参考

字节跳动青训营 HTML基础 视频 + PPT

YK菌的笔记

菜鸟教程 HTML

w3school HTML

MDN HTML 博客园-meta标签中的http-equiv属性使用介绍 《HTML5 权威指南》

avatar
文章
阅读
粉丝