html自学教程（六）html5基础

html5介绍

在编写html文档时,<!doctype>声明必须位于html5文档中的第一行:

<!doctype html>

字符编码(字符集)声明也被简化:

html5中的默认字符编码是UTF-8

对于中文网页需要使用<meta charset="UTF-8">声明编码,否则会出现乱码.

html5中的一些新特性:

●用于绘画的canvas元素

●用于媒介回放的video和audio元素

●对本地离线存储的更好的支持

●新的特殊的内容元素.比如article,footer, header,nav,section

●新的表单控件.比如calendar,date,time,email,url,search

二 html 内容模型

html5中引入了很多的标记元素,根据内容类型的不同,这些元素被分成7大类:

●内联(Embedded)

●流(Flow>)

●标题(Heading)

●交互(Interactive)

●元数据(Metadata)

●短语(Phrasing)

●区段(Sectioning)

html内容类型旨在使标记结构对浏览器和网站设计者更有意义

元数据(Metadata):通常出现在页面的head中,设置页面其他部分的表现和行为.

元素:<base>,<link>,<meta>,<noscript>,<script>,<style>,<title>

内联(Embedded):在文档中添加其他类型的内容.

元素:<audio>,<video>,<canvas>,<iframe>,<img>,<math>,<object>,<svg>

交互(Interactive):与用户交互的内容.

元素:<a>,<audio>,<video>,<button>,<details>,<embed>,<iframe>,<img>,<input>,<label>,<object>,<select>,<textarea>

标题(Heading):定义段落标题

元素:<h1>,<h2,<h3>,<h4>,<h5>,<h6>,<hgroup>

短语(Phrasing):文本和文本标记元素

元素:<img>,<span>,<strong>,<label>,<br/>,<small>,<sub>等

相同的元素可以属于多个内容模型

流(Flow)内容:包含在文档正常流中的大多数html5元素

区段(Sectioning)内容:定义标题,内容,导航和页脚的范围

元素:<article>,<aside>,<nav>,<section>

流(Flow)包含了几乎所有的其他内容.

三 html页面结构

通用的html5页面结构如下图所示:

在编写html5文档时,你可能不需要其中的某些元素,具体取决于你的页面结构

四 header, nav&footer

在html4中,我们将定义一个这样的头:

在html5中,我们使用简单的<header>标签

<header>标签定义了文档的头部区域

<header>元素适合在<body>标签内部使用

实例:

<!doctype html>

<html>

<body>

</header>

</body>

</html>

注意:<header>与<head>标签不同

在html5中,<footer>标签定义文档或者文档的一部分区域的页脚

文档的页脚:

<p>Posted by:A ping</p>

</footer>

在典型情况下,<footer>元素会包含文档创作者的姓名,文档的版权信息,使用条款的链接,联系信息等等

在html5中,<nav>标签定义导航链接的部分

并不是所有的html文档都要使用到<nav>元素.<nav>元素只是作为标注一个导航链接的区域

一个导航链接的实例:

<nav>

<a href="/jquery">JQuery</a>

</nav>

运行效果如下:

一个通用的html5页面结构:

<body>

<nav>

五 article,section&aside

在html5中,<article>标签定义独立的内容

<article>标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分

<article>的潜在来源:

●论坛帖子

●博客文章

●新闻故事

●评论

实例：

<p>文章元素的内容</p>

</article>

在html5中,<section>标签定义了文档的某个区域.比如章节,头部,底部或者文档的其他区域

实例:

文档的某个区域,解释了什么是W3C:

<p>World Wide Web Consortium(W3C)是万维网联盟...</p>

</section>

在html5中,<aside>标签定义<article>标签外的内容

aside的内容应该与附近的内容相关

实例:

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World,Florida</p>

</aside>

提示:<aside>的内容可用作文章的侧栏

家好，我是IT共享者，人称皮皮。这篇我们来讲讲CSS网页布局。

一、网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

1. 头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 项目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}


/* 头部样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>


<div class="header">
  <h1>头部区域</h1>
</div>


</body>
</html>

2. 菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：

例

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

3. 内容区域

内容区域一般有三种形式:

1 列：一般用于移动端。
2 列：一般用于平板设备。
3 列：一般用于 PC 桌面设备。

不相等的列

不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。

例：

.column {
  float: left;
}
 
/* 左右侧栏的宽度 */
.column.side {
  width: 25%;
}
 
/* 中间列宽度 */
.column.middle {
  width: 50%;
}
 
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

4. 底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等。

例

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

二、响应式网页布局

通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>


<div class="header">
  <h1>我的网页</h1>
  <p>重置浏览器大小查看效果。</p>
</div>


