1. 首页
  2. IT资讯

带你玩转前端之HTML(三)

“u003Cdivu003Eu003Cpu003E昨天,小编带大家学习了一些基本的标签和文件路径,今天继续给大家分享一些标签,是每个网页必备的的标签,要认真看哦!u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F31df000153fb706e3ff2″ img_width=”490″ img_height=”272″ alt=”带你玩转前端之HTML(三)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E一个完整的网页就想一本书,有头部,中间内容部分,最后的脚本;在HTML中,有这么一些结构化标签,它来区分各个部分是什么的,使得开发人员一眼看过去就知道文档的结构是怎么怎么样的,同时要想改一些代码,结构化标签能更快速的找到要修改的位置,这就是“语义化”;话不多说,我们先来了解下结构化标签;<header><nav><section><article><footer><aside>以下是详解这些标签:u003Cu002Fpu003Eu003Cpu003E1.<header>:就是用作于网页的头部,可能包含的内容比如网页标题、导航信息之类,<header>可以出现多次;语法规范:<header>这部分内容<u002Fheader>,实际上<header><u002Fheader>等价于<div id=”header”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E2.<nav>:就是用作于导航,语法规范:<nav><u002Fnav>,实际上<nav><u002Fnav>等价于<div id=”nav”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E3.<section>:就是用于标识网页某一具体部分,举个栗子购物网站分为母婴类、零食类、水果类等等其他分类,那么就可以用<section>这个标签要划分各个区域;u003Cu002Fpu003Eu003Cpu003E4.<article>:就是一些文章,评论类;语法规范:<article>这部分内容<u002Farticle>u003Cu002Fpu003Eu003Cpu003E5.<footer>:就是网页最底端的脚部,一般用于定义一些联系方式、合作伙伴、版权之类的;语法规范:<footer>这部分内容<u002Ffooter>同理,等价于<div id=”footer”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E6.<aside>:就是侧边栏,用于定义一些内容以外的部分u003Cu002Fpu003Eu003Cpu003E运用这些结构化标签是不是很直观的看出这个网页的结构呢,小编建议在网页中尽量运用这些结构化标签,不仅仅自己能明白,后期维护小伙伴也能明白;u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F31d300045266d9d34f84″ img_width=”600″ img_height=”370″ alt=”带你玩转前端之HTML(三)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E分享一些其他标签:u003Cu002Fpu003Eu003Cpu003E1.浮动标签<iframe>,这个标签可以让你的页面里插入不同的多页页面,规范语法:<iframe src=”网页路径” width=”” height=”” frameborder=””><u002Fiframe>,他需要一些属性来实现,src属性、width属性、height属性、frameborder属性,其中src属性就是你网页的路径(路径在上一篇文章中有分享,不清楚的可以去看看哦);width属性就是宽度,height属性就是高度,frameborder属性就是边框;u003Cu002Fpu003Eu003Cpu003E!!!注意:在实际开发中尽量不要使用这个标签,不利于SEO,搜索引擎;破不得那还得使用。u003Cu002Fpu003Eu003Cpu003E2.摘要与细节标签<details><summary>,这2个标签需要一起使用,就是一部分的内容进行缩进或者展开;规范语法:<details>u003Cu002Fpu003Eu003Cpu003E<summary>u003Cu002Fpu003Eu003Cpu003E标题u003Cu002Fpu003Eu003Cpu003E<u002Fsummary>u003Cu002Fpu003Eu003Cpu003E<details>u003Cu002Fpu003Eu003Cpu003E3.度量元素标签<meter>;它需要一些属性来实现效果;min属性、max属性、value属性,其中min属性表示进度条最小值,max属性表示进度条最大值,value属性表示当前的进度的值,语法规范:<meter min=”” max=”” value=””><u002Fmeter>u003Cu002Fpu003Eu003Cpu003E4.时间元素标签<time>:表示具体的时间,语法规范:<time datetime=”具体时间值”><u002Ftime>u003Cu002Fpu003Eu003Cpu003E5.分组标签<fieldset><legend>:这2个标签需要一起使用;语法规范:<fieldset><legend>分组标题<u002Flegend>内容<u002Ffieldset>u003Cu002Fpu003Eu003Cpu003E6.文本高亮标签<mark><u002Fmark>:就是特别突出一些文本,效果就是背景是黄色的文字u003Cu002Fpu003Eu003Cpu003E以上是一些网页中使用的标签,小编建议多多打代码,不会的就是模仿的写;有不懂的可以私信小编,小编乐意解答!u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F31e700013a8d4ec28ce4″ img_width=”320″ img_height=”200″ alt=”带你玩转前端之HTML(三)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E预告:下一篇 带你玩转前端之HTML(四) 主要内容为:form表单的分享u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:带你玩转前端之HTML(三)

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11276.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code