1.1 HTML 基础
1.1.1 HTML 的定义
HTML（Hyper Text Markup Language）是一种超文本标记语言，用来给内容赋予结构和意义。
1.1.2 HTML基础术语
元素：元素是定义页面内对象结构和内容的指示符，通常是指开始标签到结束标签内的所有代码。
- 行内元素：
<em>、<a>、<b>、<span>、<strong> - 块级元素：
<p>、<h1>、<h2>……<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd> - 空元素：
<br>、<meta>、<hr>、<img>、<input>、<link>
标签：元素通常由标签成对组成。开始标签标记了元素的开始，例如:<p>，闭合标签标记了一个元素的结束，标签内以一个斜杠开始，例如：</p>
<p> ……</p>
属性：属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式在开始标签中出现，例如：<a href="http://hicc.me/"> cc log </a>
HTML基础术语例子：cc log
1.2 HTML页面基本结构
1.2.1 文档类型声明
在HTML文件的开头需进行文档类型声明（doctype），以告诉浏览器页面使用的哪个版本的HTML 。
<!DOCTYPE html>
1.2.2 文档基本结构
HTML文档基本结构一般包含以下声明和标签：doctype、html、head、body
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<title> HELLO,WORLD!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>hello,world!</h1>
<p>This is a website.</p>
</body>
</html>
1.3 视口
一般而言，对于响应式站点，应设置适口如下：
<meta name="viewport" content="width=device-width,initial-scale=1">
1.4 结构性元素
主要包括：<header>、<nav>、<section>、<aside>、<footer>
1.4.1 <header>
在<header>元素中，应包含介绍性和导航性的辅助内容，如：logo、搜索功能和主导航栏。
对应的WAI-ARIA属性是banner.
<header role="banner">……</header>
1.4.2 <nav>
页面主导航包含在<nav>元素中，通常在<header>中会有一个<nav>元素。
对应的WAI-ARIA属性是navigation。
<nav role="navigation"> ……</nav>
1.4.3 <footer>
可以用作页面页脚，也可以在其他地方设置脚标，对内容区块（而不是）相对应的WAI-ARIA属性是contentinfo。
<footer role="contentinfo"> ……</footer>
1.4.4 <article>
<article>元素师网页上一块独立的内容，一个页面可以有多个<article>元素。但没有对应的WAI-ARIA 属性。
<article>……</article>
1.4.5 <aside>
<aside>元素用于次要的内容，可以是与网站或整个页面相关的（友情链接等），或者是嵌套在<article>元素中，与文章相关（术语表等）。
相对应的WAI-ARIA 属性是complementary。
<aside role="complementary">……</aside>
<body>
<header role="banner">
<nav role="navigation">……</nav>
</header>
<article>……</article>
<aside role="complementary">……</article>
<footer role="contentinfo">……</footer>
</body>
1.4.6 IE 支持
为了让网站能在老版的IE中正确显示，需要使用polyfill或利刃shive脚本。我们所要做的就是下载这个文件，然后在<head>元素中链接他，如：
<!--[if it IE 9]>
<script src="files/html5shiv.js"></script>
<![endif]>-->
1.5 创建一个页面
1.5.1 示例
以下示例为一个不包含任何css样式的页面
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello,World!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--[if it IE 9]>
<script src="files/html5shiv.js"></script>
<![end if]-->
</head>
<body>
<header role="banner">
<h1>Learning html</h1>
<nav role="navigation">
<ul>
<li><a href="……">Home</li>
<li><a href="……">About</li>
<li><a href="……">Contact</li>
<li><a href="……">Links</li>
</ul>
</nav>
</header>
<article>
<h2>html的定义</h2>
<p>HTML（Hyper Text Markup Language）是一种超文本标记语言，用来给内容赋予结构和意义。</p>
</article>
<aside role="complementary">
<h2>Related links</h2>
<ul>
<li><a href="http://hicc.me/">cc log</a></li>
<li><a href="http://hipo.cash">hipo</a></li>
</ul>
</aside>
<footer role="contentinfo">
<p>©2016 html forever</p>
</footer>
</body>
</html>
1.5.2 注释
<!--这是一个html注释-->
<!--这是另一个html注释，
分成多行-->
<!--[if it IE 9]>
<script src="files/html5shiv.js"></script>
<![end if]-->
以上示例为条件注释，只能被IE浏览器识别（其他浏览器只会将其当作普通注释并忽略），可以用来给予IE特别的指示。
网友评论