网页设计技巧：网站设计常用技巧

网页设计技巧有很多，今天常用于网站设计的几个技巧供大家参考使用！

技巧一：网站logo添加替代文本
给网站logo添加替代文本有两个好处：一个是能够让搜索引擎识别logo图片的含义；另一个是当图片由于延时未能够加载出来时，也能够让用户知道哪一个是你的网站logo。

具体方法如下：
① <img src="logo.png" alt="图片说明">
如果你使用背景图来作为logo的话，那么你也可以添加title属性来实现；
② <span title=“图片说明”></span>
链接+图片的方式当然是最好的，但是最好也要加上title属性；
③ <a title="图片说明">图片说明</a>

技巧二：添加基本的Landmarks
ARIA Landmarks是W3C定义的一套网站可用性规则，对于网站不同的模块添加描述性的Landmark，或者是直接叫role，这样有利于对搜索引擎更好的解释你的网页，让用户更好的使用你的网站。

<nav role="navigation">
<div id="maincontent" role="main">
<form action="search.php" role="search">

技巧三：增强focus定义
很多网站都会想尽办法去除浏览器的：focus样式，尤其是针对IE浏览器更是。其实，浏览器默认带上：focus样式也是具有一定道理性的，它能够指示用户当前的鼠标焦点的位置在哪里。对于键盘流来说是特别重要的！所以建议不要去掉：focus样式。如果你认为默认的样式不美观或是不能实现统一（IE虚线框，Webkit是高亮的实现框，并且Safari是蓝色的，Chrome是橙色的），那么你也可以自己去定义一个高亮色：

a:focus {
      outline:1px solid red;
      background:yellow;
 }

技巧四：定义必填表单项
使用aria-required属性可以定义表单中的必填项：

<input type="text" name="username" aria-required="true">

技巧五：给你的页面添加一个h1
添加h1有利于seo的优化，对网站整体的可用性和可读性都是具有一定帮助的。

技巧六：定义表格的表头
很多人习惯性的将表格全部使用td标签，其实，表格不止有hd标签，还有th、col、scope等。简单的说，表头换成th标签比较好：

<th scope="col">Date</th>

技巧七：定义表格描述
不要简单的在表格前面/后面加上一个p就完事了，表格有专用的caption标签是可以使用的，就像定义图片一样。

<table>
   <caption>Class Schedule</caption>
<tr>

技巧八：避免“单击此处”
这样的链接描述对于普遍人来说无妨，但是对于搜索引擎来说却不太友好，而且还会对一些用户产生干扰，所以一定要把链接用到该用的地方。

技巧九：去掉tabindex
以前很多人都会用tabindex来“增强”用户的体验，但是这个属性却会打乱页面的正常阅读顺序，不管对于哪一类用户来说都不是友好的。所以tabindex属性最好不要乱用。

技巧十：在线检测一下
WebAIM开发的一个网页工具，当输入URL的时候就会自动进行检测，非常的方便且实用。大家可以试一下效果！