《网页工程师认证-网页项目训练》第一章-Web标准与CSS布局概述.pptVIP

精选2021版课件*1.1Web标准的构成和发展对网站所有者的好处:更少的代码和组件，容易维护带宽要求降低（代码更简洁），成本降低更容易被搜寻引擎搜索到改版方便，不需要变动页面内容提供打印版本而不需要复制内容提高网站易用性精选2021版课件*1.2HTML基本语法HTML元素构成了HTML文件,这些元素是由HTML标签(tags)所定义的。HTML文件是一种包含了很多标签的纯文本文件,标签告诉浏览器如何去显示页面。从结构上讲,HTML文件由元素(element)组成,组成HTML文件的元素有多种,用于组织文件的内容和知道文件的输出格式。精选2021版课件*1.2HTML基本语法1）一般标签一般标记由一个起始标签和一个结束标签所组成。例如:x受控文字/x2）空标签虽然大部分标签是成双成对的出现，但也有一些是单独存在的，这些标记被称为空标签。精选2021版课件*1.2HTML基本语法1.文件结构标签:html,head,body2.区段落式标签:title,hi,br,p,pre,address3.字符格式标签:b,I,tt,font,center,blink,big4.列表标签:ul,ol,il,dl,dd,dt,dir,menu5.链接标签:a6.多媒体标签:img,embed,bgsound7.表格标签:table,td,tr,th,caption8.表单标签:form,input,textarea,select9.层标签:div精选2021版课件*1.3从HTML转向XHTML(1)Xhtml中的dtd过渡型:Transitional严格型:Strict框架型:Frameset精选2021版课件*1.3从HTML转向XHTML(2)需要为html标签添加一个命名空间(3)所有的标签和标签的属性都必须小写,属性值可以大写(4)属性值必须用双引号括起来(5)所有的标签都必须关闭,空标签也需要关闭(6)不允许属性简写(7)如果使用的文档类型是严格型,则在xhtml文档中许多定义外观的属性是不允许使用。精选2021版课件*1.4CSS的语法结构CSS属性与选择符CSS的语法结构仅仅由3部分组成:选择符、属性和值。例如:body{margin-top:20px;}body为选择符，margin-top是属性，20px是值。精选2021版课件*1.4CSS的语法结构ID和Class选择符ID选择符用#标识，在网页中每个ID只可用1次。例如:divid=“Nelson”呵呵/div则CSS中要求如下书写:#Nelson{width:200px;color:red;}精选2021版课件*1.4CSS的语法结构ID和Class选择符Class选择符用.标识，在网页中每个Class只可用多次。例如:divclass=“Nelson”呵呵/div则CSS中要求如下书写:.Nelson{width:200px;color:red;}精选2021版课件*1.4CSS的语法结构类型选择符类型选择符是指将已有的网页标签类型来作为名称的选择符。例如:body{margin-top:20px;}精选2021版课件*1.4CSS的语法结构群组选择符群组选择符是指将一组对象进行相同样式的定义。例如:body,div,span{margin-top:20px;}※注意:这里body和div中间用的是小逗号精选2021版课件*1.4CSS的语法结构包含选择符包含选择符是指将某一对象中的子对象进行单独的样式定义。例如:.Nelsonli{margin-top:20px;}※注意:这里Nelson和li中间用的是空格应用如下:divclass=“Nelson” li哇哈哈，OTZ/li/div精选2021版课件*1.4CSS的语法结构组合选择符例如:.Nelsonli,#nieli{margin-top:20px;}那么在class为Nelson和id为nie样式下的li标签的margin-top属性都为20px了。精选2021版课件*1.4CSS的语法结构标签指定选择符如果享用id或class，也想同时使用标签选择符。可以按如下格式:例如:p#nie{margin-top:20px;}那么id为nie样式下的p标签的m