html+CSS基础

1、HTML文本结构的说明中只能是纯文本。任何标记都会原封不动的显示。*标记格式 HTml标记大致分两类： 双边标记 和单边标记1、 双边标记 是指有开始与结束，内容放在开始和结束之间。如： 字 语法： 内容2、单边标记 单边标记：只有开始的标记，而没有介绍标记,一般是门内容的。如“ 单边标记起到一个特殊的功能。 单边标记常用的有10个多个标记的HTML的标签的编写规范 HTML标记不区分大小写。如： HTMl的标记属性可有 也可以没有 有的标记是没属性的如 功能：告诉浏览器，如何翻译汉文 HTTP-equiv：模拟http协议的文件头原信息，主要目的是服务器向客户端返回时，用什么格式显示。Con

2、tent-type: 内容类型Content：详细内容类型介绍Text/html：网页是text格式，html是文本中的小格式Charset：是一个字符集，主要控制汉字如何显示UTF-8：多过语言编码，什么国家的语言都是可以正常显示的常用属性：:网页的背景色如： Background: 网页背景图片地址。如： HTML文本修饰标记:加粗 bold 如：:斜体 italic 如：HTMl文本:下滑线 underline 如:删除线strike。 如： 上标。下标:字体标记 Size：文本大小取值1-7； Color：颜色值Face：字体，楷体 黑体 宋体代码编辑器介绍中文的操作系统的默认字符集（

3、字符编码）就是GB2312 使用记事本写的网页默认字符集也是GB2312.一个好的代码编译器，蓝月提高工资效率（1） 增强的文本编译器Notepad（2） IDE集成开发环境Dreamweaver 编辑环境的默认字符集 如果保证网页不会出现乱码1） 编辑环境的字符集2） 标记的字符集3） PHP的字符集4） MySQL的字符集保证以上的几种环境下的字符集一致，一般情况下不会出现乱码的问题。HTML排版标记l 表示一个段落n 常用的属性：align：水平对齐方式，取值：有left(左默认属性) center居中 right右边n 换行标记 n 水平线(单边标记)u Size:水平线的粗细，单位一

4、般为PX；u Color：水平线的颜色u Width：水平的宽度u Noshade：去掉水平线的阴影（在HTML中Noshade是没有值得属性）。如：noshade=“noshade”；l 预排版标记u 功能：将保留索引的空白字符（空格。换行符 ）换句话说就是原封不懂的输出。u 语法：内容 网页标题标记-到u 功能：定于各种标题u 属性：align水平对齐方式，取值：left。Center rightu 语法：标题l 和标记u 是个没有任何意义的标记，但是，又是使用最多的标记。一般要与CSS配合使用。是一个块元素。u 是没有任何意义的标记，但是，又是使用最多的标记。要与CSS配合使用是行内元素

5、。1、 块元素u 块元素，一般是单独占一行，不管内容多少，总是占总行的。u 块元素有哪些？ 、 、 、2、 行内元素u 行内元素不会单独占一行，行内元素的宽度，主要根据内容确定。u 多个行内元素，会排在同一行。u 行内元素有哪些？ 、 、 、 等结论：在标记嵌套时，一般是块元素中嵌套行内元素。 边框线border 颜色solidHTML字符实体：空格： 代表一个半角空格。一个汉字是2个字节，1个字节相当于1个半角空格。：>&：&￥：¥X：×除号：÷l HTML项目符号 内容1内容2内容3或者的常用属性u Type：项目符号的类型，取值：

6、disc(小黑点) circle(空心圆)、square(实心方块)主要：在HTML标记中，内容应该放在最底层标记中。注意：和是快元素HTML标号列表(有序列表) . 或的常用属性u Type:标号属性；取值1，a 、B、i、I、；u Start：从第几个，取值就是你想要从那开始就从那开始。滚动字幕标记u 语法格式：u 常用属性n Direction属性取值left，rigth 向上up 向下downn Width：滚动的高度n Height：滚动的高度n Bgcolor：滚动的背景色n scrollAmount：滚动的步长值，值越快就是滚动月快n scrollDelay:两步之间的停留时间，