<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#" style="float:right">链接</a>
</div>


<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>文章标题</h2>
      <h5>xx 年xx月 xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
      <p>文本...</p>
      <p>当热诚变成习惯，恐惧和忧虑即无处容身。缺乏热诚的人也没有明确的目标。热诚使想象的轮子转动。一个人缺乏热诚就象汽车没有汽油。
      善于安排玩乐和工作，两者保持热诚，就是最快乐的人。热诚使平凡的话题变得生动。！</p>
    </div>
    <div class="card">
      <h2>文章标题</h2>
      <h5>xx 年 xx 月xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
      <p>文本...</p>
      <p>一切事无法追求完美，唯有追求尽力而为。这样心无压力，出来的结果反而会更好！</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>关于我</h2>
      <div class="fakeimg" style="height:100px;"></div>
      <p>6666</p>
    </div>
    <div class="card">
      <h3>热门文章</h3>
      <div class="fakeimg"><img src="img/fy2_wp.png">\</div>
    
    </div>
    <div class="card">
      <h3>关注我</h3>
      <p>本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，
      不得用于任何商业用途，否则后果自负，请支持购买正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理。


声明：为非赢利性网站 不接受任何赞助和广告。</p>
    </div>
  </div>
</div>


<div class="footer">
  <h2>底部区域</h2>
</div>


</body>
</html>

三、总结

本文主要介绍了Html的网页布局结构，如何去了解网络的布局，介绍了常见的移动设备的三种网页模式，最后通过一个小项目，总结之前讲解的内容。

代码很简单，希望可以帮助你学习。

发现前端开发人员一直在努力征服CSS。理由也很充分，开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行，而另一个DIV“浮”到左侧，感觉没有任何意义。

你也一定听到过开发人员的抱怨：“我们只需要向左边移动五个像素，但是…天哪!为什么整个都向下移动了一行。到底是哪里错了?!?!?!”

根据我作为前端开发人员使用CSS的经验，下面是我的十个“不要”。

1.不要滥用类

在有意义的地方使用ID而不要使用类。这是一个使得浏览器能够更快访问DOM元素的方法。

2.不要把一切都扔进一个CSS文件中

分区CSS使其更易于管理。每一个CSS文件都可以分解成例如header.css、footer.css等逻辑组件。

3.不要命名选择器为“.red-with-green-dashed-lines”(红绿虚线)

根据页面上的组件命名你的选择器。例如：“header-left”，“content-title”或“content-date”更具描述性。

4.不要忘记注释

注释在CSS中非常重要，可用来理解每个样式如何与其他样式关联以及什么颜色方案适用于哪些组件。

5.不要害怕开发工具

现在的每个浏览器都有自己的一套开发工具，通常是按F12。这些工具在“调试CSS”时至关重要。

6.不要害怕覆盖

当然，CSS框架，例如Bootstrap和Foundation都较为巨大，但每一个都需要根据你的需要做出一点调整。当你得到一个更新的框架时，它将覆盖你的改变。与其深入挖掘庞大的CSS文件，还不如创建一个bootstrap-overrides.css文件，按照你的意愿调整框架，只是…

7.不要滥用 !很重要

CSS的整体思路是，从一个到另一个地“层叠”样式。!重点是要记住排雷一样地踏遍所有早先的样式。: -)

8.不要使用大量网络字体

这也是显而易见的，但有些人就是喜欢自己排版。只在网站上使用一个或两个(最多三个)网络字体，然后回归到浏览器默认设置，以保持网站的优化。

9.不要手动编码所有的CSS

为了保持CSS的DRY，可以使用CSS预处理程序例如LESS或SASS。使用这些预处理器的最大好处是，你可以定义变量，例如在上面定义配色方案，然后重复使用到所有CSS，而不必当你需要修改的时候追踪每个颜色。

10.不要让CSS过于“臃肿”

空格会占用CSS文件的空间空间。由于我们都希望我们的CSS能够快速加载，因此在部署到网站之前最好使用CSS压缩工具来一次瘦身。

小编是一个有着5年工作经验的架构师，关于web前端，自己有做材料的整合，一个完整学习web前端的路线，学习材料和工具。需要的伙伴可以私信我，发送“前端”等3秒后就可以获取领取地址，免费送给大家。对于学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我。希望你也能凭自己的努力，成为下一个优秀的程序员！

以上只是我作为一个开发人员在编写CSS时认为不应该做的事情。希望能帮助到各位前端同行!

在线咨询

上一篇：河南郑州家乡旅游网页设计源代码郑州历史文化名人网页设计模板
下一篇：听说过CSS in JS，那你听说过JS in CSS吗

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商