div+css-基础知识

XHTML•HTML（HyperTextMark-upLanguage），超文本标记语言。•XHTML（TheExtensibleHyperTextMarkupLanguage），可扩展超文本标识语言)。•XML（ExtensibleMarkupLanguage），可扩展标记语言。•HTML是一种基本的WEB网页设计语言，XHTML就是一个扮演着类似HTML的角色的XML，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。目前网站设计中推崇的WEB标准就是基于XHTML的应用。XHTML设计要求!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN==Content-Typecontent=text/html;charset=utf-8/title标题/title/headbody主题内容/body/html!DOCTYPE标签•!DOCTYPE声明位于文档中的最前面的位置，html标签之前。①严格的（Strict），要求严格的DTD，不能使用任何表现层的标示和属性!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN②过渡的(Transitional),要求宽松的DTD，可使用表现层的标示和属性!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN③框架的(Frameset),被用于带有框架的文档。除frameset元素取代了body元素之外，FramesetDTD等同于TransitionalDTD：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN•DocType声明可告知浏览器文档使用哪种HTML或XHTML规范。它不是XHMTL文档的一部分，也不是文档的一个元素，没必要加上结束标签！命名空间（NameSpace）•htmlxmlns=•“xmlns”是xhtmlnamespace的缩写，叫做名字空间声明。•允许通过一个在线地址指向来识别名字空间，名字空间就是给文档做一个标记，告诉别人，这个文档是属于谁的。只不过这个谁用了一个网址来代替。•w3.org的校验器不会由于这个属性没有出现而报告错误，这是一个固定的值，即使文档里没有包含，它也会自动加上。语言编码•为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它使用的编码语言。•metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/•metahttp-equiv=“Content-Type”content=“text/html;charset=gb2312”/XHTML语法•标签被正确嵌套divspan/span/div•所有标签一定要小写•所有标签一定要关闭•属性不能简写inputchecked=checked/•属性值必须加引号tablewidth=100%•用id属性代替name属性imgsrc=picture.gifid=picture1/•img标签必须加上alt属性imgsrc=image/logo.gifalt=“”/•应该在/符号前添加一个额外的空格，以使XHTML与当今的浏览器相兼容。常用的标签一、层标签div标签，称为定义标记，它不具有实际的意义，其作用就是设定内容的摆放位置，实际就是一个“容器”，用来放置其他元素。二、图片标签imgsrc=image/logo.gifalt=“/src属性是图像的URL，alt属性是鼠标指示图片时显示的方案或当用户看不到图片时显示的文字时，显示的文本三、链接标签1.链接到其他网站的网页ahref=““title=“动人网”动人网/a注：这里的http不能省略,href属性代表链接URL2.链接目录的问题（相对路径）ahref=“index.html”title=“”请点击/aahref=“./index.html”title=“”请点击/aahref=“../index.html”title=“”请点击/aahref=“/index.html”title=“”请点击/a3.链接Email地址ahref=“mailto:[e-mail]”title=“”[e-mail]/a四、列表标签1.无序列表HTML代码：效果2.有序列表3.释义列表五、段落标签p六、范围标签span应用在行内，用以定义一小块需要特别标示的内容，它只能通过设置CSS样式才能发挥作用。七、表单form中input标签类它们都是自关闭标签，若该标签需要提交数据，为了能正确区别各自提交的数据，请使用name属性文本框inputtype=“text”value=“文本框中的文字”name=“test”/其中type属性为text，提定其为标准文本框，value属性用来指定文本框里的默认文本。密码输入框：inputtype=passwordname=password和文本框基本类似，只是会以星号代替用户输入；3.点击后提交表单数据的按钮inputtype=“submit”value=“按钮文字”/单独使用没有任何意义，必须和form标签结合使用4.重置按钮inputtype=“reset”value=“按钮文字”/5.普通按钮inputtype=“button”value=“按钮文字”/6.图片按钮inputtype=“image”src=“search.gif”alt=“搜索”/注：它也可以用来提交表单数据7.复选框inputtype=checkboxname=stuvalue=6310510101“/刘成br/inputtype=checkboxname=stuvalue=“6310510111“/李阳br/复选框后面的文字选项采用直接输入，不需要属性而每个选项所代表的值用value属性控制另外它还可以有个checked属性，可以控制复选框是否被选中inputtype=checkboxname=stuchecked=“checked”value=6310510101“/刘成8.单选框inputtype=“radioname=stuvalue=6310510101“/刘成br/inputtype=“radioname=stuvalue=“6310510111“/李阳br/与复选框使用类似，但这里要注意的一个问题是如果有多个单选框，但如果只能选中其中一个，则这几个单选框的name属性值必须完全相同9.选择文件框inputtype=“file”name=“up”/10.隐藏域inputtype=“hidden”name=“email”value=“”/虽然元素不会显示在文档里，所以用户也无法操作该元素。该元素通常用来传输一些客户端到服务器的状态信息。虽然此元素不会显示出来，但是用户可以通过查看HTML的源代码看到该元素属性的值，所以请注意，不要用该元素传递敏感信息，比如密码。八、下拉框标签select标签，它的每个选项使用option标签进行嵌套，显示的文字在option和/option之间，每个选项对应的值在option的value属性中设定，若想其中某个选项被选中，请设定该项的selected属性为”selected”selectname=search_typeoptionselected=selectedvalue=auction搜索宝贝/optionoptionvalue=shop搜索店铺/optionoptionvalue=nick搜索掌柜/optionoptionvalue=info搜索资讯/optionoptionvalue=web搜索网页/option/select九、meta标签它是一个常用的标签，放在head/head标签中，主要用法如下：1.指明语言编码形式：metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/2.网站描述metaname=descriptioncontent=淘宝网(taobao.com)中国最大,最安全的个人网上交易社区(C2C)...../3.为搜索引擎提供的关键字列表metaname=keywordscontent=淘宝,掏宝,网上购物,C2C,在线交易........./4.告诉搜索引擎机器人（Robot）哪些页面需要索引，哪些页面不需要索引metaname=Robotscontent=All|None|Index|Noindex|Follow|Nofollowall：文件将被检索，且页面上的链接可以被查询；none：文件将不被检索，且页面上的链接不可以被查询，它和noindex,nofollow起相同作用index：文件将被检索；（让robot/spider登录）follow：页面上的链接可以被查询；noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)CSS一、什么叫CSSCSS（CascadingStyleSheets）：层叠样式表，一种定义样式的语言，用于描述如何格式化和显示网页中的信息。目前CSS2.1为W3C的候选推荐标准。继承性，就是父元素的CSS属性也会适用于子元素。但是有些属性是不能继承的，例如border、margin、padding和背景。div{color:red;font-size:14px;}divspan继承性/span/div层叠性我们知道文档中的一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠。这些规则有可能不矛盾的，自然这些规则将会同时起效；然而有些规则是相互冲突的，为此需要为每条规则制定特殊性，当发生冲突的时候必须选出一条最高特殊性的规则来应用。CSS样式的特殊性权重ID选择符，特殊性加0，1，0，0类选择符，特殊性加0，0，1，0标签选择器，特殊性加0，0，0，1通配符，特殊性加0，0，0，0.内联规则，特殊性加1，0，0，0层叠的重要度，采用以下重要度次序•浏览器默认样式•用户定义样式•制作者定义样式•标为!important的制作者样式•标为!important的用户样式权重一样时，会采用“层叠原则”后定义的会被应用。在CSS2中，用户的“!important”规则具有最高的优先权（高于内联样式，IE6不支持）！二、CSS的神奇性网站：文件，就可以体现不同的设计风格，这些风格各异的页面，若查看源文件，会