目录一. 标题标签1.1 标题标签的介绍1.2 标题标签的使用1.3 快速在浏览器打开的插件二. 段落、换行、水平线标签2.1 段落标签2.2 换行标签2.3 水平线标签三. 图片标签3.2 alt 替代文本属性3.3 width图片宽度、heght图片高度属性3.4 title 图片标题属性四. 文本标签4.1 文本标签的种类4.2 文本标签的展示效果4.3 文本标签与段落标签嵌套一. 标题标签1.1 标题标签的介绍(a)标题(Heading) 是通过 h1~h6 标签来进行定义的一共有六对其中h1/h1定义最大的标题h6/h6定义最小的标题它们是从大到小来进行排序的。(b)如下代码所示!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6 /body /html(c)然后保存代码在浏览器中运行即可看到如下所示的页面其中一级标题最大六级标题最小1.2 标题标签的使用(a)标题标签通常只应用于标题而不能使用于文本有些时候我们希望字体大一些而去使用标题这种做法是错误的如果希望文本字体变大后续我们可以使用CSS选择器对标签的大小进行改变。(b)标题标签的位置是可以进行改变的上面我们看到默认生成的标题都是在浏览器的最左侧实际上可以通过属性 align left | center | right进行调整默认位于左边(c)如下代码我对二三五六级标签均进行属性设置保存!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body h1一级标题/h1 h2 align center二级标题/h2 h3 align right三级标题/h3 h4四级标题/h4 h5 align center五级标题/h5 h6 align right六级标题/h6 /body /html(d)再重新打开就可以看到下图所示的样式一级和四级标签不设置默认在页面最左侧二级和五级标签属性为center在页面中间三级和六级标签属性为right位于页面右侧1.3 快速在浏览器打开的插件如果有小伙伴和小编一样使用的VSCode开发的前端可以下载一个快读在浏览器打开的小插件如下图可以点击左侧黄色圈出来的按钮就会出现扩展插件然后搜索 open in browser点击 install 安装即可。安装完毕之后我们再回到代码右键点击页面如下所示就会多出先两个选项第一个想选的意思是打开页面在默认浏览器第二个选项意思是打开页面在其他浏览器我们选择第一个就行。点击之后就会直接跳转到浏览器并展示出我们当前写的代码的效果非常方便就不需要先保存然后再找到对应的html文件再去打开了提高我们的编程效率。二. 段落、换行、水平线标签2.1 段落标签p/p(a)段落就是我们常说的自然段在页面中如果我们要对一个物品或事物进行描述通常都会采用段落标签p/p来进行修饰 和我们课本上的一个自然段类似一对p/p标签就是一个自然段两对就是两个自然段。(b)如下代码所示!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6 p第一个段落/p p第二个段落/p p第三个段落/p /body /html(c)然后在浏览器打开就可以看到三对p/p标签形成的三个段落。新的段落是自带换行功能的但有些时候我们可能在一个段落里也希望文本能够换行这个时候就需要用到换行标签br了。2.2 换行标签br/换行标签并不是成对出现的而是单独的一个标签br/我们希望从那个文本开始换行就直接把它加在文本后面就行了。如下代码所示我在诗句的后面加上br/换行在浏览器中展示的效果就是换行但换行后两个诗句仍然是一个段落。body h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6 p锄禾日当午br/汗滴禾下土/p p落霞与孤鹜齐飞秋水共长天一色/p p零落成泥碾作尘br/只有香如故/p /body2.3 水平线标签hr/除了段落之间的换行标签之外有些时候为了区分不同的段落我们可能还需要用到水平线标签hr/hr它的效果就是在页面中添加一条水平线。我们在刚才的三个不同的诗句段落之间都加一个水平线用以区分body h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6 p锄禾日当午br汗滴禾下土/p hr/hr p落霞与孤鹜齐飞秋水共长天一色/p hr/hr p零落成泥碾作尘br只有香如故/p /body效果如下图三个诗句段落之间就会出现分割线此外标题标签还可以设置多种属性color设置水平线颜色width设置水平线长度size设置水平线高度align设置水平线对齐方式(默认居中)可取值 left 或 right。现在我们使用这几个属性给刚才的两条分割线装饰一下body h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6 p锄禾日当午br汗滴禾下土/p hr colorred width900px size10px alignright/hr p落霞与孤鹜齐飞秋水共长天一色/p hr colorblue width800px size12px alignleft/hr p零落成泥碾作尘br只有香如故/p /body保存重新打开浏览器效果如下所示三. 图片标签3.1 img 标签举例(a)不管我们登录什么样的网站几乎都可以看到图片。京东、淘宝、天猫包括抖音、B站等一些视频网站的视频封面等等都需要用到图片图片是网页的重要组成部分。而我们如果想要呈现一张图片其实非常简单图片标签为img单标签和换行标签br一样。(b)首先我们在项目文件夹html内部再建立一个文件夹名为 picture必须遵守存放文件的文件夹和html文件在同一个文件夹下否则会无法引用。然后随便找几张图片如下图所示找到三张图片分别命名为 1、2、3。png是图片的格式后缀。(c)然后回到开发工具中可以看到此时项目中就有了picture文件夹且有我们新增的三张图片(d)然后想要在页面中呈现出刚才的图片直接使用标签img src即可双引号中写图片在项目文件夹中的路径即可body h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6 p锄禾日当午br汗滴禾下土/p hr colorred width900px size10px alignright/hr p落霞与孤鹜齐飞秋水共长天一色/p hr colorblue width800px size12px alignleft/hr p零落成泥碾作尘br只有香如故/p img srcpicture/1.png img srcpicture/2.png img srcpicture/3.png /body(e)保存然后重新打开效果如下所示(f)除了src 属性以外img 标签还提供了很多的其它属性src图片路径和图片名称alt规定图像的替代文本width规定图像的宽度height规定图像的高度title鼠标悬停在图片上给予提示下面我们依次对这几个属性进行测验。3.2 alt 替代文本属性(a)alt:它的作用就是在图片无法正常显示的时候代替图片举个例子如下代码我把图片 1.png 改为 1.pnng然后添加 alt 属性值为 spring 图片body h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6 p锄禾日当午br汗滴禾下土/p hr colorred width900px size10px alignright/hr p落霞与孤鹜齐飞秋水共长天一色/p hr colorblue width800px size12px alignleft/hr p零落成泥碾作尘br只有香如故/p img srcpicture/1.pnng alt spring图片 img srcpicture/2.png img srcpicture/3.png /body(b)刷新浏览器页面可以看到原本的图片因为无法被代码识别已经不能正常显示了取而代之的就是我们 alt 中的替代文本 spring图片这就是 alt 属性的作用。3.3 width图片宽度、heght图片高度属性上图中显示的图片是我们引用图片的原始大小如果我们想对图片的高度或者宽度进行修改就可以使用 width ?px height ?px对图片大小进行设置这里我随便设置几个值img srcpicture/1.png alt spring图片 width100px height80px img srcpicture/2.png width200px height160px img srcpicture/3.png width150px height120px然后保存刷新浏览器页面就可以看到我们对图片的大小设置已经生效了如下图所示3.4 title 图片标题属性title 就是给图片取一个名字原本我们将鼠标放在图片上是没有任何文本显示的使用 title 我们就可以给图片添加一个名字或者说是图片的简单描述如下代码所示img srcpicture/1.png alt spring图片 width100px height80px titlespring图片 img srcpicture/2.png width200px height160px title前端开发图片 img srcpicture/3.png width150px height120pxtitle SQL Server图片然后保存刷新浏览器我们将鼠标随便放在一张图片上此时我们鼠标旁边就会浮现当前图片的 title 值。四. 文本标签4.1 文本标签的种类标签描述em定义着重文字b定义粗体文字i定义斜体文字strong定义加重语气del定义删除字span没有特定的个含义普通文本标签为了方便后期CSS添加样式独立出来的一种文本标签4.2 文本标签的展示效果为了方便各位小伙伴观看我们来代码简单试一下这几种标签的展示效果!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body em着重语气文本/em br b加粗文本/b br i斜体文本/i br strong加重文本/strong br del删除字/del br span普通文本标签/span /body /html保存然后在浏览器打开就可以得到如下效果。删除字文本的效果就是文本中间被划了一条横线普通文本标签效果就是普普通通的文本字体个人感觉加粗文本标签b/b和加重文本标签strong/strong没什么区别着重语气标签em/em和斜体文本标签i/i没什么区别实际在使用多个时候小伙伴们可以根据文字展示的需要选择不同的文本标签样式。4.3 文本标签与段落标签嵌套上面六种文本标签还可以和之前学过的段落标签p/p标签嵌套使用通常情况下一个段落会有很多字有些时候我们可能会对一段话中的某一句话或者某几个字进行加粗或者和重点标记就可以将段落标签和文本标签嵌套使用。简单举例如下body p 我今天早上要em吃油条/em今天中午要b吃米饭/b今天晚上要i吃火锅/i br 明天早上strong喝豆浆/strong明天中午del吃米饭/del明天晚上span吃米饭/span /p /body保存然后打开浏览器效果如下所示一对p/p段落包含六句话每句话的吃饭都有不同的样式就形成了标签的嵌套使用本篇我们先了解到这里其他标签我们放到下文来说有兴趣的小伙伴可放心食用HTML标签入门2——超文本链接、有序列表、无序列表、表格、表单、块元素标签、内联元素标签、特殊内联元素标签_html超链接-CSDN博客