<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML基本结构</title>
</head>
<body>
<h1>我是一级标题</h1>
<p>我是一段文本段落</p>
</body>
</html>
一、HTML的基本结构
以上代码就是一个简单的HTML的代码结构。接下来具体分解其意思。
<!DOCTYPE html>：文档声明，告诉浏览器使用哪个版本的HTML进行解析，此版本为HTML5。千万不能忘记加上文档说明，否则浏览器会解析异常。
作用：
- 指定HTML页面使用的标准和版本（此处为HTML5）
- 浏览器根据
doctype决定使用哪种模式渲染
而HTML4的文档声明如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">。
可以看到HTML5的文档声明精简了很多。
<html></html>：顶级元素/根元素，所有HTML元素都包含在这个元素标签内，是所有HTML元素的根元素。
<header></header> ： 通常存放通用信息，也就是元数据，用来描述HTML文档的信息，如 <title>描述页面的名称等。
<header></header>的三大基本功能：
- 描述网页基本信息
<meta charset="UTF-8">，<title>HTML基本结构</title>等。 - 指向渲染页面需要其他文件链接
<link rel="stylesheet" href="./style.css">，<script src="./app.js"></script>。 - 各大厂商根据自己需要定制
<meta name="renderer" content="webkit">。
二、HTML元素
元素结构：<tag>...</tag>(或<tag/>)。
如<h1>我是一级标题</h1> -> 元素（开始标签 + 内容 + 结束标签）。
元素中是可以添加属性的，具体格式如下：
属性名="属性值"。例如：
<h1 class="title"></h1>，在h1标签中有一个class属性，其值为title。
一般来说元素由开始标签、内容及结束标签构成，而开始标签可以添加一些属性来修饰元素。但是也有一些元素只有开始标签，没有结束标签，这种元素可称为空元素，如 img 元素：<img src="image-url" />。
三、HTML注释
格式：< !-- 注释的内容 -->。
当浏览器解析HTML的时候，遇到注释部分不会解析，直接跳过。注释的部分是给写代码的人看的。注释的书写有助于开发。
四、HTML属性
<a href="index.html" title="首页">，在第二部分略微提到了一下，这里在细讲一下。属性值的部分 用双引号包住。
属性的别类中有全局属性，即每个HTML元素都有的属性，他们包括：class，id，title，style
五、常用基本元素
标题元素 h1 ~ h6
段落 p
图片 img
链接 a
有序列表 ol 放li
无序列表 ul 放li
块元素 div
行内元素 span
换行 br
水平线 hr
html标签.jpeg
六、字符实体
空格：
小于号：<
大于号：>
和好（&）：&
版权：©
乘号：×
七、块级元素和行内元素
块级元素：默认占据整行宽度，可以设置宽度和高度：div，p，h1~h6，ul，ol，li...
行内元素：在同一行显示，其默认宽度是由元素的内容决定，并不能设置宽度和高度：a, span, img, em, strong...
结论：块级元素默认会占据整行宽度，且每个块级元素都会新起一行；而行内元素默认会与其他行内元素同行显示，且宽度由内容多少决定。
八、HTML嵌套
HTML嵌套就是一个元素包含于另一个元素
嵌套的正确方式（标签配对）：
<div>
<p>...</p>
<img src="image-url" />
</div>
要注意元素的闭合，必须在闭合的元素内嵌入元素。如下就是错误的写法：
<div>
<p> </div> </p>
九、HTML树
<html>根节点 -> 其下两个子节点<head>和<body>，然后head和body下面又有很多节点。
HTML树和节点之间的关系.jpeg
网友评论