2017.08.13

New

  1. html 超文本标记语言

网页的内容需在<html>标签中，标题、字符格式、语言、样式、关键字、描述等信息显示在<head>标签中，而网页展示的内容需嵌套在<body>标签中。

  • 标签通常是成对出现的，一开一关，注意给关闭标签添加“／”
  • 代码缩进
  • 标签通常小写
  • h标签对标题进行突出，逐级使用勿滥用
  • b／i／em／strong 等标签会增加SEO权重，可以用来包含关键词
  1. 文本修饰标签

h1-6、(b、strong)、(i、em)、(s、del)

  1. 标签的属性和嵌套 <font color="blue" size="2">听妈妈的话</font> <h2 align="center"><font color="red">未来</font>科学家</h2>

  2. 各标签之间可以互相嵌套，但是不要交叉

  3. 标签嵌套时，可以将子标签向后缩进

  4. 常见的区块标签： p,span,div

  5. 常见的单标签： hr,br, <hr width="500" align="center" color="red">
  6. pre 标签，原样显示代码中内容
  7. 字符实体：hmtl中是忽略空格和回车的，输入多个只会显示一个空格，需用

  8. 注释（）不能嵌套

  9. 超链接 ` 超链接标签如果在没有添加目标属性target的情况下，默认的打开方式是_self本窗口打开，超级链接的链接地址可以是多种形式，网络地址、本地地址、图片等都可以。

  10. 锚记跳转： <a href="#name"></a> ... <a name="name">any where</a>

  11. 图像元素

<img src="绝对地址／相对地址／网路地址" alt="seo/lose" title="mouseover-display" width="" height="">

  • 图像热点地图

    <img src="images/img.jpg" usemap="#mymap">
<map name="mymap">
  <area shape="rect" coords="x1,y1,x2,y2" href="#" alt target> <!-- 矩形，左上角顶点坐标，右下坐标 -->
  <area shape="circle" coords="x,y,radius" href="#">
  <!-- 圆形，圆心坐标，半径长度 -->
  <area shape="poly" coords="x1,y1,x2,y2,xn,yn" href="#">
  <!-- 多边形，各个点坐标 -->
</map>

  • 表格

    <table width border cellspacing cellpadding align>
<tr align width valign>
<td height align bgcolor></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

  • 细线表格的做法

    <table cellspacing="1" border="0" bgcolor="#333">
<thead>
  <caption>title</caption>
  <tr bgcolor="#fff">
    <th width="100">1</th>
    <th width="100">2</th>
    <th width="100">3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</tfoot>
</table>

  • 列表元素 ol ul dl>dt>dd

  • 表单元素

    <form action="" method target name>
<!-- name属性可以很好的区别一个页面下面的多个form标签使用 -->
<input type="text" name="username">
<input type="email" name="" id="">
<input type="image" src="" alt=""><!-- 插入图像的按钮 -->
<input type="checkbox" name="" id="">
<input type="radio" name="" id="">
<input type="submit" value="">
<input type="reset" value="">
<select name="" size="2">
<optgroup label="groupName">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</optgroup>
</select>
<textarea name cols="" rows ></textarea>
</form>

  • label 标签的使用

    <!-- 1. -->
<label for="idNmae"></label> <input type="" name id="idName">
<!-- 2. -->
<label><input type="" name=""></label>

  • frameset 的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
</head>

<frameset cols="25%,50%,25%" frameborder="0">
  <frame src="url" name="" scrolling="auto" noresize="" marginwidth=""></frame>
  <frame src ></frame>
  <frame></frame>
</frameset>
<frameset rows="25%,50%,25%" frameborder="0">
  <frame src="url"></frame>
  <frame src ></frame>
  <frame></frame>
   <!-- 重点是： target frame 跳转 -->
</frameset>

</html>

  1. 页头meta标签

  2. meta标签的http标题信息

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

meta标签的http-equiv属性语法格式是：

<meta http-equiv="参数" content="参数变量值"/> 其中http-equiv属性主要有以下几种参数：

（1）expires(期限)

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

举例：

<meta http-equiv="expires" content="Wed, 20 June 2016 10:30:00 GMT"> 注意：必须使用GMT的时间格式。

（2）pragma(cache模式)

说明：禁止浏览器从本地计算机的缓存中调阅页面内容。

举例：

<meta http-equiv="pragma" content="no-cache"/> 注意：这样设定，访问者将无法脱机浏览。

（3）refresh(刷新)

说明：定时刷新让网页自动链接到其它网页。

举例：

<meta http-equiv="refresh" content="5;URL=http://www.baidu.com"/> 注意：其中的5是指停留5秒钟后自动刷新到URL网址，秒数和URL直接用分号隔开。

（4）content-type(显示字符集的设定)

说明：设定页面使用的字符集。

举例：

<meta http-equiv="content-type" content="text/html; charset=utf-8" /> charset选项：

GB2312、GBK和UTF-8都是一种字符编码，除此之外，还有好多字符编码。只是对于我们中国人的网站来说，用这三种编码比较多。

UTF-8 （UTF-8包含全世界所有国家需要用到的字符，是国际编码，通用性强，又称万国码。如：阿里云、淘宝网等都采用这种编码方式） GBK （GBK是包括中日韩字符的大字符集合。如：京东网采用的是GBK编码） GB2312 （GB2312是GBK的子集，是一种简体中文编码，通行于中国大陆。如：腾讯网、网易等都采用该种编码）

  • meta标签的页面描述信息

name是描述网页的，对应于content（网页内容），以便于搜索引擎机器人查找、分类，目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类。

meta标签的name属性语法格式：

<meta name="参数" content="具体参数值" /> （1）keywords (关键字)

说明：告诉搜索引擎你网页的关键字是什么。

举例：

<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"> 注意：上面代码来自于京东网，关键词之间用英文逗号隔开。

（2）description (网页描述)

说明：description用来告诉搜索引擎你的网页主要内容。

举例：

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"> fpYd9OJh1n4hXYA2.png

上图是从百度搜索京东，红框内的信息就是meta标签，description描述的内容。

（3）robots (机器人向导)

说明： robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all、none、index、noindex、follow、nofollow。默认是all。

举例：

<meta name="robots" content="all"/> 参数说明：

all：搜索引擎将索引此网页，且页面上的链接可以被查询，等价于index和follow

none：搜索引擎将忽略此网页，且页面上的链接不可以被查询，等价于noindex和nofollow

index：文件将被索引

follow：搜索引擎通过此网页的链接，索引搜索其它的网页。

noindex：文件将不被检索，但网页中的链接，可以索引搜索其它的网页

nofollow：文件将不被检索，搜索引擎不可以通过此网页的链接，继续索引其它网页

（4）author (作者)

说明：标注网页的作者或制作组。

举例：

<meta name="author" content="作者的名字"/>

results matching ""

    No results matching ""