7、以毫秒单位。1秒=100毫秒；n Loop：循环滚动的次l 项目符号的嵌套编号思路u 标签的内容(文本、项目符号、图片、表格、视频等)必须放在最底层标记中。这里所谓的内容就是编号的列表。l 图片标记n 语法格式：n 常用属性：u Width：图片宽度u Height：图片的高度u Border：图片的边框粗细u Src: 图片的路径（相对的路径）u Align：图片的水平对齐方式，取值：left、center、rgihtu Align属性只能让文本居中不能让图片单独居中，可以实现图文混排的效果Align=left或者是rgiht。u Hspace：图片与左右文字之间的距离(水平距离)u Vsp

8、ace：图片与上下之间的距离(垂直距离) 注意事项u 如果图片想等比例缩放，只需要指定width或者height其中一个。 要想让图片实现居中效果，可以给 图片添加一个元素。l 超级链接.行内元素，中不能再嵌套标签。u 语法格式：.u 属性：n Href：目标文件的地址URL，该URL是相对地址也可以是绝对地址语法：Href=“”n Target：目标文件的显示窗口。 _blank：在新窗口中打开目标文件。 _self：在当前窗口 中打目标文件(默认的打开方式)，相当于“替换”操作。 _parent：在父级窗口来打开目标文件。 _top:在顶级窗口来打开目标文件。 其中_parent、_top

9、常用框架网页中n Name：定义是锚点链接的名称。1、 绝对地址url(1) 远程的绝对地址访问远程的文件，总是”http:/”以域、主机名开头。 (2)本地的绝对地址访问本地的绝对地址，是以file：/开头的绝对地址。百度 传智PHP学院 1232、 相对地址URL（项目中的路径大部分都是相对路径）（1） 当先文件和目标文件是同级关系，链接地址直接写目标文件名。语法：一张图片（2） 当前文件与目标文件所在的文件夹是同级关系。先找“文件夹名”然后再找“目标文件名”也是目标文件位于下一级。语法：小草图（3） 目标文件位于上一层目录中，往上找对应的目录，再找目标文件。往上找，使用“./”符号表示。

10、“./”代表上一级目录 “././”代表上两级级目录语法：随便名字3、 特殊的链接 1、下载链接 什么样的文件会出现下载提示？ 反过来说，哪些文件网页可以直接执行：如：.jpg、 .gjf、 .html、.htm、txt等。 大部分的文件，浏览器是不能直接执行的。如：.Doc、.xls、.ppt、.rar、.psd。 语法： 下载要解压的文件注意：下载或者打开的文件路径一定要对。2、邮箱链接一定要加：maito语法：请给我发邮件3、普通空连接（#） 语法： 普通链接 4、JS链接：添加JS功能 语法：关闭窗口 Firefox下如何使用window.Close(),关闭窗口 About：conf

11、ig是火狐浏览器的 找到close_window 把值该为真值true；l 锚点链接n 含义：锚点链接，在一网页的不同区域进行跳转。锚点理解“定义记号”。n 定义锚点（作个记号）：语法：。u 锚点名称的命名规则：字母，数字、下划线 只能以字母开头。u 注意：和之间没有内容，换句话说，就是不是给我们看的而是给链接用。的。u 例如：n 跳转到锚点（记号）u 语法：-u 文件名：可有可无，如果是同一网页的不同部分跳转，不需要文件名：如果是跳转到另一个网页不同的文件，必须有文件名。u 注意：这里的和之间必须有内容u 例如：a href=”#top2”返回顶部 /跳转到同一个网页的不同部分。u 例如：a

