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

最新推荐文章于 2024-05-09 10:19:41 发布

是刃小木啦~

最新推荐文章于 2024-05-09 10:19:41 发布

阅读量696

点赞数 1

分类专栏： WEB前端开发文章标签：前端 html css3

本文链接：https://blog.csdn.net/txr152111/article/details/120898911

版权

WEB前端开发专栏收录该内容

22 篇文章 3 订阅

订阅专栏

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>

显示效果：

是刃小木啦~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
零基础学习WEB前端开发(四)：HTML文本编辑标签及分块标签

1标签语义标签的语义即标签的作用含义，根据标签的语义，在合适的地方添加一个合理的标签，可以让页面结构更加清晰。2 标题标签HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。标签语义：作为标题使用，依据重要性递减特点：加了标题的文字会变粗，字号也会变大、一个标题独占一行代码演示：<!DOCTYPE html><html lang="en"><head> <meta ch..
复制链接

扫一扫