精华内容
下载资源
问答
  • web语义化 在广义方面 在代码编译方面 页面布局和架构 布局 架构 开发人员会有一些困惑: 开发经理也会有一些困惑: 用户会对这些事情感到烦恼: 架构的本质是什么?其实也是一种管理。 常见的前端产品形态包括: ...

    目录

    web标准

    Web标准是由一系列标准组合而成。
    一个网页主要由三部分组成:结构层表现层行为层。对应的标准也分三方面:结构化标准语言主要包括XHTML和HTML以及XML,表现层标准语言主要包括CSS,行为标准主要包括对象模型,DOM、ECMAScript等。

    结构层标准,就是W3C规定的那样:

    1.标签的书写,需要开始和结束。单便签除外;
    2.块级元素不能放在p标签里面。li内可以包含div标签;
    3.块元素里面可以放在块和内联,特殊的 p和 h1—h6里面不要放块元素,li和div可以放很多。因为这两个标签,本身就有容器的属性;
    4.内联里面要放内联,不要放块;
    5.结构与表现分离;
    6.命名一定要规范;

    表现层标准:

    css的书写,首先要尽可能使用外部引入的方式,因为结构层尽可能的减少表现层的代码过多出现。达到分离的目的。css的选择器有哪些,那些属性可以继承,那些不可以继承。他们之间的优先级是怎么样的。怎么用最简洁的css代码表达设计者的想法,而不只是实现设计者的想法就没事了。我们要的是代码简洁,代码过多,反而让浏览器解析很多,浪费时间。

    行为层标准:

    主要是javascript中的知识。比如DOM、ECMAScript。使用javascript中的标准,即可。一般对于用户的行为,或者说页面上的动态效果的一些特殊实现,我们可以会考虑到使用javascript来进行书写,但是代码的可复用性,模块化。变量,作用域。

    表现与数据分离:

    表现:顾名思义,就是表达出来的现象,在前端来看,就是html+css,就是平常所看到的的网页的架子;
    数据:一般是从后端数据库或从哪爬过来的数据,然后在前台显示出来,即是网页中各个结构上的内容;


    说到这,你会有疑问了,其实就是MVC。0.0


    实现表现与数据分离的好处与代价是什么?
    好处:模块化 –> 容易测试 –> 降低bug频率;
    坏处:程序结构复杂,比较耗时,上手有学习曲线;


    什么样的情况下需要用到这种思想?
    需要:项目具有明显的数据需求,比如要与很多Service交互,业务流程复杂,表单很多;
    不需要:项目是典型的静态信息展示型页面,或是微型的内部app,或是产品idea验证时期的MVP;


    如何有效的实践这种思想?
    学习开发 –> 学习测试 –> 学习“测试驱动开发” –> 学习真正的开发;
    不会测试而夸夸其谈表现与数据分离的人,你离他们要远一点,哪天项目搞砸了,别连累到你;

    web语义化

    什么是语义化?其实简单说来就是让机器可以读懂内容。

    在广义方面

    对于当前的 Web 而言,HTML 是联系大多数 Web 资源的纽带,也是内容的载体。在 Web 被刚刚设计出来的时候,Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。也许起初的想法很简单:用来发布 Web 内容和资源的索引,方便人们查看。


    但是随着 Web 规模的不断扩大,信息量之大已经不在人肉处理的范围之内了。这个时候人们开始用机器来处理 Web 上发布的各种内容,搜索引擎就诞生了。再后来,人们又设计了各种智能程序来对索引好的内容作各种处理和挖掘。所以让机器能够更好地读懂 Web 上发布的各种内容就变得越来越重要。


    其实 HTML 在刚开始设计出来的时候就是带有一定的「语义」的,包括段落、表格、图片、标题等等,但这些更多地只是方便浏览器等 UA 对它们作合适的处理。但逐渐地,机器也要借助 HTML 提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的 HTML 文档,但它们无法读懂例如「红色的文字」或者是深度嵌套的表格布局中内容的含义,因为太多已有的内容都是专门为了可视化的浏览器设计的。面对这种情况,出现了两种观点:


    1.我们可以让机器的理解能力越来越接近人类,人能看懂、听懂的东西,机器也能理解;
    2.我们应该在发布内容的时候,就用机器可读的、被广泛认可的语义信息来描述内容,来降低机器处理 Web 内容的难度(HTML 本身就已经是朝这个方向迈出的一小步了)。

    在代码编译方面

    最初的HTML中如h1~h6、thead、ul、ol等标签,通过标签的语义,最初设计的想法,来达到语义化的要求。如标题、表头、无序、有序列表,搜索引擎很好的利用了这些语义化标签抓取内容


    后来,最初定义的HTML语义化标签,不足以实现对Web页面各个部分的功能或位置描述,所以Web前端人员利用HTML标签的id和class属性,进一步对HTML标签进行描述,如对页脚HTML标签添加如id=”footer”或者class=”footer”的属性(值),以“无声”的方式在不同的前端程序员或者前后端程序员间实现交流。


    制定HTML5的W3C组织采用了诸如header、footer、section等语义化标签,来进行页面布局的设计想法,弥补了采用id=”header”或者class=”section”等。


    更深层次的语义化,是自己在团队合作的过程中,对于需要声明的变量和class,id。尽可能使用彼此能理解的英文。这样减少合作的成本,加快合作的效率。

    页面布局和架构

    布局

    分为两种:


    代码上的:代码就是最典型的DIV+CSS布局,表格布局(table),iframe框架(特殊地方使用)布局,具体的使用。可以对应的看一下。目前最流行的是,div+css布局的方式。当然布局的概念比较广泛,因为在css中也存在很多布局的方法,比如float和position。具体理解的程度,需要自己去详细的阐述。
    视觉上的:比如单页面的,九宫格的,瀑布流布局,tab切换布局,手风琴布局等。

    架构

    在谈前端架构之前,需要先探讨一下不同人群对前端产生的困惑。前端这个职业最近几年才逐渐被认可,之前一直是低端的代名词,所以多数高手很不屑搞这个。之前的很多项目,人们对前端这块的要求也只是能用就行,所以很少会在上面去细致、深入地建立一套完善体系。而多数产品的技术经理也会是后端出身的,往往对前端的认识还停留在Java Struts那个原始的MVC模型上,或者首先想到的就是GWT和JSF,这是从后端角度出发的一种视角。用这类思维方式做出来的产品,一般用户体验都不会很好。


    另一方面,从界面层上手的人群,他对用户体验这方面会把控得比较好,但通常缺架构意识,或者说是软件工程的意识。在界面层比较复杂的情况下,很可能会有失控的趋势。对整个系统结构的认知程度通常不够深入,也缺乏设计模式等方面的知识。

    开发人员会有一些困惑:
    • 创建项目的时候,一般没有人作前端的技术选型
    • 拿到项目之后,没有直接可复制的基础版本
    • 习惯于引用第三方组件
    • 赶功能,需要某个组件或者特效
    • 上网搜到一个合适的,加进来
    • 它还依赖一些别的库
    • 文件大还是次要的
    • 可能会产生冲突,样式也不一致
    开发经理也会有一些困惑:
    • 协作过程感觉有问题
    • 前端人员写原始界面,包含静态界面和特效
    • 开发人员接着改,加逻辑
    • 发现有问题要返工了
    • 在谁的代码基础上继续改?如何合并?
    • 能自动单元测试吗?
    • 能自动发布打包吗?
    用户会对这些事情感到烦恼:
    • 长得丑
    • 界面老土
    • 风格不一致
    • 速度慢
    • 加载慢
    • 渲染慢
    • 执行慢
    • 出错
    架构的本质是什么?其实也是一种管理。

    通常我们所说的管理,都是指对于任务和人员的管理,而架构管的是机器和代码。比如说,机器的部署属于运维的物理架构,SOA属于服务架构,那么,前端的架构指什么呢?


    长期以来,前端所处的位置是比较偏应用层,而且是很薄的一层,而架构又要求深度和广度,所以之前在前端里面做架构,好比在小水塘里游泳,稍微扑腾两下就到处碰壁。但最近这几年来,前端的范围被大大拓展了,所以这一层逐渐变得大有可为。


    怎样去理解架构呢?在早期的文字MUD游戏里,有这么一句话:“你感觉哪里不对,但是又说不上来。”在我们开发和使用软件系统的过程中,或多或少会遇到这样的感觉,有这种感觉就说明架构方面可能有些问题。


    在狭义的前端领域,架构要处理的很重要的事情是组件的集成。由于JavaScript本身缺乏命名空间这样的机制,多数框架都倾向于自己搞一套,所以这方面的碎片化是很严重的。如果一个公司的实力不足以自研所有用到的组件,就会一直面临这方面的问题。


    比如说,在做某个功能的过程中,发现需要一个组件,时间来不及做,就到网上搜了个,加到代码里面,先运行起来再说。一不小心,等功能做完的时候,已经引入了无数种组件了,有很多代码是重叠的,可能有的还有冲突,外观也不一致。


    环顾四周的大型互联网公司,基本上都有自己的前端框架,比如阿里的Kissy和Arale,腾讯的JX,百度的Tangram,360的QWrap等,为什么?因为要整合别的框架,并且在此基础上发展适合自己的组件库,代价非常大,初期没办法的时候只能凑合,长期来说,所有代码都可控的意义非常重要。


    那么,是不是一套框架可以包打天下呢,这个真的很难。对于不同的产品形态,如果想要用一套框架去适应,有的会偏轻,有的又偏重,有的要兼容低端浏览器,有的又不要,很难取舍。

    常见的前端产品形态包括:
    • 内容型Web站点 侧重渲染方面的优化,前端逻辑比重小
    • 操作型B/S系统 以数据和逻辑为中心,界面较规整
    • 内嵌Web的本地应用 要处理缓存和一些本地接口,包括PC客户端和移动端

    这三种产品的前端框架要处理的事情显然是不太一样的,所以可以细分成2-3种项目模板,整理出对应的种子项目,供同类产品初始化用。


    最近我们经常在前端领域听说两个词:全端、全栈。


    全端的意思是,原来的只做在浏览器中运行的Web程序不够,还要做各种终端,包括iOS,Android等本地应用,甚至PC桌面应用。


    为什么广义的前端应当包含本地应用呢?因为现在的本地应用,基于很多考虑,都变成了混合应用,也就是说,开发这个应用的技术,既包含原生的代码,也包含了嵌入的HTML5代码。这么一来,就造成了开发本地应用的人技能要求较广,能够根据产品的场景,合理选择每个功能应当使用的技术。


    现在有一些PC端的混合应用开发技术,比如node-webkit和hex,前者的典型应用是Intel® XDK,后者的典型应用是有道词典,此外,豌豆荚的PC客户端也是采用类似技术的,也有一些产品是用的qt-webkit。这类技术可以方便做跨平台,极大减少开发工作量。


    所以,我们可以看到,在很多公司,开发安卓、iOS应用的人员跟Web前端的处于同一个团队中,这很大程度上就是考虑到这种情况。


    全栈的意思是,除了只做在浏览器中运行的代码,还写一些服务端的代码,这个需求又是从哪里来的呢?


    这个需求其实来自优化。我们要优化一个系统的前端部分,有这么一些事情可以做:


    • HTML结构的优化,减少DOM树的层次等等
    • CSS渲染性能的优化,批量写入DOM变更之类
    • 资源文件的优化,比如小图片的合并,图像格式的处理,图标字体的使用等
    • JavaScript逻辑的优化,模块化,异步加载,性能优化
    • 加载字节量的优化,主要是分摊的策略
    • HTTP请求的优化

    这里面,除了前三条,其他都可能跟后端有些关系,尤其是最后一条。但是前端的人没法去优化后端的东西,这是不同的协作环节,所以就很麻烦。


    那么,如果有了全栈,这个问题可以怎么解决呢?


    比如说,我们要做最原始的小文件合并,可以在服务器做一些配置,把多个合并成一个请求,比如某个url:.cn/kissy/k/1.4.1/??dom/base-min.js,event-min.js,event/dom/base-min.js,event/base-min.js,event/dom/touch-min.js,event/dom/shake-min.js,event/dom/focusin-min.js,event/custom-min.js,cookie-min.js?t=1.js
    这个就很明显是多个文件合并而成的,9个小文件的请求,合并成了一个64k的文件请求。


    这种简单的事情可以在静态代理服务器上配置出来,更复杂的就比较难了,需要一定的服务端逻辑。比如说,我们有多个ajax请求,请求不同的服务,每个请求的数据量都非常少,但因为请求数很多,可能会影响加载性能,如果能把它们在服务端就合并成一个就好了。但这个优化是前端发起的,传统模式下,他的职责范围有限,优化不到服务端去,而这多个服务很可能是跨产品模块的,想要合并,放在哪个后端团队都很怪异。


    这可真难办,就像老虎追猴子,猴子上了树,老虎只能在下面干瞪眼。但是如果我们能让老虎上树,这就不是个问题了。如果有这么一层NodeJS,这一层完全由前端程序员控制,他就可以在这个地方做这种合并,非常的合理。


    除此之外,我们常常会用到HTML模板,但使用它的最佳位置是随着产品的场景而不同的,可能某个地方在前端更好,可能某个地方在后端好些。到底放在哪合适,只有前端开发人员才会知道,如果前端开发人员不能参与一部分后端代码的开发,优化工作也还是做不彻底。有NodeJS之后会怎样呢,因为不管前端模板还是后端模板,都是JavaScript的,可以使用同一套库,这样在做调整的时候不会有代码迁移的烦恼,直接把模板换地方即可。


    现在,也有很多业务场景有实时通信的需求,目前来说最合适的方案是Socket.io,它默认使用NodeJS来当服务端,这也是NodeJS的一个重要使用场景。


    这样,前端开发人员也部分参与了运行在服务端的代码,他的工作范围从原先客户端浏览器,向后拓展了一个薄层,所以就有了全栈的称呼。至于说这个称呼还继续扩展,一个前端开发人员从视觉到交互到静态HTML到JavaScript包办的情况,这个就有些过头了。


    以上这些,主要解决的都是代码层面的事情。另外有一个方面,也是需要关注,但却常常不能引起重视的,那就是前端的工程化问题。


    早期为什么没有这些问题?因为那时候前端很简单,复杂度不高,现在整个很复杂了,就带来了很多管理问题。比如说整个系统的前端都组件化了之后,HTML会拆分成各种模板,JavaScript会拆分成各种模块,而CSS也通过LESS或者SASS这种方式,变成了一种编译式的语言。


    这时候,我们考虑一个所谓的组件,它就比较麻烦了。它可能是一个或者多个HTML模板,加上一个或者多个JavaScript模块,再包含CSS中的一部分构成的,而前两者都可能有依赖项,三个部分也都要避免与其他组件的冲突。


    这些东西都需要管理,并且提供一种比较好的方案去维护。在JavaScript被模块化之后,也可以通过单元测试来控制它们的质量,并且把这个过程自动化,每次版本有变更之前,保证它们最基本的正确性。最终,需要有一种自动化的发布机制,把这几类代码提取,打包合并,压缩,发布。


    目前这方面研究最深入的是之前百度FIS团队的张云龙,他的几篇文章在https://github.com/fouber/blog强烈推荐阅读。

    END

    本文引自:http://blog.csdn.net/zhanghuiqi205/article/details/56011688
    https://kb.cnblogs.com/page/210101/

    展开全文
  • 在初学HTML的时候,我们学习到了好多标签,我们知道独占一行用于页面排版的块级元素,例如:h1...那么语义化标签又是什么呢? 语义化的标签的出现就是告诉大家要用正确的标签来标记正确的内容。 当你使用语义化标...

      在初学HTML的时候,我们学习到了好多标签,我们知道独占一行用于页面排版的块级元素,例如:h1~h6,p,div等元素,还有在同一行用于修饰文字的行内元素,例如:a,span,i,b,em等,还有一些表单元素,例如table button input等元素这些元素我们在其各自的定义中已经知道其含义。HTML之所以为超文本标记语言,也就是说它将a 这样的文本赋予了超出文本之外的含义-链接。那么语义化标签又是什么呢?

      语义化的标签的出现就是告诉大家要用正确的标签来标记正确的内容。

     当你使用语义化标签时浏览器能够识别你的标签并且将它在不依赖css的情况下正确的展示他的样式。这样子你写出的代码结构更具有整洁性和可读性,方便日后的代码维护。同时也提升了渲染引擎的优化搜索。代码量的减少还有提高页面的加载速度。语义化的标签也方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页。

    语义化的标签的出现就是为了解决大家在书写代码的时候的代码不整洁和结构不清晰可读性差的问题,所以在日后的页面熟悉的时候尽量避免div这种非语义化标签的使用。需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;每个input标签对应的说明文本都需要使用label标签。不要使用纯样式标签,如:b、font、u等,改用css设置。

    常见的语义化标签

    <title>:描述页面主体内容。
    <hn>:h1~h6,各级标题,<h1> 与 <title> 协调有利于搜索引擎优化。
    <ul>:无序列表。
    <ol>:有序列表。
    <header>:页眉。
    <nav>:标记导航,仅对文档中重要的链接群使用。
    <main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
    <article>:定义外部的内容,其中的内容独立于文档的其余部分。
    <section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
    <aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
    <footer>:页脚,只有当父级是body时,才是整个页面的页脚。
    <small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。
    <strong>:和 em 标签一样,用于强调文本,但它强调的程度更强一些。
    <em>:将其中的文本表示为强调的内容,表现为斜体。
    <mark>:使用黄色突出显示部分文本。
    <figure>:规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。
    <figcaption>:定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。
    <cite>:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
    <blockquoto>:定义块引用,块引用拥有它们自己的空间。
    <q>:短的引述(跨浏览器问题,尽量避免使用)。
    <time>:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。
    <abbr>:简称或缩写。
    <dfn>:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。
    <address>:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。
    <del>:移除的内容。
    <ins>:添加的内容。
    <code>:标记代码。
    <meter>:定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签)
    <progress>:定义运行中的进度(进程)。

     

    参考文章:

    什么是HTML语义化标签?常见HTML语义化标签大全

    展开全文
  • html主要语义化标签(一)

    千次阅读 2019-03-15 16:34:10
    一、a标签: 1、基本格式:<a href=" ">xxx</a>;属性:title(提示信息),target(打开方式)(同<base target="_blank" />);download(链接代表的是下载地址);media(链接是为某个媒体设备...

    一、a标签:

    1、基本格式:<a href=" ">xxx</a>;属性:title(提示信息),target(打开方式)(同<base target="_blank" />);download(链接代表的是下载地址);media(链接是为某个媒体设备设置优化的);

    2、邮箱和电话:<a href="mailto:sunliu001@16.com ">yyy</a>;  <a href="tel:40012345656 ">ttt</a>

    3、到页面中的某个位置;<a href="#name">顶部/尾部</a>;

    4、四大伪类:a:link(初始,未被点击时);a:visited(链接被点击后);a:hover(鼠标移动到链接时候;此伪类也使用于其他标签,比如img的伪类,变亮;tiansition--transform scale等等)a:active(正在点击时候);

    二、列表:

    1、ul无序列表;ol有序列表;dl(dt/dd)描述(定义)列表(一组项目及其相关描述;如术语和定义、问题和答案);

    三、引用:

    1、<q>xxx</q>;行内引用;比如一个段落(<p>)中的一句话;

    2、<blockquote><p>llll</p></blockquote>;块状引用,引用的内容是一个(或几个)段落,一个列表等;块状元素,自成一段;当只引用一段内容的时候,中间可以不带<p>标签;

    3、cite:有两个用法;(1)作为引用标签中(q/blockquote)的属性,指明指明来源的url(此时浏览器窗口不会显示);(2)自己作为一个独立的标签,说明引用来源的名称(书名、人名);

    四、计算机代码展示

    1、code:标记计算机代码;一行的时候可直接使用;如果是多行代码,由于存在大量空白和缩进,需要和pre配合;

    2、pre:由于浏览器不能识别大量的空白换行等,此时则粗腰pre原样显示; <pre><code>大量代码</code></pre>;

    3、kbd:标记(用户通过)键盘(或其他设备)输入元素;将产生一个行内元素;

    <p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>

    4、samp:标记计算机程序的输出;

    5、var:标记表示变量的名称;

    五、地址和时间:

    1、address:标记文档或者文章作者的联系信息。浏览器默认呈现的字体倾斜,如果不想使用此默认字体,可在css中需改。一般此标签里可以直接写本文,不用再用<p>标签包围,可以用<br/>换行;

             注意两点(1)当一个地址和此(作者)无关的时候,应该用<p>,而不是<address>; (2)此元素中,不能包含和联系信息无关的任何信息;比如出版时间。应该用<time>标记;

    2、time:标记时间;该元素标签不会在浏览器呈现任何效果; 属性:datetime表示此元素的日期和时间;

    <p>我在 <time datetime="2008-02-14">情人节</time>有个约会。</p>

    六、图像

    1、img:此标签不仅是一个空标签(不需要包含文本内容,不需要闭合标签);还是和<video>一样是个替换标签(因为元素的内容和尺寸均有外部资源提供 ,而不是元素本身);

    在img标签属性中,最好设置width和height属性(有利于加载流畅);但是这里应根据img设置的宽和高,再选择并剪切成一样大小的图片(这样不会使图片过于拉伸或者加载过大的图片,浪费流量);

    2、figure:此元素的内容可以是一张图片、视频、代码等;主要作用是用来进一步丰富、修饰主题内容的(比如文章中插入一张图片);其内容和主题相关,但如果删除,则不会影响主体内容。(将图片独立于P之外,为图片提供语义)

    此元素一般与figcaption元素一起配合使用;

    3、figcaption:用于描述figute元素中的数据(图片、视频、代码等)的说明/标题;所以说,figcaption一般都是放在figure元素中的第一个或者最后一个元素中;(与img中的alt属性不同的是,alt属性是在图片未能加载显示的时候出现展示,而figcaption则不管数据内容是否加载展示,都会显示)

    七、视频和音频

    1、vidoe视频:

    	 <video controls width="320" height="223" muted loop  preload="auto" poster="./images/0000.jpg"  >
    		<source src="./video/0000.mp4" type="video/mp4">
    		   <!--这个是因为浏览器只支持识别部分视频的格式,所以为了各个浏览器都能兼容、播放显示,放置多个不同格式的视频-->
    		<source src="./video/0000.webm" type="video/webm">
    		   <!--这个添加type类型的属性,是为了方便浏览器进行检查,一旦检查到它支持的格式,则直接跳过后面的格式文件,否则还要逐个加载视频文件(检查),浪费时间-->
    		<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
    		  <!--这个p标签称为后背内容,当浏览器不支持video的时候,他会显示出来-->
    	 </video>
    	 <!--- <video>标签中的6大属性:
    	      1、width和height:定义了页面中视频展示播放窗口的大小(当然css也可以控制视频尺寸);
    		2、controls:控制器;浏览器提供的控制接口;包括不限于:开始、暂停、调节音量、拉快等等;
    		3、autopaly:页面在加载的过程中自动播放(甚至页面中其他版块内容还未加载完都已开始播放);体验不好,,建议不用此属性;
    		4、muted:添加这个属性的时候,当视频在播放的时候,默认的是静音(声音未开启);
    		5、loop:添加这个属性后,会进行循环播放视频;
    		6、preload:预加载;此属性可有3个值选择; (如果使用了autoplay属性后,则忽略该属性)
    		         .none:告诉浏览器,该视频在页面加载后,不需要预先加载视频;
    			   .matadate:告诉浏览器,该视频在页面加载后,后台只需要预先加载(缓存)视频的元数据;
    			   .auto:告诉浏览器,在页面加载中,预先缓存加载视频文件,准备播放;
    		7、poster:这个属性指向一个(url)图片,是在点击播放按钮前、视频下载时显示的图片(同preload一样,如果使用了autoplay,就看不到poater呈现的图片效果了)
    	 ---->

    2、audio音频:

    	 <audio controls muted loop preload="auto">
    	    <source src="./audio/viper.mp3" type="audio/mp3">
    		<source src="./audio/viper.ogg" type="audio/ogg">
    		<p>目前你的浏览器不支持audio标签</p>
    	 </audio>
    	 <!---audio标签的一些说明(大致和video一样)
    	    1、由于audio标签只需要显示控制音频的控件就可以了,没有视觉部件,所以也需要再设置width和height属性了;
    		   (谷歌浏览器默认的 音频控件大小为300*54px;并且作为内联元素进行展示);
    		2、和video相比;由于没有视觉部件,不需要width和height属性了,也就不再需要poster属性设置了;
    	 -->

    3、track显示音频轨迹文本;作用是使播放的视频带上字幕,方便听不懂视频中的语言或者想静音(周边环境比较糟乱)的人士体验;

    字幕文件一般有两种格式;

    •  WebVTT : Web Video Text Track  (Web视频文本轨道----后缀名是vvt)
    •  TTML : Timed Text Markup Language (时序文本标记语言----用xml格式编写的文件)
    	 <video id="mainvideo" src="video.mp4" type="video/mp4" controls autoplay loop>;  
               <track src="en_track.vtt" srclang="en" label="English" kind="caption" default>  
               <track src="cn_track.vtt" srclang="zh-cn" label="简体中文" kind="caption">  
          </video> 
    

    上述标签含义:在播放“video.MP4”文件的时候,加入上字幕;

    • 一个是中文字幕,一个是英文字幕(srclang属性指的是编写字幕文件所选择的语言------主要是给浏览器看,播放器不使用这个属性);
    • 用户可以选择两种字幕(label属性:用户可以用来切换选择中文还是英文字幕,也可以有程序脚本切换------label在播放器中会使用这个属性的,主要供用户进行选择、切换);每个字幕元素(track)必需设置一个唯一不重复的label标签;
    • 此字幕默认的是英文字幕(default属性决定);一个视频文件(几个track)中,只能有一个default;如果都没有指定,则不会自动显示字幕;

    其中kind属性是定义字幕内容的类型的;用户可以根据不同的需求,来显示不同的字幕内容;主要有以下几种:

    • subtitles:主要作用翻译来用,比如视频里面是说的是英文,听不懂英文,可以选择subtitles作为字幕翻译成熟悉的语言;
    • captions:主要作用是理解展示说明视频中的内容;比如不想开启音频、在吵闹环境中,或者听觉有障碍的人士;
    • descriptions:通过音频描述视频的内容;比如在视频不可见的场景,或者视觉有障碍的人士;
    • chapters:定义章节(标题);用于用户浏览媒体资源的时候;(导航媒介资源)
    • metadate:定义脚本使用的内容(track),对用户不可见;

    此外:需要注意以下几点:

    1. 当kind的属性是subtitles(翻译)的时候,则必须指定srclang;
    2. 默认的时候,kind的属性是subtitles;
    3. 一个media 元素的任意两个 track 子元素不能有相同的 (kind, srclang) 和 label属性;

    八、外部资源、文件嵌入到网站中:

          比如我们没有实力构造一个地图,可以把现成的诸如百度地图嵌入到页面中;我们也可以自己的视频资源,可以把优酷视频嵌入到自己的网站页面中;

    1、iframe:

    	 <iframe src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=235d82cec8b9605c9b428ae67943648c&tvId=2128764600&accessToken=2.f22860a2479ad60d8da7697274de9346&appKey=3955c3425820435e86d0f4cdfe56f5e7&appId=1368&height=100%&width=100%" frameborder="0" allowfullscreen="true" width="100%" height="100%" >
    	      <!----将爱奇艺视频嵌入到页面中---->
    	   <p> <a href="#">Fallback link for browsers that don't support iframes</a></p>
    	        <!---此处也是"备选内容";当浏览器不支持iframe的时候,他会显示出来---->
    	  </iframe>

    主要有以下几个属性:

    • width和height:指定iframe的宽和高;
    • frameborder:默认是1,显示此iframe框架和其他框架间绘制边框;如果设置0,则删除框架周围边框(推荐用css设置;border:none)
    • allowfullscreen:如果设置,<iframe>则可以通过全屏API设置为全屏模式;

    同时:iframe嵌入也存在不少安全问题:

    • 如果,自己的网站内容,被iframe嵌入到了其他网页,则会占用消耗自己网站大量的带宽;
    • 如果,黑客将隐藏的iframe嵌入到您的文档中,并使用它来捕获用户的交互。这是误导用户或窃取敏感数据的常见方式。

    提高安全性,可以从以下几方面入手:

    • 始终在iframe中使用sandbox属性,即:启用一系列对 <iframe> 中内容的额外限制;
    • 使用https;
    • 配置CSP指令

    2、embed和object元素; 目前用的很少已经;

         定义嵌入的内容,如flash插件、pdf、外部应用等等;

    下面是一个用object嵌入dpf文档的例子;

    <object data="mypdf.pdf" type="application/pdf"width="800" height="1200" typemustmatch>
      <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file. </a></p>
    </object>

    九、嵌入矢量适量图:svg;

           svg------用XML语言来描述二维图形或者绘图程序的语言;(svg,利于用xml绘制矢量图)

    	<svg version="1.1"
         baseProfile="full"
         width="300" height="200"
         xmlns="http://www.w3.org/2000/svg">
    	  <rect width="100%" height="100%" fill="black" />
    	  <circle cx="150" cy="100" r="90" fill="blue" />
       </svg>
       <!----此代码为一个黑色的方块和一个绿色的圆--->

    以下几种方式可以将svg矢量图,嵌入到网页中;

    1、用img标签添加svg图片

    <img 
        src="equilateral.svg" 
        alt="triangle with all three sides equal"
        height="87px"
        width="100px" />

            可能有的浏览器会不支持svg,这个时候,可以添加两个图片,一个是旧版浏览器支持的png/jpg格式的图片(用src属性);一个是svg图片(用srcset属性);如果浏览器支持svg格式的图片,则会直接加载svg格式的图片;

    <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

    2、直接将<svg>标签放到html中(svg图片本身就是有xml格式的绘制成的,可以保持成.svg格式图片。也可以用xml代码表示)

    <svg width="300" height="200">
        <rect width="100%" height="100%" fill="green" />
    </svg>

    3、用iframe将svg嵌入到页面中;

    <iframe src="triangle.svg" width="500" height="500" sandbox>
        <img src="triangle.png" alt="Triangle with three unequal sides" />
    </iframe>

    十、响应式图片

    主要解决的问题:

    1. 分辨率切换:当用小屏设备浏览网页时候,没有必要在加载pc端的大图了,节省带宽;同样,在pc上加载移动端小屏幕的图像的时候,会出现拉伸,模糊、有颗粒感;()
    2. 艺术方向切换:更改图像以及适应不同的图像显示的尺寸;比如,在pc端我们看到一个大图,横向的、中间有个人;然后在移动端浏览这个网页时候,照片非常小,人物更小;这种情况,在移动端可以设置一个新的图片,使人物大小看起来合适;

    分辨率切换(相同的图片内容---这里是内容;不是尺寸、不同的分辨率)

    1、不同的尺寸,不同的分辨率;

     <img srcset="elva-fairy-320w.jpg 320w,
                     elva-fairy-480w.jpg 480w,
                     elva-fairy-800w.jpg 800w"
             sizes="(max-width: 320px) 280px,    //这里顺序很重要,因为浏览器查看到设备宽度后,检测到sizes列表的媒体第一个为真后,往下则不在执行 
                    (max-width: 480px) 440px,
                    800px"      //默认,也就是说设备宽度大于480的时候,选它
    		 src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">   
    		 <!--当浏览器不支持上面的时候,加载src-->

    根据这些信息,浏览器执行过程如下:

    1. 查看设备宽度;
    2. 根据设备的宽度,检测sizes列表中媒体条件第一个为真的项;
    3. 查看给予该媒体查询的槽大小(媒体条件第一个为真的项中后面的像素大小)
    4. 加载srcset列表中引用的最接近所选的槽大小的图像;

    2、相同的尺寸,不同的分辨率;

    <img srcset="elva-fairy-320w.jpg,         //默认1x,可忽略;
                 elva-fairy-480w.jpg 1.5x,
                 elva-fairy-640w.jpg 2x"
         src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
    	 
    	 <!---此时不再需要sizes;因为浏览器直接检测了设备显示器的分辨率;-->
    	 <!--因此,如果访问页面的设备具有标准/低分辨率显示,一个设备像素表示一个CSS像素,elva-fairy-320w.jpg会被加载-->
    	 <!-- 如果设备有高分辨率,两个或更多的设备像素表示一个CSS像素,elva-fairy-640w.jpg 会被加载。-->
    	 
    	 img {
          width: 320px;
        }

    艺术方向切换:

    <picture>
      <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
      <source media="(min-width: 800px)" srcset="elva-800w.jpg">
      <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
    </picture>

    主要注意以下几点:

    • 这个也是检测的第一个媒体条件为真的时候,加载对应的图片;
    • source当中的也可以使用sizes属性,但是有了media时候,sizes属性中也就不要在提供媒体条件了;
    • 必须提供一个img元素,以备浏览器不支持的时候使用

    为什么我们不能使用 CSS 或 JavaScript 来做到这一效果?

    因为你不能先加载好 <img> 元素后, 再用 JavaScript 检测视图的宽度,如果觉得大小不合适,就动态地加载小的图片替换已经加载好的图片,这样的话, 原始的图像已经被加载了, 然后你也加载了小的图像, 这样的做法对于响应式图像的理念来说,是很糟糕的。

    使用现代图像格式(如:WebP和JPEG-2000)

    <picture>
      <source type="image/svg+xml" srcset="pyramid.svg">
      <source type="image/webp" srcset="pyramid.webp"> 
      <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
    </picture>

    需要注意以下几点:

    • 使用type属性的类型,以便浏览器方便的检测到是否支持,如果支持,则直接跳过下面的检测,并加载;
    • media是用来解决艺术方向问题的(不同的设备,取不同图的内容);这个例子是浏览器根据支持的type(类型)加载图片;
    • 如果必要,也可以在srcset和sizes中使用逗号分割的列表
    展开全文
  • XHTML标签语义化介绍

    2020-12-13 23:16:47
    以前我真的没有怎么重视过搜索引擎,现在开始比较在意了,因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能地对搜索引擎友好,所以就要尽可能地使标签语义化。  以前以我对web开发的粗浅理解,觉得写一...
  • 什么是语义化标签 语义化的标签,意义让标签有自己的含义。 语义化标签的优势 代码结构清晰,方便阅读,有利于团队合作开发。 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。 ...

    什么是语义化标签

    语义化的标签,意义让标签有自己的含义。

    语义化标签的优势

    1. 代码结构清晰,方便阅读,有利于团队合作开发。
    2. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。
    3. 有利于搜索引擎优化(SEO)。

    常用的语义化标签

    <title>:页面主体内容。
    <hn>:h1~h6,分级标题,<h1><title> 协调有利于搜索引擎优化。
    <ul>:无序列表。
    <li>:有序列表。
    <header>:页眉通常包括网站标志、主导航、全站链接以及搜索框。
    <nav>:标记导航,仅对文档中重要的链接群使用。
    <main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
    <article>:定义外部的内容,其中的内容独立于文档的其余部分。
    <section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
    <aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
    <footer>:页脚,只有当父级是body时,才是整个页面的页脚。
    <small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。
    <strong>:和 em 标签一样,用于强调文本,但它强调的程度更强一些。
    <em>:将其中的文本表示为强调的内容,表现为斜体。
    <mark>:使用黄色突出显示部分文本。
    <figure>:规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。
    <figcaption>:定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。
    <cite>:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
    <blockquoto>:定义块引用,块引用拥有它们自己的空间。
    <q>:短的引述(跨浏览器问题,尽量避免使用)。
    <time>:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。
    <abbr>:简称或缩写。
    <dfn>:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。
    <address>:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。
    <del>:移除的内容。
    <ins>:添加的内容。
    <code>:标记代码。
    <meter>:定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签)
    <progress>:定义运行中的进度(进程)。
    
    展开全文
  • html5语义化标签及优点

    千次阅读 2020-03-03 19:53:10
    html5语义化标签及优点 html5中的语义化标签 < h1~h6 >:标题,< h1 > 与 < title > 协调有利于搜索引擎优化。 < header >:网页头部,通常包括网站标志、主导航、全站链接以及搜索框。 &...
  • 什么是HTML语义化标签?常见HTML语义化标签大全

    万次阅读 多人点赞 2018-06-06 17:29:53
    一、什么是HTML语义化标签 语义化的标签,旨在让标签有自己的含义。 &amp;amp;amp;lt;p&amp;amp;amp;gt;一行文字&amp;amp;amp;lt;/p&amp;amp;amp;gt; &amp;amp;amp;lt;span&amp;amp;amp...
  • 什么是web语义化 如今互联网都到了web2.0的时代了,HTML语言在不断的进化并发挥着越来越重要的地位;而我们制作网页也从当初的table表格嵌套发展到了 div+css,这是进步的标志。然而,我们似乎看到了一个不太好的...
  • 什么是 web 语义化,有什么好处

    千次阅读 多人点赞 2020-08-25 15:05:22
    web 语义化是指通过 HTML 标记表示页面包含的信息,包含了 HTML 标签语义化和 css 命名的语义化。 HTML 标签语义化是指:通过使用包含语义的标签(如 h1-h6)恰当地表示文档结构
  • H5新增语义化标签

    2018-05-26 11:36:04
    一、根据页面的结构,由div派生的标签。 &lt;header&gt; &lt;footer&gt; &lt;nav&gt; 导航 在H4中导航栏一般用ul-li标签,H5中可以直接用&lt;nav&gt;标签 eg. &lt;nav&...
  • 什么是web语义化

    2019-12-23 17:11:29
    web语义化是指,通过html标记表示页面包含的信息,包含了HTML标签的语义化和Css命名的语义化。 其中,html标签语义化是指,包含语义的标签恰当的表示文档结构,例如h1-h6 总结起来就是: 正确的标签做正确的事情 ...
  • html语义化标签

    万次阅读 多人点赞 2018-06-26 17:49:13
    很多面试官会问:谈谈你对 HTML5语义化标签的理解。那么本篇博客专门解答一下这个问题。   什么是语义元素? 语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义,也就是说元素本身传达了...
  • web 语义化是指通过 HTML 标记表示页面包含的信息,包含了 HTML 标签语义化和 CSS 命名的语义化。 HTML 标签语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构 。CSS 命名的语义化是指:为 ...
  • 为什么要语义化 代码结构:使页面没有css的情况下,也能够呈现出很好的内容结构 (主要靠title标签和meta中的keywords、description)有利于SEO 提升用户体验:例如title、alt可以用于解释名称或者解释图片信息...
  • Web语义化

    2018-09-19 14:47:06
    什么是Web语义化?  如今互联网已经到了web3.0时代了,HTML语言在不断的进化并发挥着越来越重要的地位;而我们制作的网页也从当初的table表格嵌套发展到了div+css,这是进步的标志。然而我们似乎看到了一个不太好...
  • web语义化及其好处

    千次阅读 2017-12-12 13:39:47
    Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可以认出哪些是页面...
  • ... ...1)增加了audio和video音频播放,抛弃了Flash 2)新增了canvas画布(绘画,制作动画(如小游戏开发等)) ...8)新增了一些语义化标签 4.网页布局标签 header:页首 nav:导航栏 aside:侧边栏 main:主体 sectio
  • 一些常见html5语义化标签

    万次阅读 多人点赞 2016-10-26 20:45:17
    我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总结了一些常用的语义化标签,有空慢慢更新,欢迎大家补充  语义化HTML:用最恰当的HTML元素标记的内容。    优点:1 提升...
  • web语义化

    2017-11-22 15:25:11
    WEB 语义化  ...web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素的含义,能够让人和搜索引擎都容易理解。如果可以合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也
  • 很多面试官会问:谈谈你对 HTML5语义化标签的理解。那么本篇博客专门解答一下这个问题。...语义化标签的优点 代码结构: 使页面没有css的情况下,也能够呈现出很好的内容结构 有利于SEO: 爬虫依赖标签来确定关键字的
  • HTML语义化标签汇总(W3C)

    千次阅读 2019-04-04 11:10:45
    标签用于对表格中的列进行组合,以便对其进行格式 http://www.w3school.com.cn/tags/tag_colgroup.asp 19. datalist 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值 ...
  • HTML5语义化标签

    千次阅读 2016-08-05 12:53:47
    “什么是语义化?”、“说说你对语义化的理解?” 掌握语义化含义、作用以及应当注意的细节,HTML5中常用的语义化标签!知识点不在于多,而研究透彻应学以致用!
  • 表现与数据分离、Web语义化

    千次阅读 2017-08-30 10:04:16
    W3C组织意识到了之前HTML版本的不足,推出的HTML5进一步推进了Web语义化发展,采用了诸如footer、section等语义化标签,弥补了采用id = “footer” 或者class=“footer”形式的不足。   一些常用的html5...
  • 在HTML5标准中,新加了几个用于增添页面语义标签,这些标签有:article、section、nav和aside等。...对于Web开发人员而言,使用这些标签的实际意义主要有2点:搜索引擎优化(SEO),以及增加页面的可用性(accessibil...
  • 语义化标签

    2017-04-26 21:57:04
    定义标签语义化的目的就是让大家直观地认识标签(markup)和属性(attribute)的用途和作用。2.优点语义化的网页的好处,最主要的就是对搜索引擎友好,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站...
  • 在html中使用语义化标签的好处

    千次阅读 2018-03-13 18:09:37
    语义化标签,按照字面意思理解就是“具有特定意义的标签”。好处:1、有意义的标签使得页面结构化,即使去掉css样式页面也能以一种清晰的结构展现。2、根据文档显示结构更易于后期的维护。3、除了人容易理解外,程序...
  • 以前我真的没有怎么重视过搜索引擎,现在开始比较在意了,因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能地对搜索引擎友好,所以就要尽可能地使标签语义化。 以前以我对web开发的粗浅理解,觉得写一个...
  • 前端html5新增的特性及语义化标签

    千次阅读 2018-06-08 12:36:10
    为了更好地处理今天的互联网应用,HTML5添加...语义化标签使得页面的内容结构化,见名知义 标签 描述 &lt;hrader&gt;&lt;/header&gt; 定义了文档的头部区域 &lt;footer&gt;&lt;/fo...
  • 搜索引擎很好的利用了这些语义化标签抓取内容,又鉴于搜索引擎的巨大流量推荐,Web前端不得不考虑SEO,从而两者实现有益的循环,共同推进着语义化标签的使用。2、但Web的发展超乎想象,起初定...
  • b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用,甚至是反对使用的,因为认为他们只是“表现”粗体和斜体,而没有任何“语义”。更多的用 strong 和 em 标签代替。 而在新的 HTML5 工作草案 中对于 b 和 i 标签...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,107
精华内容 16,442
关键字:

web语义化标签