使用Bootstrap和HTML5Boilerplate开始一个项目续_html/css_WEB-I

在前面我用 Bootstrap 和 HTML5 Boilerplate 搭建了一个项目基础框架，可是还只是空白一片，没有什么实际内容，现在可以开始向里面增加内容了。回到那个项目起点 index.html，一开始是给文档设置一个标题，就随随便便取一个好了：

 有标题文档  

真的取得很随意，不要太认真了，接下来添加以下页面主体内容：

一个包含 logo 和导航的 banner 一个包含主要内容的 main 元素 一个包含版权信息和社交链接的页脚

把在 index.html 中找到的下面这段预留文字删掉：

24  25 
Hello world! This is HTML5 Boilerplate.
 

替换成下面的代码：

           
Main Heading
  
Content specific to this page goes here.
    
Copyright © Company Name
  

一个最简单的基本页面结构已经有了，这里我使用了 header, main, footer 等元素，这些语义元素是 HTML5 规范增加的，已经得到现代浏览器的广泛支持，所以可以放心地使用，如果还停留在满屏 div 的时代，恐怕其他小伙伴都不愿意和我一起玩耍了，IE 8（及以下）不能识别这些元素，因而不能对这些元素应用样式，但是我的项目中由于引入了 Modernizr.js 脚本，从而使 IE8 可以支持这些元素，当然这还得建立在用户启用了 javaScript 的前提下，如果没有，那就比较糟糕了，不过这种情况少之又少，但也不能完全忽略，所以可以为没有启用 javaScript 的浏览器准备一些后备内容，比如，给出一个链接跳转至没有 HTML5 元素的版本。role 属性属于 WAI-ARIA 规范的 Landmark Roles/地标角色部分，旨在告诉用户代理这个元素扮演的角色，例如屏幕阅读器遇到包含 role="navigation" 的页面上的一个 HTML 元素，屏幕阅读器将知道此 HTML 元素用于导航。现在，我想要添加一个导航条，刚好 Bootstrap 有这个组件，因此我就把 Bootstrap 的示例代码直接搬过来了，以下是 header 部分代码：

        
      Project name

      
查看更多关于使用Bootstrap和HTML5Boilerplate开始一个项目续_html/css_WEB-I的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did105268