1)行级标记
文本格式化标签
-
span标签:无语义标签,用于区分样式
-
没有实际的语义,可以理解为一个小盒子,里面一般装着一个或几个文本内容
-
应用场景:控制局部文本的样式
-
-
b标签:一个实体标签,它里面包围的文本显示粗体效果
-
strong标签:一个语义标签,强调语气,它里面包围的文本显示粗体效果
-
i标签:它里面包围的文本显示斜体效果
-
em标签:一个语义标签,强调语气,它里面包围的文本显示斜体效果
-
del标签:删除线
-
sup标签:上标
-
sub标签:下标
-
特性
-
宽度默认由内容撑开
-
高度默认由内容撑开
-
默认横向显示——水平布局,一行排不下,自动折行
-
换行和空格会被解析
-
a标签--超链接标签
<!-- 网址 --> <a href="https://www.baidu.com/">百度</a> <!-- 本地文件 --> <a href="./摩洛哥/moluoge.html" target="_self">本地文件1</a> <!-- 空链接 --> <a href="#">空链接</a> <!-- 伪链接 --> <a href="javascript:" title="我是伪链接">伪链接</a> <!-- title --> <a href="https://www.baidu.com/" title="百度">百度title</a> <!-- a:超链接标签 href:跳转的路径; 网址,本地文件,空链接(#占位,跳转到当前页的顶部),伪链接(href="javascript:"假链接,不跳转的) title:提示信息的作用 target:被链接文档在哪里显示 1.target='_self' 在当前窗口跳转,默认值 2.target='_blank'在新窗口跳转 语法: <a href="">内容</a> 特性: 1.宽度默认由内容撑开 2.高度默认由内容撑开 3.默认横向显示,水平布局,一行排不下,自动折行 4.换行和空格会被解析 5.自带文字颜色 6.自带下划线 7.鼠标指针的形状为手型 8.去掉a标签下划线text-decoration: none; 利用锚点来跳转指定锚点处 定义锚点 <div id='锚点名称'></div> 引用锚点 <a href="#锚点名称">内容</a> --> <!-- 点击这个也会跳转到顶部,但是跳转到顶部的原因:由于href属性没有写东西,点击的时候会刷新页面 --> <a href="">点击跳转到顶部没有#</a>
2)行内块级标记
img图像标签
<!-- 网址 右击--复制图片地址 --> <img src="https://img0.baidu.com/it/u=2409410196,1796254698&fm=26&fmt=auto&gp=0.jpg" alt=""> <!-- 盘符下的某个路径 --> <img src="C:\Users\Administrator\Desktop\1.jpg" alt=""> <!-- 本地文件 --> <img src="./images/2.jpg" alt=""> <img src="./images/3.gif" alt=""> <!-- alt --> <img src="./images/4.jpg" alt="图片4"> <img src="./images/44.jpg" alt="图片4"> <img src="./images/444.jpg" alt=""> <!-- title --> <img src="./images/1.jpg" alt="" title="打架" width="300px" height="200px"> img标签 语法:<img src="" alt=""> src:图片的路径 ../../表示上上级目录 alt:用来为图片定义预备的替换文本,当图片路径错误时或者浏览器无法加载图片时显示这个文本 title:提示信息的作用,鼠标悬停在图片时显示提示信息 width:宽度 height:高度 特性: 1.默认横向显示,水平布局,一行排不下,自动折行 2.换行和空格会被解析 3.可以设置宽高