html基础

浏览数：144 / 时间：2015年06月09日

B/S结构网络模式

Browers(浏览器)，Server（服务器），是web后出现的一种网络结构模式。

这种模，在客户端只需要安装浏览器，剩下的工作都交给服务器来处理。

好处：客户端的压力、负荷很小、降低我们的使用成本。

B/S结构的工作原理：

（1）首先是WEB浏览器向服务器端发出请求。在浏览器的地址栏里输入网址或IP地址。每台计算机都有一个唯一的IP地址，那网址是和IP地址是一一对应的。IP地址的形式192.168.0.345，域名www.baidu.com、www.sina.com.cn

DNS域名解析器：是当你在地址栏输入域名后，将该域名转换成对应的IP地址。

（2）服务器接受请求，第一种：如果该文件是纯静态的网页(.htm或.html)，服务器直接返回；如果请求的文件是.php、.net后缀的文件(服务器端脚本程序，由服务器来处理)，先进行相应的处理，把处理的结果返给你。但是在服务器端还有一项功能：如果你访问的程序文件含有数据库内容，服务端去向数据库发出请求，将请求的结果返回给服务器端调用程序。数据库是：存储网站数据的地方(MySQL、ACCESS)。

（3）WEB服务器将查询到的结果，再返回给WEB浏览器。WEB浏览器将结果显示出来。WEB浏览器是一种解释器，或者叫翻译器。

HTML

HTML（HyperText Markup Language），超文本标注语言。是一种标准，是一种规范，是用于显示网页上各元素的标准。

标注：又叫标记，或叫标志。比如：<b>内容</b><font color=”red”>中国</font>

浏览器是一种解释器，HTML标记，它就是告诉浏览器，这个内容该如何显示？

超文本：就是加“超级链接”的文本就是超文本。

语言：不是我们所理解的编程语言，只是一标注语言。程序语言（PHP、C、JAVA）。

静态网页扩展名：.htm .html

动态网页扩展名：.php .net

HTML文件的代码结构

一个HTML文件的结构是

<html>放在文件头部

<head>

文件头内容

</head>

<body>

文件主体内容

</body>

</html>放在文件尾部

<html></html>含义：告诉浏览器，当遇到<html>标记时，把其中的所有内容按网页格式来翻译。

<head></head>叫文件头部标记。作用：是发送给浏览器的一些控制信息。

<body></body>叫文件主体内容。

HTML标记的语法

每一个标记都包围在< >内：<b>内容</b>中国

每个标记都可能有结束标记(又叫双边标记)：有开始标记<b>，有结束标记</b>

斜体文字：<i>文本内容</i>

每一个标记还可能有属性：<font color=”red”>内容</font>

语法格式：<开始标记属性=属性值属性=属性值>内容</结束标记>

属性是对标记的更多的限制。

保存快捷键：Ctrl+S

网页乱码的解决：保证网页文件的<meta>标记的编码与网页保存时的文件编码是否一致。如果不一致，将可能会产生乱码。

代码编辑器

作用：用了代码编辑器，可以加速网页代码的编写效率。

分类：一种是IDE集成开发环境，一种是增强的文本编辑器。

介绍几种代码编辑器

1) EditPlus：比较小、占用系统资源少，语法高亮显示，自动缩进等功能。但没有代码自动补齐功能。Mysql_fetch_array()。

2) Notepad++：与EditPlus相似。

3) Dreamwear：有可视化视图、有代码视图。比较大，占用系统资源相对多些。语法高亮有，代码自动补功能。

4) Zend Studio：是IDE开发环境，是常获PHP集成开发环境软件大奖。代码自动补齐功能。

EditPlut

1）常用的快捷键

新建：Ctrl+N

保存：Ctrl+S

撤消：Ctrl+Z

重做：Ctrl+Y

查找：Ctrl+F

替换：Ctrl+H

复制当前行：Ctrl+J

Tab:缩进

Shift+Tab：向左缩进，向上缩进

2）EditPlut的基本设置：工具——参数设置

背景颜色、字体、大小、行高、布局设置

HTML的标记编写规范

1）不区分大小写，但是尽量用小写，为了与XHTML、XML的兼容；

