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:向左缩进,向上缩进

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

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

 

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

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

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