网页代码剖析（上）
Zac
Web360编辑
在这节课中，我们将会把网页一步一步解剖分析，介绍一个网页的基本结构。尤其在你做搜索引擎优化时，即使不用手写这些代码，也要能看懂这些最基本的代码。
我们现在从网页的顶部开始。
<!doctype html>
DOCTYPE是document type(文档类型)的简写，说明你用的XHTML或者HTML是什么版本。
要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
查看很多使用XHTML标准开发的网站，第一行就是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
现在，HTML已经被了，只需要在 doctype 声明中写下：
<!doctype html>
<html>
在HTML静态网页中，可以看见每个网页具有唯一开始</HTML>结束，也就是标签。
感觉标签在网页中没有什么作用，但的确又不能少，超文本标记语言规定以开始，以</HTML>结束，也可以理解为HTML网页的规则。同样，可以理解为一篇网页缺少了就不叫HTML。
标题部分：<head>
head位于html网页的头部，<html>后<body>前的标签，并以<head>开始以</head>结束的html标签。
页面标题：<title>
一个网页中只能使用一次title标签，是标识一个网页唯一标题作用，而且根据W3C标准，必须放入一个网页中头部head标签内。
一个网页在搜索引擎中，某关键词的排名因素，很大一部分是标题标签<title>是否含有此关键词。由此可以看出，在网页中标题标签重要，在搜索引擎排名上标题标签同样非常重要。
<title>我是标题，我在title标签内，我显示在IE最顶部标题地方</title>
Meta元标签
在一个网页中meta标签，常常被用作网页关键词、网页介绍、作者、网页编码、robots、自动跳转等声明和说明标签。
- 网页制作者信息 <meta name=”author” content=”Evance” />
- 网页关键词声明（搜索引擎优化地方）<meta name=”keywords” content=”abc,xxx,defg,xyz” />
- 网页简介说明（搜索引擎优化地方）<meta name=”description” content=”简介内容如本页教程之meta标签说明-www.web360.org” />
- 防止别人在框架里调用你的页面<meta http-equiv=”Window-target” content=”_top” />
- 自动跳转（此标签用法，可以让网页在多少秒后，自动从当前页面，跳转到另外一个网页页面或网站）<meta http-equiv=”Refresh” content=”5;URL=http://www.web360.org” />
Content中的数值5表示当前页面在5秒钟后跳转。Url值为跳转到具体网页网站。
- 网页告诉搜索机器人向导对此网页操作（用来告诉搜索机器人，哪些页面需要索引，哪些页面不需要索引）<meta name=”robots” content=”all” />
content的参数有all,none,index,noindex,follow,nofollow。默认是all。如果在一个页面不加入此标签默认情况下，content=”all”意思是搜索并收录抓取爬行此网页及此网页指向页面。
Body部分：<body>
body是html网页结构最重要的标签，也叫主体内容标签，一般网页内容均放入此标签组之间。
标题：<h1>，<h2> ，<h3>
针对搜索引擎来说不同标签代表不同的重要级别。如果你在一个网页里使用的H1和H2标签中都含有一个相同关键词，搜索引擎会格外关注你所注重的关键词与内容，但切记不要滥用。
<h1>最重要的标题H1</h1>
<h2>次要栏目或标题-小标题H2</h2>
<h3>再次要栏目或分类小标题H3</h3>
<h4>文中分类小标题H4</h4>
链接：<a href>
使用a锚链接可以从A页面转到B页面，也就是常常见到和使用的。如新闻网站，我们看到标题觉得感兴趣，鼠标点击然后进入另外页面了解详情。这个就是html a超链接运用。
<a href="网址、链接地址" target="目标" title="说明">被链接内容</a>
- href：打开目标地址（网址），一般填写将要转到目标地址。如href=”http://www.web360.org/”这样浏览者在网页中，鼠标点击对应此锚文本将打开到网页http:// www.web360.org /
- target：打开目标方式
如果a标签内没有此元素，默认是在浏览网页中，重新载入对应链接网页
_blank ：新建标签窗口页，设置此属性，点击锚文本后，对应新建标签网页窗口打开对应地址
_parent：在当前页面打开网页，此属性可以理解为，本页网页重新载入锚文本的网页，针对html框架iframe网页中，整个网页将重新载入，打开目标网址地址。
图片：<img>
Img标签非常常用，作用就是引入外部图片到html中，显示出引入图片内容。使用时候注意结构，图片路径正确，宽度、高度根据实际需要进行设置。
<img decoding="async" src="图片路径" width="175" height="47" alt="" />
- Src 跟图片路径
- Width 设置图片宽度
- Height 设置图片高度
- Alt 设置对这张图片文字描述，通常设置描述，是为了搜索引擎能读懂你这张图片表达的内容（有利于搜索引擎优化）
实际案例：
<img fetchpriority="high" decoding="async" src="/img/someimage.jpg" height="240" width="360" alt="Here be my descriptive text">
列表
有序列表标签
- 内容一
- 内容二
- 内容三
<ol>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
以上3个li标签组放在<ol>标签之间，ol标签之间可以放若干li标签组。这种列表标签常使用在标题列表和图片列表等有规律的内容排版布局里。
无序列表标签
- 列表一:www.web360.org
- 列表二:www.web360.org
- 列表三:www.web360.org
<ul>
<li>列表一:www.web360.org</li>
<li>列表二:www.web360.org</li>
<li>列表三:www.web360.org</li>
</ul>
这里说到无序列表，意思是ul下的li标签前面默认是没有序号、无规律编号的列表。但我们通常使用ul li比较多，一般遇到列表类型布局，我们就使用<ul><li>列表标签布局。
Form表单
我们经常使用在一个网页中数据提交标签，比如我们留言板、评论等可以填写数据，提交处理地方都需要表单标签，而form表单标签内放输入框input、单选、多选、select下拉列表菜单与跳转菜单、提交按钮等标签内容。
举个实际案例：
<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="firstname"> <br />
Last name: <input type="text" name="lastname"> <br />
<input type="radio" name="sex" value="male"> Male <br />
<input type="radio" name="sex" value="female"> Female <br />
<input type="checkbox" name="vehicle" value="Bike"> I have a bike <br />
<input type="checkbox" name="vehicle" value="Car"> I have a car <br />
<input type="checkbox" name="vehicle" value="Airplane">I have an airplane <br />
<input type="submit" value="Submit">
</form>
基础的文本标签
<p>：我们需要分段换行时，在内容前加<p>内容后加</p>，即可实现文章换段落。
<strong>：加粗标签元素告诉浏览器，把其加strong标签的文本，以加粗方式显示给浏览者。
<em>：称为相对长度单位。相对于当前对象内文本的字体尺寸。
<br />：如果有地方需要强制换行，那我们使用br标签即可。
课程总结
在这节课中，我们剖析了一个网页的基本结构，以及每个标签的作用。这些标签包括：
- <!doctype html>
- <html>
- 标题部分：<head>
- 页面标题：<title>
- Meta元标签
- Body部分:<body>
- 标题：<h1>，</ h2>，<h3>
- 链接<a href>
- 图片<img>
- 列表
- Form表单
- 基础的文本标签