12、 href=”news.html#bottom”返回底部/跳转到news.html文件的底部。l 标记 主要作用，是提供网页的元信息。比如：指定网页的搜索 关键字。 标记有 两个属性：http-eqiv和name.1、http-equiv属性u 功能：模拟http协议文件头信息，当信息从服务器端传到客户端时，告诉浏览器如何正确的显示网页的内容。u http-equiv属性一般要与content属性配合使用，content属性指定信息的详细参数。（1）设置网页的字符集语法：。 Content-Type是内容类型 text/html文件格式和内容 字符型utf-8（2）网页自动刷新 / 没隔来2秒

13、，自动刷新网页 meta http-equiv=refresh content=2; Url=2、name属性 Name属性主要用于设置网页的搜索关键字、版权信息、作者等。 （1）设置网页搜索关键字。（2）设置网页（描述信息）说明 l HTML颜色表示网页中的颜色有三种表示方法：n 颜色单词：blue，green、red、yellown 十进制表示方法：rgb(255,0,0)、rgb(0,255,0)等n 十六进制表示：#FF0000(红)、#00FF00（绿）、#000FF（蓝）在自然界中，所有的颜色都是可以三种光的不同波长混合而成。这三种光就是红光（red）、绿光（green）、蓝光（b

14、lue）。在计算机中的，每个基色，用8位二进制（2的8次方=256）RBG共可以表示256*256*256*=1670万色，颜色用16进制表示颜色时：用2位十六进制代表1位基色。颜色单词： red green blue yellow10进制：red（255，0，0）rgb（0，255，0）rgb（0，0，255） rgb（255,255,0）16进制：#FF0000 #00FF0 #0000FF #FFFF00注意：10进制的兼容不好很少用。l 计算机进制 计算机都是用二进制01 01 八进制：八进制可以很好的反应二进制，也就是说：八进制与二进制之间转换非常容易 转换规则：1位8进制数，代表3

15、位二进制。 例如：（110 101 100）2转成八进制（654）8 16进制：1位16进制数，代表4位2进制数（A0F）16转成二进制（1010 0000 1111）2l 计算机编码(字符集)了解为什么要有字符集，是因为计算机只能处理二进制的数据，为了让计算机能识别人类的语言(0-9 、a-z、A-Z、特殊符号)，我们需要对着每一个字符进行“编码”。所以的“编码”就是：每个字符，可以用不同的二进制来表示。假设：A用二进制表示1000，B用二进制表示1001，ANSI在中文操作系统下：代表是gb2312ANSI在繁体操作系统下：代表big2ANSI在日文操作系统下：代表JIS。ASCII编码：

16、用1个字节（8位二进制）来表示所有个字符，共可以表示2的8次方=256个.GBK编码：对GB2312进制扩充，收录了一些冷们的字，罕见字，古汉字等，共收录2.1万汉字。l XHTNL简介 传统的HTML开发的初衷是面向Pc机的，而随机移动终端的不断出现，HTNL已经满足不了市场的需要了。XHTNL是新一代的HTNL标注语言：Xhtml的目的是为了取代HTNL。XHTML的标记，与HTNL一模一样。XHTML的语法要比HTNL严格的多。XhtMLK可扩展超文本标注语言。l XHTML编写规范n 所以的标记和属性要全小写n 单边标记必须关闭。如n 所以的属性值都必须加双引号。n 所以的属性都必须有

17、值。如： noshade是水平线。n 标记之间要顺序嵌套，外层套内层，一层套一层。n XhtML网页必须要有DTD文档型定义代码l DTD文档类型定义DTD文档类型定义的目的：是一种验证机制，也就是说检验一下你写的XHTML标记语法是否合法，DTD一共有三大类型：（1）严格型的DTD 在严格型的DTD中，不能再使用各种表现的标记。如：、 、 要求必须使用CSS来取值代各种表现标记。(2)过度型的DTD中，可以继续使用HTNL中表现的写法，这些表现标记，还可以继续使用 如：、.(2) 框架的DTD l 表格标签1、表格的结构表格是块元素 2、的属性n Width：表示表格宽度，单文可以是百分比，

