HTML知识杂记

  

基本概念.........................................................................................................................3

两种软件结构：......................................................................................................3

动态网站和静态网站的区别：................................................................................3

域名的基本解析流程：...........................................................................................3

域名解析记录的分类：...........................................................................................4

A记录，CNAME记录，MX记录的不同之处：.....................................................4

URL统一资源定位符的结构：...............................................................................4

HTML基础.....................................................................................................................4

命名规则..................................................................................................................4

路径规则..................................................................................................................4

注释.........................................................................................................................5

HTML的实体引用...................................................................................................5

常用的html实体....................................................................................................5

DTD文件：....................................................................................................................6

文档头部标记.................................................................................................................6

文字版面编辑标签..........................................................................................................8

Body标签........................................................................................................................9

超链接标签<a></a>........................................................................................................9

图像标签<img />.............................................................................................................9

HTML表格...................................................................................................................10

框架..............................................................................................................................10

表单...............................................................................................................................11

单选框....................................................................................................................13

复选框....................................................................................................................13

菜单下拉列表域.....................................................................................................13

杂记..............................................................................................................................14

关于单字节字符.....................................................................................................14

Robots文件............................................................................................................14

通用HTML标签的属性.........................................................................................14

空表格如何显示?...................................................................................................14

基本概念

 

两种软件结构：

B/S结构   browers/server  如：WEBQQ  ，网页版邮箱

B/S不需要安装客户端，浏览器完成所有的操作，用户操作系统已经集成了浏览器客户端。

C/S结构      client/server      如：QQ，穿越火线，连连看在线版

C/S 需要安装客户端软件才能运行，系统升级和软件的更新不方便

 

动态网站和静态网站的区别：

动态网站需要与数据库连接起来使用。【与不同用户有不同的请求和交互】

静态网站通常是纯的.html页面，只做一件事情，就是请求和响应。

 

域名的基本解析流程：

域名解析成功之后通常2-48个小时才能完成全球同步。因为反复去找域名解析服务器进行解析太浪费资源，因此，将它暂时存起来，需要的时候，我就直接从缓存里面读取出来，直接给用户，减少我跑腿的过程。

 

域名解析记录的分类：

A记录                   指向一个具体的IP地址

CNAME记录                 别名记录，指到一个域名上面，这个域名解析变了，指到这个别名的所有域名解析全部发生变化。

MX邮件交换记录            邮件记录，如果你未来要设置企业邮箱的时候，就需要把mx记录指到邮件服务器上面去。

 

URL隐性转发         被阉割

URL显示转发         被阉割了

 

 

A记录，CNAME记录，MX记录的不同之处：

      A记录指向一个具体的IP地址，而CNAME指的是别名记录，指向一个域名上面，通常为指向A记录，这个域名解析变了，知道这个别名的所有域名解析全部发生变化。

       MX邮件交换记录，设置企业邮箱时需要把mx记录指到邮件服务器上。

 

URL统一资源定位符的结构：

      第一段为协议

              如：http://、ftp://、https://

                     https://为安全的http连接。

       第二段为主机名

       第三段为端口：

http协议默认端口为80端口，通常情况下不改。也不在同一台服务器上面架设多个网页服务器。

    第四段为文件路径:

        如：index.html      a/b/c/index.html   /more/index.html

 

HTML基础

命名规则

文件命名不要用中文，不要用特殊符号，不要中间加空格。英文，数字，下线划。

 

路径规则

      相对路径【相对于当前访问的文件】

      ./     当前目录

       ../    上级目录

       绝对路径

 

基于站点的绝对路径：

例如：你访问的是http://www.baidu.com或者http://127.0.0.1/，你访问这个网站的时候，如果你背景图片的链接，或者超链接，或者图片链接等链接全部是写的/fj.jpg，那这个/即为http://当前站点/fj.jpg(也即远程站点根目录)

在本地访问的时候，/就是指当前文件所在磁盘的分区：当前文件如果放在D盘，在自己的电脑上面打开的时候，/就指代访问文件所在的分区。  /== d:/  (也即本地磁盘根目录)

      

       远程站点的绝对路径：

