HTML

概述：

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)

HTML文档

基本代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. </body>
  10. </html>

文档树

Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

有和无的区别
  1. BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
  2. CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

有，用什么？

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

问题产生：

当Netscape4（译注：网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题（bugs），但是依然延续CSS实现中的其它故障（主要是盒模型（box model）问题）。

为了保证自己的网站在不同的浏览器中都能正确展现，网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。

然而随着标准一致性变得越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现，完整去遵循标准，会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS，陈旧的网站显示必然受到影响。

因此立即遵循标准会产生问题，然而忽略标准则又会维持浏览器大战时（译注：微软和网景之间的一段竞争）所产生的混乱

解决方案：

  1. 允许网站开发者能够选择他们所熟知的模式。
  2. 依然使用旧式规则显示陈旧的网站。

换句话说，所有的浏览器需要提供两种模式：怪异模式（即兼容模式）服务于旧式规则，严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式，Mozilla， Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。

选择使用哪种模式需要一个触发器，而 “DOCTYP切换” 则用于此目的。依照标准：任何一个(X)HTML文档必须拥有一个DOCTYPE（译注：DTD（文档类型定义）是一组机器可读的规则，它们指示 (X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明）用以告诉其他人 这个文档的类型风格

  1. 产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式：既依据旧式的CSS规则渲染网页。
  2. 相反，如果开发者明确知道包含DOCTYPE，他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式：即依据标准的CSS规则渲染网页。
  3. 任何新的或未知的DOCTYPE将触发严格模式。
  4. 一些页面依据怪异模式而写，但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式，参照下面的浏览器比较图表

Head Part

1、Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

1、页面编码

  1. <meta charset="UTF-8">  #指定编码类型为UTF-8

2、刷新和跳转

  1. <meta http-equiv="refresh" content="5">  #指定每5秒刷新一次
    <meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒之后跳转页面至另一个网页

3、关键字

关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。

  1. <meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区">

4、描述

例如cnblog里的就是一个描述：

  1. <meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

5、X-UA-Compatible

X-UA-Compatible  这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

2、title

网页头部信息，如下图所示：

3、Link

网页头部的图标

  1. <link rel="shortcut icon" href="favicon.ico">

效果图如下：

导入CSS类似python中导入模块类似

  1. <link rel="stylesheet" href="css/css_model.css">

4、Style

1、在当前文件中写Css样式

2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用

  1. < style type="text/css" >
  2. .bb{
  3.       background-color: red;
  4.    }
  5. < /style>

5、Script

1、在当前文件中写JS

2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

  1. 引进文件
  2. < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
  3.  
  4. 写js代码
  5. < script type="text/javascript" > ... </script >

Body part

1、body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小如下图：

块级别标签&内联标签：

  1. <!--内联和块级-->
  2.     <div style="background-color: red;">12</div>
  3.     <span style="background-color: green;">12</span>

2、特殊符号特殊处理

举例来说<p>是段落标签，如果我想输出<p>这个字符串，而不是想获取<p>的样式怎么办呢？

  1. <div>
  2.         &lt;p&nbsp;&gt;
  3. </div>

所以特殊符号有自己的定义更多请看连接：更多

常用标签

标签一般分为两种：块级标签 和 行内标签

  • a、span、select 等
  • div、h1、p 等

 1、<p></p>标签和<br/>标签

<p></p>标签：段落标签，每一对p标签为一段,代码如下

  1. <p>dsfadfds<br />dasfasdfasf</p>
    <p>dsfasfasdsfafafdasdfa</p>
    <p>dafdsfdsf<br /></p>

# <br />为换行标签

显示效果如下：

2、<a></a>标签

<a></a>标签用来跳转和锚

<a>标签之：跳转

默认如果在<a><a/>标签中不设置那么他仅仅在浏览器中显示文本，如下面代码

  1.  <a>a标签</a>

指定跳转后，代码如下

  1.  <a href="http://www.baidu.com">跳转1</a>

如果让他用一个新的tab中打开连接地址代码如下：

  1. <a href="http://www.baidu.com" target="_blank">跳转2</a>

显示效果如下

<a>标签之：锚

锚的作用是类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置

  1.  <a href="#a2">
  2.         书签
  3.     </a>
  4.     <!--在标签里，ID是这个标签的唯一的值，我们在做锚的时候指定他的ID即可-->
  5.     <!--<a href="#a2"> 上面的代码href="#要跳转的标签"-->
  6.     <div id="a1" style="height:700px;">
  7.         mark_1
  8.     </div>
  9.  
  10.     <div id="a2" style="height:700px;">
  11.         mark_2
  12.     </div>

上面的代码中，如果点击了书签之后，那么就会跳转到id=a2的书签的位置！

3、H标签

即标题标签,代码如下

  1. <h1>a</h1>
  2. <h2>a</h2>
  3. <h3>a</h3>
  4. <h4>a</h4>
  5. <h5>a</h5>

h标签可以自定义显示效果，如下代码

  1. <h6 style="font-size: 65px;">a</h6>

显示效果如下：

4、Select标签

第一种select标签

  1. <!--第一种select标签-->
    <select>
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3" selected="selected">广州</option>
    <!--这里默认是广州因为selected="selected" 这里设置了默认的！-->
    </select>
    <!--第二种select标签-->
    <select size="2">
        <option>上海</option>
        <option>北京</option>
        <option>广州</option>
        <option>山东</option>
    </select>
    <!--第三种select标签,可以进行多选-->
    <select multiple="multiple" size="2">
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>山东</option>
    </select>
  1. <!--第4中select标签，可以进行分组-->
  1. <select>
    <optgroup label="河北省">
        <option>石家庄</option>
        <option>邯郸</option>
    </optgroup>
    <optgroup label="北京">
        <option>朝阳</option>
        <option>海淀</option>
    </optgroup>
    </select>

显示效果如下：

5、input系列标签

input:checkbox标签-复选框

  1.  <p>爱好(复选框):
  2.                     <br /> 男1<input type="checkbox" value="1">
  3.                     <br /> 男2<input type="checkbox" value="2">
  4.                     <br /> 男3<input type="checkbox" value="3">
  5.                     <br /> 男4<input type="checkbox" value="4">
  6.                     <br /> 男5<input type="checkbox" value="5">
  7.  </p>

input:radio标签-单选框

  1. <p>性别(单选框):
  2.                     <br /> 男<input type="radio" name="gender" value="1">
  3.                     <br /> 女<input type="radio" name="gender" value="0">
  4.  </p>

input:text & password 输入框

  1. <p>用户名: <input type="text" value="user"/> </p>
  2.  <p>密码: <input type="password" value="pwd"/> </p>

input:button & submit 提交按钮, reset重置按钮

  1. <input type="submit" value="submit"/>
  2. <input type="button" value="button"/>
  3. <input type="reset"  value="reset"/>

file标签-用来提交文件时使用

  1. <p>文件: <input type="file"/></p>

多行文本框

  1. <p>备注 :<textarea></textarea></p>

form表单

  1. <form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">
        <!--这里action是告诉html提交到那里-->
        <!--method是通过什么方法去action指定的地址-->
        <div style="border: 1px solid red">
            <p>用户名: <input type="text" name="user"/> </p>
            <!--这里的name="user" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
            <!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
            <p>密码: <input type="password" name="pwd"/> </p>
            <!--这里的name="pwd" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
            <!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
    　　
  1. 　　<br /> 男<input type="radio" name="gender" value="1">
    　　<br /> 女<input type="radio" name="gender" value="0">
    　　
  1. 　　<select name="city">
        　　<option value="1">北京</option>
        　　<option value="2">上海</option>
        　　<option value="3">广州</option>
    　　</select>
    　　<!--这里在选择之后，会把选择的value值赋予给name，当用户点击提交后就会提交到后台-->
    </form>

8、label标签

有一种情况，看下图，在不使用label标签的时候，我们只能点进框体里去，否则就不能输入或选择，这样用户体验不是很好：

代码如下：

  1.  <!--使用label标签，代码如下-->
  2.                 <div>
  3.                     <label for="name_1">
  4.                     姓名:
  5.                     <input id="name_1" type="text"/>
  6.                     </label>
  7.  
  8.                     <label for="name_2">
  9.                     婚否:<input id="name_2" type="checkbox"/>
  10.                     </label>
  11.                 </div>

显示效果，这里我选择文字的时候也会进入到相应的框体，他类似一个跳转：

以上效果如下：

完整代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Test</title>
  6. </head>
  7. <body>
  8.         <form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">
  9.             <!--这里action是告诉html提交到那里-->
  10.             <!--method是通过什么方法去action指定的地址-->
  11.             <div style="border: 1px solid red">
  12.                 <p>用户名: <input type="text" name="user"/> </p>
  13.                 <!--这里的name="user" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
  14.                 <!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
  15.                 <p>密码: <input type="password" name="pwd"/> </p>
  16.                 <!--这里的name="pwd" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
  17.                 <!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
  18.                 <p>邮箱: <input type="email"/> </p>
  19.                 <p>性别(单选框):
  20.                     <br /> 男<input type="radio"  value="1">
  21.                     <br /> 女<input type="radio"  value="0">
  22.                     <hr>
  23.                     <br /> 男<input type="radio" name="gender" value="1">
  24.                     <br /> 女<input type="radio" name="gender" value="0">
  25.                 </p>
  26.                 <p>爱好(复选框):
  27.                     <br /> 男1<input type="checkbox" value="1">
  28.                     <br /> 男2<input type="checkbox" value="2">
  29.                     <br /> 男3<input type="checkbox" value="3">
  30.                     <br /> 男4<input type="checkbox" value="4">
  31.                     <br /> 男5<input type="checkbox" value="5">
  32.                 </p>
  33.                 <p>城市:
  34.                     <select name="city">
  35.                         <option value="1">北京</option>
  36.                         <option value="2">上海</option>
  37.                         <option value="3">广州</option>
  38.                     </select>
  39.                     <!--这里在选择之后，会把选择的value值赋予给name，当用户点击提交后就会提交到后台-->
  40.                     <!--<select multiple>-->
  41.                         <!--<option>北京</option>-->
  42.                         <!--<option>上海</option>-->
  43.                         <!--<option>广州</option>-->
  44.                     </select>
  45.                     <select>
  46.                         <optgroup label="AAA">
  47.                             <option>上海</option>
  48.                             <option>北京</option>
  49.                         </optgroup>
  50.                         <optgroup label="BBB">
  51.                             <option>广州</option>
  52.                         </optgroup>
  53.                     </select>
  54.                 </p>
  55.                 <p>文件: <input type="file"/></p>
  56.                 <p>备注 :<textarea></textarea></p>
  57.                  <!--使用label标签，代码如下-->
  58.                 <div>
  59.                     <label for="name_1">
  60.                     姓名:
  61.                     <input id="name_1" type="text"/>
  62.                     </label>
  63.  
  64.                     <label for="name_2">
  65.                     婚否:<input id="name_2" type="checkbox"/>
  66.                     </label>
  67.                 </div>
  68.                 <input type="submit" value="submit"/>
  69.                 <input type="button" value="button"/>
  70.                 <input type="reset"  value="reset"/>
  71.             </div>
  72.         </form>
  73. </body>
  74. </html>

列表 ul/ol/dl

代码如下：

  1. <!--ul列表在前面自动加“点”，代码如下：-->
  2.     <ul>
  3.     <li>line1</li>
  4.     <li>line2</li>
  5.     <li>line3</li>
  6.     </ul>
  7.     <!--ol列表在前面自动加“数字”，代码如下：-->
  8.     <ol>
  9.     <li>line1</li>
  10.     <li>line2</li>
  11.     <li>line3</li>
  12.     </ol>
  13.     <!--dl列表自动分组，代码如下：-->
  14.     <dl>
  15.     <dt>河北省</dt>
  16.     <!--dt是标签，dd是标签里的内容-->
  17.         <dd>石家庄</dd>
  18.         <dd>衡水市</dd>
  19.     <dt>山东省</dt>
  20.     <!--dt是标签，dd是标签里的内容-->
  21.         <dd>济南市</dd>
  22.         <dd>烟台市</dd>
  23.     </dl>

10、表格

  1. <table border="1">
  2.     <!--border这里是加上边框-->
  3.     <tr>
  4.         <td>1</td>
  5.         <td>2</td>
  6.         <td>3</td>
  7.     </tr>
  8.     <!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
  9.     <!--如果想加多个行就加多个tr即可-->
  10.     <tr>
  11.         <td>1</td>
  12.         <td>2</td>
  13.         <td>3</td>
  14.     </tr>
  15.     <tr>
  16.         <td>1</td>
  17.         <td>2</td>
  18.         <td>3</td>
  19.     </tr>
  20. </table>

合并单元格（以上的表格标签其实还不是很标准，正常标准的标签如下：）

  1. <table border="1" >
  2.         <thead>
  3.             <tr>
  4.                 <th colspan="2">标题一</th>
    　　　　　　　　　　<!--这里colspan，就告诉html解析的时候占2个格-->
  1.                 <!--<th>标题二</th>-->
  2.                 <th>标题三</th>
  3.             </tr>
  1. 　　　　　　<!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
  2.     　　　　<!--如果想加多个行就加多个tr即可-->
  1.         </thead>
  2.         <tbody>
  3.             <tr>
  4.                 <td rowspan="2">内容一</td>
  5.                 <td>内容二</td>
  6.                 <td>内容三</td>
  7.             </tr>
  8.             <tr>
  9.                 <!--<td>内容一</td>-->
  10.                 <td>内容二</td>
  11.                 <td>内容三</td>
  12.             </tr>
  13.             <tr>
  14.                 <td>内容一</td>
  15.                 <td>内容二</td>
  16.                 <td>内容三</td>
  17.             </tr>
  18.         </tbody>
  19.     </table>
  20.     <hr color="green">

效果如下截图：

11、fieldset标签

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <fieldset>
  9.     <legend>协议</legend>
  10.         请仔细阅读协议内容：
  11.     </fieldset>
  12.  
  13. </body>
  14. </html>

效果如下：

前端 初级篇(HTML)的更多相关文章

  1. 前端 初级篇(CSS)

    CSS 简介 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:styl ...

  2. NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者

    NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者 作者: raindy 来源:http://bbs.hanzify.org/index.php?showtopic=30029 时间: ...

  3. Java工程师学习指南 初级篇

    Java工程师学习指南 初级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...

  4. .NET Core CSharp初级篇 1-5 接口、枚举、抽象

    .NET Core CSharp初级篇 1-5 本节内容类的接口.枚举.抽象 简介 问题 如果你需要表示星期或者是某些状态,使用字符串或者数字是否不直观? 你是否发现,无论何种电脑,它的USB口的设计 ...

  5. Java工程师学习指南（初级篇）

    Java工程师学习指南 初级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...

  6. Python 正则表达式入门（初级篇）

    Python 正则表达式入门(初级篇) 本文主要为没有使用正则表达式经验的新手入门所写. 转载请写明出处 引子 首先说 正则表达式是什么? 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达 ...

  7. python 面向对象初级篇

    Python 面向对象(初级篇) 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发" ...

  8. 25个增强iOS应用程序性能的提示和技巧(初级篇)

    25个增强iOS应用程序性能的提示和技巧(初级篇) 标签: ios内存管理性能优化 2013-12-13 10:53 916人阅读 评论(0) 收藏 举报  分类: IPhone开发高级系列(34)  ...

  9. ASP.NET MVC 随想录——开始使用ASP.NET Identity，初级篇（转）

    ASP.NET MVC 随想录——开始使用ASP.NET Identity,初级篇   阅读目录 ASP.NET Identity 前世今生 建立 ASP.NET Identity 使用ASP.NET ...

随机推荐

  1. 搭建Windows Node.js环境

    利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏览器就基于V8,同时打开20-30个网页 ...

  2. zeppelin部署

    1.下载解压2.修改conf/zeppelin-env.sh,添加如下两行 export ZEPPELIN_PORT= export MASTER=spark://master:7077 3.启动 b ...

  3. Python Socket 网络编程 (客户端的编程)

    Socket 是进程间通信的一种方式,它与其他进程间通信的一个主要不同是:它能实现不同主机间的进程间通信,我们网络上各种各样的服务大多都是基于 Socket 来完成通信的,例如我们每天浏览网页.QQ ...

  4. genymotion启动报错

    启动genymotion时提示 网络配置有问题,经检查是网卡virtualBox配置的问题,把ip设为自动获取即可 重新启动就可以了

  5. Large repunit factors (Project Euler 132)

    题目大意: 求出 大数111111.....1 (1e9个1)  前40个质因子的和. 思路:可以把原来的数表示成$\frac{10^k - 1}{9}$ 其中$k=10^9$ 如果一个质数$p$ 满 ...

  6. python_selenium之xpath的使用

    python_selenium之xpath的使用 一.xpath介绍 Xpath:XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言.XPath基于X ...

  7. ios - 高效，准确的网络检测

    //网络检测 // 1.创建网络监听者管理者对象 AFNetworkReachabilityManager *manager = [AFNetworkReachabilityManager share ...

  8. CodeIgniter框架——表单辅助函数总结

    首先第一步就是载入辅助函数: $this->load->helper('form'); 函数解析: 1.form_open() 创建一个开始form标签,相对于你的配置文档中的基础URL. ...

  9. Linux 进程间通信（一）（经典IPC：消息队列、信号量、共享存储）

    有3种称作XSI IPC的IPC:消息队列.信号量.共享存储.这种类型的IPC有如下共同的特性. 每个内核中的IPC都用一个非负整数标志.标识符是IPC对象的内部名称,为了使多个合作进程能够在同一IP ...

  10. C#关于AutoResetEvent的使用介绍----修正

    说明 之前在博客园看到有位仁兄发表一篇关于AutoResetEvent介绍,看了下他写的代码,看上去没什么问题,但仔细看还是能发现问题.下图是这位仁兄代码截图. 仁兄博客地址:http://www.c ...