3.基本的html结构

3.1开始编写网页

 每个html文档都包含以下基本成分:
  DOCTYPE
  html元素(包含lang元素,该属性不是必须的)
  head元素
  说明字符编码的meta元素
  title元素
  body元素
 
<!DOCTYPE html><!-- 该标记告诉浏览器该html的版本,此处声明为html5文档-->
<html>
<head><!-- 页面头部 -->
<meta charset="utf-8">
<title>示例1</title> <!-- 页面标题 -->
</head><!-- 结束页面头部 -->
<body><!-- 页面体 -->
 
</body><!-- 结束页面体 -->
</html>
 

3.2 创建页面标题

 每个页面都必须有一个title元素。每个页面的标题都必须是简短的,描述性的,唯一的。页面标题会被google等搜索引擎采用。
 title中不能包含任何格式,html,图像或指向其他页面的链接
 

3.3 创建分级标题

 html提供了6级标题:h1到h6元素对标题进行标记。h1是最高级别的标题,以此类推
 

3.4理解html5的文档大纲

 html5提供了四个分块内容:article,aside,nav,section。这些元素将文档划分为不同的区块,并定义了h1-h6(包括header,footer)元素的范围。
 这意味着每个分块元素都有它自己的h1~h6层次结构,每个页面都可以有1个以上的h1
 

3.5 对分级标题进行分组

使用hgroup对标题进行分组,用于指明标题是相关的
<hgroup>
 <h1>测试一级</h1>
 <h2>测试二级</h2>
</hgroup>
hgroup至少包含两个标题,只有第一个最高级别的标题出现在文档大纲里,但都会显示在网页上
 

3.7创建页眉

 如果页面中有一块包含一组介绍性或导航行内容,应该用header对其进行标记,一个页面可以有多个header
 不能再header里包含footer或者另一个header,也不能在footer或adderess元素中嵌套header
 

3.8 标记导航

 <header>
 <nav role="navigation">
  <a href="#">导航</a>
 </nav>
 </header>
html5不允许nav嵌套在address元素中
 

3.9 article

article是html5新增的元素,表示文档,页面,应用或网站中一个独立的容器,原则上是可以独立分配或可再用的。
 

3.10 定义区块

 section:html5的新元素表示文档或应用的一个一般的区块
 section是四个分块内容元素中一个,其余三个是nav,article,aside
 section不是像div一样的通用容器,它有一定的含义,div没有
 
 section与article的区别:如果内容适合用作聚合的一块独立的内容或一个小组件,就是用article,否则用section
 

3.11 指定侧栏

aisde元素:当有一部分内容与页面的主体内容不那么相关时使用
<aside role="complementary">
 侧边栏
</aside>
 

3.12 创建页脚

footer代表嵌套它的最近的article、aside、blockquote,body,details,fieldset,figure,nav,section,td的页脚,只有离它最近的是body时,才是整个页面的页脚
不允许footer中嵌套header或footer,不允许footer嵌套在header中或address中
 

3.14 创建通用容器

div:默认从新的一行开始,也是无语义区块元素
 

3.15 为元素指定类或id名称

1)在元素的开始标记中输入ID="值" id是唯一标识
2)为元素指定类别的方法
 class="值" ,一个元素可以有一个以上的class
id 属性会自动降钙元素转化为锚,从而可以创建指到这里的链接。
 

3.17添加注释

 
 <!--注释-->
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值