html5 css3 web标准基础教程入门-小林博客

简介

就目前而言，html5是html标准的最新最好的版本。学习html5+css3来制作网站，简单地说，div就是框架，是web网页的框架结构，你甚至可以把网页想象成多个框架的组合。css为页面提供布局和格式，作为web标准，css3已经像html一样，成为了制作网页或者开发web应用不可或缺的一部分。

html5基础

文档类型：<!doctype html>

Html5的文档类型声明可以出发所有具备标准模式的浏览器的标准模式。

语言编码：<meta charset="gb2312">

它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF-8编码，

它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。

Html5语义元素：

1、用于构建页面的语义元素：<article>、<aside>、<figcaption>、<figure>、<footer>、<header>、<hgroup>、<nav>、<section>、<details>、

2、用于标识文本的语义元素：<mark>、<time>、<wbr>（表示可以在某处断开）

3、Web表单及交互：<input>（不是新元素，但增加了很多了类型）、<datalist>、<keygen>、<meter>、<progress>、<command>、<menu>、<output>

4、音频、视频及插件：<audio>、<video>、<source>、<embed>

5、Canvas

一、编写html5

编写html5页面可以使用Windows中的记事本、Mac中的TextEdit、Adobe Dreamweaver、Microsoft Expression Web。

以Dreamweaver为例新建一个空白的文档，设置好参数后就得到这样的一个代码片段:

6c479c1fdaf026d90e0ecef884856877-1

a9710aa7588bc2ffca9420a40147f5c8-1

b8ec22efaf646871c13bd6e3669f1861-1

二、保存页面

在创建页面之后，就应该保存它。Ctrl+S保存，出现“另存为”的对话框，导航到blog文件夹，在“文件名”文件框中输入index.html，单击“保存”按钮。

5adb231697913adbb32ed562ea231460-1

并不是所有的浏览器都能支持html5语义元素标签，所以要让浏览器都支持，需要以下代码：

<!--[if lt IE 9]>

<![endif]-->

如图:

d671a4d37c71b98bc8f6dd4214a17440-1

三、修改页面标题

网页上的页面标题显示在浏览器的标题栏中，页面标题是搜索引擎用于对网站建立索引的关键元素之一。

1、在文档工具栏的“标题”文本框中，选择占位符文本“无标题文档”

02904134ffad0a89b96d429bc9fa010c-1

2、输入“个人网站”然后按下Enter 。效果如图：

dc25571bfc11349ad15a89612ea9639b-1

四、加载样式表：加载css样式有以下四种，外部样式、内部样式、行内样式、导入样式。

1、外部样式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。

2、内部样式表，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。例如：

<style>

h2 { color:#f00;}

</style>

3、行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。例如：<p style="font-size:18px;">内部样式</p>

4、导入样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式链接全局样式，这样就使代码达到很好的重用性。例如：@import url("/css/global.css");

以外部样式为例：

外部样式：“文件”、“新建”选择css 创建一个外部样式，另存为style.css,样式表放到新建的名字为css文件夹里面。返回到index.html代码窗口，引入外部样式<link href="css/style.css" rel="stylesheet">

2c2044521fad9409f2ceb7dbf26e7029-1