HTML详解-2 基础元素

最新推荐文章于 2024-04-03 09:23:47 发布

萌杰尔

最新推荐文章于 2024-04-03 09:23:47 发布

阅读量1.1k

点赞数 3

分类专栏：网站开发 HTML 文章标签： html5 html web

本文链接：https://blog.csdn.net/mengerZhang/article/details/116525124

版权

HTML 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

网站开发

5 篇文章 0 订阅

订阅专栏

网站开发基础之HTML详解-2 基础元素

欢迎来到第二节，打开这篇文章，相比你已经通过第一节的学习了解了什么是HTML并且知道HTML源码的基本结构了，那我们看看今天的内容吧。

什么是快乐星球 —*嘿嘿嘿，开个玩笑

今天我们来讲一些基础的标签，这些标签都应当放到body标签中，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Base Element</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

这个h1标签放在了body标签中，就会显示在网页可见区域了

h1

h1标签，用于显示一个一级标题（注意：改标题是文本标题而不是标签页那个页面标题）

<h1>我是一级标题</h1>

显示结果如下

h2

h2标签，用于显示一个二级标题

<h2>我是二级标题</h2>

显示结果如下

由此可见h1的字比h2的大，那么剩下的就不用写了，文本标题一共六个级别

一级标题 h1

二级标题 h2

三级标题 h3

四级标题 h4

五级标题 h5

六级标题 h6

br

br标签，用于换行

<br>

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello<br>World
</body>
</html>

显示结果如下

可以看到World单词显示在了第二行，这就是br标签的用途了

注意：这是一个真实项目中不太会用到的标签，了解就好了

p

p标签，用于显示段落

<p>

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。</p>
    <p>那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路!”</p>
</body>
</html>

显示结果如下

由此可见，p标签把文章分成段，并且段与段之间有间隔

strong

strong标签，用于加粗文本

<strong></strong>

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello<strong>World</strong>
</body>
</html>

显示结果如下
strong
由此可见，被strong标签包起来的World单词变成粗体，这就是strong标签的功能

em

em标签，用于将文本变成斜体

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello<em>World</em>
</body>
</html>

图中World单词被em标签包起来，因此变成了斜体

a

很奇怪怎么会有名字那么简单的标签，嘿嘿嘿
这就是你在网上见到的超链接的本体了
a标签，用于实现一个超链接

<a href=""></a>

注意，该标签存在一个href属性，该属性用于为超链接指定一个链接，该超链接显示的文本应该包在该标签中

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.csdn.net">CSDN</a>
</body>
</html>

该标签的执行结果出现了一个蓝色/紫色的带有下划线的文本，这就是超链接，当你点击的时候，会跳转到CSDN的官网

这些就是HTML的最基本的标签了，祝大家学习快乐，下节我将讲解一些比较有意思的内容哦

欢迎大家加入我的微信群

WeChat Group

萌杰尔

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
6
评论
HTML详解-2 基础元素

网站开发基础之HTML详解-2 基础元素欢迎来到第二节，打开这篇文章，相比你已经通过第一节的学习了解了什么是HTML并且知道HTML源码的基本结构了，那我们看看今天的内容吧。什么是快乐星球 —*嘿嘿嘿，开个玩笑今天我们来讲一些基础的标签，这些标签都应当放到body标签中，如下<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equ
复制链接

扫一扫