技术 | Web前端开发(2)持续更新

本文介绍了HTML中的基础标签及其用途,包括文本格式化标签、列表标签、图片标签等,并探讨了如何正确使用这些标签来增强页面的语义性和可读性。
img_d82fb2035a3672032a4eb1eb7fe99b11.png


接着​上一篇技术| Web前端开发(1)持续更新

html常用标签:

标签:  <b></b><i></i>

img_bb0d26f82e28510ce76fdd3629c76048.jpe
代码
img_5677428e9d5d40113df269e28220f490.jpe
浏览器显示效果

这里我们对比一下发现:

标签和标签,以及标签和标签显示的效果是一样的。那么有什么区别呢,回答是没有区别,哪个好记用哪个,比如很多人习惯用word,那么肯定知道b就是加粗,但是现在html更趋进去语义化,从表面意思就可以看出来是加粗的意思,也是极为容易记住的。

标签:<del></del>

img_e90a994e7fed16faa31bacc763500ff0.jpe
代码

img_d9b75f36e901fdba39f6b7e879a498a8.jpe
浏览器显示效果

​通过浏览器中显示,我们可以看到:标签可以在文字上显示出横线删除效果,比如某电商网站三星手机原价6888,现价多少多少。但是,这里会有这么一个问题,就是编程越界。咱们的html就是用来结构化代码,样式用css,但是这里html标签越界了。这样就没办法让我们的html和css分离。所以就有了css:style那一行代码,同样可以实现。我们后面会讲css。

标签:&;      <>

img_592808c7f203c29c9e65c612aadee31d.jpe
代码

img_53063e55a58ea436580018f37e206969.jpe
浏览器中显示效果

我们可以看到,我在代码里打了很多个空格,可是在浏览器中显示出来的仅仅只有一个空格,这是为什么呢,当然不是因为没用谷歌或者火狐浏览器导致的,这个空格在代码中表示的含义是文字分割符,因此无论在代码中打了多少的空格,浏览器都只能分割字符。那么要怎么才能在代码中打出空格的效果来呢?再看下面代码:

img_e1b4db833e56d7d851ee66245194b2f9.jpe
代码

img_6a3eedb469589de97afef51447c99d39.jpe
浏览器中显示效果

​我们可以看到,通过 ;可以实现空格的效果,同时这里的代码中还出现了<和>  它们分别代表小于号和大于号,因为小于号和大于号在html代码中是标签的一部分,因此不能直接使用,要用代码转译。

同时,上面的代码中还出现了<br>,注意,<br>是单标签,它的作用是换行。

​标签:<ol></ol>  <li></li>

我们先写代码,看一下在浏览器中的效果:

img_1baf7811a9622bfa2d2d8acce61b472b.jpe
代码

img_c971644edae90dfb45257103036b6414.jpe
浏览器中显示效果


不难看出,这是一个列表标签。并且是有序列表,很明显,前面有数字嘛!

img_8fbd6d128b982a2ef8d7858953bf230e.jpe
代码
img_56be67d15e4ed268dc61141d0b4964c1.jpe
浏览器中显示效果

中有type=""这个属性,中间可以写上a,这个时候,浏览器中就显示为a,b,c这种字母小标。

当然有人会问,能不能让排序倒着,我们可以在type后再加上:reversed="reversed"​;就可以了。这时候总有好事网友会问,那能不能让排序方式从2或者3开始,我不想从1开始。这时候,我告诉你,当然可以的!只要在type属性后加上:start="2";  这个时候排序方式就可以从2开始了

​标签:<ul></ul>  <li></li>

img_d7b2b9eb1f23eb9e2a98fbe31663dae7.jpe
代码

img_2abca107000e84fa45b7e635c35cc758.jpe
浏览器中显示效果

不难看出,这个也是一个列表,只是变成了无序的,那么它有属性么?当然是有的,

type=“spuare”带上这个属性时,前面的黑色圆圈就变成了正方形的方块。当然,你还可以换成空形圆。但是,你想在网站中看到这样丑的方式,恐怕也是很难的,那么有没有用呢,当然没用。但是,往往越没有用的东西,越是很重要。

为什么说无序列表很重要,下面来具体解释一下。几乎每个网站都有<ul></ul>    <li></li>
,那么它们在哪儿呢?不卖关子了,网站的导航栏几乎都是这玩意做到。后面我们在写网站导航栏的时候会具体讲到怎么用它来写网站导航栏。(因为还没有讲css,所以后面再讲)

标签:<img src="">

<img src="">是一个单标签,代表意思是图片,后面的属性src是指向图片路径,用来引入图片。

路径有三种:第一种是网站上的url,第二种是本地的相对路径,第三种是本地的绝对路径。

<img>还有两个属性,alt="",这是为了占位用的,比如当网页加载不出来图片时(图片丢失),会实现占位功能,还有一个属性叫title=“”,这个是图片提示符,为了可以增加图片的可读信息。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值