RL也被称为网址。

URL 可以由单词组成,比如 "w3school.com.cn"，或者是因特网协议(IP)地址：192.168.1.253。

大多数人在网上冲浪时,会键入网址的域名,因为名称比数字容易记忆。

URL(Uniform Resource Locator)

当您点击 HTML 页面中的某个链接时,对应的<a>标签指向万维网上的一个地址。

统一资源定位器(URL)用于定位万维网上的文档(或其他数据)。

网址,比如 http://www.w3school.com.cn/html/index.asp,遵守以下的语法规则：

scheme://host.domain:port/path/filename

解释：

scheme 定义因特网服务的类型。最常见的类型是 http

host 定义域主机(http 的默认主机是 www)

domain 定义因特网域名，比如 w3school.com.cn

:port 定义主机上的端口号(http 的默认端口号是 80)

path 定义服务器上的路径(如果省略，则文档必须位于网站的根目录中)。

filename 定义文档/资源的名称

编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为"统一资源定位符"。

URL Schemes

以下是其中一些最流行的 scheme：

Scheme 访问 用于...

http 超文本传输协议 以 http:// 开头的普通网页。不加密。

https 安全超文本传输协议 安全网页。加密所有信息交换。

ftp 文件传输协议 用于将文件下载或上传至网站。

file 您计算机上的文件。

URL编码

URL只能使用ASCII字符集来通过因特网进行发送。

由于URL常常会包含ASCII集合之外的字符,URL 必须转换为有效的ASCII格式。

URL编码使用"%"其后跟随两位的十六进制数来替换非ASCII字符。

URL不能包含空格。URL编码通常使用+来替换空格。

URL编码表参考

http://www.w3school.com.cn/tags/html_ref_urlencode.html

页 URL 中的特殊字符 “空格” 问题

Java 代码案例

1、将一段内容和接口拼接成 URL 链接

代码示例

java复制代码public static String generateContent(String content) {
      // 将 content 进行 url 编码
      String ans;
      try {
          ans = URLEncoder.encode(content, "UTF-8");
      } catch (UnsupportedEncodingException e) {
          // 处理异常情况
          throw new RuntimeException(e);
      }

      return ans;
}

1、不带空格的处理

java复制代码public static void main(String[] args) {
    String baseUrl = "https://example.com/resource?a=";
    String content = "小黑";
    String ansUrl = baseUrl + generateContent(content);
    System.out.println("最终生成的 URL 的值为：" + ansUrl);
}

运行结果：

perl复制代码https://example.com/resource?a=%E5%B0%8F%E9%BB%91

粘贴到浏览器上会被浏览器解码出来给用户看到:

ini复制代码example.com/resource?a=小黑

网页截图：

2、带有空格的处理

java复制代码public static void main(String[] args) {
    String baseUrl = "https://example.com/resource?a=";
    String content = "小 黑";
    String ansUrl = baseUrl + generateContent(content);
    System.out.println("最终生成的 URL 的值为：" + ansUrl);
}

运行结果：

perl复制代码https://example.com/resource?a=%E5%B0%8F+%E9%BB%91

粘贴到浏览器上会被浏览器解码出来给用户看到:

ini复制代码https://example.com/resource?a=小+黑

网页截图：

3、解决空格的问题

java复制代码public static String generateContent(String content) {
      // 将 content 进行 url 编码
      String ans;
      try {
					// -----------------------调整-----------------------
          ans = URLEncoder.encode(content, "UTF-8").replace("+", "%20");
      } catch (UnsupportedEncodingException e) {
          // 处理异常情况
          throw new RuntimeException(e);
      }

      return ans;
}

public static void main(String[] args) {
    String baseUrl = "https://example.com/resource?a=";
    String content = "小 黑";
    String ansUrl = baseUrl + generateContent(content);
    System.out.println("最终生成的 URL 的值为：" + ansUrl);
}

运行结果：

perl复制代码https://example.com/resource?a=%E5%B0%8F%20%E9%BB%91

