html中的文本标签(含标签的实现案例)
目录
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 用于设置字体的风格样式，颜色，粗细效果
- face属性设置字体风格样式
- size属性设置字体大小
- 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.文本格式化标签
- 文本粗体标签 b 和 strong
- 文本下划线显示标签 u 和 ins
- 文本斜体显示标签 i 和 em
- 文本删除线方式显示标签 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.特殊字符标签
| 特殊字符 | 描述 | 字符串代码 |
| 空格 | | |
| < | 小于号 | &It; |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ° | 度数 | ° |
| ® | 注册商标 | ® |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 2平方 | ² |
| ³ | 3平方 | ³ |
<!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> <br/>小于号&It;<br/>大于号><br/>和号&<br/>人民币¥<br/>商标符号:©<br>摄氏度°<br></br>注册商标®<br><!-- 换行符 -->±<br>乘号×<br/>除号÷<br/>上标符号²<br/>³</body> </html>
效果图
10.图像标签img
注:
- ./boy.png 表示当前路径下名字为boy.png的图片
- /boy.png 表示真实路径下boy.png图片.
- ./表示当前目录
- /表示绝对路径
- 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