HTML基础的捡漏

原文连接： http://www.cun-xu.cn/index.ph...

今天这篇是给初学者看的，老手也能够看看查缺补漏，尤为是与SEO有关的内容。

一、<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪一个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，由于 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，因此不须要引用 DTD。

二、head元素中存放元数据，用来描述HTML文档自己的信息

head做用：

1）描述网页基本信息

2）指向渲染网页须要其余文件连接

3）各大厂商根据本身须要定制

三、经常使用字符实体

字符实体能够有两种方法表示：一种为实体名称、一种为实体编号。如小于号(<)既能够用实体名称lt;表示，也能够用实体编号<表示。

显示结果	描述	实体名称	实体编号
	空格	 	 
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	和号	&amp;	&#38;
©	版权（copyright）	&copy;	&#169;
×	乘号	&times;	&#215;
"	双引号	&quot;	&#34;

更多可参看：HTML Symbol Entities Codes

四、本地路径方面，如在磁盘里面访问，Windows约定使用反斜线（）做为路径中的分隔符，如"E:娱乐音乐蓝莲花.mp3"；而UNIX 系统使用正斜线 (/)，如“/users/marvin/music/蓝莲花.mp3”。

五、连接

1. 页面跳转：target，定义窗口打开方式，默认是当前窗口打开，有四种取值，分别为：

   • _self：当前窗口打开，此值为默认值
   • _blank：新窗口打开（该值是使用最多的）
   • _parent：表示在当前框架的父框架打开（通常用于iframe中）
   • _top：表示顶层框架打开（通常用于iframe）
   • framename：在指定的框架中打开被连接文档。

2. 页面内跳转 ： 当<a>元素用于页面内的锚点跳转时，应该先为该页面设置一些锚点，而定义锚点有两种办法：

   • 经过<a>元素的name属性来定义，如：<a name="anchor-name">name属性的值就是锚点的名称</a>
   • 经过其余元素的id属性来定义，如：<div id="anchor-name">id属性值能够做为锚点的名称</div>

三、当其用于邮件连接时，href属性的值为“mailto: + 邮件地址”，示例以下：

<a href="mailto:xuyc_brother@foxmail.com”>发送邮件给我</a>

咱们还能够把邮件的抄送和主题写在href中，eg:

<a href="mailto:xuyc_brother@foxmail.com&subject=建议&body=body....”>发送邮件给我</a>

四、客户器端图像映射http://www.w3school.com.cn/tags/att_img_usemap.asp

<img src="planets.gif" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
  <area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
  <area href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>

上面这段源代码将一幅图像 planets.gif 映射为 3 个区域，当用户单击其中某一个区域时，将被连接到不一样的文档中。

五、表格 table：
cellspacing：单元格外边距（单元格与单元格 或 单元格与表格之间的距离）
cellpadding：单元格内边距（单元格内边距与内容之间的距离）

六、blockquote中的cite属性指定了引用的来源。eg:

<blockquote cite="http://www.wwf.org">
WWF's ultimate goal is to build a future where people live in harmony with nature.
</blockquote>

七、嵌入外部资源 eg.

<object type="application/x-shockwave-flash">
    <param name="movie" value="http://pdfReader.swf">
</object>

//或者
<embed type="application/x-shockwave-flash" src="http://pdfReader.swf" width="640" height="480">

八、语义化的做用

• SEO(Search Engine Optimization)
• 可访问性
• 可读性

九、经过 <optgroup> 标签把相关的选项组合在一块儿：

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

十、input type：email、url、number、tel、search、range、color、date picker等。

十一、6级标题中，h1最重要，表示一个网页中的主要内容，h2~h6重要性依此下降。对于搜索引擎来讲，h1的重要性仅次于title，搜索引擎检索完title后会当即查看h1中的内容。

十二、搜索引擎能够经过img标签的alt属性来识别不一样的图片，若是不写alt属性，则搜索引擎不会对img中的图片进行收录。

1三、使用meta能够用来作请求的重定向:

<meta http-equiv="refresh" content="秒数;url=目标路径"/>