关于HTML的基础知识（1）_content begin是什么意思-CSDN博客

本文链接：https://blog.csdn.net/DXZFLY/article/details/120111064

关于HTML的基础知识（1）

Emmet插件：自动生成HTML的代码片段

注释

方便阅读，不参与运行

在HTML中，注释格式：

<!--注释内容-->

<!--  -->可以用ctrl + ？快捷打出

元素(标记标签)

e.g.以下为一个元素（element）

<a href="http://www.baidu.com">百度</a>

元素组成=起始标记（begin tag）+结束标记（end tag）+元素内容+元素属性

起始标记和结束标记的名字决定元素的名字，特定名字决定元素特定功能

元素内容在起始标记与结束标记之间

以上述代码为例
起始标记:<a>
结束标记:</a>
元素内容：百度
元素属性：href="http://www.baidu.com

（元素属性并非一定要写，用来描述元素的额外信息）

元素属性=属性名+ 属性值（可有多个）

属性的分类：

局部属性：某些元素的特有属性（e·g· href即是a的特有属性）
全局属性：所有元素通用

<meta charset="UTF-8">

有些元素没有结束标记 ，这样的元素叫做: 空元素

空元素的两种写法:

<meta charset="UTF-8">
<meta charset="UTF-8"/>(旧版本写法，HTML5可不用这样写)

元素的嵌套

元素不可以相互嵌套

根据元素的合法嵌套产生以下概念：

父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的元素）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.duyiedu.com">渡一教育</a>
</body>
</html>

head是meta的父元素，meta是head的子元素
html是meta的祖先元素，meta是html的后代元素
meta与title互为兄弟元素

标准的文档结构

HTML：用于书写/定义页面（即HTML文档）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

其中：

<!DOCTYPE html>
称为文档声明 所有HTML代码必须拥有。
若不写文档声明，将导致浏览器进入怪异渲染模式（浏览器会自行选择标准）。
doc是文档的缩写，type是类型。
作用：告诉浏览器，当前文档使用的HTML标准是HTML5.
```
<html lang="en">
</html>
```
称为根元素，一个页面最多只能只有一个，且该元素是其他元素的父元素或者祖先元素。
HTML5中没有强制要求该元素的书写
即上述代码可以写成:
```
<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
```
依旧奏效，满足标准

lang属性：language, 全局属性，表示该元素内部使用的文字是属于哪一种自然语言书写而成 e·g·lang="en"表示使用english，lang="cmn-hans"表示使用简体中文
```
<head>

</head>
```
称为文档头。
仅可作为子元素出现在HTML中。

文档头中的内容不在页面上显示
```
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
```
其中：
```
<meta>
```
表示文档的元数据，元数据即额外信息/附加信息。

例如：
```
<meta charset="UTF-8">
```
charset是meta特有的局部属性

作用：指定网页内容编码。（告诉浏览器）
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```
（针对ie浏览器）告诉浏览器，如果你是ie
浏览器建议使用edge内核。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
用于适配手机端（具体以后讲）
```
 <title>Document</title>
```
表示网页标题（不是以网页的内容显示，而是顶部的标题）
用标题替换“Document”即可
```
<body>
  </body>
```
称为文档体，页面上所有需要参与显示的元素，都应该放置到文档体中。
仅可作为子元素出现在HTML中。