HTML5介绍，HTML5语义化标签

最新推荐文章于 2022-07-10 14:32:35 发布

ycw_zz

最新推荐文章于 2022-07-10 14:32:35 发布

阅读量280

点赞数

分类专栏：前端文章标签： html5 前端

本文链接：https://blog.csdn.net/ycw_zz/article/details/122435504

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

单纯的html标签长什么样？

代码如下：

<p>我是一个p标签</p>

标签由英文尖括号<和>括起来，如<html>就是一个标签。

html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

例如：<p></p>、<span></span>、<html></html>

<p>为开始标签，</p>为结束标签，Hello html5为标签中的内容。

标签与标签之间是可以嵌套的，但先后顺序必须保持一致

例如在<div>标签中嵌入<p>标签，若<p>标签在<div>标签后面，则</p>标签就应该在</div>标签前面

<!DOCTYPE>声明

<!DOCTYPE html>:文档类型声明，表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前

<meta charset="UTF-8">设置当前文件字符编码

style标签：双标签中设置当前文件样式

head标签

head标签也是双标签，成对存在：<head></head>

放在<html></html>里面，通常用来嵌套meta、title、style等标签。

title标签

在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。

body标签

成对出现，在<body></body>中的内容为网页呈现的内容。

html文件注释

语法：



下面我们来编写一个简单的网页——Hello html5


<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body{
                color: blue;
            }
        </style>
        <meta charset="UTF-8">
        <title>初识HTML5</title>
        <body>
            <p>Hello html5</p>
        </body>
    </head>
</html>

下面是我们运用vs code运行的结果：

一个简单的网页就制作好了

语义化标签

<p>标签

语法：

<p>段落文本</p>

注意一段文字一个<p>标签，如在有3段文字，就要把这3个段落分别放到3对<p></p>标签中。

例如：一段文字

<p> 这堵石壁似摩天大厦仰面压来，高得像就要坍塌下来咄咄逼人。山巅上，密匝匝的树林好像扣在绝壁上的一顶巨大的黑毯帽，黑绿从中，岩壁里蹦蹿出一簇簇不知名的野花。</p>

例如：三段文字

<p> 倘若希望在金色的秋天收获果实，那么在寒意侵人的早春，就该卷起裤腿，去不懈地拓荒、播种、耕耘，直到收获的那一天。</p>

<p>宁静的夏夜月朗风清，总是能给我一种清逸娴静的感觉。明净清澈如柔水般的月色倾洒，清光流泻，意蕴宁融。月色柔和而透明，轻盈而飘逸。</p>

<p>他们情感年轮的全部遗憾在于——当他们还不善于表达爱情的时候，却惊讶地发现，爱情已在他们内心里产生了。现实的钉子冷漠地入他们脆薄的蚌壳，而他们懵懂且迷惘，同时自觉羞耻，不知怎么才能把它变成珍珠。他们本能地渴望，本能地排斥……</p>

<span>标签

这个标签是没有语义的，它的作用就是为了设置单独的样式用的。

语法：

<span>文本</span>

<style>

span{

color:blue;

}

</style>

<span><p>hello world</p></span>

“hello world”在网页中呈现出来的是蓝色字体的

<hx>标签

使用<hx>标签为网页增加标题

语法：

<hx>标题文本</hx> (x为1-6)

以此类推

<hx>标签放在<body>标签里面:

 <body>
            <h1>这里是一级标题</h1>
            <div>
                <span><p>Hello html5</p></span>
                </div>
        </body>

<div>标签

使用<div>标签自定义块

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

语法：

<div>…</div>

<body>
 <div>
   <h1>这里是一级标题</h1>
    <p>Hello html5</p>
 </div>
</body>

<header>标签：定义头部区域

<footer>标签：定义底部区域

<section>：定义区段

<aside>：定义侧边栏区域

下面我们运用以上标签制作一个网页

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            span{
                color: rgb(76, 76, 134);
            }
        </style>
        <meta charset="UTF-8">
        <title>初识html5</title>
        <body>
            <span><div>
            <h1>这里是一级标题</h1>
                <p>Hello html5</p>
                </div>
                </span>
                <header>我是定义头部区域标签</header>
                <footer>我是定义尾部区域标签</footer>
                <section>我是定义区段标签</section>
                <aside>我是定义侧边栏区域标签</aside>
        </body>
    </head>
</html>

下面是我们运用vs code运行的结果：