HTML基础的捡漏

40次阅读

共计 2595 个字符,预计需要花费 7 分钟才能阅读完成。

原文链接:http://www.cun-xu.cn/index.ph…
今天这篇是给初学者看的,老手也可以看看查缺补漏,尤其是与 SEO 有关的内容。
1、<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML,所以不需要引用 DTD。
2、head 元素中存放元数据,用来描述 HTML 文档本身的信息
head 作用:
1)描述网页基本信息
2)指向渲染网页需要其他文件链接
3)各大厂商根据自己需要定制
3、常用字符实体
字符实体可以有两种方法表示:一种为实体名称、一种为实体编号。如小于号 (<) 既可以用实体名称 lt; 表示,也可以用实体编号 &#60; 表示。

显示结果
描述
实体名称
实体编号

空格
&nbsp;
&#160;

<
小于号
&lt;
&#60;

>
大于号
&gt;
&#62;

&
和号
&amp;
&#38;

©
版权(copyright)
&copy;
&#169;

×
乘号
&times;
&#215;


双引号
&quot;
&#34;

更多可参看:HTML Symbol Entities Codes
4、本地路径方面,如在磁盘里面访问,Windows 约定使用反斜线()作为路径中的分隔符,如 ”E: 娱乐音乐蓝莲花.mp3″;而 UNIX 系统使用正斜线 (/),如“/users/marvin/music/ 蓝莲花.mp3”。
5、链接

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

_self:当前窗口打开,此值为默认值
_blank:新窗口打开(该值是使用最多的)
_parent:表示在当前框架的父框架打开(一般用于 iframe 中)
_top:表示顶层框架打开(一般用于 iframe)
framename:在指定的框架中打开被链接文档。

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

通过 <a> 元素的 name 属性来定义,如:<a name=”anchor-name”>name 属性的值就是锚点的名称 </a>

通过其他元素的 id 属性来定义,如:<div id=”anchor-name”>id 属性值可以作为锚点的名称 </div>

3、当其用于邮件链接时,href 属性的值为“mailto: + 邮件地址”,示例如下:
<a href=”mailto:xuyc_brother@foxmail.com”> 发送邮件给我 </a>
我们还可以把邮件的抄送和主题写在 href 中,eg:
<a href=”mailto:xuyc_brother@foxmail.com&subject= 建议 &body=body….”> 发送邮件给我 </a>
4、客户器端图像映射 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 个区域,当用户单击其中某一个区域时,将被链接到不同的文档中。
5、表格 table:cellspacing:单元格外边距(单元格与单元格 或 单元格与表格之间的距离)cellpadding:单元格内边距(单元格内边距与内容之间的距离)
6、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>
7、嵌入外部资源 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″>
8、语义化的作用

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

9、通过 <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>
10、input type:email、url、number、tel、search、range、color、date picker 等。
11、6 级标题中,h1 最重要,表示一个网页中的主要内容,h2~h6 重要性依此降低。对于搜索引擎来说,h1 的重要性仅次于 title,搜索引擎检索完 title 后会立即查看 h1 中的内容。
12、搜索引擎可以通过 img 标签的 alt 属性来识别不同的图片,如果不写 alt 属性,则搜索引擎不会对 img 中的图片进行收录。
13、使用 meta 可以用来做请求的重定向:
<meta http-equiv=”refresh” content=” 秒数;url= 目标路径 ”/>

正文完
 0