前端入门系列-HTML-HTML结构

🌈个人主页：羽晨同学

💫个人格言:"成为自己未来的主人~"

HTML基础

HTML结构

认识HTML标签

HTML代码是由"标签"构成的。

形如

html 复制代码

<body>
    hello
</body>

标签名（body）放到<>中
大部分标签成对出现，<body>为开始标签 ,</body>为结束标签
少数标签只有开始标签，称为"单标签"
开始标签和结束标签之间，写的是标签的内容
开始标签中可能会带有"属性"，id属性相当于给这个标签设置了唯一的标识符（身份证号码）

html 复制代码

<body id="myid">
    hello
</body>

HTML文件基本结构

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>
    hello world
</body>
</html>

html标签是整个html文件的根标签（最顶层标签）
head标签中写页面的属性
body标签中写的是页面上显示的内容
title标签中写的是页面的标题

标签层次结构

父子关系
兄弟关系

html 复制代码

<html>
    <head>
        <title>这是标题</title>
    </head>
    <body>
        hello world
    </body>
</html>

head和body是html的子标签（html就是head和body的父标签）
title是head的子标签，head是title的父标签
head和body之间是兄弟关系

标签之间的结构关系，构成了一个DOM树

DOM是Document Object Mode（文档对象模型）的缩写

快速生成代码框架

在vs studio中可以直接生成代码框架

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>

直接输入！，按tab键，此时能自动生成代码的主体框架

<!OCTYPE html>称为DTD（文档类型定义），描述当前的文件是一个HTML5的文件
<html lang="en">其中lang属性表示当前页面是一个"英语页面"，这里暂时不用管（有些浏览器会根据此处的声明提示是否进行自动翻译）
<meta charest="UTF-8">描述页面的字符编码方式，没有这一行可能会导致中文乱码
<meta name="viewport" content=""width=device-width,initial-scale=1.0">

ame="viewport"其中viewport指的是设备的屏幕上能用来显示我们的网页的那一块区域

content=""width=device-width,initial-scale=1.0"在设置可视区和设备宽度等宽，并设置初始缩放为不缩放。（这个属性对于移动端开发更重要一些）