3.1.1 使用语义性更强的HTML标签，如：
<nav> 导航条
<header> 全局/或局部布局的头部
<section> 一个区域/部分
<footer> 全局/或局部布局的尾部
<article> 文章内容
<aside> 定义侧边栏等
<main> 主要内容
<h1> 文章页的文章标题/一个页面只能用一个h1，所以保留对它的使用
<h2> 标题
<figure> 页面图片
<i> 图标（代表单词icon）
<a> 带超链接的文字或图标
<span> 后台数据库文本
3.1.2 图片规范
- 所有页面元素类图片均放入images文件夹, 测试用图片放于imgdemo文件夹；
- 图片格式仅限于svg || png || jpg；
- 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间；
- 运用阿里Iconfont图标字体技术显示图标。
3.1.3 网页优化细节 --- head区代码规范
head区是指html代码的<head>和</head>之间的内容。必须加入的标签：
- 公司版权注释
- 网页显示字符集
万国码：<meta http-equiv="content-type" content="text/html; charset=utf-8">
简体中文：<meta http-equiv="content-type" content="text/html; charset=gb2312"> - 网页制作者信息 <meta name="author" content="webmaster@maketown.com">
- 网站简介 <meta name="description" content="xxxxxxxxxxxxxxxxxxxxxxxxxx">
- 搜索关键字 <meta name="keywords" content="xxxx,xxxx,xxx,xxxxx,xxxx,">
- 网页标题 <title>xxx</title>
- 网页的css规范 <link href="../css/style.css" rel="stylesheet" type="text/css">
可以选择加入的标签
- 设定网页缓存的到期时间。一旦网页过期，必须到源服务器上重新调阅。
<meta http-equiv="expires" content="wed, 26 feb 1997 08：21：57 gmt"> - 禁止浏览器从本地机的缓存中调阅页面内容。
<meta http-equiv="pragma" content="no-cache"> - 网页不会被缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0"> - 用来防止别人在框架里调用你的页面。
<meta http-equiv="window-target" content="_top"> - 自动跳转。
<meta http-equiv="refresh" content="5;url=http：//www.yahoo.com"> 5指时间停留5秒 - 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<meta name="robots" content="none"> content的参数有all,none,index,noindex,follow,nofollow。默认是all。 - 收藏夹图标 <link rel="shortcut icon" href="shortcut.ico" type="image/x-icon" class="ico">
- 所有的javascript的调用尽量采取外部调用.
<script language="javascript" src="script.js"></script>
3.1.4 网页优化细节 ---- 文本
- 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用
来人工干预分段。 - 请不要在网页中连续出现多于一个的 （空格）也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 。
- 排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记。
3.1.5 网页优化细节 ---- 链接
- 网站中的链接路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：<a href=”aboutus/index.htm”> 而应该这样：<a href=”aboutus/”>，所有内页指向首页的链接写成<a href=”/”>
- 在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端，从而影响用户正常的阅读内容，我们用代码“javascript:;”代替原来的“#”标记
3.1.6 网页制作细节 ---- 下载速度
首页flash 网页大小应限定在 200k 以下，尽可能的使用矢量图形和action来减小动画大小。非首页静态页面含图片大小应限定在 70k 左右，尽可能的使用背景颜色替换大块同色图片。
3.1.7 网页制作细节 ---- alt和title
都是提示性语言标签，请注意它们之间的区别。
在我们浏览网页时，当鼠标停留在图片对象或文字链接上时，在鼠标的右下角有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合，它的作用是很重要的。
alt 用来给图片来提示的。title用来给链接文字或普通文字提示的。
用法如下：
<p title="给段落的文字提示">文字</p>
<a href="#" title="给链接的文字提示">链接</a>
<img src="img.jpg" alt="图片不存在的文字提示">
3.1.8 图片处理细节 ---- logo的国际标准规范
为了便于internet上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的logo，目前有三种规格：
8831 这是互联网上最普遍的logo规格。
12060 这种规格用于一般大小的logo。
120*90 这种规格用于大型logo。
网友评论