1. 首页
  2. 文章资讯

html中的文本标签(含标签的实现案例)

21 阅读 0 评论

目录

1.标题标签

2.标题标签的align属性

3.段落标签

4.水平线标签hr

5.换行标签br

 6.文本样式标签font

​编辑7.文本格式化标签

8.文本语义标签

1）时间time标签

2）文本高亮Mark标签

3）cite标签

9.特殊字符标签

10.图像标签img

附录：

1.编写的html文件如何使用浏览器打开

2.如果没有默认浏览器打开html文件

3.vscode快速生成html代码模板

4.vscode快速保存

1.标题标签 <h>

<hn align="对其方式">标题文本</hn>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>标题标签</title>

</head>

<body>

   

   

    <h1>一级标题标签</h1>

    <hr></hr>

    <h2>二级标题标签</h2>

    <hr></hr>

    <h3>三级标题标签</h3>

    <hr></hr>

    <h4>四级标题标签</h4>

    <hr></hr>

    <h5>五级标题标签</h5>

    <hr></hr>

    <h6>六级标题标签</h6>

   

</body>

</html>

<hn>标签一样用于标记文章的标题  

标签里面的文章会被解析为对应的样式

<hr>标签是一个类似分割线的存在

会被解析为横线

效果图

2.标题标签<h>的align属性

align属性

1)默认左对齐

2)left:文本左对齐

3)center：文本居中

4)right: 文本右对其

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>标题标签的align属性</title>

</head>

<body>

    <h1>模式默认对其方式</h1>

    <hr/>

    <h2 align="left">左对齐</h2>

    <hr>

    <h1 align="center">居中对齐</h1>

    <hr/>

    <h3 align="right">右对齐</h3>

</hr>

   

</body>

</html>

效果图

3.段落标签<p>

作用：这个标签用于标记文章的段落

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>段落标签p</title>

</head>

<body>

    <h1 align="center">这是一篇文章</h1>

    <p align="center">html介绍</p>

    <p>HTML（HyperText Markup Language），即超文本标记语言，是一种用于创建网页的标准标记语言。它通过一系列的标记（tags）来描述网页的内容和结构，从而告诉浏览器如何显示这些内容.

       

        总之，HTML是Web的基础，它不仅定义了网页的结构，还为其他Web技术（如CSS和JavaScript）提供了基础，这些技术共同作用于创建动态且富有交互性的网页。</p>

</body>

</html>

效果图

4.水平线标签hr

hr就是告诉浏览器你给我显示一个水平的分割线

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>分割线标签hr</title>

</head>

<body>

   

    <h1>align属性,设置水平线对其方式</h1>

    <hr align="left"></hr>

    <h1 >size属性，设置水平线粗细</h1>

    <hr size="10" color="blue"></hr>

    <h1>color设置水平线颜色</h1>

    <hr color="red"></hr>


 

    <hr color="green"></hr>

    <h1>width属性设置水平线的宽度</h1>

    <hr width="20%"></hr>

</body>

</html>

注：颜色处理也可以使用 #456789  #+l六位十六进制数字  或者是 #123  #+三位十六进制数字

效果图

5.换行标签br

作用：用于一行文字的换行

注：<!----> 这个使用来写注释用的              vsCode使用 ctrl+/ 可以快速生成

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>换行标签br</title>

</head>

<body>

    <p align="center">换行标签的作用</p>

    <!-- 没有使用换行标签 -->

    <p align="center">

        七律·到韶山

        毛泽东〔近现代〕

        别梦依稀咒逝川，故园三十二年前。

        红旗卷起农奴戟，黑手高悬霸主鞭。

        为有牺牲多壮志，敢教日月换新天。

        喜看稻菽千重浪，遍地英雄下夕烟。

    </p>

    <hr color="red" size="5"></hr>

    <!-- 使用换行标签 -->

     <p align="center">

        七律·到韶山<br>

        毛泽东〔近现代〕<br>

        别梦依稀咒逝川，故园三十二年前。<br>

        红旗卷起农奴戟，黑手高悬霸主鞭。<br>

        为有牺牲多壮志，敢教日月换新天。<br>

        喜看稻菽千重浪，遍地英雄下夕烟。

    </p>

</body>

</html>

效果图:

 6.文本样式标签font

作用:font 用于设置字体的风格样式，颜色，粗细效果

  1. face属性设置字体风格样式
  2. size属性设置字体大小
  3. color属性设置文字的颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>文本样式标签font</title>

</head>

<body>

    <h2 align="center">文本样式标签font</h2>

    <hr color="red"/>

    <p>

            <font  color="blue" >控制字体为蓝色</font>

    </p>

    <hr color="#99689a"/>

    <p>

        <font size="5" >控制字体大小为5</font>

    </p>

        <hr color="#789"/>

    <p>

        <font face="黑体" >控制字体为黑体</font>

    </p>

</body>

</html>

效果图

7.文本格式化标签

  1. 文本粗体标签 b 和  strong
  2. 文本下划线显示标签 u 和 ins
  3. 文本斜体显示标签 i 和 em
  4. 文本删除线方式显示标签 s 和 del 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>