18、有额可以是固定值n Height：表格高度n Align：表格水平对齐方式，取值left，center、rigthn Borber：边框粗细。n Borber-Color:边框颜色n bgColor：表示背景色。n background：背景图片URLn cellpadding：单元格边线的内容间的距离（填充距离）。n cellspacing：单元格与单元格之间的距离n rules：就是合并单元格的边框线，取值：alln 注意：rules兼容性不好，请使用Css来代替他。3、属性行标记u bgColor：行的背景颜色u height：行的高度u align：行中的文本水平居中 reft（左）、

19、center（中）、reght（右）。u valign：垂直居中。 取值：top（上）、middle（中）、bottom（下）4、属性和属性 是普通单元格 ，标题单元格，居中加粗。n widthn heightn bgcolorn backgroundn alignn valignn rowspan：上下单元格合并n colspan：左右合并单元格1、表单的概念 表单主要用来获取客户端用户数据(信息)的。如：注册表单，登录表单、查询 表达。 2表单的工作原理：n 浏览有表单的网页，填写一些必要的信息，然后点击某个按钮进行提交。n 这些表单数据，通过互联网，专递到了服务器上。n 服务器上游专门的

20、程序，对表单数据进行验证。如果验证成功，将你的数据存入数据库(MySQL)，则返回一个验证成功的信息。如果验证失败，将返回一个错误信息。 从上割面表单的工作原理来看：表单的制作分两个部分，一个前台页面的制作，而是后台PHP对表单数据的处理。3、 表单的结构： 用户名： 密码： input type=submit value=提交表单 u 标记属性-块元素n Name：给表单起个名字,在这个名字主要给JavaScript来用,JS主要用来做客户端表单验证n Method：表单的提交方式，取值：get或者post。n Action：指定表单的处理程序，一般是PHP文件。如果action为空，那么表

21、达发送到哪里。结构：那么表单数据提交给了当前文件，也叫是他自己来处理。n Enctype：指定表单数据的编码方式(加密方式)，这个属性值能用在method=”post”，有两个取值： Application/x-www-form-urldecoded/默认的加密方式。 Multipart/form-data /如果你要上传文件，该值必须它自己。 GET方法和post方法：(1) Get提交方式（基本上用不着）Get：方式，是将表单数据追加到action指定的处理程序后面，然后向服务器发出请求。 注意：地址栏传数据的方式，默认的都是get。上面的RUL的说明：n Login.php 是表单处理的

22、程序文件n Username=yao&userpwd=12345/表单提交的数据，又称之为“查询字符串”。n Action文件和查询字符串之间用”?”分隔。n 每两个表单的”名称=值”之间用”&”的好分隔。n 表单名称和表单值之间用”=”分隔。 如果某个表单元素，不想往服务器专递数据，那么，我们开头不给他加name属性。专递到服务器的数据，如果没有name，则无法获取它的值。 GET方式的特点：(1) GET方式不能提交敏感数据。如：密码(2) GET方式只能提交少量的数据，因为地址栏的长度有限制大约100外字符(3) GET方式下不能上传附件。（2）post属性表单提交方式 Post提交方式

23、，它不是将表单数据追加到地址上，而是直接转给表单处理程序。 Post方式的特点：(1) post提交的数据相对安全。(2) post可以提交海量数据。(3) post方式可以上传附件。表格和表单的嵌套顺序 用户名： input type=text name=userName 表单数据：l 单行文本域n 语法格式：常用属性：u Name：文本框的名字。命名规则是：可以包含字母，数字下划线只能以字母开u Type：表示单元素的类型u Value：文本框中的值u Size：文本框的长度，”以字符”为单位u maxLength：最多可以输出多少个字符。超出的就输入不进去。u readonly：只读属性

