目录
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
