第三节：网页组成结构剖析
2020-04-07 本文已影响0人
EndPein
第一个网页
在vscode中先建立一个html文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 请求头区域 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 代码区域 -->
</body>
</html>
注释
注释是为了代码的阅读者提供说明的，注释是不会显示到页面上的
注释是由下面的样子组成的,注释也可以是可以写多行的
<!-- 注释内容 -->
<!--
注释内容 ...
注释内容 ...
-->
元素（element）
也叫做：标签、标记
元素 = 起始标记（begin tag） + 结束标记（end tag） + 元素内容 + 元素属性
标签标记都是使用小写
例如：
<h1>这是第一个标题</h1>
- <h1> 起始标记（begin tag）
- </h1> 结束标记 （end tag）
- 这是第一个标题 元素内容
在比如：
<a href="https:baidu.com">点击跳转百度</a>
- a标签里面的href 就是元素属性
- 属性一般是使用 key=value的方式来显示的 键=值
不同的标签是有不同的属性的，后面会在具体一些常见的标签中逐个解释
属性的分类：
- 局部属性：某些元素特有的属性
- 全局属性：所有元素通用
有些元素没有结束标记，这样的元素叫做：空元素
例：
<meta charset="UTF-8">
空元素有2种写法：
1、<meta charset="UTF-8">
2、<meta charset="UTF-8" />
元素的嵌套
元素是支持嵌套的，但是元素不能相互嵌套
正常的格式
<div>
<p></p>
</div>
错误的格式
<div>
<p></div>
</p>
元素是有 父元素、子元素、祖先元素、后代元素、兄弟元素
先看一个代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 请求头区域 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 代码区域 -->
<div>
<h1>标题</h1>
<p>内容</p>
</div>
</body>
</html>
从上面的代码中，我们得出以下几个结论
- 代码区域的 div 是body的 子元素
- div中的 h1、p是div的子元素
- h1、p是body的子孙元素
- div是h1、p的父元素
- h1、p是兄弟元素
- html是 div、h1、p的 祖先元素
标准的文档结构
HTML：页面、文档
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 请求头区域 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 代码区域 -->
<div>
<h1>标题</h1>
<p>内容</p>
</div>
</body>
</html>
我们来逐步拆解以下 上面的文档结构
-
<!DOCTYPE html>文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5 -
<html lang="en">...</html>根元素，一个页面最多只能有一个，HTML5里面没有强制要求书写该元素，但为了兼容以前的，还是建议都加上
lang属性，代表language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。这个是为了触发浏览器的一些翻译、阅读等功能。en代表英文、cmn-hans 中国大陆官方用语（简体中文） -
<head>...</head>文档头，文档头的内容是不会显示到页面上的
<meta>元素
表示的是文档的元数据：附加信息等
<meta charset="UTF-8">charset:指定网页的编码
<meta name="viewport" content="width=device-width, initial-scale=1.0">适配移动端
-
<title>Document</title>显示网页的头标题 -
<body>...</body>文档体，所以的代码都应该写在这里
