html5新增语义标签

html5 新增语义标签

一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subtitle</h2> </hgroup> </header> <nav> <ul> Navigation... </ul> </nav> <section> <article> <header>…

1.header <header> 标签定义文档的页眉(介绍信息). 2.nav <nav> 标签定义导航链接的部分. 3.article <article> 标签定义外部的内容. 外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. 4.footer <footer> 标签定义文档或节的页脚. <footer> 元素应当含有其包含元素的信息. 页脚通常包含文档的作者.…

浅谈html语义化标签,Html5新增语义化标签

Html语义化标签,Html5新增语义化标签自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签. 文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等. 2.为啥使用语义…

HTML5新增Canvas标签及对应属性、API详解（基础一）

知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签原型 <canvas width=”1000” height=”1000” id=”myCanvas”> 您的浏览器版本过低,不支持HTML5新增的canvas标签. </canvas> 使用js获取该画布,并指定对象 <script> Var canvasID = doc…

HTML5新增video标签及对应属性、API详解

知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及API使用整理下来,无论以后用不用得到,都是自己的一笔宝贵的财富. Video标签: 一.video支持视频格式: 以下是三种最常用的格式 1. ogg格式:带有Theora视频编码(免费)+Vorbis音频编码的Ogg文件(免费) 支持的浏览器:firefox.chrome.opera 2. MP…

HTML5新增结构标签

引言在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构标签 HTML5时代的召唤上一代的HTML的标准: HTML 4.01 和 XHTML 1.0 距离今天已经发布了10多年了,而Web端的应用也已经翻天覆地的变换.而且Web前端没有一个统一的通用的互联网标准,各个浏览器间拥有太多的不兼容,在维护这些浏览器兼容性浪费了太多的时间.再有就是之前的多媒…

HTML5新增的标签与属性

一.关于DTD HTML5 不基于 SGML,所以不需要引用 DTD(HTML 4.01 基于 SGML) 二.HTML5结构标签 <header> 标记定义一个页面或一个区域的头部 <nav> 标记定义导航链接 <section> 标记定义一个区域 <aside> 标记定义页面内容部分的侧边栏 <article> 标记定义一篇文章 <hgroup> 标记定义文件中一个区块的相关信息 <figure> 标记定义一组媒体内容…

HTML5新增的标签及使用

HTML5和HTML其实是很相似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只要有html+css基础就可以,今天知识看了下新的标签. 一.定义文档类型在文件的开头总是会有一个标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">…

html5新增语义化标签

注意:body.section.nav 需要h1-h6. div.header则不需要. 1):<article> 显示一个独立的文章内容. 例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等.artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系. 例如,一个博客文章,可以用article显示,然后一些评论可以以article的形式嵌入其中. <article> <h1>文章标题</h1> 这是一篇文章…

HTML5之语义标签

在HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article.section.nav和aside等.与别的大多数标签不同,浏览器在解释渲染这些标签的时候仅仅把它作为普通的div块级元素来处理,不会添加任何额外的展现逻辑:也即,这些标签仅用于增添语义.对于Web开发人员而言,使用这些标签的实际意义主要有2点:搜索引擎优化,以及增加页面的可用性(accessibility). 在元素分类上,article.section.nav和aside称之为“Sectioning Con…

HTML5新增的标签和属性归纳

收集总结的HTML5的新特性,基本除了IE9以下都可以使用. HTML5语法大部分延续了html的语法不同之处:开头的 <!DOCTYPE html> <html lang="zh-CN"> <meta charset="utf-8"> 字符编码变得简洁, 不区分大小写, 添加了布尔值,类似checked,selected 引号可以省略,但是编码规范来说,不建议, 有可以省略结束符的标签,和完全省略的标签应用. 增加标签: 1…

HTML5新增的标签

结构性元素<header><footer>定义页眉(与<head>不一样)和页脚 <section>定义section<article> 定义文章 <nav>定义导航链接语义性块元素 <aside> 定义页面内容之外的内容 <dialog>定义对话 <figure> 规定独立的流内容(图像.图表.照片.代码等等) 语义性内联元素 <m>定义加上标志 <meter> 定义百分…

