HTML标签(上)

最新推荐文章于 2025-02-24 21:39:51 发布

糊糊67

最新推荐文章于 2025-02-24 21:39:51 发布

阅读量172

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/weixin_43249530/article/details/90577103

HTML 专栏收录该内容

7 篇文章

订阅专栏

本文围绕前端HTML展开，介绍其是网页内容载体及基本结构，还阐述HTML乱码解决办法。重点讲解了HTML文本标签，包括段落、标题、强调、引用等标签的使用方法、特点及区别，如段落标签会自动添加空行，强调标签有语义和无语义之分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端三把斧之一：HTML

HTML是⽹⻚内容的载体，创建html文档来创建网页。内容就是⽹⻚制作者放在⻚⾯上想要让⽤户浏览的信息，可以包含⽂字、图⽚、视频等。
HTML是一种超文本标记语言，它具有标记标签的集合，通常成对出现比如<html> </html>，开始标签（起始标签）和结束标签（闭合标签），标签不区分大小写，但是建议小写，HTML基本结构：

<html>
		<head>
		
		<title>...</title>
		<meta>
   	    <link>
        <style>...</style>
        <script>...</script>
	
		</head>
	
		<body>
		这里面是网页的主要内容，字体大小、颜色之类的
		</body>
</html>

HTML文档类型
它不是 HTML 标签，它为浏览器提供⼀项信息（声明），即 HTML 是⽤什么版本编写的。必须放在HTML⽂档的第⼀⾏
声明不是HTML标签，例如HTML5 <!DOCTYPE html>
HTML乱码解决
当⽹⻚出现乱码时，在<head></head>标签之间添加: <meta charset="utf-8">

一、HTML文本标签

1、段落标签 ``

浏览器会⾃动地在段落的前后添加空⾏。（
是块级元素）不要忘记结束标签
无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。HTML 代码中的所有连续的空行、空格、换行都会被显示为⼀个空格。
该标签字体大小是默认一致的，可以完成你想要的段落形式，比如换行

2、标题标签

标题是通过<h1> - <h6>等标签进⾏定义的，由大到小
因为是块级元素，所以HTML会自动地在标题元素、段落元素的前后添加一个额外的空行，比如前面说到的段落标签:、该处提到的标题标签<h6></h6>，仅仅把标题标签⽤于标题⽂本。想要产⽣粗体⽂本使⽤其它标签或 CSS 代替.

3、强调标签

在浏览器中默认⽤斜体表示， ⽤粗体表示。两个标签相⽐，⽬前国内前端程序员更喜欢使⽤表示强调

<em>强调标签</em>
<p><strong>较强烈的标签</strong></p>

、、的区别：
1.和标签是为了强调⼀段话中的关键字时使⽤，它们的语义是强调。
2. 标签是没有语义的，它的作⽤就是为了设置单独的样式⽤的，把⼀段话圈起来，然后⽤css设置样式。
在这里插入图片描述

4 、引用标签

短文本的引用，会加双引号：<q></q>，一般不使用
长文本的引用，形成缩进样式：<blockquoto></blockquoto>

5 、换行标签和分割线标签

一般情况下写俩个标签的前者

换行标签： 和 
分割线标签：<hr/> 和<hr>
这俩个都是⼀个空标签，只有⼀个开始标签，没有结束标签。

6 特殊字符

&reg；	已注册
&copy ；	版权
&trade；	商标
&nbsp；	空格

7、其他标签

地址标签：<address>地址信息</address>，字体自动斜体
code标签：一行代码时：<code>代码语言 </code>，多行代码时：<pre>代码语言 </pre>，原样输出，如果用以前的方法，回车需要输⼊ 签，空格需要输⼊   <pre>标签的主要作用:预格式化的⽂本。
段落缩进：<blockquoto> 文本</blockquoto>,一般不用q标签
滚动标签：<marquee behavior= "alternate" loop="3" bgcolor="hotpink" scrollamount="50" direction="right"> 今天 </marquee> ；