HTML语义标签和结构标签详解
文章目录
- 实体标签
- meta标签
- 语义化标签
- 结构化语义化标签
- 列表标签
在学习标签时我们应该注意的是他的语义,而不是他的显示效果,因为显示效果是在css中进行编写的,我们一定要做到分工明确清晰
实体标签
在网页中编写代码时,我们有时会使用一些特殊的符号,如多个连续的空格、大于号和小于号,但他们同时也代表着一些其他的意思,如果不加以区分就会产生错误,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
a<b>c
</body>
</html>
我们本意是想要在网页中输出a<b>c
这个语句,却发现只输出了ac,其中c被加粗了,这是因为浏览器蒋<b>
看成了一个标签,他的作用是加粗,所以不会输出<b>
这个语句,于是我们引入了实体标签的概念。为了能够打出‘<’符号和‘>’符号,我们用>
代表‘>’符号,用<
代表‘<’符号。
另外,在我们写多个空格时,浏览器最多只会显示出一个空格,这时我们就需要用
来代替空格,以显示出多个空格,除了以上介绍的实体标签外还有很多的实体标签,例如版权符号©
等等,这就需要读者自己去学习了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
a<b>c
</body>
</html>
meta标签
meta标签主要用于设置网页中的一些元数据,元数据用户是看不到的
meta标签的属性包括:
charset | 指定网页的字符集(编码) |
---|---|
name | 指定数据的名称 |
content | 指定的数据内容 |
http-equiv | 将页面重新定向到另一个网站 |
其中charset属性的值为各种编码:utf-8、GBK等
其中name属性的值可为:
keywords | 表示网站的关键字,可以指定多个关键字 |
---|---|
description | 用于指定网站的描述 |
keywords是搜索引擎主要的搜索对象
description中的内容会出现在超链接上的文字显示
content属性的值为各种相应的内容
http-equiv的属性值有refresh,同时他的content中第一个数字代表过去多少时间进行网页的跳转(单位为秒),url后的内容为跳转网页的地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<meta name="keywords" content="网站,建站,前端">
<meta name="description" content="这是一个分享前端学习经验的网站">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</body>
</html>
此效果为过三秒后自动跳转到百度首页
语义化标签
语义化标签有很多,这里我们随便讲几个。
<em>
标签,他的作用是起到语调加重的作用,他是一个行内元素
<strong>
标签,他的作用是表示强调,为重要内容
<blockquote>
标签,他的作用是长引用
<q>
标签,他的作用是短引用
<br>
标签,他的作用是表示页面中的换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>今天天气<em>真</em>不错</p>
<br>
<br>
<p>鲁迅曾经说过:<blockquote>世上本没有路,走的人多了也就成了路</blockquote></p>
<p>子曰:<q>三人行则必有我师焉</q></p>
<p>你是<strong>我的神</strong></p>
</body>
</html>
结构化语义化标签
<header>
表示网页的头部
<main>
表示网页的主体部分(一个页面只会有一个main)
<footer>
表示网页的底部
<nav>
表示网页中的导航
<aside>
和主体相关的其他内容(侧边栏)
<article>
表示一个独立的文章
<section>
表示一个独立的区块
一般上面的都不怎么用,主要使用下面两个标签
<div>
没有语义,表示一个区块,现在主要的布局元素
<span>
行内元素,没有语义,用于在网页中选中文字
列表标签
我们的列表分为三类:
无序列表:使用ul标签创建无序列表,使用li表示列表项
有序列表:使用ol标签创建有序列表,使用li表示列表项
定义列表:使用dl标签创建定义列表,使用dt表示定义的内容,使用dd来对内容进行解释
注意:列表之间可以相互嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构</dd>
</dl>
<ul>
<li>a</li>
<ul>
<li>aa</li>
</ul>
</ul>
</body>
</html>
CSDN-Ada助手: 恭喜您撰写了第13篇博客,标题为“线性表——顺序表的具体实现”!这是一个非常有价值的主题,您的文章内容清晰易懂,给读者提供了关于顺序表实现的详细解析。您的持续创作让读者受益匪浅,非常值得称赞。 在下一步的创作中,或许您可以考虑拓展一下主题,比如介绍一些常用的线性表操作方法或者深入探讨不同实现方式的优劣势。这样可以进一步丰富读者的知识,并帮助他们更好地理解和应用线性表。期待您未来更多优质的博客文章!
Ordinary Dreamer: 好久以前写的文章了,其他的没看,但是题目中的要求c好像是大于等于1的,可能当时就没有考虑这么多啦
起风了宝: 你这样写的代码是有漏洞的 全部相等c=0时错的 比如 5 0 1 1 1 1 1
Ordinary Dreamer: leaft和right是在函数内部定义的,当然是局部变量。总结点数中要明确的是right含义为当前结点的右孩子结点数为多少,leaft则相反,如果遍历到了叶子节点即你说的遍历完了,他会返回0+0+1表示没有左孩子结点也没有右孩子结点,只有自己一个结点,经过重复的递归运算,最后便是计算了根结点的左孩子结点数和右孩子结点数加自己本身1,即left+right+1。 希望能给你带来帮助
范-圆-圆: 我不太理解深度算法和总结点个数那一块儿,树总有遍历完的是时候,到时候这两个指针都返回0,那还怎么得到结果? leaft和right是全局变量吗