第三节：网页组成结构剖析

作者: EndPein | 来源:发表于2020-04-07 13:36 被阅读0次

第三节：网页组成结构剖析
网页和网页结构学习（HTML）
简述网页的渲染机制
简述网页的渲染机制
HTML5 基础知识
HTML站点创建及命名
HTML笔记（一）
D4
HTML+CSS的相关知识
HTML知识了解

第一个网页

在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> 文档头，文档头的内容是不会显示到页面上的