section和div

section和div

一、DIV

div元素在 html5 之前就是非常常用的标签,它本身没有任何语义,用来页面布局和CSS 样式以及 JS 调用。
  1.如果是页面布局,且不是 header、footer 之类的专属区域,都应该使用 div;
  2.如果只是单纯的对一个端内容进行 CSS 样式定义,那么也应该使用 div;
  3.如果想对一段内容进行 JS 控制,那么也应该使用 div。

二、SECTION

  1.section在html5中并不是用来取代 div 的。它是具有语义的文档标签。表示一段文档中的章节,比如包含一个标题和一个段落,而大纲规范中,至少要包含一个标题。

  2.section 至少需要一个 h1 ~ h6。

  3.代码示例

   <section>
    <h2>Bootstrap</h2>
    <p>Bootstrap 是一款 html5 开源框架</p>
   </section>

  4.注意

   body、section需要标题;

    header、nav不需要。

时间: 2024-11-05 23:35:53

section和div的相关文章

section,article,div

原文地址:https://www.cnblogs.com/Wision-22/p/10652696.html

js改变div高度

用bootsrap响应式布局的时候,遇到个很恶心的问题:左边栏很短很难看!! 于是,想用js来自动改变左边的高度,没成功!!原来是设置的时候,没加单位,坑爹了. 参考:http://blog.sina.com.cn/s/blog_3d8c704c0101145y.html 设置高度的时候,加上px <script> function load(){ var height = window.innerHeight; document.getElementById("sidebarOut

1 谈谈section标签

section 字面上理解为"块","部分",section元素代表一个页面或一个内容块的部分,一般作为主题块列表,在html5网页中表现的意思跟字面理解差不多,即部分,块,模块,主要作用为对页面的内容进行分块或者对文章的内容进行分段.section标签是成对出现的,以<section>开始,以</section>结束section标签通常带有一个标题和一个内容块. 一.section标签实例 <!doctype html> &l

&lt;section&gt;标签的妙用之处

<section>标签的用法 ,有一个网友评论问<section> 的用法.所以现在举例来说明一下: html5引入了<section>标签,用于描述文档的结构,它同<div>标签的意思一样.但是在特定环境中,两者又有明显的区别. w3对<section>的定义是:定义一个文档的章节(可以拥有自己的<header>和<footer>).w3对<div>的定义是: 定义一个文档的章节.(但似乎更适合用于外层的布局

【H5新增元素跟文档结构】新的文档结构 1. article 文章块 2. section 区块 3. nav 导航条

1. article 文章块 article 通常包括 header 跟 footer 结构 ① 用 article 设计一篇新闻稿 语句: 1 <article> 2 <header> 3 <h1>文章标题</h1> 4 <time pubdate="pubdate">2017年9月26日消息</time> 5 </header> 6 <p> 7 文章内容 8 </p> 9 &

CSS深入理解之border_imooc张

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>cssborder</title> 6 <style> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 .test1{ 12 margin:20px; 13 width: 100px; 14 he

利用angular打造管理系统页面

1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目:点击前往 将AdminLTE项目的精简版本源代码复制到adminSystem应用主模块的主组件的模板中 AdminLTE项目的精简版本效果图 <!DOCTYPE html> <!-- This is a starter template page. Use this page to star

关于分页SQL的小总结

findPage 和findPageTotal条件分页中的条件 较为复杂点的关联查询 有取别名的 <select id="findPage" resultMap="MinOrderInfo" parameterType="map"> SELECT o.*,w.name buyName,w.MOBILE buyMobile,aa.name sellName,aa.MOBILE sellMobile,rs.CAR_BRAND_NAME c

了解HTML5大纲算法

实战前的准备工作:了解HTML5大纲算法 在html5中有一个很重要的概念,叫做html5大纲算法(HTML5 Outliner),它的用途为用户提供一份页面的信息结构目录.合理的使用HTML5元素标签,可以生成一个非常清晰的文档大纲. HTML5大纲算法 我们可以通过各种工具去查看当前页面,这里推荐使用一个测试工具:HTML5 Outliner,网址如下:https://gsnedders.html5.org/outliner/ 1. 了解一个 section 和 div 的区别 ①div元素