2）每个标记使用< >括起来；比如<b>加粗

3）每个标记可能有结束标记(双边标记)，也可能没有(单边标记)。

双边标记：<div></div>

单边标记：<br />换行 <hr>水平线 <img>图片

4)每个标记可有属性，也可以没有属性，也可能有多个属性

属性和标记，以及属性间用空格隔开，空格可以多个。

5）每个属性值加引号。

HTML将来会被XHTML替代。

5) HTML标记的多少固定的，不能人为定义。

6) 标记之间要能顺序嵌套：<p><b>内容</b></p>

错误写法：<p><b>内容</p></b>

字体修饰标记(标签)

加粗：<b>内容</b>

斜体：<i></i>

下划线：<u></u> underline

字体：

l 大小size属性，取值1－7；

l 属性face设置字体，比如“黑体”

l 颜色属性：值可能是单词、十六进制。比如：red、blue、green ；十六进制

sup：上标 a<sup>3</sup>

sub：下标 a<sub>2</sub>

换行和段落：

<br>换行标记

<p></p>标记

换行和换段区别：段落间会有一个空行，但换行，没有距离。

标题标记：

<h1>一级标题</h1>自动加粗

属性： align= left | right | center

网页颜色

网页颜色有三种表示法：

1）单词表示法：red、 blue、green、gray、orange

2）十进制表示法：rgb(233,45,200)

3）十六进制表示法：#FF0000(红色)

自然界中所有的颜色都可以用RGB三种颜色混合而成，RGB又加三原色，还叫加色模式，根据光的波长不同而产生不同的强度的光的颜色。

加色模式：红色+绿色＝黄色

每一种原色可有256(0-255)种，RGB共可以混合出256*256*256=1670万

红色：RGB(0,0,0) RGB(255,0,0)

绿色：RGB(0,0,0) RGB(0,255,0)

蓝色：RGB(0,0,255)

黄色：RGB(255,255,0)

紫色：RGB(255,0,255)

青色：RGB(0,255,255)

十六进制：基数 0－9 A-F

前两位代表R，中间两位代表G、最后两位代表B

#FF0000红色

#00FF00 绿色

#0000FF 蓝色

预排版标记<pre></pre>是双边标记

在该标记内，所有空格都将保留。

普通标记：说明一个问题，换行必须要有换行标记<br />，换行必须要用换段标记<p></p>。所有格式内容都要有相应的标记来处理。

<pre>平常用的比较少，一般情况下在PHP中做为输出数组来使用。

三个<Meta>标记

1)设定网页的编码标准

2)设定网页关键字，是给搜索引擎，比如：baidu.com、google

关键字的设定：一定精简，真正能体现公司的服务或者项目的。

3）网页描述

描述内容不能写的太多，一般不超过100个字符。

项目符号列表<ul>

语法格式：

<ul>

</ul>

说明：

1) 项目符号是一个组标记，是由<ul>和<li>构成。

2) 每个项目的内容要放在<li></li>标记中

3) <ul>标记的属性 type：square(方块)、circle(圆)、disc（实心圆点）

4）一个ul可以有多个<li>标记

<hr />水平线：画一条水平线

编号列表标记<ol>

语法格式：

<ol>

<li>内容</li>

</ol>

说明：

1) 编号列表分类：数字(3)、大写字母(A)、小写字母(a)、大罗马(I)、小罗马(i)

2)起始属性 start=”4”

定义列表<dl>，也是一组标记，不是单个的。

语法格式：

<dl>

<dd>对小标题的说明内容</dd>

<dl>

举例：

<dl>

<dt>HTML的概念</dt>

<dd>HTML是超文本标注语言，是一个标准，是用于显示网页各部分的语言。</dd>

</dl>

注意：在<dl>中至少有一个<dt>和<dd>，可以包含多个。

应用：在JD的左侧商品菜单。

进制介绍

十进制：基数0、1、2……9，规则是逢十进一。

二进制：基数0和1。规则是逢二进一。

八进制：基数0－7。规则是逢八进一。

十六进制：基数0 1 2 3 4 5 6 7 8 9 A B C D E F规则逢十六进一。