24、，可以选中但不能修改，如：readlonly=”readonly”u disabled：禁用属性，不能选中，不能修改。如：disabled=“disabled”举例说明：表单密码域 语法： 例子：input type=password name=userPwdu Name：密码框的名字。命名规则是：可以包含字母，数字下划线只能以字母开u Type：表示单元素的类型u Value：密码框的值u Size：密码框的长度，”以字符”为单位u maxLength：最多可以输出多少个字符。超出的就输入不进去。u readonly：只读属性，可以选中但不能修改，如：readlonly=”readonly”

25、u disabled：禁用属性，不能选中，不能修改。如：disabled=“disabled”单选按钮： 语法：input type=”radio” 属性=“值”常用的属性：l Name：元素的名称l Value：元素的值，该value中数据的发往服务器。l Checked：默认选择那一项。如：checked=“checked” 性别： 男 女注意：一组单选按钮，只能选择一个，但是name的值要一致。如：name=”sex”. 单选按钮用户自己不能输入内容，用户只能选择，因此必须为它指默认值value。复选按钮：语法格式：u Name：元素的名称u Value：元素的值u Checked：默认

26、选中。如：checked=“checked” 游泳 看书 游戏 打球注意：复选框也是一组选项，因此name的值必须一致，在PHP中使用数组来获取多个同名name值，复选框可以同时多选，也可以不选。下拉列表：语法 广西广西 u 标记属性，只有一个name；属性u 标记的属性有两个：value属性、selecte属性u Selecte：默认选中。如：selected=“selected”文本区域u u 常用属性：u Name：元素名称u Cols：宽度，是指多少个字符宽；u Rows：高度，是指几行高 提示：和之间是默认文本。各种按钮u 提交按钮：u 重置按钮：u 图片按钮：/功能就是提交表单与s

27、ubmit按钮功能一样。u 普通按钮：l 普通按钮本身不是具备任何功能的，一般要与JS程序配合使用，实现相应的功能上传文件域l 语法格式：l 常用属性：u Name：表单元素的名称u Value：表单元素的值，这个值就是上传的文件路径。Value属性只读属性，这个value的内容只能来自手动选中上传的文件，而不能用户自己指定一个路径。为了安全起见，value是只读的。注意：现在只能实现上传文件库，而不能用户真正实现上传功能，上传功能用PHP来实现。u 上传头像u 隐藏域：l 功能：隐藏域就是看不见的一个框。专递一些值，而这个值不想让别人看见。l 用处：主要用于PHP后面程序，如：修改某一条新闻

28、内容是时，需要专递的一个新闻iD号。l 语法格式：.表格标题：l 语法格式：l 提示：标记是的子标记。放在之后。 2016年学生成绩   1、开发网站的一个流程：l 业务员和客户进行沟通，包括：风格的，功能（论坛、留言板、支付、用户登录等。你喜欢什么样的，你想要什么功能等）l 业务员与美工沟通。制作网页效果图(首页、列表页、内容页)l 制作人员切图排版，排成网页形式的。l 后台程序开始写程序l 前台和后台合并在一起，整站就完成了。2、 网页的布局结构 Logo是网站的头头 导航栏 Flash模块 新闻mok 服务项目模块 滚动产品模块页脚3排版的准备工作l 网站的素材：都要放到当前的

29、目录下，与当前网站在同个目录下l 创建一个HTML，来进行排版l 网页的背景颜色l 确定主要的宽度：当前流行的主业的宽度一般为1000PX 4、HTML的注释 注意：注释的内容是不会显示的，注释是为了将来维护方面。网页多媒体网页上的视频一般都是flash的格式，因为flash的兼容性比效好，再来一个flash的文件压缩以后文件效小。 以flash动画为例，播放flash动漫的代码下，这个代码不用记，看懂就行。提示：flash动画的文件扩展名：.swf:语法： param name=”wmode” value=”transparent”以上标记的说明l 标记：是ie中引入多媒体的标记l 标记：是Netscape中引入多媒体的标记图片热点：（图像地图）图像热点：给一张图片加多个链接，默认情况下，一张图只能加一个链