• 微信
当前位置:首页 > 学无止境 > Web前端

学习Html5建站教程(四)用HTML5做个人的网站

作者:杨青青 时间:2013-07-07 阅读数:人阅读

首先看然后分析网页结构,每个人的风格和习惯都有所不同,所以在写div布局跟css会有很多不同的方法。尽量做到不要使用太多的div布局,css也要合理使用css缩写规则来书写。

学习Html5建站教程(四)Html5博客页面设计之实践

页面分析:这是一篇以文章形式来显示的一个网页,结构很分明,有两种方案

学习Html5建站教程(四)Html5博客页面设计之实践

现在我们以方案一为例,总体把页面一分为二,<header>是包含在<article>里面的,页脚部分是单独的一块儿。大致结构获悉了后再从局部入手,<header>部分,有主标题、副标题、还有作者署名,前面我们讲过,如果除了主标题,还有一个副标题,那可以把这两个标题写在一个<hgroup>元素中。如果除了主标题之外,还有其他内容,比如内容摘要、发表时间、作者、图片或者小标题链接等,那就应该把他们放在一个 <header>元素中。

 <header>

    <hgroup>

      <h1>给个人博客增加色彩元素提升网站用户体验</h1>

      <h2>网页的色彩——决定用户是否驻足停留的关键</h2>

    </hgroup>

    <p class="Byline">design by DanceSmile</p>

  </header>

接下来是文章正文部分:

部分代码:

<div class="Content">

<p>第一眼看到杨青个人博客网站的时候,如果你喜欢...</p>

...

</div>

正文当中还有一幅插图,html5新增加了插图这个<figure>语义元素,<figcaption>不是只能包含文本,任何html元素都可以,比如链接、小图标。<figcaption>包含了对图片的完整说明,所以alt文本就显得多于了,这种情况下,可以把<img>元素中的alt属性删除:

<figure>

 <img src="/d/file/jstt/bj/2013-06-19/200e781ddaa1d92cc3996637d06c38b2.jpg">

  <figcaption>图片来源:腾讯CDC《浅析网页色彩应用》</figcaption>

</figure>

学习Html5建站教程(四)Html5博客页面设计之实践

最后在把上面的代码写在<article>里面。

<footer>部分只是一些简单的页脚信息。

本节重点:

理解<header> <hgroup> <figure> <footer> 在web页面中的应用。

 

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:dacesmiling@qq.com

标签:教程html5
微信

杨青青

Hi~如果您正好看到这里,可以扫一扫微信二维码加我为好友,我是一个喜欢交朋友的人,我知道您也是哦~

微信
阿里云