2.1 HTML元素结构

HTML标签

  1. 由尖括号包围关键词组成，比如: <p> 、 <h1> 、 <div> 、<span> 等;
  2. 通常成对出现，比如<div>和</div>，第一个就是开始标签，第二个就是结束标签，要注意开始标签和结束标签的区别在于，结束标签比开始标签多一个**/**;
  3. 虽然标签通常是成对出现的，但并不是所有标签都有对应的结束标签，比如<input> 、<img>等，它们往往是单独呈现的;

第二章：HTML基本框架 - 图1

在HTML语言中，虽然不区分大小写，但是最好还是规范化都用小写。

2.2 HTML中的嵌套

第二章：HTML基本框架 - 图2

其中div元素是p元素的父元素。

例如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>编程题</title>
  8.   </head>
  9.   <body>
  10.     <h1>两只口袋</h1>
  11.     <p>
  12.       <strong>普罗米修斯</strong>
  13.       创造了人，又在他们每人脖子上挂了两只口袋，一只装别人的缺点，另一只装自我的。他把那只装别人缺点的口袋挂在胸前，另一只则挂在背后。因此人们总是能够很快地看见别人的缺点，而自我的却总看不见。这故事说明人们往往喜欢挑剔别人的缺点，却无视自身的缺点。
  14.     </p>
  15.   </body>
  16. </html>

2.3 完整的HTML文档结构

image.png

1.<!DOCTYPE html>

  1. 作用:告知浏览器该页面文件的文档类型，指示 web 浏览器使用哪个HTML版本编写页面。
  2. 位置:<!DOCTYPE>声明必须是HTML文档的第一行，位于html标签之前。
  3. <! DOCTYPE>声明对大小写不敏感。

  4. <!DOCTYPE>声明没有结束标签。

    2.<html lang="en" > ...</html>

  5. 此元素可告知浏览器其自身是一个HTML文档。

  6. <html>与</html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由<head>标签定义，而主体由<body>标签定义。

  7. lang 属性（语言属性):当搜索引擎或者浏览器拿到语言属性后，有可能做一些针对指定语言的辅助操作,‘en’表示英文。

    3.标签属性

  8. 标签可以拥有零个或多个标签属性

    注意:标签属性与标签名称、标签属性与标签属性之间需用一个空格隔开。

  9. 标签属性可以赋予标签更多的信息，标签属性通常是以key= “value”即名称=”值”的形式出现。

  10. 常见的标签属性有:class、id、style.lana src等。

    4.文档的头部<head>. ..</ head>

  11. head元素定义文档的头部，我们通常在这里引用样式表、提供元信息等。

  12. 文档的头部中的<title>…</title>定义文档的标题，在网页上体现为网页标签的标题。
  13. 一个<head>元素必须包含且只能包含一个<title>元素。

    元信息:又叫元数据，就是描述数据的数据。这里主要指文档的概要信息。

5.文档的主体<body> . . .</body>

body元素定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等)。

基本的框架可以用!(注意是英文感叹号)+tab一键形成。

2.4 HTML中的注释

  1. <!-- 注释内容 -->

注释不会显示在网页内容中。

2.5 认识MDN

MDN Web Docs
为Web开发的官方文档。