HTML
缩略语
一个经常看到的属性是 ,它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）
<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
一般用在国家，特殊机构等缩略名称上
<p><abbr title="National Aeronautics and SpaceAdministration">NASA</abbr>
sure does some exciting work</p>
上标与下标
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
代码显示：
My birthday is on the 25th of May 2001.
Caffeine’s chemical formula is C8H10N4O2.
If x2 is 9, x must equal 3 or -3.
展示计算机代码
<code>: 用于标记计算机通用代码。
<pre>: 对保留的空格（通常是代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var>: 用于标记具体变量名。
<kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
<samp>: 用于标记计算机程序的输出。
<pre><code>var para = document.querySelector('p');
para.onclick = function() {
alert('Owww, stop poking me!');
}</code></pre>
<p>You shouldn't use presentational elements like <code><font></code> and <code><center></code>.</p>
<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
上面代码显示效果图如下：
var para = document.querySelector(‘p’);
para.onclick = function() {
alert(‘Owww, stop poking me!’);
}
You shouldn’t use presentational elements like and
In the above JavaScript example, para represents a paragraph element.
Select all the text with Ctrl/Cmd + A.
$ ping mozilla.org
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms
标记时间和日期
<time datetime="2016-01-20">20 January 2016</time>
世界上的日期格式可能会被写成各种各样的格式，这病容易被电脑识别，
<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Calling out a specific week number-->
<time datetime="2016-W04">The fourth week of 2016</time>
如何规划基本的网站结构
标题
通常在顶部有一个大标题和（或）图标。 这是一个网站的主要常见信息，通常存在于每一个网页。
导航
链接到网站的主要部分；通常由菜单按钮、链接或选项卡表示。与标题一样，这些内容通常在一个网页与另一个网页之间保持一致——在您的网站上导航不一致只会使人疑惑和恼火。许多网页设计师认为导航栏是标题的一部分，而不是独立的组件，但这并不是一个硬性规定；实际上有些人认为，两个独立的会有更好的可访问性，因为如果它们互相独立，屏幕阅读器可以更好地阅读两个功能。
主要内容
中心的一个大区域，包含给定网页的大部分独特内容，例如您要观看的视频，或您正在阅读的主要故事，或您要查看的地图，或新闻标题等…这是网站的一部分，绝对会因页面而异。
侧栏
一些次要信息、链接、引言、广告等。通常这是与主要内容中包含的内容相关（例如在新闻文章页面上，侧边栏可能包含作者的个人信息或相关文章的链接），但有在一些情况下，你会发现一些重复的元素，如辅助导航系统。
页脚
横跨页面底部的条纹，通常包含精美的打印、版权通知或联系信息。 它是一个放置公共信息（如标题）的地方，但通常该信息对网站来说不是特别重要。 通过提供用于快速访问热门内容的链接，页脚有时也用于SEO目的。
一个“典型的网站”可能会这样子布局：
html布局元素细节
从总体详细的理解HTML的元素是不错的——随着你web开发经验的逐渐积累，你将会逐渐理解HTML的元素。你可以通过查阅HTML元素参考找到更多的细节。现在，你需要理解这些主要的元素定义：
<main> 展现了页面内容的独特性。只可以在每一个页面上使用一次<main>，直接把它放到<body>中。在理想情况下，不应该把它嵌套进其他的元素中。
<article> 闭合一块与自身相关的内容，这块内容能够解释它自身而不是页面上其他的内容（例如一篇单独的博客）。
<section> 近似于<article>，但是它更多的是伴随着由一个单独功能构成的页面（例如一个小型的地图，或者是一组文章的标题和摘要）。它被认为最好的实际应用是用标题作为每一部分（section）的开头；也要注意的是你可以把不同的<article>分到不同的<section>中，或者把不同的<section>分到不同的<article>中，这要取决于内容。
<aside> 包含的内容并不与主要内容有直接的联系，但是它可以提供额外的不直接有联系的信息（术语表条目，作者简介，相关链接等等）。
<header> 展现了一系列的介绍性内容。如果它是<body> 的子元素,它就定义了网站的全局页眉。但是如果它是 <article> 或<section> 的子元素，它就定义了这些部分的特定的页眉(不要把这些与titles and headings混淆)。
<nav> 包含了页面主要的导航功能。二级链接等，不会进入导航功能部分。
<footer> 包含了页面的页脚部分
无语义元素
例如 span,div等元素没有语义，适合在一些没有特定意义的地方。
在书籍《css设计指南》中，作者明确的提出了不要乱用div标签，会造成代码混乱，理解困难。
换行与水平分割线
br
hr
代码示例：
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
<hr>
<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily
如何设计一个简单的网站布局
- 先写出网页需要什么内容
- 找出在每个页面都要显示的
- 把每个内面需要显示的内容归类在一起
- 在页面之间建立联系
HTML和调试
浏览器解析HTML代码的时候，可能由于各种错误会出现不适自己想要的结果，如何调试呢？
宽容代码模式
- 语法错误
- 逻辑错误
HTML验证
希望自己的HTML页面通过测试，可以最好的方法就是让你的HTML页面通过 Markup Validation Service页面 — 由W3C创立并维护的，这个网站紧跟定义 HTML，CSS，和其他网络技术的具体内容. 这个网页将 HTML 文档作为输入,并运行 ，然后给你一个报告告诉你你的 HTML 有哪些错误.
为了确定需要验证的HTML，你可以输入一个指向该HTML页面的网址，或者上传一份HTML文件，或者直接输入一些HTML代码。