总结HTML5新增的标签及功能

https://my.oschina.net/chengkuan/blog/422306 标记意义及用法分析/示例属性/属性值/描述 <article> 定义独立的内容,如论坛帖子.报纸文章.博客条目.用户评论等内容. 支持HTML5的全局属性和事件属性. <aside> 定义两栏或多栏页面的侧边栏内容,如联系我们.客服.网站公告等内容. 支持HTML5的全局属性和事件属性. <audio> 定义音频内容,如音乐或其他音频流. autoplay autoplay 自动…

HTML5新增常用标签

1.header 标签定义文档的页眉(介绍信息). <body> <article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build…

Html5新增内容标签

<canvas>画布</canvas> <audio src=""></audio> <video src=""></video> <source>定义媒体资源 <video src=""> <source src="xxx.flv"> <source src="xxx.mp4"> <…

HTML5新增input标签属性

一. input type属性 <form action=""> 邮箱<input type="email" name="" id=""> <input type="submit" value="提交"><br /><br /> 手机号码<input type="tel" name="&quo…

Html5 中的新语义标签

1.1 语义标签对于我们并不陌生,如<p>表示一个段落.<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备来理解HTML页面内容. 传统的做法,我们通过添加类名,Html页面具有语义化,但是不具有通用性. Html5则是通过新增语义标签的形式来解决这个问题,例如<header></header>.<footer></footer…

第二篇、HTML5新增标签

<html> <head> <meta charset="UTF-8"> <title>html5新增的标签</title> </head> <body>  <article> <header> </header> <section> </section> <section>…

html5新增标签兼容性

很多低版本的浏览器是不识html5新增的标签的,所以为了解决浏览器兼容性问题,主要有两种方法: js可以创建我们自定义的标签,例如,我们可以用js语句 document.createElement('leo')创建<leo>标签,然后再给它样式,但是创建的leo标签并不是一个块标签,所有可以利用display:block;使leo标签成为块标签,所以我们可以利用js语句分别将html5新增的标签(header,footer...)创建出来,然后分别设置他们的display:block;这样,就…

盒子模型，定位技术，负边距，html5 新增标签

盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右默认=左 3.写三个值:上.右.下三个方向,左默认=右 4.写四个值:上.右.下.左 5.写三个值+auto :控件居右显示 margin: 50px 30px 20px auto;距离浏览器:30px; 6.margin:0 auto;设置控件在父容器中水平居中 */ /*[border 边框] * border 有三个属性值:宽度w…

HTML标签-->HTML5新增

HTML的Form新增属性 <form method="post" name="myForm"> <p> 邮箱:<input type="email"/> </p> <p> 搜索:<input type="search"/> </p> <p> 范围(滑块):<input type="range" min=&…

HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案

一.前言本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.time.mark.section.header.footer.hgroup.progress.figure.figcaption.nav.meter.output.details.summary.ruby和main 三.让IE5.5~9支持HTML5新标签 1. IE5.5~8下对于不支持的标签…

html5新增及删除标签

一.新增标签有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签新增的结构标签,之前都是用div实现的,为了语义化,html5从div派生出很多新的标签.这些新增的结构标签有助于将文档分成几个逻辑部分.如下: a.section标签表示页面中的一个独立内容区块,里面有自己的大纲结构,比如章节,页眉,页脚或页面的其他部分.就是说section可以包含h1.h2...h6标签,表…

html5新增标签/删除标签

闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方便以后查看,嘻嘻,懒人自有懒方法哈哈哈哈,脑子记不住,用别的方式来帮助自己嘻嘻 .下面和小颖一起来学习下html5新增标签/删除标签吧. 主要内容: 新增标签:结构标签.表单标签.媒体标签.其他功能标签. 删除标签:可以使用css代替的标签.html5不再使用frame.只有个别浏览器支持的标签.其…