生成H5文档的快捷键：

①在空html文档中输入 ! ②按下tab键。

meta标签使用实例

meta标签使用实例.png

搜索引擎可以查找到的html元素

title（<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。）
<meta> (标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。)
h1-h6
strong
em
：

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

就是没有关闭标签的空元素（
标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使
在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

条件注释

您也许会在 HTML 中偶尔发现条件注释：

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->
条件注释定义只有 Internet Explorer 执行的 HTML 标签。

<!-- 这是一个注释 -->

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

     <h2>This is a heading</h2>
    <h3>This is a heading</h3>
    <hr />
    <p>This is a pargarph</p>
    <p>This is another pargarph</p>

效果如下图：

hr创建水平线.png

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签：
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML 格式化标签

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

<b> 和 <strong> 有什么区别？应该用哪个？

b： 定义粗体文本。
em：把文本定义为强调的内容。
strong：把文本定义为语气更强的强调的内容

    <b>定义粗体文字</b><br/>
    <em>把文本定义为强调的内容。</em><br/>
    <strong>把文本定义为语气更强的强调的内容</strong><br/>

b.em.strong视觉效果图.png

块级元素：
p,div,ul,ol,table,form
行级元素：
span,a,li,input,img

img:

<img src="url" />
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
<img> 标签有两个必需的属性：[src 属性]和 [alt 属性]
title属性是对图片的描述与进一步说明。
总结：
1、含义不同：
img标签alt属性是当图片不存在时或加载失败时的替代文字（进行显示）；img标签title属性是对图片的描述与进一步说明。
2、在浏览器中的表现不同：
在FF、chrome和IE8+中，当鼠标经过图片时title属性的值会显示，而alt属性的值不会显示；只有在IE6、IE7中，如果img标签没有写title属性，而写了alt属性的时候，alt属性值会进行显示；如果img写了title属性和alt属性的时候，只会显示title属性值。

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

基本的注意事项 - 有用的提示：
一、假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
二、加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

img应用实例

一、图片对齐：

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

<p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

align="bottom"
align="middle"
align="top"
（在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。）

二、图片浮动

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
</p>

<p><b>注意:</b> 在这里我们使用了 CSS float 属性，在HTML 4 中 float 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

三、图片链接

<p>创建图像链接:
  <a href="//www.runoob.com/html/html-tutorial.html">
      <img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32">
  </a>
</p>

<p>无边框的图片链接:
  <a href="//www.runoob.com/html/html-tutorial.html">
    <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32">
  </a>
</p>

四、图像映射

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）

创建图像映射.png

a链接

①图片链接

<a href="//www.runoob.com/html/html-tutorial.html">
    <img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>

②当前页面链接到指定位置（书签）

<p>
<a href="#C4">查看章节 4</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>

a链接创建书签.png

③跳出框架

<a href="//www.runoob.com/" target="_top">点击这里!</a> 

④创建电子邮件链接

<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>

<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>

单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
eg:

<head>
  <base href="http://www.runoob.com/images/" target="_blank">
</head>

div和span的区别

1、<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<span> 元素是内联元素，可用作文本的容器。
span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。span可以作为div的子元素，但div不能是span的子元素，如果span中出现div则不符合ws3c页面标准。
2、<div> 元素和<span>元素都没有特定的含义。但由于div属于块级元素，浏览器会在其前后显示折行。
span元素前后不会换行,宽度由被包围的内容宽度决定（不建议给span设置宽度属性width，可以给span设置margin值，设置与父元素之前的距离。）
3、如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的一个常见的用途是文档布局。（它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。）
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
span可以通过css声明（display:block）转换为块元素，想对一行中的文字或图片单独设置样式，不需要换行的条件下又不影响其他行内内容，span可以很好解决这些问题。

网站布局

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

HTML<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

<script>
  document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>