Html实用型基础标签——基础的单个标签

梦起孟心

已于 2023-02-01 10:21:26 修改

阅读量2.3k

点赞数 2

分类专栏： Html基础文章标签： html html5

于 2020-07-14 15:22:54 首次发布

本文链接：https://blog.csdn.net/qq_41890177/article/details/107335896

版权

Html基础专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、html简介

HTML 是用来描述网页的一种语言，指的是超文本标记语言。HTML 不是一种编程语言，而是一种标记语言

正常的baihtml标记分为4层
第一:<html>,这是最外的一层
第二:<head>网页头部
第三:<title>网页标题，在<head>中包含
第四:<body>网页内容

<html>
<head>
    <title>这是标题</title>
</head>
<body>

</body>
</html>

所以一般在写代码时主要在body中，至于使用的编译器因人而异，拿记事本都可以写，如果使用记事本一定要改后缀名，将.txt改为.html，我主要使用的是WebStorm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

可以看到。当我们新建一个html文件时，webstorm会自动帮我们生成结构

<!DOCTYPE html> !:表申明的意思。这一行代码的意思是：下面的文档标签将以html5规范去解析

<html lang="en"> 表示语言为英语

注意，如果新建一个html文件后没有生成结构，自己又不想写可以选择以下两种方式，都可以自动生成文档结构

1、！+tab

2、html:5+tab

暂时不用在意生成后出现的meta下的那些属性，因为是移动端的开发设置

可以随便写一些东西进行测试，比如在body中写一个Test

注意，我们可以看到标题的位置，这里是可以修改的

二、常用标签元素

1、块级标签和行级标签

首先我们要知道什么是块级元素和行级元素

块级元素：独占一行，宽度和高度是可控的，如果没有设置其宽度，将默认铺满整行，其内可以包含块级和行级元素

行级元素：不会独占一行，与相邻的行级元素占同一行，直到行占满，会自动掉到下一行，宽度和高度是不可控的，其内只能包含行级元素

相互转化的实现

块级标签转为行级标签：display:inline;（直接在标签里面添加即可）

行级标签转为块级标签：display:block;

2、div（块级）和span（行级）

div:用来布局的，没有具体含义。如果一定要给个定义，那就可以理解为是层

span:作用与div一样，都是用来布局的，不同的是div会单独占一行，而span不会;span用于行内布局

我们一般写代码时都将各个部分写在不同的div中，方便添加样式以及更有层次性。

3、标题标签（块级）

通过<h1>——<h6>来进行定义

<h1>Test</h1>
<h2>Test</h2>
<h3>Test</h3>
<h4>Test</h4>
<h5>Test</h5>
<h6>Test</h6>

经过测试可以看到字体的大小是不一样的，<h1>是最大<h6>是最小。

还要注意的是，html的容错率是很高的，也就是说即使有些部分写错了，他也不会报错，比如说

<h11>Test</h11>

它同样会显示，显示的结果只是普通的字体，和只写一个Test的结果是一样的

如果嫌写起来麻烦，可以通过快捷键，比如你想写<h1></h1>，可以直接写h1然后摁下tab键即可自动生成，后面都是一样的

4、段落标签（块级）

通过进行定义

特点在于添加段落标签后都会另起一行显示里面的内容

Test<p>Test1</p>
<p>Test2</p>


<p>Test1</p>Test
<p>Test2</p>


<p>Test1</p>
<p>Test2</p>
Test

不管是上面哪种写法，显示的结果都只是

5、换行，回车（行级）

通过 进行定义

标签是空标签（意味着它没有结束标签，因此这是错误的： ）。

所以在 HTML 中，把结束标签放在开始标签中，也就是 。

要注意的是，在html里面写代码，他是不认你键盘敲进去回车的

Test
Test
Test
Test

TestTestTestTest

所以你不管在body里面敲多少个回车，都不会起作用，显示的结果都是

所以为了避免这一情况，添加了换行标签

Test<br/>
Test<br/>
Test<br/>
Test<br/>

Test<br/>Test<br/>Test<br/>Test

不管怎么写，只要遇到 后就会换行

如果你想写多个换行

1、 后选择这一行然后ctrl+D

2、或者直接写br*5然后tab，则会自动生成5个

这样就不用ctrl+c、ctrl+v那么麻烦了

6、水平线（块级）

通过<hr/>进行定义

<hr/>
Test
<hr/>

显示结果就是多了条水平线

可以看到<hr/>自身就有可以换行的属性，所以不管Test写在哪里水平线都会换行显示，即使写的文字在<hr/>后面跟着，也会被换行显示

7、字体加粗（行级）

通过或者进行表示

需要注意的是，两者虽然在网页中显示效果一样，但实际目的不同。

这个标签对应 bold，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式／风格需求；

这个标签意思是加强，表示该文本比较重要，提醒读者／终端注意。为了达到这个目的，浏览器等终端将其加粗显示；

总的来说就是，为了加粗而加粗，为了标明重点而加粗，所以使用好些

<b>Test</b>
<hr/>
<strong>Test</strong>
<hr/>

8、字体斜体（行级）

通过

和一样，两者虽然在网页中显示效果一样，但实际目的不同。

标签表示对所包含内容显示斜体文本效果。

标签表示对所包含文本内容的强调。

<i>Test</i>
<hr/>
<em>Test</em>
<hr/>

9、注释

通过进行表示，注意这是在html中的注释，css里面是不一样的

这个就不多说了，注释的代码在网页中就不会显示了，因为浏览器不会解析注释的内容

