|
昨日回顾 IP地址：InterNet将全世界的计算机联为一个整体。IP地址就是计算机在互联网上的一唯一的逻辑标识 A、B、C、D、E IP地址的形式： 0~255.0~255.0~255.0~255 网关：计算机数据传输的唯一“关口”。计算机所有的通信能关给网关处理。 DNS：Domain Name Server IP地址与域名的对应关系 xxx.xxx.xxx.xxx www. 一个网页访问的具体流程 当我在浏览地址栏输入一个www./ 第一步：到本机的host文件中去查找域与IP地址的对应关系 如果找到了此对应关系，将index.html文件的请求发向此IP地址 如果没找到就去外网的DNS服务器去查找此域与IP地址的对应关系。DNS会将此IP地址与域的对应关系返回给本机。本再将index.html文件的请求发向此IP地址所代表的服务器 第二步：当服务(www.)收到由客户端发送过来的index.html文件请求后，根据www.与目录的对应关系找到相应的目录，在此目录内查看是否有index.html文件，如果有则将文件的内容返回给浏览器 第三步：浏览收到服务器的响应文件后，将文件内容解析成网页。 注意：域名(www.)的作用，1：对外提供访问 2：在服务器内部形成一种映射关系(目录与当前域的关系) 语法： 双边标签 <标签名 属性名=“属性值”属性名=“属性值”>内容</标签名> 单边标签 <标签名 属性名=“属性值”> 网页主体结构标签 <html> <head> <title>网页标签</TITLE> <meta http-equiv=“content-type” content=“text/html;charset=utf-8”/> <link type=“” rel=“” href=“”/> <style></style> <script></script> </head> <body></body> </html> <body>常用的属性 bgcolor background text face leftmargin rightmargin topmargin bottommargin 字符修饰元素 <b> <i> <u> <sub> <sup> <font> 常用的属性 color face size 1-7等级 排版标签 h1——h6 常用的属性 align：left、center、right <p> 常用的属性 align：left、center、right <br/> <pre></pre> 预格式化标签，作用保留 空白字符空格，回车换行，tab 列表标签 1、 有序列表 <ol> <li></li> </ol> 常用属性： type：取值1、a、A、i、I start：设置列表项编码的起始序号 2、 无序列表 <ul> <li></li> </ul> type：取值circle、 disc、 square 3、 定义列表 <dl> <dt></dt> <dd></dd> </dl> <hr> 作用：就在当前位置划一条“华丽”分割线 常用的属性： color: 设置线的颜色 在HTML中的颜色有三种代表方法： 1、Name Color：颜色的英文单词 red、yellow、blue、gray、orange、white、black、pink、cyan 2、十进制：rgb(0-255,0-255,0-255) 例如：rgb(255,0,0) 红色 rgb(0,255,0)绿 3、十六进制：#00ff00 width: 设置线的宽度 取值：具体数值，百分比 size： 设置线的粗细 noshade: 设置线的是否有阴影 align: 设置线的水平对齐方式 字符实体 字符实体也中转译字符串，主要作用 1、 输出被HTML语法把占用的字符：如，<、> 2、 输出键盘无法输入的特殊字符如，版权符号，乘号，除号 3、 输出空白字符 代表空格 < 表示小于号 < < 表示左书名号 《 > 表示大于号 > > 表示右书名号 》 " 表示双引号 “ & 表示“&” & ¥ 表示人民币符号 ¥ © 版权符号 © × 乘号 × ÷ 除号 ÷ 注意：转译字符严格遵循大小写 当HTML解析遇到转译字符串时，就会将去显示为字符所代表的字符实体。 进制 进位计数制 在表示一个数的时候，仅有一位数是不够，需要采用进位计数的方法组织成多位数码。每一位数码的构成以及从低位到高位的进位规则，就叫进位计数制，也叫进位制。 数码：某一种进制中出现的数字 十进制中只有 0、1、2、3、4、5、6、7、8、9 二进制中只有 0、1 八进制中只有 0、1、2、3、4、5、6、7 十六进制中只有 0——9 A(10)、B(11)、C(12)、D(13)、E(14)、F(15) 基数：基数就是某一种进制中数码的个数 十进制的基数 10 二进制的基数 2 八进制的基数 8 十六进制的基数 16 其实也就是 逢几进一 位权：某一种进制中某一个位置上的数码所占的权重(它是衡量一个位上的数码作用的大小值)。每一位的大小由，该位上数码与该位的位权的乘积组成，是一个幂。 1 1 1 1 十进制：2110 从右向左每一位的权重为：1 10 100 1000 100 101 102 103 二进制：11101010 从右向左每一位的权重为：1 2 4 8 16 32 64 128 20 21 22 23 24 25 26 27 八进制：7620 从右向左每一位的权重为：1 8 64 512 80 81 82 83 十六进制：A1 从右向左每一位的权重为：1 16 256 160 161 162 十进制数：(2130)10 权展开式： 0*100+3*101+1*102+2*103=（2130）10 二进制数：(10101)2 权展开式： 1*20+0*21+1*22+0*23+1*24=(21)10 八进制数：(720)8 权展开式： 0*80+2*81+7*82=(464)10 十六进制数：(B3)16 权展开式： 3*160+11*161=(179)10 任何非十进制数都可以按权展开式转换为十进制数 进制的转换有五种： 第一种：非十进制数转换为十进制数 转换方法：按权展开求各 第二种：十进制数转换为非十进制数 转换方法：分整数部分与小数部分 a、 整数部分转换方法是：基数连除取余法。将十进制转换为几进制，就除几取余，先得到的余和为低位，后得到的余数为高位 b、 小数部分转换方法是：基数连乘取整法。将十进制转换为几进制，就乘几取整，先到时的整数为高位，后得到的整数为低位 例1： (35.85)10=(?)2
例2： (93.75)10=(?)8
第三种：二进制转换为八进制或十六进制 转换方法： 以小数点开始，整数部分向左，小数部分向右，以三位(或四位)，为一组，位数不足的以“0”补足，每一组二进制代表一位八进制(或十六进制) 例3： (10101.11)2=(？)8 (010 101.110)2=(25.6)8 例4： (110101.11)2=(？)16 (00110101.1100)2=(35.C)16 第四种：八进制或十六进制转换为二进制 转换方法：将每一个八进制(或十六进制)，转换为三位(或四位)的二进制 例5： (75.3)8=(?)2 (111 101.011)8=(?)2 例6： (A9.B)16=(?)2 (A9.B)16=(?)2 10(A) 9 11(B) 1010 1001 1011 (A9.B)16=(10101001.1011)2 第五种：八进制与十六进制之间的转换 转换方法：将二进制作为中间值进行转换 (A9.B)16=(?)8 第一步：将(A9.B)16转换二进制 为：(10101001.1011)2 第二步：将(10101001.1011)2转换为八进制 为：(251.54)8 a、 在计算机中，所有的字符的存储或程序的处理，都是以二进制来表示的。 b、 因为二进制太长，记忆不方便，所以在计算机中有些资源是以十六进制或八进制进行表示。 二进制中的单位 byte 字节 bit 位 这“位”就是二进制中的位 1字节=8位 1k 1024个字节 1m 1024个k 网页的颜色有三种表示方法： 第一种：Named Color 颜色单词 第二种： 十进制表示法：rgb(255,255,255) rgb(100%,100%,100%) 第三种： 十六进制表示法 #FFFFFF #FFF 注意：十进制颜色在HTML标签中设置时会有浏览器不兼容问题 HTML语法注释语法： <!- -注释内容 - -> 链接标签： <a></a> 语法格式：<a 属性=”属性值”>内容</a> a标签常用的属性 href：设置链接所以跳转的页面(URL) URL：Uniform Resource Location 统一资源定位 1、 绝对定位 从磁盘的根目录开始，一级一级目录指文件 以域名(主机名)开头的资源路径为绝对定位 绝对路径引用的资源，可以是互联网上的资源 2、 相对定位 以当前文件为出发点，进行资源查找 ./当前目录 ../代表上一级目录
target： 设置新的网页把显示的位置 _blank：新页面会在新的窗口显示 _self：在当前窗口显示新页面 _top： 下回分解 _parent： 下回分解 a链接的其他用法 1、 下载文件 例如：<a href="./torrent.rar">文件下载</a> 只要是浏览无法解析的文件就会以下载的方法打开 2、 调用邮件发送程序 <a href=“mailto:asb@163.com”>发邮件给我</a>
3、 调用JavaScript程序 <a href=“javascript:alert('hello’)”>弹出一个窗口</a> 4、 空链接 a、<a href=“#”>首页1</a> b、<a href=“javascript:void(0)”>首页2</a> 5、锚点 实现同一页面跳转 锚点的使用需要两个<a>链接配置使用：一个<a>链接用于定锚点名，另一个<a>链接用于跳转到指定锚点 <a name=“锚点名”></a> <a href=“#锚点名”>返回页首</a> 实现不同页面跳转 img标签图片标签 <标签名 属性=“属性值”/> 单边标签 通用属性：id、class、name、style <img src=“图片资源路径”/> 常用属性： src：标签所显示的图片资源路径(URL) width：设置图片的宽度 height：设置图片的高度 border：设置图片的边框线的宽度 alt：当由于某种原因无法显示图片时的提示信息 title：设置当鼠标悬停时的提示信息 vspace：设置图片的上下边距 hspace：设置图片的左右边距 align：设置图片的水平对齐方式，取值 left左对齐、center居中对齐、right右对齐 可以将图片也理解为一个“文字” 图像热点 将一整张图片作为一个链接，使用<a>标签包含<img>标签 将一张图片的不同区域设置多个链接 <img src=”图片的路径” usemap= “#映射名”/> <map name=“映射名”> <area shape=“rect”coords=“x1,y1,x2,y2”href=“http://www./1.html”/> <area shape=“circle” coords=“x,y,r” href=“http://www./1.html”/> <area shape=“poly” coords=“x1,y1,x2,y2,x3,y3….” href=“http://www./1.html”/> </map> 屏幕坐系
字符编码的奥秘为什么存在字符编码 首先大家要理解计算机存储数据都是以二进制代码进行存储。为了能够存储字符等更多信息，需建立字符与二进制代码的对应关系。 ASCII American StandardCode for InformationInterchange 编码过程 第一步： 搜集本国所有字符及标点符号，打印控制字符，形成一张字符与十进制数的对应表 第二步： 建立字符与二进制的对应关系 在80年代 中国信息产业部就制定了 GB2312编码 中国又推出一个 GBK编码 GBK编码是GB2312编码的扩展 香港台港 BIG5编码 UNICODE编码：包含世界上大部分国家的字符 此编码不是字符与二进制的对应关系，仅是一个字符与十进制对应关系，可以理解为一个世界范围内字符“字典”，此字典只是字符与十进制对应关系。 UTF-8 叫万国码 在外国人的计算机可以不需要安装中文语言包，即可浏览中文网页。 解决乱码问题：1、 文件的存储编码 编辑器建立文件时的编码 2、 浏览器显示编码 <meta> 3、 PHP文件的编码 4、 数据库数据存储编码 保证以上四处的编码一致。 <meta/>详解主要有二个属性 http-equiv name 第一种，设置显示编码 设置简体中文GBK显示编码 <meta http-equiv=“content-type”content=“text/html;charset=GBK”/> 设置简体中文GB2312显示编码 <meta http-equiv=“content-type” content=“text/html;charset=GB2312”/> 设置繁体中文BIG5 <meta http-equiv=“content-type” content=“text/html;charset=BIG5”/> 设置英文显示编码 <meta http-equiv=“content-type” content=“text/html;charset=iso-8859-1”/> 设置页面刷新 设置页面3秒刷新一次 <meta http-equiv=“refresh” content=“3”/> 设置页面3秒后跳转至http://www./index.html <meta http-equiv=“refresh”content=“3;url=http://www./index.html”/> 设置页面过期时间 设置页面60秒后过期 <meta http-equvi=“expires” content=“60”/> 设置页面不缓存 <meta http-equiv=“pragma” content=“no-cache”/> 走马灯标签 标签语法 <marquee属性=“属性值”>内容</marquee> 常用的属性 width： height： behavior： 设置运行类型，alternate弹动、slide只运行一次、scroll direction： 设置运动方向 left、right、up、down scrollAmount： 设置步长，每一次运行的距离 pixel scrollDelay： 设置运动延时 单位毫秒 loop： 设置循环次数 二进制详解： 二进制的原码，反码，补码 原码就是为了表示二进制数的正负之分 原码又称“符号+数值”，符号就数的“正或负”，对于正数符号位为'0’，负数符号位为'1’ 如： N1=+10011 N2=-10011 [N1]原=010011 [N2]原=110011 二进制“0”的原码则存在两种表示方法 即0 0…0 1 0…0 举例正数加法正确 原码减法结果不正确引出反码 使用原码进行正数与负数的计算存在错误， 错误例子 [0 0001]原+[1 0001]原=[1 0020]原 =-2不正确 以上错误的解决方案之一就是使用反码 因此引出反码解决减法问题(正负数相加问题) 反码 正二进制数的反码，与原码相同 负二进制数的反码，符号位1不变，其余取反 N1=+10011 N2=-10011 [N1]反=010011 [N2]反=101100 二进制“0”的原码则存在两种表示方法 即0 0…0 1 0…0 人们发现加法运算会比减法运算快的多，而且引入了补码，将所有的运算都转换成加法运算 补码 正二进制数的补码，与原码相同 负二进制数的补码，在其反码基础上 + 1 N1=+10011 N2=-10011 [N1]反=010011 [N2]反=101101 使用原码加法计算 计算：[2]10+[5]10 [00000010]原+[00000101]原=[00000111] 使用原码减法计算 计算：[2]10-[5]10 [2]10+[-5]10 [00000010]原+[10000101]原=[10000111] 错误 反码： 正数的反码与原码相同 负数的反码符号位不变其余位取反 使用反码进行减法运算 计算：[2]10-[5]10 [2]10+[-5]10 [00000010]反+[11111010]反=[11111100]补=[10000011]原=[-3]10 [5]10+[-2]10 [00000101]原+[10000010]原=[00000010]原= [00000101]反+[11111101]反=[00000011]反=[00000011]原 反码计算中如果最高位向前进位时应该加到最后一位 计算：[1]10-[1]10 [1]10+[-1]10 [00000001]反+[11111110]反=[11111111]反=[10000000]原=[-0] 有问题 补码 正数的补码与原码相同，负数的补码要在原码的反码的基础上加1 使用补码计算：[1]10-[1]10 [00000001]补+[11111111]补=[00000000]补 使用补码计算[5]10+[-2]10 [00000101]补+[11111110]补=[00000011]补 网页颜色表示方法 颜色单词Name Color 红色：red 绿色：green 蓝色：blue 10进制 RGB(r,g,b) 例rgb(255,200,100) rgba(r,g,b,o) //IE不兼容 o表示透明度0-1之间 16进制 #ff00ff 字符编码的奥秘为什么要有编码 首先大家需要明确的是在计算机里所有的数据都是字节的形式存储，处理的。我们需要这些字节来表示计算机里的信息。但是这些字节本身又是没有任何意义的，所以我们需要对这些字节赋予实际的意义。 数字系统只能识别0与1，怎么样才能显示、存储更多的数码，符号，字母呢，使用编码即能解决此问题 编码字符集 coded character set unicode 字符编码表 character encoding form utf-8,utf-16 编码过程 第一步：收集字母，符号，控制打印等字符 127 注意：第一步产生的结果 CCS Coded Character Set 编码字符集 第二步：将把CCS转换成电脑能够存储的二进制 结果产生了ASCII字符集 CEF Characetr Form 字符编码表 American Standard Code for Information Interchange gb2312 国家信息产业部于1980年编制 gbk 在gb2312编码基础上的扩展 unicode unicode的产生 为了统一大部分国家的语言字符，收集大部分国在的语言字符，形成一个相对通用的编码字符集，unicode只是字符的标号(十进制)，相当于全世界大部分国家语言字符的一个综合字典，此字典是字符与编码(十进制)的对应关系。utf-8就是根据此编码中的数字进行转码。 utf-8 Unicode Transformation Form 万国码，解决了外国人浏览中国网页不需要安装额外的语言支持 big5 港奥台 繁体 ANSI 微软伪码 不是一种真正的编码，而是当前操作系统编码的一个代名词 例如：操作系统是中文系统那么ANSI代表的就是 gbk或gb2312 GB2312 国家信息产业部编制 GBK 在GB2312基础上的扩展 存储编码 html文件存储编码与ie显示编码 <meta>标记详解<meta> 在一个网页中<meta>标记常常被用做网页关键字、网页描述、作者、显示编码、Robot、网页跳转等 <meta>标记有两个主要的属性： http-equiv：设置http的文件头信息(控制信息)。 name：设置网页描述信息。 （1） 设置网页的字符集 简体中文： <meta http-equiv=“content-type” content=“text/html;charset=gb2312”> 中文： <meta http-equiv=”content-type” content=”text/html;charset=utf-8”> 繁体中文： <meta http-equiv=”content-type” content=”text/html;charset=GIB5”> 英语： <meta http-equiv=”content-type” content=”text/html;charset=iso-8859-1”> 注意：<meta>设置的字符集，一定要与编辑器的默认字符集一致。 （2）刷新网页、网页跳转 <meta http-equiv=“refresh” content=“3”> //每隔3秒钟，自动刷新网页 <meta http-equiv=“refresh” content=“3;URL=http://www.163.com”> 3秒钟后，跳转到百度网 （3）指定页面在缓存中的过期时间 <meta http-equiv=”expire” content=”0” /> （4）禁止浏览器从本地机的缓存中读取页面内容 <meta http-equiv=”pragma” content=”no-cache” /> （5）防止别人在框架中使用你的引用你的网页 无效果 <meta http-eqiuv=”window-target” content=”_top”> （5）网页关键字 <meta name=“keywords” content=“key1,key2,key3,key4….”> <meta name=“keywords” content=“广州网页设计，网站建设”>
（6）网页描述 <meta name=“description” content=“简介内容，对网页的描述”> （7）网页作者 <meta name=”author” content=”Think”> （8）防止别人在框架中使用你的网页 <meta name=”robots” content=”all”> content取值： all搜索引擎将索引此网页及继续通过此网页的链接索引，等价于index、follow index搜索引擎搜索引此网页 follow搜索引擎继续通过此网页的链接索引搜索其它网页 none搜索引擎将忽略此网页 noindex搜索引擎不索引此网页 nofollow搜索引擎将不通过此网页的链接索引搜索其它网页 解决网页乱码的问题：要保证各个环节的字符编码一致 （1）编辑器的编辑环境的字符集(默认字符集)：Ctrl+U 常用的编码 GB2312(简体)、GBK(简体)、BIG5(繁体)、UTF-8(多国语言编码) （2）<meta>标记的字符集设定与编辑环境的字符集一致 字符集设置：<meta http-equiv=“content-type” content=“text/html;charset=utf-8”> （3）PHP的字符集设置 （4）MySQL的字符集设置 注意：不需要考滤浏览器的字符集。 <div> <span> 块元素 行内元素 <a>标签 url 绝对定位 域名：解释域名解析的过程 对外提供访问，对内绑定网站的目录 引用的资源位于互联网 引用的资源位于本机 相对定位 相对于<a>标签所在的文件 target： _blank _self _parent _top 框架标签的name值 <a>标签的其他作用 下载：href=”一个浏览器不能识别的文件名扩展名” 调用邮件程序 href=”mailto:mja@qq.com” 执行javascript脚本程序 href=”javascript:alert('hello word’)” 链接到锚点 为网页某个位置设置名了，此名子用于跳转 空链接 <img>标签 属性： src width height align border alt title hspace vspace 图像热点 <img usemap=”#map1” src=”url”> <map name=”map1”> <area shape=”rect” coords=”x1,y1,x2,y2” href=”url”/> <area shape=”circle” coords=”x,y,r” href=”url”/> <area shape=”poly” coords=”x1,y1,x2,y2,x3,y3” href=”url”/> </map> 表格标签 快速入门 <table><tr><td> 属性： width height border bordercolor bgcolor cellpadding cellspacing background <td> 常用属性 width height align valign bgcolor backgroundcolor colspan rowspan <th>在网页上的效果与<td>几乎一样， td也是表示单元格，th更着重强调单元格为标题单元格， th的内容会自动加粗，而居中显示 <tr> 常用属性： align bgcolor backgroundcolor 演示案例：table01.html 案例：table(课程表).html <thead><tbody><tfoot>仅是对表格逻辑上的划分 呱呱网table布局讲解 <marquee> 常用属性 width height bgcolor behavior：alternate、scroll、slide direction：left、right、top、down scrollAmmount scrollDelay XMLHTML困境： 1、 HTML标签都是固定的，标签本身无法标记内容的含意。 <span>广东省</span> <span>生命之歌</span> 2、 HTML标签只要是显示内容，它更侧重于如果在IE里将数据显示出来，至于显示的内容是什么，标签本身无法标记其含意，HTML标签就好比打印机，只负责打印，至于打印什么它无法表述。 3、 无法存储数据信息 4、 无法解决软件之间的通信问题。 <span>12.56</span> <span>zhangsan</span> <span>li</span> 备注：可能性的解决办法，就是向HTML添加新的标记，但W3C预先将描述各行各业各种信息的标签都添加到HTML中，那HTML标签将无穷无尽的，也不现实的。 既然没有办法定义所有的标记，那就定义一种不需要预定标签的语言，即使用者可以自行扩展。 XML eXtensible Markup Language 入门案例 <?xml version="1.0" encoding="GB2312"?> <> <>2002080522</> <></> <></> <>25</> </> 规则： 1、 xml文件第一行为文档声明， 2、 xml语言没有预定义标签，所有的标签都是自定义的标签 3、 xml主要用来存储传输数据 4、 xml有且只有个根标签，根标签要包含所有其他标签 5、 xml标签对大小写敏感 6、 xml标签必须闭合 7、 xml标签的属性必须有值 XHTML与DTD xml + html 将html标签按xml的严格语法进行书写， 主要体现 1、 标签属性闭合，如<img /> 2、 html标签中没有属性值的属性，必须加上属性 <hr noshade=”noshade”/> (W3C 浏览器 WEB站点)三角恋 DTD Document Type Define <!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本文档类型进行解析 在HTML发展过程中，存在多个版本，不同的版本中不断添加标签。为了让浏览能够了解释HTML，对W3C对HTML制定一些解析规范。在HTML发展过程中出现了两个较重要的版本： strict：严格型的文档规范 loose： (过渡型) frameset：框架型 主要用于frameset框架 xhtml规范 strict：严格型的文档规范 transitional：过渡型 frameset：框架型 主要用于frameset框架 |
|
|
