HTML5之标签

最新推荐文章于 2025-12-05 14:31:02 发布

原创最新推荐文章于 2025-12-05 14:31:02 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端

html+css 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了HTML中的实体使用，如` `、`>`、`<`等，以及meta标签的设置，包括字符集、关键词和描述的定义。接着讲解了语义化标签的应用，如h1-h6、p、em、strong等，并强调了块级元素与行内元素的区别。最后，阐述了布局标签的作用，如header、main、footer、nav等，强调了它们在网页结构中的重要性。

1、实体

在网页中编写多个空格没默认情况会自动解析为一个空格

在html中，有些情况不能直接写特殊符号

如：多个连续的空格，字母两侧的大小于

-实体的语法：&实体的名字;

-常见的实体（可以去w3school上查找其余需要的实体）

空格	&nbs;
大于号	>
小于号	<

2、meta标签

meta标签主要用于设置网页的一些元数据，元数据不是给用户看的

meta标签中常见的属性

charset	指定网页的字符集
name	指定数据的名称
content	指定数据的内容
keywords	表示网站的关键字，可以同时指定多个关键字，关键字间用逗号隔开
discription	用于指定网站的描述，网站的描述会显示在搜索引擎的结果中
http-equiv	将页面重定向到另一个网站

示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML5,CSS3,前端">
    <meta name="discription" content="小王的网站">
    <meta http-equiv="refresh" content="3;url=http://www.baidu.com">
    <!-- 
        title标签的内容会作为搜索结果的超链接上的文字显示
     -->
    <title>meta标签</title>
</head>
<body>
    
</body>
</html>

3、语义化标签

在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是他的样式。

在页面中独占一行的元素称为块元素（block element）。

在页面中不会独占一行的元素成为行内元素（inline element）。

【注】在网页中一般通过块元素来对页面进行布局，行内元素主要用来包裹文字，一般在块元素中放行内元素，而不会在行内元素中放块元素，块元素中几乎什么都能放，p元素中不能放任何的块元素，浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。

如：标签写在根元素的外部；

p元素中嵌套块元素；

跟元素中出现了除head和body以为的元素

.......

h1-h6	重要性递减，h1在网页中的重要性仅次于title标签，一般情况下，一个页面中只有一个h1，一般情况下只会使用h1-h3,h4-h6很少用
hgroup	用来为标题分组，可以将一组相关的标题同时放入到hgroup中
p	表示页面中的一个段落，是一个块元素
em	表示语音语调的加重，是一个行内元素
strong	表示强调，重要内容
blockquote	表示一个长引用，是一个块元素
q	表示一个短引用，是一个行内元素
br	表示换行

示例：

    <h1>一级标题</h1>
    <h2>二级标题</h2> 

    <hgroup>
        <h1>静夜思</h1>
        <h2>李白</h2>
    </hgroup>

    <p>我是一个段落</p>
    <p>我是一个段落</p>

    <p>小王今天<em>真</em>好看！！！</p>

    <p>小王必须<strong>努力</strong>！！！</p>

    小王说：

    <blockquote>
        我会好好加油的!!!
    </blockquote>

    子曰：
    <q>
        学而时习之，不亦乐乎！！！
    </q>

    <!-- br标签表示换行 -->
    <br>
    <br>
    <br>
    <b>今天小王真好看！！！</b>
    <br>
    <i>今天小王真好看！！！</i>
    <br>
    <sub>今天</sub>小王真好看！！！
    <br>
    <sup>今天</sup>小王真好看！！！

4、布局标签（结构化语义标签）

header	表示网页的头部
main	表示网页的主体部分（一个页面中只会有一个main）
footer	表示网页的底部
nav	表示网页中的导航
aside	表示和主体相关的其他内容（侧边栏）
article	表示一个独立的文章
section	表示一个独立的区块，上边的标签都不能表示时使用section
div	没有语义，就用来表示一个区块，目前来讲，div还是我们主要的布局元素
span	行内元素，没有任何语义，一般用于网页中选中文字