例如：远程站点绝对路径：http://www.baidu.com/img/baidu_sylogo1.gif

请记住：一定要加http://

 

       本地文件系统的绝对路径：

f:/10086/fj3.jpg

file:///f:/10086/fj3.jpg

 

注释

作用：  1，很好的方便团队协作

2，能够帮你排错，快速定位错误

3，能够方便记忆，提高工作效率

 

 

HTML的实体引用

             

常用的html实体

显示结果

描述

实体名称

实体编号

 

空格

&nbsp;

&#160;

< 

小于号

&lt;

&#60;

> 

大于号

&gt;

&#62;

&

和号

&amp;

&#38;

"

引号

&quot;

&#34;

'

撇号(IE不支持)

&apos;

&#39;

¢

分

&cent;

&#162;

£

镑

&pound;

&#163;

\xB0

度

°未知实体

\ x B 0

¥

元

&yen;

&#165;

§

节

&sect;

&#167;

©

版权

&copy;

&#169;

®

注册商标

&reg;

&#174;

™

注册中商标

&trade;

未知

×

乘号

&times;

&#215;

÷

除号

&divide;

&#247;

@

at符号

未知

&#229;

»

 

 

&raquo;

 

DTD文件：

主要的作用是用来定规范使用。先要加载dtd让网页遵循哪个规范来进行解释。

 

文档头部标记

1、<title>网页标题</title>            在搜索引擎页面也是作为标题显示

2、<base href=”URL”  target=”WINDOW_NAME”/>

href定义了网页文件中相对路径的基准路径，一篇文章中的<base />标记最多只能有一个，而且必须放于头部，并且应该在任何包含URL地址的语句之前。

对于src图片资源链接也有效，

外部站点的绝对路径不会被加上基准地址。

       Target能让整个网页超链接得打开方式统一变化，除了单独设置的超链接之外

target属性的值包括：

              _self：在当前窗口中打开连接文件（默认值）。

              _blank：开启一个新的窗口打开连接文件。

              _parent：在父级窗口中打开文件，常用于框架页面。

              _top：在顶层窗口中打开文件，常用于框架页面。

 

      

3、<link rel=”stylesheet”  href=”style.css”  type=”text/css” />

link标签定义了当前文档和另外一个文档或资源之间的关系。type属性的值通常为text/css(连接css文件)，text/javascript(连接javascript文件)。

        

4、<meta name=””  content=”” />                 name加入网页描述信息

     <meta  http-equiv=”” content=”” />        http-equiv模拟http响应的消息头

 

 

     元信息标记，定义了文件信息的名称、内容等重要信息。如：关键字、作者、描述、编码和语言等多种信息。

    

 

NAME属性常用值

对应的content

keywords

description

author

copyright

generator

robots

 

 

 

 

 

网页的关键字，用逗号分隔开

网站描述信息，在搜索引擎结果中显示

作者

版权信息

使用什么工具生成的

index

noindex

follow

nofollow

all

none

允许通过当前网页，向其他页面爬行

不允许爬行

准许抓取当前页面

不准许抓取当前页面

准许抓取也准许爬行

不准抓取，也不准爬行

 

 

 

 

http-equiv属性常用值

Content-Type           例如：

<meta  http-equiv=”content-type” content=”text/html;charset=utf-8” />

Refresh                     例如：

<meta  http-equiv=”Refresh” content=”1;url=http://www.baidu.com”/>

     1秒后转向百度页面

Expries                     例如：

<meta  http-equiv=”Expries” content=”Mon, 12 may 2006 00:20:00 GMT” />

将content设置为0，可以禁止浏览器使用缓存页面。

Windows-Target       例如：

<meta  http-equiv=”Windows-Target” content=”_top”       />

防止别人使用frame调用自己的页面

Pragma

Page-Enter和Page-Exit

 

 

 

 

 

文字版面编辑标签

 

    格式标签

    <br />

  <nobr></nobr>              使用此标签避免文本换行

    <p></p>

    <center></center>

    <pre></pre>

    <ol  start=”x”  type=”a”>

           <li></li>

    </ol>

 

