2.Web前端技术基础解析

Web前端技术基础马鞍山市金禾软件信息技术有限责任公司Page2HTMLHypertextMarkupLanguage超文本标记语言Page3HTML-文档类型声明•文档类型声明doctype•元素element•属性attributehtml4.0&xhtml1.1!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN•html4.0~html5.0!DOCTYPEhtml向上向下兼容Page4head•title页面标题，必需且唯一•metametacharset=”utf-8”/metaname=descriptioncontent=Seo相关的页面介绍文字/metahttp-equiv=X-UA-Compatiblecontent=IE=edge,chrome=1metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1metaname=apple-mobile-web-app-capablecontent=yes•linklinkrel=shortcuticontype=image/x-iconhref==stylesheethref=元素•块级元素(block)div,p,h1~h6,ul,li,dt,dd,dl,form,section,article,nav,aside...特点：在文档流中默认占据整行的位置•行内元素(inline)span,em,strong,label,a,img,input,button,select,var,del...特点：在文档流中默认一行可以展示多个行内元素•嵌套规则块级元素可以嵌套所有行内元素，除a以外的行内元素不能嵌套块级元素错误的写法：spandiv文本内容1/div/spanPage6常用语意化元素•header,footer•section,article•nav,aside,figure•ol,ul,dl•table,tr,th,tdHTMLPage7合理使用语意化的标签增强页面的可访问性搜索引擎优化（SEO）Page8•id•class•不再使用的属性align,bgcolor,background,color,bgsound,border...HTML-通用属性Page9•form•label•input,textarea,select•buttonHTML-表单元素Page10label标签的应用用法1：inputid=J_MyChktype=checkboxvalue=/labelfor=J_MyChk点击我也可以让左边选中/label用法2：labelinputtype=checkboxvalue=/点击我也可以让左边选中/label•tabindex•autocomplete•disabled•button的type属性错误：button我是个按钮/button正确：buttontype=button我是个按钮/button表单元素对交互影响:通用属性Page11!--[ifltIE7]htmlclass=no-jsieie6lte9lte8lte7![endif]--!--[ifIE7]htmlclass=no-jsieie7lte9lte8lte7![endif]--!--[ifIE8]htmlclass=no-jsieie8lte9lte8![endif]--!--[ifIE9]htmlclass=no-jsieie9lte9![endif]--!--[ifgtIE9]htmlclass=no-js![endif]--!--[if!IE]!--html!--![endif]--HTML-IE条件注释Page12CascadingStyleSheet层叠样式表CSSPage13CSS11996.12成为推荐标准（字体，颜色、空白边）CSS21998.5成为推荐标准(浮动,定位,选择器)CSS2.12002年修订(伪类，属性选择器)CSS3未正式发布但已普遍开始应用CSSPage14media属性linkmedia=“screen”/样式表内的写法@mediaprint{#header{border:1pxsolid#000}}CSS-针对不同设备的CSS代码Page15CSS-针对不同设备的CSS代码Page16CSS-针对不同设备的CSS代码Page17层叠的意义•浏览器缺省设置•外部样式表•内部样式表•浏览者自定义样式CSS-层叠的意义Page18•选择器\属性\值selector{property:value;property:value;}CSS-CSS语法Page19•元素选择器h1•类选择器.classname•id选择器#id•全局选择器*•继承选择器divp•选择器分组h1,h2•伪类选择器:hover•CSS属性选择器input[type=“button”]ie6选择器CssSelectorPage20选择器的优先级表格中A、B、C、D分别代表四个等级A为最高级，D为最底级也可以理解为数学中的千位，百位，十位，个位，D就代表个位Page21伪类选择器•a:link,a:hover,a:active,a:visited•:hover和:focus在表单输入控件中使用•::selection对划选的内容进行样式设置•:first-child选择第一个元素Page22CSS-盒装模型Page23浏览器调试工具的使用Page24以上内容源自淘宝UED