一口吻入门前端——HTML5入门

  

• HTML5
  

1.1 HTML 先容

1. HTML（超文本标记语言）是一种用于 Web 开发的标记语言，主要用来格式化和显示网页内容。可以将其视为一种文本文件，浏览器能够读取该文本文件并显示其中的内容。HTML支持多种元素（也称作标签），例如：使用单标签 <img> 插入图片，使用双标签 <html></html> 定义HTML文档的起始和结束。借助这些元素，我们可以在网页中嵌入图像、标题、段落等不同的内容，构建起网页的页面。以下是 HTML 的基本骨架：
3. <!DOCTYPE html>                                        <!-- 用来声明这是一个 HTML5 文档，而非其他格式的文档，一般位于文档的最前面 -->
4. <html>                                                        <!-- <html>、</html> 是一对双标签，用来标定该 HTML 文档的范围 -->
5.    
6. <head>                                                        <!-- <head>、</head> 标签用来包含文档的元数据，即关于网页本身的描述信息。这部分的内容通常不直接显示在网页上 -->       
7. <meta charset="utf-8">                        <!-- <meta> 用来提供网页的元信息，例如字符集、作者、关键词等。charset="utf-8" 代表网页字符集使用的是 UTF-8 字符集 -->       
8. <title>我的网页</title>                         <!-- <title>、</title> 标签定义了网页的标题，即浏览器的标签栏显示的内容 -->       
9. </head>
10.    
11. <body>                                                        <!-- <body>、</body> 标签包含网页的实际内容，即用户在浏览器中看到和互动的部分。这里包含所有展示内容，如文本、图片等 -->       
12. </body>
13.    
14. </html>

复制代码

1.2 标题元素

1. 标题是通过 <h1>~<h6> 来定义的，<h1> 定义最大的标题，<h6> 用来定义最小的。可以用 h$*6 快捷键直接生成 <h1>~<h6> 。
3. <!DOCTYPE html>                               
4. <html>                                               
5.    
6. <head>                                                       
7. <meta charset="utf-8">                       
8. <title>我的网页</title>                       
9. </head>
10.    
11. <body>                                                       
12.     <h1>这是一个一级标题</h1>
13.     <h2>这是一个二级标题</h2>
14.     <h3>这是一个三级标题</h3>  
15.     <h4>这是一个四级标题</h4>
16.     <h5>这是一个五级标题</h5>
17.     <h6>这是一个六级标题</h6>  
18. </body>
19.    
20. </html>

复制代码

示例结果：

1. 每一个元素（标签），都有不同的属性可以设置，例如标题元素的 align 属性，我们可以通过设置 align 属性，来调整标题的位置，这个属性有三个可选的值 left | center | right。
3. <!DOCTYPE html>                                        <!-- 用来声明这是一个 HTML5 文档，而非其他格式的文档，一般位于文档的最前面 -->
4. <html>                                                        <!-- <html>、</html> 是一对双标签，用来标定该 HTML 文档的范围 -->
5.    
6. <head>                                                        <!-- <head>、</head> 标签用来包含文档的元数据，即关于网页本身的描述信息。这部分的内容通常不直接显示在网页上 -->       
7. <meta charset="utf-8">                        <!-- <meta> 用来提供网页的元信息，例如字符集、作者、关键词等。charset="utf-8" 代表网页字符集使用的是 UTF-8 字符集 -->       
8. <title>我的网页</title>                         <!-- <title>、</title> 标签定义了网页的标题，即浏览器的标签栏显示的内容 -->       
9. </head>
10.    
11. <body>                                                        <!-- <body>、</body> 标签包含网页的实际内容，即用户在浏览器中看到和互动的部分。这里包含所有展示内容，如文本、图片等 -->       
12.     <h1 align="left">这是一个一级标题</h1>
13.     <h2 align="left">这是一个二级标题</h2>
14.     <h3 align="center">这是一个三级标题</h3>  
15.     <h4 align="center">这是一个四级标题</h4>
16.     <h5 align="right">这是一个五级标题</h5>
17.     <h6 align="right

复制代码