<body>
    <h1>文本格式化标签</h1>

    <hr color="#af4578"></hr>
    <h3>文本粗体显示 b 和 strong</h3>
    <p color="red">
        
        <b>文本使用b标签标签加粗使用</b>

        <br>
        <strong>文本使用strong标签使用</strong>
    </p>

    <hr color="#234632"></hr>
    <h3>文本下划线显示 u 和 ins 标签</h3>
    <p color="blue">

        <u>使用u标签为文本加上下划线</u>
        <br>
        <ins>使用ins标签为文本加上下划线</ins>
    </p>

    <hr color="#234632"></hr>

    <h3>文本斜体显示 i 和 em</h3>
    <p color="green">
        <i>使用i标签为文本斜着显示</i>
        <br>
        <em>使用em标签为文本斜着显示</em>
    </p>

    <hr color="#234632"></hr>
    <h3>文本删除线 del 和 s</h3>
    <p color="red">
        <del>使用del标签为文本加上删除线</del>
        <br>
        <s>使用s标签为文本加上删除线</s>
    </p>


    
</body>
</html>

效果图

8.文本语义标签

1）时间time标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间语义增强标签time</title>
</head>
<body>
    <p>现在时间是22:32</p>

    <hr color="red" size="5"/>
    <!-- 使用时间语义增强标签 -->
     <p>现在时间是<time datetime="2024-10-1">22:32</time></p>

     <hr color="green" size="5"/>

    
</body>
</html>

效果图

2）文本高亮Mark标签

作用：文字高亮显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字高亮标签mark</title>
</head>
<body>
    <p>这是一段普通的文字，高亮显示文字</p>
    <p><mark>高亮显示的文字</mark></p>
    
</body>
</html>

效果图

3）cite标签

作用：引用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本引用标签cite</title>
</head>
<body>
    <p>
        这是文本应用标签
    </p>
    <!-- 作用是文本引用   显示的样式是斜体 -->
    <cite>--今天的时间是2024-10-1</cite>
    
</body>
</html>

效果图

9.特殊字符标签

常用的特殊字符标签
特殊字符描述字符串代码
空格&nbsp;
<小于号&It;
>大于号&gt;
&和号&amp;
￥人民币&yen;
©版权&copy;
°度数&deg;
®注册商标&reg;
±正负号&plusmn;
×乘号

&times;

÷除号&divide;
 ²2平方&sup2;
³3平方&sup3;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特殊标记符号</title>
</head>
<body>
    &nbsp;
    <br/>
    小于号
    &It;
    <br/>
    大于号
    &gt;
    <br/>
    和号
    &amp;
    <br/>
    人民币
    &yen;
    <br/>
    商标符号:
    &copy;
    <br>
    摄氏度
    &deg;
    <br>
    </br>
    注册商标
    &reg;
    <br>
    <!-- 换行符 -->
    &plusmn;
    <br>
    乘号
    &times;
    <br/>
    除号
    &divide;
    <br/>
    上标符号
    &sup2;
    <br/>
    &sup3;
    
</body>
</html>

效果图

10.图像标签img

注: 

  1. ./boy.png 表示当前路径下名字为boy.png的图片
  2. /boy.png 表示真实路径下boy.png图片.
  3. ./表示当前目录
  4. /表示绝对路径
  • src属性 图像路径
  • alt属性  文本不显示时出现的数字
  • title属性   鼠标悬浮在图片上的显示的内容
  • width属性 设置图像宽度
  • height属性 设置图像高度
  • border属性 设置图像边框
  • vspace属性 设置图像顶部和底部空白的部分
  • hspace属性 设置图像左侧和右侧的空白
  • algin属性
    • left 图像在左边
    • right 图像在右边
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签img</title>
</head>

<body>
    <h3>alt属性</h3>
    <img src="/boy.png" alt="图片加载失败" width="300px" height="300px"></img>
    <hr color="red" size="5">
    </hr>

    <h3>title属性</h3>
    <img src="./boy.png" title="这是一个小男孩" width="300px" height="300px"></img>
    <hr color="green" size="8">
    </hr>
    <br>
    <h3>border属性设置边框</h3>
    <img src="./boy.png" title="这是一个小男孩" width="300px" height="300px" border="5px"></img>
    <hr color="red" size="5">
    </hr>
    <br>
    <h3>align属性设置图片对齐方式</h3>
    <img src="./boy.png" title="这是一个小男孩" width="300px" height="300px" align="right"></img>

    <hr color="blue" size="5">
    </hr>
    <br>
    <h3>hspace属性设置图片水平边距</h3>
    <img src="./boy.png" title="这是一个小男孩" width="300px" height="300px" align="right" hspace="50"></img>
    <hr color="pink" size="5">
    </hr>

</body>

</html>

 

效果图

附录：

1.编写的html文件如何使用浏览器打开

使用快捷键 Shift + alt + r  ===>弹出如下界面

双击点开就可以了

2.如果没有默认浏览器打开html文件

鼠标右键 ===> 打开方式 ===>选择浏览器打开就可以了

3.vscode快速生成html代码模板

输入感叹号 点击第一个就可以自动生成了

注：这个感叹号必须英文状态下的

4.vscode快速保存

快捷键 ctrl+s  

本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！

转载请注明出处： 免费源码网-免费的源码资源网站 » html中的文本标签(含标签的实现案例)

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

 发表
评论 返回
顶部