您现在的位置是:首页 > 网站制作 > 前端设计

前端设计

html5 css3 web标准基础教程入门

杨青 2013-07-10前端设计

就目前而言,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>、

<summary>

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为例新建一个空白的文档,设置好参数后就得到这样的一个代码片段:

html5 css3 web标准基础教程入门

html5 css3 web标准基础教程入门

html5 css3 web标准基础教程入门

二、保存页面

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

07.jpg

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

<!--[if lt IE 9]>

 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

如图:

06.jpg

还有更多其他的方法请参考原文:《HTML5网页如何让所有的浏览器都能识别语义元素标签样式》http://www.yangqq.net/newshtml5/2013-06-08/175.html

三、修改页面标题

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

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

html5 css3 web标准基础教程入门

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

html5 css3 web标准基础教程入门

四、加载样式表:加载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">

 html5 css3 web标准基础教程入门

html5 css3 web标准基础教程入门

 

文章评论