【Html5+CSS3 】2.1 最基本的HTML5网页骨架

2019-03-31 本文已影响0人子午禾苇

第二讲、最基本的HTML5网页骨架


<!DOCTYPE html><!--声明为 HTML5 文档-->

<html><!--HTML 页面的根元素-->

<head lang="en"><!--<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。-->

       <meta charset="UTF-8">

       <title></title><!--文档的标题-->

</head>

<body><!--包含了可见的页面内容-->

  <header>...</header><!--定义文档或者文档的一部分区域的页眉-->

  <nav>...</nav><!--定义导航链接-->

  <article>...</article><!--定义独立的内容，定义的内容本身必须是有意义的且必须是独立于文档的其余部分-->

  <section>...</section><!--定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域-->

  <aside>...</aside><!--定义 <article> 标签外的内容，内容应该与附近的内容相关，可用作文章的侧栏-->

  <footer>...</footer><!--定义文档或者文档的一部分区域的页脚，应该包含它所包含的元素的信息，一般该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。-->

</body>

</html>

1、新的网页结构

1）DOCTYPE声明

HTML4中的DOCTYPE声明格式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">

HTML5中的DOCTYPE声明格式

<!DOCTYPE html>

2）网页字符编码

在HTML4中指定<meta>元素的形式来制定网页的字符编码

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

在HTML5中对<meta>元素直接进行追加sharset属性来指定字符

<meta charset=UTF-8" />

3）<header>元素

表示页面中的一个内容区块或者整个页面的标题❓

使用方法：<header></header>

4）<nav>元素

表示页面中的导航链接

<nav>...</nav>

5）<article>元素

表示页面中的一块与上下文不相关的的独立内容，比如一篇文章中的文章

<article></article>

6）<section>元素

表示页面中的一块内容区块，比如章节的页眉、页脚等等。也可以和Hn（h1、h2..)等一起使用，标示出文档的结构！

<section></section>

7）<aside>元素

表示article元素的内容之外的，和内容相关的辅助信息，如文章的侧栏

<aside><aside>

8）<footer>元素

表示页面或者是页面中的一块区域的页脚，比如存放文件的创建时间、作者、联系方式等等。

<footer></footer>