HTML结构

118 阅读2分钟

了解HTML标签

  • HTML代码是由标签组成的 例如:

      <body>hello world</body>
    

    1.< body > < /body >就是一对完整的标签,一对标签需要一个起始标签和一个结束标签,结束标签开头是一个  /  来表示这对标签的结束,例如:< /body >。
    2.在开始标签和结束标签之中的内容,就是这个标签需要具体展示的内容 hello world。
    3.大多数标签都是上述这种双标签的结构,只有少数标签是单标签。我们还可以给这个标签设置一个唯一的id,id相当于给这个标签设置一个唯一的身份标识。

    <body id = "my_id"> hello world </body>
    

注意:id是在开始标签内进行设置的。

HTML文件的基本结构

<html >
<head>
    <title>第一个页面</title>
</head>
<body>
    hello world
</body>
</html>

image.png

  • html标签是整个html文档的最顶层标签/根标签
  • head标签则是写这个html文档的属性的标签
  • title标签则是显示这个文档的标题标签
  • body标签中的内容则是需要显示在页面上的内容

标签的层次结构

父子关系

在上述代码中html标签就是所有标签的父标签,head标签是title标签的父标签

兄弟关系

head标签和body标签就是兄弟关系。

快速生成代码框架

image.png table之后生成代码:

image.png 细节解释:

  • < !DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件。
  • < html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面". 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译)。
  • < meta charset="UTF-8"> 描述页面的字符编码方式. 没有这一行可能会导致中文乱码。
  • < meta name="viewport" content="width=device-width, initial-scale=1.0"> name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域,content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些)。