html基础
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)每个标记可有属性,也可以没有属性,也可能有多个属性
<font size=”5” color=”red” face=”宋体”></font>
属性和标记,以及属性间用空格隔开,空格可以多个。
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>自动加粗
<h2></h2>
<h3></h3>
<h4></h4>
属性: 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)设定网页的编码标准
<meta http-equiv=”content-type” content=”text/html;charset=utf-8”>
2)设定网页关键字,是给搜索引擎,比如:baidu.com、google
<meta name=”keywords” content=”PHP,教育,培训,传智”>
关键字的设定:一定精简,真正能体现公司的服务或者项目的。
3)网页描述
<meta name=”description” content=”这里是网页描述”>
描述内容不能写的太多,一般不超过100个字符。
项目符号列表<ul>
语法格式:
<ul>
<li>内容</li>
</ul>
说明:
1) 项目符号是一个组标记,是由<ul>和<li>构成。
2) 每个项目的内容要放在<li></li>标记中
3) <ul>标记的属性 type:square(方块)、circle(圆)、disc(实心圆点)
<ul type=”square”></ul>
4)一个ul可以有多个<li>标记
<hr />水平线:画一条水平线
编号列表标记<ol>
语法格式:
<ol>
<li>内容</li>
<li>内容</li>
</ol>
说明:
1) 编号列表分类:数字(3)、大写字母(A)、小写字母(a)、大罗马(I)、小罗马(i)
<ol type=”a”></ol>
2)起始属性 start=”4”
定义列表<dl>,也是一组标记,不是单个的。
语法格式:
<dl>
<dt>小标题</dt>
<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