HTML5基础知识_html子标签和父标签

作者：秋刀鱼在做梦 | 2024-08-18 13:19:28

踩

html子标签和父标签

HTML5基础知识

前端三剑客

html：页面的框架
css：页面的样式
JavaScript：页面的行为（逻辑）

第一个html

使用WebStone创建一个html5文件，自动生成的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10

下面我们来解析一下这段最基础的代码

标签/元素

使用一对大括号括起来的东西叫做标签（或元素）

文档声明

第一行代码<!DOCTYPE html>是文档声明，作用是告诉浏览器：我是html5的代码，请按照html5的语法来解析我

我顺便创建了html4和xhtml的文件，其文档声明如下

html4：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
1
2

xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1
2
3
4

似乎越老的版本，其文档声明越长

根标签

第二行和最后一行的<html></html>是html5的根标签，其通常会包含<head></head><body></body>，分别表示头部和内容

<head></head>标签的内容不会出现在页面中，而是作为网页的头部信息和简介，便于浏览器和搜索引擎了解网页的内容

例如其中的<meta charset="UTF-8">和<title>Title</title>其作用分别是告诉浏览器编码格式和页面的标题，这两者都是不显示在页面中的
<body></body>标签里的内容会解析并显示在浏览器的页面中

标签属性

第四行的<meta>标签内的charset="UTF-8"就是标签属性（以下简称属性），其注意事项如下

属性总是以名/值对的形式出现，比如：charset="UTF-8"
属性总是在 HTML 元素的开始标签中规定。
属性和属性值对大小写不敏感，但通常使用小写属性
属性值应该始终被包括在引号内，通常使用双引号
属性与标签名间用空格隔开
一个标签可以有多个属性，属性间也用空格隔开

html的属性lang="en"的作用是告诉浏览器，该页面是英文页面，当该页面的语言与浏览器的区域不同时，会提示翻译；将其设置成zh-cn，当用中国区域的浏览器打开时就不会提示翻译

标签的分类

根据标签闭合规则，可以分为单标签(空标签，自闭合标签)、双标签

单标签：如<meta>标签就是单标签，其没有结束标签
双标签：像我们上面解释的<html></html>标签就是双标签，有开始有结束。结束标签的标签名前有/，如</html>，表示这是一个结束标签

标签关系

父、子与兄弟标签

父标签：直接包含子标签的标签
子标签：直接被父标签包含的标签
兄弟标签：拥有相同的父标签的标签

注意：一定要是直接包含，中间隔一层就不算父子标签

例如最上面的例子里面head和title是父子关系，title是子标签，head是父标签，而html和title不是父子关系，title和meta是兄弟标签

祖先、后代标签

祖先标签：直接或间接包含后代标签的标签，父标签也是祖先标签
后代标签：直接或间接被祖先标签包含的标签，子标签也是后代标签

例如：最上面的例子，html是title的祖先标签，title是html的后代标签

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/997612