目录
前言:
1.标题标签:
前言:
实践:
总结:
2.段落标签:
前言:
段落中的空格:
总结:
3.文本格式化标签:
前言:
和标签的区别:
和标记之间的区别:
总结:
4.如何注释:
前言:
如何在代码中注释:
总结:
总结:
前言:
文本是一种常见的元素,在日常生活,在描述某个东西时,在阅读文章时,都会大量出现。而在Web中我们所书写的代码,也是文本的一部分,有时候大量文字聚集在一起时我们常常难以找到其中关键点,所以在Web中就有很多用来描述文本的标签。
HTML标签的语法和属性-CSDN博客
1.标题标签:
前言:
html中提供了<h1>到<h6>六个级别的标题标签,<h1>标签的级别最高,<h6>标签的级别最低,通过这些标签可以定义网页的标签,合理使用标题可以使网页层次结构更加清晰。如下图:
实践:
在默认的情况下,浏览器会比普通文本更大和更粗的字体显示标题中的内容,使用<h1>标签定义的标题字体最大,而使用<h6>定义的标题字体最小。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>一个简陋的网页</h1><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w=195&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"alt="此图片加载成功了??" title="此图片加载成功了"><p class="change">此表示可以显示一段文本</p><a href="https://www.bilibili.com/">此链接到bilibili</a><ul><li><a href="https://www.bilibili.com/" id="content"><b id="url">https://www.bilibili.com/</b></a></li><li>无序列表第二行</li><li>无序列表第三行</li></ul><hr><h2>新的开始</h2><br><input type="text"><ul><li style="color: aquamarine;">此文本的颜色为青色</li><li><a href="https://www.bilibili.com/" style="color:red;">点击跳转bilibili</a></li></ul><h3>一段路程</h3><div class="Name1 Name2 Name3">此处应该有点内容</div><p class="cont">此处并没有什么内容</p><div class="cont Name1">此处没有内容</div><h4>快结束了....</h4><h6>无人的结束....</h6>
</body></html>
注意:在网页上使用标签时,浏览器内置的样式会在每个标题上下添加一定的空白区域(外边距),后续可以通过CSS中的margin来设置空白区域的大小。
上述代码的运行结果为:
总结:
使用标题标签时需要注意的是:
- HTML标题标签只能用来定义标题,不可以使用标题标签来对文本进行加粗设计;
- 由于搜索引擎(如百度等)是使用标题来索引网页结构和内容的,因此使用标题标签有利于搜索引擎的抓取。
- 标题标签并不是随意使用,要根据使用的环境,按照级别由高到低的使用标题标签。
应该使用<h1>标签来标记最重要的标题,该标题常位于页面顶部,而且一个HTML文档中通常应该有且仅有一个<h1>标题,至于较低级别的标题标签(如<h2>,<h3>,<h4>),的使用可以不加太多的限制。
2.段落标签:
前言:
HTML中可以使用段落标签<p>来将文档中的内容分割为若干个段落,语法格式如下:
<p>内容</p>
段落标签有开始标签<p>还有结束标签</p>,开始标签和结束标签里面的内容会被视为段落,段落标签在很多网站里面都会用到,如下图:
需要注意的是:浏览器内置样式会在段落上下自动添加一定的空白区域(外边距),可以使用CSS中的margin属性来设置空白区域的大小。
在HTML4以及更早的版本之前,可以省略段落标签的结束标签,浏览器会自动补全缺失的结束标签,如下:
<p>bilibili
<p>前端教程
<p>前端教程-哔哩哔哩_Bilibili
段落中的空格:
在默认情况下,段落标签会对文本中的空格符进行合并,将多个空格显示为一个空格的效果,具体表现为:
- 如果段落中出现多个连续的空格,浏览器会忽略这些空格只保留一个。
- 如果段落中出现多个连续的行,浏览器会将这些换行转换成一个空格。
如下代码:
<p>bili bili</p>
<p>前端教程</p>
<p>前端教程-哔哩哔哩_ bilibili</p>
在想要在段落标签中换行,需要专门的换行的标签<br>,<br>标签属于自闭合标签,因此不需要对应的结束标签</br>,如下:
<p>前端教程 <br> -哔哩哔哩_ <br>bilibili</p>
总结:
段落标签在实际开发中很常用,但是常常需要配合其他标签才能达到更好的效果。
3.文本格式化标签:
前言:
一些HTML标签除了具有一定的语义(含义)外,还有默认样式,如<i>设置字体为斜体,<em>强调标签中的内容,并使标签中的字体倾斜。如下是用来文本格式化的标签,表格如:
标签 | 功能 |
---|---|
<b>....</b> | 加粗标签中的字体。 |
<em>....</em> | 强调标签中的内容,并使标签中的字体倾斜。 |
<i>...</i> | 定义标签中的字体为斜体。 |
<small>...</small> | 定义标签中的字体为小号字体。 |
<strong>....</strong> | 强调标签中的内容,并将字体加粗。 |
<sub>....</sub> | 定义上下标文本。 |
<sup>...</sup> | 定义上标文本。 |
<ins>....</ins> | 定义文档的其余部分之外的插入文本。 |
<del>...</del> | 在文本内容上添加删除线。 |
<code>...</code> | 定义一段代码。 |
<kbd>...</kbd> | 用来表示文本是通过键盘输入的。 |
<samp>....</samp> | 定义程序的样本。 |
<var>...</var> | 定义变量。 |
<pre>....</pre> | 定义预格式化的文本,被该标签包裹的文本会保留所有的空格和换行符,字体也会呈现为等宽字体。 |
<abbr>...</abbr> | 用来表示标签中的内容为缩写形式。 |
<address>...</address> | 用来定义文档作者的联系信息,被该标签包裹的文本通常会以斜体呈现,并在文本前面换行。 |
<bdo>...</bdo> | 定义标签中的文字方向。 |
<blockquote>...</blockquote> | 定义一段引用的文本,例如名人名言,文本会以换行输入,并在左右两边进行缩进。 |
<q>...</q> | 定义一段短引用,浏览器会将引用的内容使用双引号包裹起来。 |
<cite>...</cite> | 表示对某个文献的引用,例如书籍或杂志的名称,文本会以斜体显示。 |
<dfn>....</dfn> | yonl |
按照作用可以把上述标签分为两类:
- 物理标签:这类标签用来设置文本的外观
- 逻辑标签:这类标签用来赋予文本一些逻辑或语义值
通过上表可以看出,有些标签虽然效果一样,但是语义并不同,如<strong>和<b>标签,<em>和<i>标签,下面就来说明他们之间的关系;
<strong>和<b>标签的区别:
在默认情况下,<strong>和<b>标签都可以使文本以粗体展示其中的文本,但是<strong>标签是说明标签里内容具有很高的重要性,而<b>标签仅仅只是加粗并没有别的含义。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title><strong>和<b>标签演示</title>
</head>
<body><p>你学会了 <strong>HTML</strong> </p><p>你已经超越<b>80%</b>的程序员</p>
</body>
</html>
此处给HTML加<strong>标签是为了强调HTML的其的重要性,以及它的震撼效果。而给网址添加<b>标签仅仅是为了视觉上的粗效果,这样能引起读者的注意。
<em>和<i>标记之间的区别:
<em>和<i>标签在默认情况下均为斜体显示标签里的文本,<em>标签具有强调的语义,用来表示内容的重要性,但是<i>标签仅仅只是用来定义斜体文本的。
代码如下:
<p>你学会了 <em>HTML</em> </p>
<p>你已经超越<i>80%</i>的程序员</p>
总结:
在使用文本格式化标签的时候需要注意标签的语义(含义),然后再选择合适的标签,如强调重要的文本应该使用<strong>而不是<b>,因为<b>标签的作用仅仅只是加粗,不能只是为了达到效果就胡乱使用这样是不对的。
4.如何注释:
前言:
HTML注释主要用来对文档中的代码进行解释说明,注释也是代码的一部分,但浏览器会自动忽略注释的内容,所以用户在网页中是看不到注释的。
注释在我们编写代码的过程很有作用,因为一个完整的网页中的HTML代码起码有上千行,此时我们若要修改某部分代码则需要花费很长的时间去找,但是有了注释就不需要这么麻烦,我们可以根据他的功能或者其他作用将程序划分然后注释,这样既对自己阅读方便也方便他人阅读,可以大大提高代码的可读性。
如何在代码中注释:
在HTML中,<!-- 到 -->里面的内容皆为注释的内容,里面的内容会被编译器,浏览器忽略。如下代码:
<!DOCTYPE html>
<!-- 此为头注释 -->
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- 此为中间注释 -->
<body><ul><!-- 下面有几行被注释掉了 --><li>第一行的内容</li><!-- <li>第二行的内容</li> --><li>第三行的内容</li><li>第四行的内容</li><!-- <li>第五行的内容</li> --></ul></body>
<!-- 此为尾注释 -->
</html>
可以看到的是注释可以出现在HTML文档的任意位置,包括文档头,尾,中间,标签外部,标签内容中。注释除了可以用来对代码的说明外,还可以用来注释掉代码,如果某段代码不想执行了就可以直接注释掉。上述代码运行结果如:
总结:
注释是所有的程序中必不可少的一部分。但是也不要滥用注释,导致没必要的内容过于长,总之合理规范的使用注释可以帮助我们开发程序。
总结:
文本是我们平时最常见的元素,学习这些描述文本的标签可以帮助我们更好的描述文本的内容,能让观看者更加容易理解其中意思,可以说文本标签是必不可少的。
HTML常用的图片标签和超链接标签-CSDN博客