注意：不要在注释中使用“--”

快捷键为ctrl+/这样就可以选择整行或是整段

如果你要在一行中指定一些字符进行注释，比如abcde，你只想注释掉de时。可以选中de然后ctrl+shift+/即可

10、预格式化文本（块级）

通过<pre></pre>进行表示，在文本中会保留空格和换行符，包括宽度等，但文字的字号会小一号，使用较少

    <pre>预格式文本标签。
                 在文本中会保留空格和换行符，
        包括宽度等。
    </pre>

11、放大缩小字号（行级）

利用<big></big>进行表示

Test<small>Test</small>
Test<big>Test</big>

注意<big>标签已经被html5所淘汰，但并没有删除，尽量不要使用

12、上下标（行级）

利用进行表示，调整文本正常显示的基线，且字号会小一号（不常用）

    x <sup>2</sup> + y <sup>2</sup> = z
    <br>
    x <sub>2</sub> + y <sub>2</sub> = z

13、短文本引用（行级）

利用<q></q>进行表示

<q>hello</q>

主要功能是会为我们自动加上引号

14、特殊符号

注意，在html中有些特殊符号是无法直接显示的，比如空格，小于号

Test Test
<br/>
Test                   Test

他只会识别一个空格，其余的空格全部就自动忽略了，至于小于号，如果小于号后面跟了其余内容，则会直接报错，因为我们在写标签时都用<>括起来，所以当单独写“<”时，它会去寻找与之匹配的">"，找不到就会报错，但之前说过html的容错率很高，即使一句代码有问题，其余的代码还是可以显示的。

所以想要这些符号有作用时需要一些特殊的符号表示，用&开头;结尾

< 是小于号

> 是大于号

  空格，该空格占据宽度会受【字体】影响

&emsp; 空格，占据的宽度刚好是一个中文宽度，不受字体影响

" 引号

× 乘号

÷ 除号

™商标符号

®商标符号

&lt;&lt;&lt;是小于号
<br/>
&gt;&gt;&gt;是大于号
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
<br/>
<span>你好世界</span>
<br/>
&emsp;&emsp;空格
<br/>
&quot;&quot;&quot;&quot;引号
<br/>
&copy;版权符号
<br/>
&times;乘号
<br/>
&divide;除号
<br/>
&trade;商标符号
<br/>
&reg;商标符号

注意，这里的使用其实最多的在于介绍一些标签，比如说在网页上显示，如果你单纯的把这句代码写进body中，肯定就换行了，此时就可以用特殊符号来写

<p></p>
<hr/>
&lt;p&gt;&lt;/p&gt;

其实如果不是这样子的形式，“<”,”>“,“ " ”都可以直接写，也可以显示，要注意如果<后面要跟其他内容则一定要用特殊符号代替，但尽量不要这么写，如果想写这些符号尽量使用特殊符号来代替，至于引号的话主要是在后面人，比如你写一些name=“内容”时，想在里面表示引号时，则可以使用特殊符号。

15、图片

通过<img>进行表示
主要的是<img src="" />

src:路径，这里的路径一定要写对

可以写的是：title:鼠标悬浮时的文字 alt：图片不存在时替换的文字

<img src="../imgs/logo_jw.png" title="教务系统" alt="图片错误">

如果图片地址有误时

这里注意的是src里面的路径，如果你写的html和图片在同一级目录下，则不用添加../，如果不在一级，则需要使用../跳出html当前所在的目录中，再去寻找你写的imgs目录，找到图片。

16、超链接

通过<a href=""></a>来显示

通过此标签跳转页面，提前写好另一个html文件，将文件名添加到href中，添加提示文字“点击我”

<a href="demo_2.html">点击我</a>

和图片一样，如果想跳转到同级目录，这不用写../，如果不是同级目录，则先跳出使用../，然后在找到你想要的文件

href中可以写你编辑过得html文件，也可以写一些其他网站，比如百度网易什么的，只需要把网站地址加进去即可

当然里面还可以添加一些属性 target=" " title=" "

title=" " 表示鼠标悬浮的提示文字

target=" " 表示跳转的目标形式
_blank(另起一个新的窗口)
_self（在自己的窗口下也就是自身跳转，不会新开窗口）
_parent（返回父一级）
_top（返回最顶层）

17、a标签的伪类

a :hove 悬浮

a:link 未访问

a:visited 已经访问过了

a:active 点击鼠标时

设置的顺序： link -> visitied > hover > active

一般建议：只写 hover 即可

18、锚链接

和超链接一样，只不过它可以跳转到你指定的地方

步骤：

如果要从a跳到b里面指定的位置
1、首先在b里面任选一行起名（用id命名也可以）
<a name="my2mao">222b页面</a>
2、跳转要加#name
<a href="hellob.html#my2mao"></a>

具体实现：

第一步：命名

第二步：查找

<a href="demo_2.html#hello">点击我</a>

19、功能性链接

比如发邮件：<a href="mailto:...">点我发邮件</a>

都有一些固定的写法，以后遇到了会进行纪录

三、总结

此次介绍了一些html中常用的基础标签，当然html中的标签还是很多的，而且都可以嵌套使用，主要看个人设计，所以等以后在实践中遇到了其他的新的标签，还会在里面进行添加。

梦起孟心

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Html实用型基础标签——基础的单个标签

一、html简介HTML 是用来描述网页的一种语言，指的是超文本标记语言。HTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签(markup tag) HTML 使用标记标签来描述网页
复制链接

扫一扫