type=1 / a / A / i / I

 

    <ul  type=””>

           <li></li>

    </ul>

type=disc(圆黑点)/cicrle(空心圆黑点)/square(方块黑点)

 

    <hr size=”” color=”” width=”” noshade />                   

  <dl>

     <dt>标题</dt>

     <dd>内容</dd>

  </dl>

  <blockquote></blockquote>        用于某一段文字引用自什么地方，两边留白

  <marquee  behavior=”scroll/slide/alternate”></marquee>   滚动文字 

 

 

       文本标签

       <hn></hn>

       <b></b>、<strong></strong>

       <i></i>、<cite></cite>、<em></em>

       <u></u>

       

       

       <tt></tt>

       <small></small>

       <big></big>

       <font></font>

   <a href=”http://” target=”” title=””></a>

 

n为1~6

加粗

斜体

下划线

下标

上标

打字机文字

小型字体

大型字体

常用属性color，size(1~7),fcae

  可以使用name定义锚点

 

 

 

 

 

Body标签

 

       BODY标签常用属性

 

       text

       bgcolor

       background

       bgproperties

       link

       alink

       vlink

       topmargin

       leftmargin

 

页面文字颜色

页面背景颜色

页面背景图片，直接写图片路径

设定背景图像固定

链接默认颜色

鼠标点击链接时颜色

访问后链接颜色

上边距

下边距

 

 

 

超链接标签<a></a>

       target

       href

       title

       rel

_self/_blank/_top/_parent/[frame_name]

mailto:email，../，./，外部站点绝对链接，[page_name]#[a_name]

用来堆积关键词

 

       使用超链接定义的页面锚点

       <a href=”#a1”>链接到name为a1的锚点位置</a>

       <a name=”a1”>锚点</a>

       <a href=”page_name#a1”>跨页面链接到锚点</a>

 

图像标签<img />

 

       属性

src=””

       width

       height

       alt

       title

       border

 

Source(来源)

 

 

 

同alt，主要用来解决alt在火狐下面不兼容的问题

加上图片超链接时，最好将此值设置为0

       图像地图

       <img  src=””  usemap=”map_name” />

       <map  name=”map_name” >

          <area shape=”rect(矩形)/poly(多边形)/circle(圆形)”  coords=”” href=””/>       </map>

 

HTML表格

 

<table></table>

 

 

 

外框 上、左边框，内框 下、右边框为亮光

外框 下、右边框，内框 上、左边框为暗光

外边框和内边距之间间距(无单位)

表格内容距各边框的距离(无单位)

 

 

       bgcolor

       bordercolor

       bordercolorlight

       bordercolordark

       cellspacing

       cellpadding

       width

       height

 

       <tr></tr>

 

 

left(默认)、center、right

middle(默认)、top、bottom

       bgcolor

       align

       valign

       bordercolorlight

       bordercolordark

 

       <td></td>

 

 

 

 

 

跨行

跨列

强制不换行

       width

       height

       align

       valign

       rowspan

       colspan

       nowrap

       bordercolorlight

       bordercolordark

 

       <th></th>                          标题，实现表格头行加粗

       <caption></caption>         表格的标头

 

 

框架

      写框架时代码中不能存在<body>标签，不能出现body内的任何文字或图片

       <frameset></frameset>

       <frame />

       <iframe />用在body体里面嵌套其他页面或内容

       <noframe></noframe>用在浏览器不支持分帧的时候使用

 

 

      

<frameset></frameset>

 

像素数或%，左右分隔，*表示剩余部分

像素数或%，上下分隔，*表示剩余部分

布尔值，指定是否显示边框，0或1

设置边框粗细，默认5像素

设定框架不能够调节

       cols

       rows

       border    frameborder

 

       noresize

 

       <frame />

 

 

 

 

指定是否要显示滚动条，auto(根据需要出现)/yes/no

 

 

       src

       name

       noresize

       scrolling

       frameborder

       border

 

示例代码：