计算机的存储里，如果我们把它拆开，除了盘片，什么也看不见。你用放大镜把盘片放大，会发现凹凸不平。二进制代表两种状态，是与否，或者对与错，也可能说是开与关。凹代表0（没有），凸代表1（有东西）。二进制比如110101010101011010010101010。

我们在计算机的应用层，使用很多字符、数字、符号，计算机不能直接识别，要进行相应的转换。中文搜索器的开发。如果我们用英语来写文章的话，搜索速度要至少快一倍以上，道理是美国人。

字符编码：我自己定义一个110代表a。汉字编码：

八进制：是用3位二进制来表示，也就是2^3来表示。

十六进制：是用4位二进制来表示，也就是2^4来表示。

将10进制转换成二进制

10进制转成二进制：分整数部分和小数部分。比如：(10.125)10

将整数转换成二进制的方法：除2取余法，直到商为0。按倒序来进行组织成二进制：(1010)2

第N次	商	余数
1	5	0
2	2	1
3	1	0
4	0	1

将小数转成二进制的方法：乘2取整法，直到小数后为0为止。

按顺序来进行组织二进制的结果是：001

第N次	积	整数
1	0.25	0
2	0.5	0
3	1	1

十进制(10.125)10转成二进制是1010.001

二进制转成十进制

转换的方法是：按位权相加

1010.001

位权：是从小数点位置开始算起，向左正整数递增；向右是负整数递减。

1*2^3+0*2^2+1*2^1+0*2^0=8+0+2+0=10

计算机编码

目的：是为解决你网页中出现乱码的问题。

计算机只能处理二进制数据，那么计算机如何处理数字、字母、符号、以及汉字呢？这个就必须要进行编码处理。例如：65代表A。W3C国标标准化组织，由他制定和发布相关的统一标准，然后大家都去遵守他的标准。

计算机最初是由美国人发明的，他们的语言：由26个字母组成。最初时的计算机编码是ASCII码，是由美国人制定的。包括：26大小写字母、一些符号、一些控制符号(不可见)。它用2的7位(128个字符)或8位(256个字符)来进行表示。

计算机被引入到了其它国家，比如中国。我们国家信息标准化局制定了咱们自己的计算机编码：GB2312码。比如，日本也有自己的编码。但是每个国家的编码并不兼容。GB2312码是两个字节，它一共可以存储6764个汉字。

有些罕见的汉字，还有少数民族的语言或符号，还是不能处理。因为标准化局对GB2312编码进行了扩充，扩充后GBK。GBK兼容GB2312。

还有一个ANSI编码，是跟随操作系统来运行的。比如：在中国我们的操作系统是简体中文的，那ANSI编码就代表GB2312。比如：日本的操作系统使用的ANSI编码，JIS编码。以上所述，发现一个问题：每个国家都根据自己国家的语言习惯制定了自己国家的编码，造成不同国家编码不能相容的问题。

补充：一个汉字是两个汉字，一个字节是8位二进制，共16位二进制。

台湾、香港它们用的繁体，但GBK、以及GB2312还是无法处理。

当时，在台湾地区，可以说每个公司都有自己的编码。有五家公司佳佳、大众等，联合制定了一个标准，后来叫BIG5，中文名称大五码。

但是又出来一个，当这些国家的计算机进行交互时，或者交流时，出现了问题，每个国家的编码互不兼容。W3C发现这个问题，并制定了一个标准Unicode(统一)，按4个字节进行编码。比如：1在ASCII中有8位就可以表示，但Unicode用32位表示0000000000000001。Unicode包含全世界所有的语言，它有自己的缺点：标准内容大约有500页左右，太大了。这样一样，就浪费了很多的网络资源。后来又出现了UTF-8(统一转换格式)，优点字节长度自适应。

乱码的解问办法：

1) 保证网页中的编码和文件编码一致

2) 比如网页中的编码用UTF-8，保存网页时，也要用UTF-8。也就是保存与网页要一致。与浏览器可以不一致。浏览器是根据网页的编码来进行解析网页的。

ASCII码：

ANSI码：

GB2312（标准码）

GBK(标准扩展码)

Unicode（统一编码）

UTF-8

html基础,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

html基础