美文网首页Web前端之路让前端飞Web 前端开发
技术 | Web前端开发(2)持续更新

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

作者: techLee | 来源:发表于2017-03-08 18:39 被阅读51次

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

    html常用标签:

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

    代码 浏览器显示效果

    这里我们对比一下发现:

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

    标签:<del></del>

    代码

    浏览器显示效果

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

    标签:&;      <>

    代码

    浏览器中显示效果

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

    代码

    浏览器中显示效果

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

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

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

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

    代码

    浏览器中显示效果

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

    代码 浏览器中显示效果

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

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

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

      • 代码

        浏览器中显示效果

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

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

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

          标签:<img src="">

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

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

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

        • 相关文章

            网友评论

              本文标题:技术 | Web前端开发(2)持续更新

              本文链接:https://www.haomeiwen.com/subject/affigttx.html