资讯专栏INFORMATION COLUMN

web前端(4)—— 常用标签1

番茄西红柿 / 2614人阅读

摘要:需要注意的是,代码中的所有连续的空行换行也被显示为一个空格常用的特殊字符内容代码空格版权注册好的,常用标签暂且到此

标题标签h1~h6

顾名思义,这些就是把字体设置为大字体的,就如博客园的这个编辑器里的格式:

 

不信的话我们自己设置看看:好的,从本篇文章开始,我们需要动手了

 




    
    test


    

标题

标题

标题

标题

标题
标题

  

打开网页看看:

文本样式标签:

 

:加粗
:斜体
:下划线
:删除线
:上标 
:下标
特别强调某几个字

 

代码:





test


b标签
i标签
u标签
s标签
testsub标签
testsup标签
testem标签strong标签test

  

测试:

 

 

 

段落标签P 

 





test


asdjfasjdfjaweijfowjefojwaojfioawjefoijwefweafawefwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwfafew


adfdsaf


12312414



  

测试:

 

 

有朋友可能发现,p标签就是一个p标签就是一个段落,自动换行,并且如果没满一行也会自动换行,为什么会这样呢?像前面的就不会这样

这就是块级标签(又叫行级标签)的特点,不管内容有没有占一行,它都会默认把一行占满,而像前面的em,i,之类的这种内容多少就占多少,而且不会默认沾满一行的就是内联标签

这个后期还有用到,不过太在意

 

超链接标签a

 

超链接就是可以点击并跳转的标签

 




    
    test


    去百度


  测试:

 

发现没有任何特殊的啊,就是文字。目前,这里必须加上a标签的属性href才行:




    
    test


    去百度


  

测试:

 

 终于变色了,点击看下呢:

 

 然后发现居然报错404了,这个404是状态码,服务端返回来的状态码,关于状态码,详见鄙人的另一篇博文:洗礼灵魂,修炼python(55)--爬虫篇—知识补充—RFC 2616 http状态码

 

而且您可以看到网页地址栏上面的地址变了,这明显不对对吧?那么是哪里出了问题呢?

 

注意了,这是很多初学者容易犯的错,给a标签加href属性时,一定要带上协议,常见的协议有:ftp,http,https,file

所以这里必须要带上http,或者https:

 




    
    test


    去百度


  

测试:

发现确实可以调整到百度网站了,这个不太好展示效果,只能各位自己测试了。我这里截了个图:

 

 

 当我把光标放上去还未点击时,浏览器左下角会预加载即将访问的链接,这个现象我希望各位以后可以多多注意下

 

当然a标签还有其他的属性:

target

  _blank 在新的网站打开链接的资源地址

  _self 在当前网站打开链接的资源地址 title: 表示鼠标悬停时显示的标题

 

比如 去百度

 

 这个就自己试了

 

其他链接方式:(以后会用到)

 

列表标签 ul,ol,li

网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟

  • 标签一起用,每条li表示列表的内容

     

    ul表示无序列表,ol表示有序列表。这个如果您用过办公软件,相信会见过这个。然后博客园这个编辑器也有这个东西:

    最开始是这样的:

     

    test1
    
    test2
    
    test3
    

      

    添加有序列表:

     

    结果:

    1. test1
    2. test2
    3. test3

     

    修改成无序列表:

     

    结果:

     

    • test1
    • test2
    • test3

     

    大概什么样子大家应该懂了吧?

     

    好的,开始自己写一个看看:

      
        
    • 我的账户
    • 我的订单
    • 我的优惠券
    • 我的收藏
    • 退出
    1. 我的账户
    2. 我的订单
    3. 我的优惠券
    4. 我的收藏
    5. 退出

      

    里面那个type和circle即ul和ol各自的属性,circle表示是一个圆圈,类似句号的标志,type即表示以什么排序方式,给一个“a”表示用字母开始排序

     测试结果:

    其他相关:

    ol标签的属性:

    type:列表标识的类型

    • 1:数字
    • a:小写字母
    • A:大写字母
    • i:小写罗马字符
    • I:大写罗马字符

    列表标识的起始编号

    • 默认为1

    ul标签的属性: type:列表标识的类型

    • disc:实心圆(默认值)
    • circle:空心圆
    • square:实心矩形
    • none:不显示标识

    换行标签 

     


    标签用来将内容换行,其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。

     

    分割线 

     


    标签用来在HTML页面中创建水平分隔线,通常用来分隔内容

     

    特殊符号

    浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML代码中的所有连续的空行(换行)也被显示为一个空格

     

    常用的特殊字符:

    内容代码
    空格  
    > >
    < <
    & &
    ¥ ¥
    版权 ©
    注册 ®

     

    好的,常用标签暂且到此

  • 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/1562.html

    相关文章

    • 前端基础入门一(HTML)

      摘要:所谓超文本,因为它可以加入图片声音动画多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。意思是超文本引用用于指定链接页面的打开方式,其取值有和两种,其中为默认值,为在新窗口中打开方式。 学习目标 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签 掌握三种列表标签 掌握表格标签 掌握表格标签 掌...

      张宪坤 评论0 收藏0
    • web前端开发从0到1—html结构与常用标签

      摘要:一文档标签结构文档片头信息,表示文档内容是用什么标签写的。创建一个无序列表一直以为,荷是清贫的,一口水,一把泥,便是一生一直以为,荷是灵魂的,任凭夜深露重,风起雨落,自可将生死都置之于度外。 一:html文档标签结构 二:常用的HTML标签主要有: 双标签 单标签 标题标签:注意:标题标签只能是h1~h6 段落标签 ...

      番茄西红柿 评论0 收藏0
    • web前端(3)—— html标签web页面结构

      摘要:开始标签和结束标签之间的就是标签的内容。总结属性跳转标签在和标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中。常见的头部元素有和等标签,头部标签在下一节中会有详细介绍。 本节内容简单介绍下html都有哪些标签 还是百度首页,查看源代码看看: 我把源代码复制下来另存为html文件里: 注意:网页文件的后缀都是html或者htm 我这用的pycharm编辑器(Py...

      番茄西红柿 评论0 收藏0
    • web前端(8)—— CSS选择器

      摘要:选择器选择器,说白了就是的标签或者其相关特性,在一个页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从页面中查找特定元素的,找到元素之后就可以为它们设置样式了。选择器 选择器,说白了就是html的标签或者其相关特性,在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTM...

      番茄西红柿 评论0 收藏0
    • web前端(6)—— 标签的属性,分类,嵌套

      摘要:属性标签可以设置属性,属性一般以键值对的方式写在开始标签中标签除一些特定属性外可以设置自定义属性,一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序。独占一行元素的高度宽度行高以及顶和底边距都可设置。属性HTML标签可以设置属性,属性一般以键值对的方式写在开始标签中1.HTML标签除一些特定属性外可以设置自定义属性,一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序。2.属性...

      番茄西红柿 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <