DAY 2

如何理解HTML超文本标记语言？

你可以从两个层面理解：

超越文本限制：html里可以加入图片、声音、视频、动画、多媒体内容，不局限于普通的文本
超级链接文本：html可以从一个文件跳转到另一个文件，连接到世界各地的文件（比如通过我们通过浏览器看到访问世界各地的网站）

HTML语法规范

尖括号包围关键词

<html>

有些html标签成双成对出现，称双标签，也就是常规元素

<head></head> //前面是开始标签，后面带/的是结束标签
<body></body>

也有一些特殊的单标签，不过很少，也就是空元素

<br>
</br>//这个不是br标签的结束符，它是单独存在的，上面那个也是

标签关系（仅限于双标签中）

1.包含关系

<head>
   <title> </title>
</head>

这时候head标签和title标签就是父子关系，head包含着title，是父，那么title就是子

2.并列关系

<head></head>
<body></body>

head和body是两兄弟，谁也不比谁高贵

html基本结构标签

一段代码演示一下基本标签结构：

<!DOCTYPE html>//文档类型声明，告诉浏览器使用哪种html版本显示网页，这里是html5版本
//注意<!DOCTYPE>不是一个html标签，只是一个文档类型声明标签
<html lang="en">//lang可以定义当前文档语言，en是英文，zh-CN是中文
<head>//文档的头部
    <meta charset="UTF-8">//设置文档字符编码为UTF-8，不写这行就会乱码
    <meta http-equiv="X-UA-Compatible" content="IE=edge">//httpEquiv属性可设置或者返回content属性中HTTP 头部信息
    <meta name="viewport" content="width=device-width, initial-scale=1.0">//name属性可设置或者返回content属性信息名称。
    <title>基本标签结构</title>//文档的标签，网页的标题，注意title要在head里头设置
</head>
<body>//body里面放文档主体内容
    这里放主主体内容
</body>
</html>//html标签是页面中最大的标签，根标签

字符集(Character set)

字符集是多个字符的集合，便于计算机识别和存储文字。在head标签的meta标签的charset属性来设置。 charset常用的值：

UTF-8 (万国码，基本包含全世界所有国家需要用到的字符)
GBK (汉字编码字符集)
BIG5 (大五码或五大码，是使用繁体中文社区中最常用的电脑汉字字符集标准)
ISO-8859-1 (拉丁字母表的字符编码)

<meta charset="UTF-8">

meta的两个属性

name

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

属性取值：

keywords：指定网页关键字 - 用于告诉搜索引擎网页内容相关关键词。

<meta name="keywords" content="HTML, HTML DOM, JavaScript">

description：指定页面描述，告诉搜索引擎该网站主要内容

<meta name="description" content="免费编程入门教程">

viewpoint：移动端的窗口

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

generator：指定文档生成的工具名称

<meta name="generator" content="FrontPage 4.0">

http-equiv

http-equiv 属性提供了content属性的信息/值的 HTTP 头，可用于模拟一个 HTTP 响应头，向浏览器传送信息。

属性取值：

content-type：规定文档的字符编码。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

refresh：定义文档自动刷新的时间间隔。

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

expires：可用于设定网页的到期时间。一旦网页过期，必须到服务器重新上传。

 <meta http-equiv="expires" content="Sunday 26 October 2020 03:00 GMT" />

pragma：禁止浏览器从本地计算机的缓存中调阅页面内容。

<meta http-equiv="pragma" content="no-cache"/>

X-UA-Compatible：是针对 IE8 版本的一个特殊文件头标记,用于为 IE8 指定不同的页面渲染模式

<meta http-equiv="X-UA-Compatible" content="IE=edge">

HTML基本结构与页头标签 | 青训营笔记