基础html笔记.doc

一、XHTML基础1.XHTML能做什么?XHTML能实现网页的结构。2.什么是HTML、XHTML?HTMLHyperText Markup Language,超文本标记语言。XHTMLeXtensible HyperText Markup Language,扩展的超文本标记语言HTML最终的发展方向:HTML5HTML/XHTML、CSS、JavaScript称为客户端技术。客户端技术是由浏览器解释执行的。客户端技术最大的难点就在于浏览器的兼容性。主流浏览器:IE、Firefox、Chrome、Safari、Opera3.什么是标记?标记(Tag),也称为元素(Element),它就是完成某些功能的字符串。4.标记的分类4.1 根据是否包含子标记或内容单标记:双标记:.例1:.例2:.4.2 根据是否自然换行内联对象:不换行块级对象:可自然换行5.标记的属性.公共属性idstyleclasstitle,注释6、XHTML文档的规范A.标记名称必须为英文小写字母B.标记之间必须顺序嵌套C.单标记必须以/结尾D.属性名称必须为英文小写字母E.属性值必须括在引号之间7.W3C的合法性验证8.XHTML文档的结构 标题 正文 9.DTDDTDDocument Type Defination,文档类型声明DTD实现的功能是定义文档结构，如谁根元素?根元素有哪些一级子元素？这些元素又有什么样属性?这些属性中哪些是必选的，哪些是可选的？等信息。在XHTML中DTD主要有三类：Strict,严格类型Transitional,过渡类型Frameset,框架类型 命名空间(namespace),解决标记名称冲突。二、文本样式加粗:.加粗:.倾斜:.倾斜:.下划线:.删除线:.删除线:.上标:下标:.span标记:.font标记(W3C不推荐):.三、段落与换行段落:.换行:四、标题.五、HTML实体(HTML Entity)大于号:>小于号:<单引号:'(IE不支持)或双引号:"&(And)符号:&不间断空格: 六、图像1.浏览器支持的图像格式gif,支持透明色，支持动画,仅支持256种颜色。jpg/jpeg,不支持透色，不支持动画，但支持1670万种颜色。png,支持透色，但不支持动画，仅支持颜色有256，1670万和4G种三种。2.图像的标记说明:A.图像的src和alt属性必须存在。B.alt属性只有IE浏览器支持。C.如果省略图像的alt属性，那么其无法通过W3C的合法性验证。七、路径1.绝对路径:由完整的协议名称、主机名称、路径及文档全称组成。0/download/02.rar2.相对路径,从当前文档开始的路径。2.1)、如果当前文档和目标位置位于同一目录下,则直接书写目标文档全称即可。(图-1)2.2)、如果当前文档和目标文档所在目录位于同一目录下,则书写成：目录名称/目标文档全称2.3)、如果当前文档所在目录与目标文档位于同一目录下,则书写成: ./目标文档全称例如:浏览器URL地址为:/a/b/c.html?id=3&pid=6而通过查看网页源代码，发现其中某一张图像的标记是这样写的：那么这张图像的绝对路径就是：/a/images/aa.jpg3.根相对路径,从站点根目录开始的路径，总是以/开头。八、链接1.链接的标记文本/图像窗口形式:_self:在自身窗口打开(默认)_blank:在新窗口打开_parent:在父窗口打开_top:在顶窗口打开框架名称:在指定框架打开提示:如果为图像添加链接的话，在IE浏览器中图像将被蓝色框线包围。去掉框线:A.为图像添加border=0属性B.通过CSS样式实现2.链接的表现形式(P13P14)2.1)、目标文档为网页 静态网页: .htm .html 动态网页: .jsp .aspx .php .shtm .shtml2.2)、链接到下载资源首先将下载资源使用压缩软件/命令进行压缩，然后将链接的目标文档指向该压缩包即可。2.3)、电子邮件链接文本/图像2.4)、锚点链接(书签链接)A.创建锚点 B.链接到锚点 B1.链接元素(文本/图像)与锚点同一页面 文本/图像 B2.链接元素(文本/图像)与锚点不同页面 文本/图像2.5)、链接到JavaScript文本/图像2.6)、空链接(没有目标文档，其行为由JS控制)返回页面的顶部文本/图像保持原始位置文本/图像九、表格1.表格的作用A.页面的布局B.显示规则有序的数据2.表格 . . . 表格的属性(P16)width:宽度height:高度bgcolor:背景颜色background:背景图像border:边框宽度bordercolor:边框颜色align:水平对齐方式(left|center|right)cellpadding:内边距(内容与框线之间的距离)cellspacing:外边距(相邻单元格之间的距离)单元格属性align:水平对齐方式(left|center|right)valign:垂直对齐方式(top|middle|bottom)bgcolor:背景颜色background:背景图像rowspan:行合并的数目colspan:列合并的数目十、有序列表和无序列表1.无序列表(P15) . . 2.有序列表(P14) .一、CSS基础1.什么是CSS?CSSCascading Style Sheets,层叠样式表 CSS版本号:2.02.CSS有什么用?快速维护页面元素(如文本、图像、链接等)的外观(如字体、字号、颜色等)。3.HTML属性与CSS样式的使用原则(P59)W3C建议尽量使用CSS样式取代HTML标记属性。例如:图像的src属性就无法用CSS取代，所以图像的的src属性就必须使用HTML属性实现，但是图像的width和height属性，也可以通过CSS样式实现,所以，图像的width和height属性就可以CSS样式实现。4.CSS应用方式4.1链接到外部的CSS文件 CSS文件的扩展名为.css all,所有媒体介质 screen,针对屏幕(浏览器) print,针对打印机 操作步骤: A.创建CSS文件 B.链接到CSS文件 4.2 书写于文档头部 . . 4.3 书写于标记内部 .5.CSS语法结选择器 属性:值; 属性:值; .二、选择器(哪些对象将使用CSS样式)1.通配选择器 - * (能够自动应用于所有元素)2.元素选择器 - 标记名称(自动应用于指定的元素)3.类选择器 - .类名称 说明: A.在使用CSS类时，需要添加class=类名称属性 B.CSS类在声明需要加点,但在使用时无需点。 C.多个CSS类之间以空格分隔。 D.变形的用法 元素名称.类名称,指只能用于指定元素。 如: td.a3 ,其代表的意思就是:a3类只能应用给单元格对象。 .类名称.类名称,指只能同时应用这两个类。 如: .a3.a4 ,其表示的意思是:只能同时使用a3和a4这两个类。 4.ID选择器 - #id A.只能手动的应用给文档的唯一对象。 B.使用时添加id=ID属性。 C.对象的id除CSS可以使用外，还可以被 JavaScript或jQuery使用到。 JavaScript: document.getElementById(string id) jQuery $(#id) 5.群组选择器(实际上具有相同属性的选择器的简捷方式) 选择器,选择器,.6.派生选择器(后代选择器) 选择器 选择器 . 说明:前面的选择器至少是后面选择器的父节点。 7.伪类选择器 :link,正常显示的状态 :hover,鼠标放上的状态 :active,鼠标按下的状态 :visited,访问过的状态 三、CSS单位1.长度px,像素%,百分比em,字号的倍数2.颜色A,英文名称,如red,green,blue等B,完整十六位进制数字,如#ff0000(红色),#00ff00(绿色),#ffffff(白色),#000000(黑色)C,简写十六位进制数字,如#f00D,RGB模式,如rgb(0,0,255)E.百分比RGB模式,如rgb(0%,100%,0%)3.CSS选择器优先级inline,IDs,classes,tags例1:内联样式其优先级的代码是：1,0,0,0例2:#a2-ID选择器的优先级是:0,1,0,0例3:.a2-类选择器的优先级是:0,0,1,0例 4p-元素选择器的优先级是:0,0,0,1例5#a1 #a2 .a3 .a4 p -优先级是:0,2,2,1一、表单1.表单的作用(P19)收集客户端的信息，然后提交给服务器。2.表单的标记.说明:A.action指服务器页面URL,一般为动态类型的文件(如jsp、php等)。B.method指表单的提交方式1. get,提交字符数较少;提交数据以名/值对形式附加在URL地址栏。2. post,提交字符数理论上无限制;提交数据将由HTTP请求头部一起发送。3.表单控件(表单元素)3.1说明: A.所有表单控件必须赋予含义明确的名称3.2单行文本框3.3密码框3.4单选框说明:A.一组类型的单选框名称必须相同。B.必须为单选框赋予有效提交值。3.5复选框说明:A.一组类型的复选框名称必须相同。B.必须为复选框赋予有效提交值。3.6 按钮提交按钮取消按钮自定义按钮(其行为由JS控制)3.7 列表框 . . .说明:A.multiple=multiple属性可以控制是否多选。B.必须为列表选项赋予有效提交值。3.8 多行文本框值3.9 隐藏域说明:隐藏域提交正确但无需用户干涉的信息。3.10 浏览框说明:A.具有浏览框的表单，其提交方式只能为post。B.具有浏览框的表单必须设置enctype=multipart/form-data属性。一、布局属性width描述:设置对象的宽度语法:width:value;height描述:设置对象的高度语法:height:value;overflow描述:溢出的处理语法:overflow:visible(可见)|hidden(隐藏)|scroll(滚动);二、边框属性border-top-width描述:设置上边框的宽度语法:border-top-width:value;border-top-style描述:设置上边框的线型语法:border-top-style:none|solid(实线)|dotted(点划线);border-top-color描述:设置上边框的颜色语法:border-top-color:value;border-top(补P682)描述:设置上边框的属性语法:border-top:width style color;border描述:设置边框的属性语法:border:width style color;三、内边距与外边距3.1 外边距margin-top描述:设置顶部的外边距语法:margin-top:value;margin-right描述:设置右侧的外边距语法:margin-right:value;margin-bottom描述:设置底部的外边距语法:margin-bottom:value;margin-left描述:设置左侧的外边距语法:margin-left:value;margin(补P703)描述:设置外边距语法:margin:value(四个方向相同);margin描述:设置外边距语法:margin:上下 左右;margin描述:设置外边距语法:margin:上 左右 下;margin描述:设置外边距语法:margin:上 右 下 左;padding-toppadding-rightpadding-bottompadding-leftpaddingpaddingpaddingpadding四、盒子模型(BoxModel)对象的宽度 = 左侧外边距 + 左侧边框 + 左侧内边距 + 宽度 + 右侧内边距 + 右侧边框 + 右侧外边距五、背景属性background-color描述:设置背景颜色语法:background-color:value;background-image描述:设置背景图像语法:background-image:url(图像URL);background-repeat描述:设置背景图像的平铺方式语法:background-repeat:no-repeat|repeat|repeat-x|repeat-y;background-attachment描述:设置背景图像的依附方式语法:background-attachment:scroll|fixed;background-position描述:设置背景图像的位置语法:background-position:水平 垂直;水平:left|center|right|value垂直:top|center|bottom|value;说明:图像的坐标原点(0,0)位于文档的左上角。所以，水平向左移动为负值;垂直向上移动为负值。background(补P733)描述:设置背景属性语法:background:color url(图像URL) repeatattachment 水平 垂直;标准文档流(正常文档流),HTML元素在浏览器显示的顺序由HTML标记的书写顺序决定。如果为块级对象则垂直排列;如果为内联对象则水平排列。六、浮动定位float描述:设置对象的浮动语法:float:left|right;说明:A.对象浮动后，将脱离标准文档流。B.float属性设置为left时,对象将尽量向左移动,直到父对象的边界或上一个浮动对象的边界为止。C.当(所有)子对象在方向上存在浮动属性时,其父对象的高度将清除为零。D.clear描述:清除浮动语法:clear:left|right|both;一、标准的清理浮动的方法.clear:after display:block; height:0; content:.; visibility:hidden; clear:both;.clear zoom:1;二、文本属性color描述:设置文本颜色语法:color:value;font-size描述:设置字号语法:font-size:value;说明:标题:16px24px正文:12px16pxfont-family描述:设置字体语法:font-family:value,value,.;font-style描述:文本倾斜语法:font-style:italic|no