零基础学习WEB前端开发(四)：HTML文本编辑标签及分块标签

本文主要是介绍零基础学习WEB前端开发(四)：HTML文本编辑标签及分块标签，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1 标签语义

标签的语义即标签的作用含义，根据标签的语义，在合适的地方添加一个合理的标签，可以让页面结构更加清晰。

2 标题标签

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

标签语义：作为标题使用，依据重要性递减

特点：加了标题的文字会变粗，字号也会变大、一个标题独占一行

代码演示：

<!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>我用VsCode创建的页面</title>
</head>
<body><h1> 这是一个一级标题 </h1><h2> 这是一个二级标题 </h2><h3> 这是一个三级标题 </h3><h4> 这是一个四级标题 </h4><h5> 这是一个五级标题 </h5><h6> 这是一个六级标题 </h6>
</body>
</html>

效果：

3 段落标签和换行标签

3.1 段落标签

HTML 段落是通过标签 <p> 来定义的。p即paragraph的首字母。

标签语义：它可以将网页分为若干段落。

特点：文本在一个段落中会根据浏览器窗口的大小自动换行、段落和段落之间会保有空隙。

代码：

<!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>我用VsCode创建的页面</title>
</head>
<body><p>孔子说：“饱食终日，无所用心，难矣哉！”又说：“群居终日，言不及义，好行小慧，难矣哉！”孔子是一位教育大家，他心目中没有什么人不可教悔，独独对于这两种人便摇头叹气说道：“难！难！”可见人生一切毛病都有药可医，惟有无业游民，虽大圣人碰着他，也没有办法。</p><p>唐朝有一位名僧百丈禅师，他常常用两句格言教训弟子，说道：“一日不做事，一日不吃饭。”他每日除上堂说法之外，还要自己扫地、擦桌子、洗衣服，直到八十岁，日日如此。有一回，他的门生想替他服务，把他本日应做的工悄悄地都做了，这位言行相顾的老禅师，老实不客气，那一天便绝对的不肯吃饭。</p></body>
</html>

效果：

3.2 换行标签

<br /> 可插入一个简单的换行符。

<br> 标签是单标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。

请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到 <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>我用VsCode创建的页面</title>
</head>
<body><p>孔子说：“饱食终日，无所用心，难矣哉！”<br />又说：“群居终日，言不及义，好行小慧，难矣哉！”<br />孔子是一位教育大家，他心目中没有什么人不可教悔，<br />独独对于这两种人便摇头叹气说道：“难！难！”<br />可见人生一切毛病都有药可医，惟有无业游民，<br />虽大圣人碰着他，也没有办法。</p><p>唐朝有一位名僧百丈禅师，他常常用两句格言教训弟子，说道：“一日不做事，一日不吃饭。”他每日除上堂说法之外，还要自己扫地、擦桌子、洗衣服，直到八十岁，日日如此。有一回，他的门生想替他服务，把他本日应做的工悄悄地都做了，这位言行相顾的老禅师，老实不客气，那一天便绝对的不肯吃饭。</p></body>
</html>

效果：

4 文本格式化标签

在网页中，有时需要设置粗体、斜体、~~删除线~~或者下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要。

<b> b_bold_加粗文本 </b> <strong>strong_加粗文本_加重语气</strong>
<i>i_italic_斜体文本</i> <em>em_斜体文本</em>
<big>big_放大文本</big> <small>small_缩小文本</small>
<sub>sub_下标</sub> <sup>sup_上标</sup>
<ins>ins_插入字_加下划线</ins>
<del>del_删除字</del>

代码：

<!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>我用VsCode创建的页面</title>
</head>
<body>我是<strong>加粗</strong>文字我是<b>加粗</b>文字我是<em>倾斜</em>文字我是<i>倾斜</i>文字我是<del>删除线</del> 我是<s>删除线</s> 我是<ins>下划线</ins>我是<u>下划线</u></body>
</html>

效果展示：

5 <div>和<span> 标签

是没有语义的，就是一个盒子，用来装内容的。

<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

这两个都是布局用的。

span是跨行跨距，在一行显示。

<!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>我用VsCode创建的页面</title>
</head>
<body><div>我是一个div标签，一个人占一行</div>123<div>我是一个div标签，一个人占一行</div><span>新浪</span><span>微博</span><span>百度</span></body>
</html>

显示效果：