粘贴到浏览器上会被浏览器解码出来给用户看到:

ini复制代码https://example.com/resource?a=小 黑

网页截图：

其中 %20 是空格经过编码后的结果

2、问题解决的原因

从上面的案例可以看到，如果 url 中有空格出现，且不经过特殊处理，那么将会导致浏览器无法正确解析 url，从而导致 url 重定向失败，那么问题的原因是什么呢？首先来看一下URL的组成部分

1、URL 的组成部分

下面是一个简单的 URL 链接：

bash复制代码http://localhost:8080/path/to/index.html?id=123#content

它主要有下面几个部分组成

• 协议：URL 的网络传输协议,如 http、https、ftp 等。表示资源访问需使用何种协议；
• 服务器名称：表示要访问的服务器主机名或 IP 地址；
• 端口（可选）：服务器使用的端口号，如 http 默认的端口是 80，https 默认的端口是443，如果省略则使用该协议的默认端口；
• 路径：表示服务器上具体资源的路径信息：例如“/index.html”；
• 查询参数（可选）：路径后加问号开头的查询字符串，用于传递额外的参数，如”?id=123”;
• 锚点（可选）：链接内的超链接锚点定位，例如“#content”；
• HTTP请求不包括#
• #是用来指导浏览器动作的，针对浏览器起作用,对服务器端完全无用
• 访问http://www.example.com/index.html#print，浏览器实际发出的请求只是请求index.html，没有"#print"部分。
• 位于#后面的字符都是位置标识符
• 在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。 这意味着，这些字符都不会被发送到服务器端。
• 在URL中指定一个颜色值 http://www.example.com/?color=#fff 但浏览器实际发出的请求是"#fff"被省略了。只有将#转码为%23，浏览器才会将其作为实义字符处理。http://example.com/?color=%23fff
• 改变#后面的参数不会触发页面重载
• 改变#后面的参数会改变浏览器的访问历史
• 用户名密码（可选）：用于基础的 HTTP 认证的用户名和密码；

2、URL 编码中遵循的规则

在 URL 编码过程中，会遵循以下的规则：

• 空格：替换成 + （%20）
• /：分割目录和子目录
• ?：分割 URL 和查询
• %：指定特殊字符
• #：指定书签 （%23）
• &：指定分隔参数 （%26）
• =：指定参数的值（%3D）

3、为何 URL 中不允许包含空格和部分特殊字符

• URL 作为资源定位符,它需要保证各个组成部分(协议、主机名、端口、路径等)之间使用统一的分隔符,通常采用斜线"/"。如果直接使用空格,很难区分路径中的空格与路径之间的分隔；
• 早期URL标准没有规定如何处理空格等特殊字符,直接包含空格可能导致解析或匹配时产生歧义；
• 例如：http://www.example.com/products/product name.html
• 当浏览器在解析这个 URL 的时候，可能就会产生下面的歧义问题：
• 1、是否应该解析为两个路径组件"products/product"和"name.html”
• 2、搜索引擎或其他系统进行URL匹配检索时,不清楚空格是否应该作为路径分隔符来匹配； 3、攻击者可以构造歧义URL,利用空格来规避安全机制或进行异常操作；
• 包含空格特殊字符可能会破坏URL本身结构或导致安全问题；
• 包含空格可能导致传输或存储时产生问题。例如传输过程中空格是否需要编码等问题没有明确规定；

版规则

缩进

使用2个空格缩进

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

.example {
  color: blue;
}

大小写

只允许使用小写。

所有的代码都用小写字母：适用于元素名，属性，属性值（除了文本和CDATA）， 选择器，特性，特性值（除了字符串）。

<!-- 不推荐 -->
<A HREF="/">Home</A>

<!-- 推荐 -->
<img src="google.png"
alt="Google">

行为空格

建议删除行尾白空格。

<!-- 不推荐 -->
<p>What?  </p>

<!-- 推荐 -->
<p>Yes please.</p>

常规Meta规则

编码

