HTML5结构】的更多相关文章

前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍HTML5结构元素 总括 结构元素,又称为区块型元素,是用来定义区块内容范围的元素.之前,区块型元素只有<div>一个,HTML5新增了7个语义化结构元素,包括<article>.<aside>.<nav>.<section>.<header&g…
1. 主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,增加几个与页眉.页脚.内容区块等文档结构相关联的结构元素. 1.1 article元素 article元素表示文档.页面或应用程序中独立.完整.可以独立被外部引用的内容.可以是一篇博客或文章,或其他的任何独立的内容. 除了内容部分,一个article元素可以有header元素.footer元素. <article> <header> <h1>Title</h1> <div><…
一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也就是说整个HTML文档结构定义不清晰,HTML5中为了解决这个问题,专门添加了:页眉.页脚.导航.文章内容等跟结构相关的结构元素标签. 在讲这些新标签之前,我们先看一个普通的页面的布局方式: 上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有…
一.定义标题栏:header header 元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,因此整个页面的标题应该放在页面的开头. header 定义文档的页眉,在一个网页中可以多次使用 header 元素. 语法&案例: <header> <h1>网页标题</h1> </header> <article> <header> <h2>文章标题</…
显示的效果如上边这样,但是有没有发现内容的外侧没有边线(这个难道是因为浏览器不同吗?有待测试) html5中新增加的元素<header>可以明确的告诉浏览器此处是页头,<nav>标记用于构建页面的导航,<article>标记用于构建页面内容的一部分,<footer>元素表明页面已到页脚或根元素部分,并且这些标记可以重复使用,极大的提高了开发者的效率. 代码如下: <!DOCTYPE html><html lang="en"…
一.大纲:大纲即文档中各内容区块的结构编排 1. 显示编排内容区块:使用section等元素创建文档结构,每个内容区块使用标题(h1~h6,hgroup); 2. 隐式编排内容区块:根据页面所书写的各级标题等把内容区块自动创建出来: 3. 标题分级:隐式编排按以下规则自动生成内容区块, 1)若新出现的标题比上个标题级别低,生成下级内容块:2)若级别高或者相等,生成新的内容区块 注:尽量使用显示编排 4. 不同内容区块可以使用相同级别的标题,例如,父内容区块与子内容区块可以使用同级别标题h1:…
<!DOCTYPE html> <!-- ↑ 文档声明.HTML5已经简化为上述样式! 注意:文档声明必须有!而且必须在文档页面的第一行!   HTML4.01之前的文档声明: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> --> <html> <head> <!--…
1.显示编排内容区域块(明确使用section等元素创建文档结构,在每个区域块中使用标题元素) 2.隐示编排内容区域块(不明确使用section等元素,而是根据网页需求来将各级的元素创建出来) 3.标题分级(新出现的标题比上一个标题级别低,则生成下级内容区域块,新出现的标题比上一个标题级别高或相等,则生成新的区域块) 4.不同区域块使用相同标题…
article: 表示文档.页面.应用程序或站点中的自包含成分所构成的一个页面的一部分,并且这部分专用于独立地分类或复用.(例如:一个博客的帖子,一篇文章,一个视频文件等.)和<nav>一样,标题位于这一元素内部,如:实例一:    <h1>My article</h1>    <article>      <p>Blah blah</p>    </article>这样的写法在规定上是不正确的,应该如下写法: <a…
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html5 新增的结构元素,有的经常使用到,有的用不上,当页面禁用样式后,它们的展现跟 div 是没撒差别,有同学可能会说,既然一样,又不影响页面的最终展现,不管是 article 还是 section 能用就好了.如果考虑实际项目针对用户,我也是这么认为的,但作为一个重构仔,我们需要让标签语义化,清晰的结…