第二节、Web前端学习_HTML5文档介绍

本文链接：https://blog.csdn.net/qq_42148307/article/details/119510253

文章目录

HTML5的语法变化

标签不再区分大小写
元素可以省略结束标签
支持boolean值的属性
允许属性值不使用引号

HTML5标签元素及属性

$像 < h e a d > 、 < b o d y > 、 < t a b l e > 等被尖括号 < 和 > 包起来的对象，都是 H T M L 标签。$
$H T M L 文档的根元素，成对出现 < h t m l > < / h t m l >, 它代表文档的开始和结束。$
$< b o d y > 标签是 H T M L 的主体部分，网页所要显示的内容都放在该标签内。$

单标签由一个标签组成，在开始标签中进行关闭，以开始标签的结束而结束。
双标签由“开始标签”和“结束标签”两部分构成.
标签属性：为HTML元素提供各种附加信息的就是HTML属性，它总是以"属性名=属性值"的形式出现，而且属性总是在HTML元素的开始标签中进行定义。
元素：从开始标签到结束标签的所有代码，就是HTML元素，如 $< p > H T M L < / p >$ 。位于起始标签和结束标签之间的文本就是HTML元素的内容。

HTML5文档头部标签

$< t i t l e >$ 标签定义文档的标题，在所有HTML文档中是必需的，只能出现在 $< h e a d >$ 中。
$< l i n k >$ 标签是引用外部文件标签，通常放置在一个网页的头部标签中，用于链接外部CSS文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<!--引入外部css文件-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<p>引入外部文件标签</p>
</body>
</html>

运行结果：

$< s t y l e >$ 标签是内嵌样式标签，在 $< s t y l e >$ 标签中，可以规定在浏览器中如何呈现HTML文档。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            background: green;/*设置p标签的背景的为绿色*/
            color: white;/*设置p标签中字体颜色为白色*/
        }
    </style>
</head>
<body>
<p>style用于内嵌样式</p>
</body>
</html>

输出：

< $m e a t$ >标签：
设置页面关键字
设置页面说明
设置作者信息
设置网页的定时跳转

页面注释标签：
语法：< $! - - 注释的内容 - -$ >

标题标签

HTML中标题由< $h 1$ >～< $h 6$ >标签来定义。其中< $h 1$ >代表1级标题，级别最高，文字最大，其他标题标签一次递减，< $h 6$ >标签级别最低。标题字的对齐属性align。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标题字对齐属性</title>
</head>
<body>
<h1 align="center">想法是成功的种子</h1>   <!--居中对齐内容-->
<h1 align="left">想法是成功的种子</h1>     <!--左对齐内容-->
<h1 align="right">想法是成功的种子</h1>    <!--右对齐内容-->
</body>
</html>

输出：

段落标签

段落标签即< $p$ >标签，< $p$ >开始和< $/ p$ >结束之间的内容形成一个段落。
换行标签< $b r$ >是一个单标记，它没有接受标签，作用是将文字在一个段内强制换行。一个< $b r$ >标签代表一次换行，连续的多个< $b r$ >标签表示多次换行。使用时，只需在要换行的位置添加即可。
不换行内容放入< $n o b r$ >与</ $n o b r$ >之间即可。如不遇到< $b r$ >换行标签，内容在一行显示完，如遇到< $b r$ >换行标签，内容将在加< $b r$ >换行自动换行。

水平线标签

在网页中，如果想要将上下内容进行分隔开，可以使用水平线标签< $h r$ >,< $h r$ >水平线特的点是100%宽度水平分割线，并且独占一行，< $h r$ >水平线将上下内容分割一定距离。
在HTML中，我们经常使用& $n b s p$ ;来插入空格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入空格</title>
</head>
<body>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
</body>
</html>