随意一点的blog

html5andcss3base/03

基本html结构

[TOC]

开始编写网页

每个page都有的元素DOCTYPE html head title body meta(文字说明符)

编写网页步骤

<!DOCTYPE html>
<html lang="language-code> codeeg:en
<head>开始头部
<meta charset="utf-8"/> 确认网页的字符
<title> 确认标题
</head> 头部编写结束
<body> 主体开始

网页的两个部分

head和body

创建页面标题<title>

要重视页面标题的作用seo中占比重很大

创建分级标题h1~6

分级标题的重要性

如果标题中的字段与搜索引擎的关键字匹配程度很高,那么他的重要性会越大h1影响最大。
不要使用hn去标记副标题,标语,以及无法成为独立标题的子标题

普通页面布局

带导航的页头
显示在主题内容区域的文章
显示次要信息的侧边栏
页脚

创建页眉

header
一般包括网站标志,主导航栏,其他链接,或者再包含搜索栏。
<header role="banner"> 显示的指出这个页眉为页面级的。
header除了作为页面顶级页眉外还能作为某一个区块的导航目录。

标记导航nav

对重要的链接群进行标记。
nav不能嵌套在address中。
<nav role="navigation">

页面的主体内容main

一个页面中仅仅使用一次。
<main role="main">

创建文章article

article 元素表示文档、页面、 应用或网站中一个独立的容器,原 则上是可独立分配或可再用的,就 像聚合内容中的各部分。它可以是 一篇论坛帖子、一篇杂志或报纸文 章、一篇博客条目、一则用户提交 的评论、一个交互式的小部件或小 工具,或者任何其他独立的内容项。
article可以互相嵌套,因为article可以表示一个小部件。

定义区块section

section 元素代表文档或应用的 一个一般的区块。在这里,section 是具有相似主题的一组内容,通常 包含一个标题。
section 的例子包含章节、标签 式对话框中的各种标签页、论文中 带编号的区块。比如网站的主页可 以分成介绍、新闻条目、联系信息 等区块。

定义附注栏aside

<aside role="complementary">

定义页脚footer

当footer是body的直接子元素的时候,表示一个页面的页脚。
当footer在article或其他元素中时,表示附录,索引,版权,协议等。
<footer role="contentinfo">

通用容器div

一般在需要为一个区块定义一些样式或者交互方式时,但是语义上无法使用之前的标签的时候使用。

使用ARIA改善可访问性

role 地标属性,可以为元素添加额外的标志,用于无障碍阅读
role的value的一些值:

  • banner 横幅。用于header中
  • navigation 导航。 与nav对应
  • main 主体。 与main对应
  • complementary 补充性内容。 与aside对应
  • contentinfo 内容信息。 关于文档的一大块感知信息,一般用在页眉的footer上。

为内容指定类别和id

id/class
id页面必须唯一。
class可以有多个值。
推荐使用class添加样式
value通常使用短横线来连接多个单词。footer-bar

为元素添加title属性

与页面的title元素不同。元素的title属性为元素添加描述性信息。可以在内容无法正常呈现的时候提供辅助的提示信息。
无障碍阅读中。阅读器可以阅读title中的内容。

添加注释

<!-- -->
在元素开头活着结尾添加注释时一种好的编程习惯。