<frameset rows="80%,*" border="2">

              <frameset cols="20%,*">

                     <frame src="left.html" name="left" noresize scrolling="no" />

                     <frame src="right.html" name="right" noresize scrolling="no" />

              </frameset>

              <frame src="bottom.html" name="bottom" noresize scrolling="no" />

       </frameset>

 

 

 

 

表单

       在表单中一定要取名字，不然就无法向服务器提交数据

       如果未对action属性赋值，则表单将提交至当前页

一个form表单当中可以有多个submit，即使是submit，它只要取了名字，它的值也可以被提交。

disable值用来设置禁用表单控件，button、input、textarea、optgroup、option、select元素都支持该属性，禁止的控件的值不与表单一起提交

 

 

 

 

 

 

 

 

表单标签

 

 

 

可以有内容，但不要回车、换行、缩进

为指定id的控件提供文字焦点

Accesskey为快捷键

<form></form>

<input type=""  name=""  value="" />

<textarea></textareat>

<label  for="某id" accesskey="" >文字</label>

<select name="" size=""  multiple>

  <optgroup label=>

<option  value=""  selected></option>

      …

  </optgroup>

</select>

Optgroup的label用来定义成组选项的组名

 

 

 

 

<fieldset>

  <lengend align= "top|bottom|left|right" >表单集说明标签</lengend>

  …其他表单控件元素…

</fieldset>

表单域控件使用在<form>标签体内

 

 

       <form></form>    

 

表单名称

传递方法 GET/POST

提交地址

name

       method

       action

       enctype

 

application/x-www-form-urlencoded(默认)

multipart/form-data 上传文件时使用这个值

       target

用来指定服务器返回结果显示的目标窗口或目标帧

 

 

<input />

 

 

 

 

 

Type

    text

    password

    submit

    reset

    button

    radio

    checkbox

    Hidden

  image

name

 将所有value值重置

配合.js使用

name值应相同，value值不同

name值为空数组

隐藏控件，用于提交服务器需要的某些值

图片提交按钮

value

size

maxlength

 

  指定空间宽度，表示所能显示的最大字符数

表示文本框允许输入的最大字符数

 

 

单选框

 

<input type="radio" name="sex" value="0" id="sex_female" />

<label for="sex_female">女</label>

<input type="radio" name="sex" value="1" id="sex_male" />

<label for="sex_male">男</label>

<input type="radio" name="sex" value="2" id="sex_secret" />

<label for="sex_secret">保密</label>

 

 

复选框

 

<input type="checkbox" name="sports[]" value="cl" id="1"/>

<label for="1">冲浪</label>

<input type="checkbox" name="sports[]" value="ps" id="2" />

<label for="2">爬山</label>

<input type="checkbox" name="sports[]" value="hx" id="3" />

<label for="3">滑雪</label>

 

 

多行文本框

切记不要在文本域中加上回车、换行、缩进

<textarea name="ms" cols="50" rows="5"></textarea>   

 

 

 

       菜单下拉列表域

 

 

如果option没有加上value值则提交option标签内包含的值，如果有value值则提交value值

    <select name="job"  size="2" [multiple]>

           <option>--请选择--</option>

           <option>学生</option>

           <option>军人</option>

           <option>医生</option>

           <option>教师</option>

           <option>工程师</option>

    </select>

 

 

 

杂记

      关于单字节字符

       在写英文、数字这些半角字符是，它不会换行，如果超出页面宽度，在第一个特殊符号（双字节字符如：中文，属于特殊符号）处才会换行。

      

       Robots文件

       在网站根目录robots.txt文件，搜索引擎来到网站后首先读取该文件，在该文件内定义搜索引擎抓取规则。

简单示例：

              User-agent:Badiduspider  对百度spider定义规则

              disallow:/                           禁止抓取网站根目录所有页面

              disallow:/jpg$                    禁止抓取图片

              User-agent:*                      对所有搜索引擎定义规则

 

       通用HTML标签的属性

              id

              name

              class

              style

 

 

       空表格如何显示?

       如果列标签当中啥都没写，这个列不会展开。如果你要做一个空白列，请在中间加上$nbsp;