如果没有特殊需求，一般采用utf-8编码。如果是cms站点，则遵守该站点的编码规则。

<!-- 网页编码 -->
<meta charset="utf-8">

注释

尽可能的去解释你写的代码。说明该代码包括什么、目的是什么、能做什么、为什么使用它等。

注释是否需要详尽，取决于项目的复杂程度。

一般单行注释：

<!-- col -->

模块间注释：

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循环注释：

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms输出注释：

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab选项卡内容注释：

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常规HTML设计规则

文档类型

使用html5文档声明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文档类型中的首选：

<!DOCTYPE html>

HTML 的正确性

编写有效、正确的HTML代码，否则很难达到性能上的提升。

可以使用一些工具验证你的代码，如 W3C HTML validator

HTML 的语义性

根据HTML各个元素的用途而去使用它们。

<!-- 不推荐 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

<!-- 推荐 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分标签说明：

• div 主要用于布局，分割页面的结构;
• ul/ol 主要用于无序/有序列表;
• dl/dt/dd 当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签;
• span 没有特殊的意义，可以用作排版的辅助，然后在css中定义span;
• h1-h6 标题, 根据重要性依次递减;
• h1 最重要的标题;
• label 使表单更有亲和力而且能辅助表单排版;

不推荐使用的标签：

• font 文字的外观，大小和颜色;
• u 文本下划线;
• center 居中对齐;
• s 删除线;
• strike 删除线;
• noframes 无视框时的内容;
• iframe 定义嵌入视图;
• isindex 不建议使用（可搜寻，使用input代替）;
• dir 目录式列举;
• menu 菜单列表;
• basefont 定义基本字体;
• applet 定义java程序;
• frame 定义个别视框;
• frameset 视框格式总定义;

多媒体元素降级处理

给多媒体元素，比如canvas、videos、 images增加alt属性，提高可用性（特别是常用的img标签，尽可量得加上alt属性，提供图片的描述信息）。

<!-- 不推荐 -->
<img src="world.jpg">

<!-- 推荐 -->
<img src="world.jpg"
alt="our world images">

type属性

在样式表和脚本的标签中忽略type属性。

HTML5默认type为text/css和text/javascript类型，所以没必要指定。即便是老浏览器也是支持的。

<!-- 不推荐 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推荐 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代码格式规则

每个块元素、列表元素或表格元素都独占一行，每个子元素都相对于父元素进行缩进。按设计稿划分模块，尽量使页面模块化，模块与模块之前要有清晰的注释。

如上面页面框架，推荐写法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML与SEO

页面良好层次

保证整个页面在未加载样式表时仍有较好的层次清晰的页面结构。

<!-- 不推荐 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>

<!-- 推荐 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

权重标签使用

H标签使用

• h1 权重高，体现当前网页中相对比较重要的信息，但不宜过多，建议一个页面只放一个;
• h2 可以做副标题;
• h3 可以做新闻列表;
• h4-h6 可做相关新闻的列表标签属性完整;

strong、b使用

将需要加粗的文字使用b标签来显示。

将需要强调的文字（主要指包含关键词的信息）使用strong标签来强调主要内容。

注：b是粗体标签，属于实体标签，它所包围的字符将被设为bold（粗体）；strong 是加重语气标签，属于逻辑标签，它的作用是加强字符语气。

标签属性使用

在很多情况下，a都要使用title来说明该链接的相关说明或目的意义。

例如：当使用overflow隐藏掉a中的溢出文字时，该a中的title是必不可少的，它可以告诉用户被隐藏掉的文字内容是什么；又或者当一个图片型链接出现时，该a中的title同样是必不可少的，它可以告诉用户这个图片链接是做什么用的。

注：仅在img里添加alt标签在火狐提示文字是出不来的，alt是图片加载失败或未加载完全时显示出来的提示文字，要想鼠标移上去显示提示信息应该用title，严谨的写法是img里加入alt和title这两个标签。

精简代码

代码保持精简，最优化，这样搜索引擎才更喜欢。