html+css初级开发工程师html简介www(globalinformationnetwork)简称web分为webclient和webserver程序WWW允许web客户端(常用的浏览器)访问和浏览webW3CWorldWideWebConsortium服务器页面文件名命名规范：不能以数字开头，项目中不能以汉字命名。无特殊字符html概念：1.描述网页的语言2.超文本标记语言，由一组标记标签组成3.不是编程语言声明：告诉浏览器使用什么标准来解析网页的组件：结构层、表现层、行为层标签：概念：1.关键词用<>包围2.标签通常成对出现，分为标签开始和标签结束3.有些标签没有结束标签，成为单个标签，单个标签内部必须由/结尾组成：标签名称标签内容标签属性语义标签：概念：标签内容功能可以根据标签名称判断：1.网页的结构层次更清晰。2、更容易被搜索引擎收录。3.屏幕阅读器更容易读出网页内容。注意：页面上的所有内容都必须放在HTML标签中。标签的内容可以是其他标签。标题标签标题1

标题2

标题3

标题4

标题5

标题6

段落标签

很棒

换行标签
横线

强调标签倾斜slantedstrongbold图片标签超链接百度主题打开邮箱跳转到note1底部列表标签

第一章: 第一章第一节; 第二节; 第三节
第二节: 第一节; 第二节; 第三节
第三章: 第一节; 第二节; 第三节

表格标签联系人序列号姓名电话备注1dada123456789达达1234567892达达123456789达达共2人表单标签用户名：
密码：
性别：男女性
爱好：阅读旅游运动购物
个人简介：无语义标签

模块对常见的企业站点进行划分，多以页眉区、展示图片区、主题区、底部信息等进行划分语法和selectorcssregioncompositioncss的概念css：CSS全称为级联样式表，主要用于定义HTML内容在浏览器中的显示样式导入方式：1.外部样式导入链接@import2.内部样式代码通常存放在标签3.内联样式语法：css样式由选择器和声明组成，声明由属性和值组成Selector{attribute:value}例子：p{color:red;}Selector:also称为选择器，表示网页中应用样式规则的元素选择器：标签选择器类选择器id选择器通配符选择器后代选择器子元素选择器组选择器伪类选择器颜色背景-颜色背景图像背景-图像背景图像位置背景-positionbackgroundimagerepeatbackground-repeatbackgroundimagepositioningbackground-attachment:scroll/fixedabbreviation:background:#ff0000url(bg01.jpg)no-repeatfixedcenterfocus:link和@import的区别（无样式闪烁问题FOUC)@import是CSS提供的语法规则，只具有导入样式表的功能；link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS和rel连接属性等等。页面加载时，同时加载link标签引入的CSS；@import引入的CSS将在页面加载后加载。@import是CSS2.1特有的语法，所以只能被IE5+识别；因为链接标签是一个HTML元素，所以不存在兼容性问题。三种导入样式的优先级Selectorprioritywildcard*0label1class/pseudo-class/property10ID100inlinestyle1000important1/0(infinity)cssstyle基本样式：宽高mousestylevisiblestyleoverflowhidetransparency字体样式:fontfont-familyfontsizefont-sizecharacterstyle:font-style字符粗细:font-weightfont:font-stylefont-weight20px/40px《宋字体》字符颜色:color文字属性:行高:line-heightTextdecoration:text-decoration:noneIndentation:text-indentCharacterspacing:letter-spacingBlankspacing:word-spacingEnglishcapitalization:text-transform:capitalize/uppercase/lowercase文本水平对齐方式：text-alignText行的垂直对齐方式height:垂直对齐框模型/*样式初始化*/body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{margin:0;填充：0；}ul,ol{list-style:none;}盒子模型:组件:outermargin+border+innermargin+contentIE盒子模型和标准盒子模型切换box-sizing:border-box/content-box;元素分类块级元素1.每个块级元素另起一行，后面的元素也另起一行。
2.可以设置元素的高度、宽度、行高以及上下边距。
3.如果未设置元素宽度，则它是其父容器的100%（与父元素的宽度一致），除非设置了宽度。

~

行内元素1，其他元素在一行；
2、不能设置元素的高度、宽度、行高和上下外边距；
3.元素的宽度是它包含的文本或图片的宽度，不能更改。
行内块元素1，其他元素在一行；
2，元素高度，宽度，行高以及因为可以设置顶部和底部边距。selecttextarea按钮iframe元素分类转换displayblock：将元素转换为块级元素inline：将元素转换为行级元素inline-block：将元素转换为inline-block元素none：初始化元素隐藏样式原因：由于浏览器内核不同，对标签默认样式的解析不同，导致页面呈现的样式不同。样式初始化h1,h2,h3,h5{margin:0;列表样式：无；}Float浮动原理Floating使元素脱离文档的正常流，漂浮在正常流之上。浮动元素在正常流中仍然出现在它的位置，然后根据设置的浮动方向尽可能向左或向右浮动，直到浮动元素的外边缘遇到包含框或另一个浮动元素，并允许文本和内联元素围绕着它。浮动产生块级框（相当于设置display:block），与元素本身无关。清除浮动的方法是在浮动元素后面添加一个空的块级元素。使用清除：两者；csstoposition相对定位（相对于原来的位置）需要设置position:relative（相对定位），它使用left,right,top,bottom属性来决定元素在正常文档流中的偏移位置。相对于原位置，移动的方向和幅度由left、right、top、bottom属性决定，偏移前的位置不变。要在z-index级别设置绝对定位（相对于父类），需要设置position:absolute（绝对定位）。该语句的作用是将元素拖出文档流，并使用相对于其最近的具有positioned属性的父包含块的left、right、top和bottom属性进行绝对定位。相对于body元素，即相对于浏览器窗口，如果不存在这样的包含块。z-index级别设置固定定位（相对于web窗口）类似于绝对定位类型，但它的相对移动坐标是view（屏幕内的web窗口）本身。由于视图本身是固定的，不会随着浏览器窗口的滚动条而改变，除非你移动浏览器窗口在屏幕中的屏幕位置，或者改变浏览器窗口的显示尺寸，所以固定定位的元素会始终在浏览器窗口内视图的某个位置，不受文档流向的影响，与background-attachment:fixed属性作用相同。z-index层级设置页面布局布局思路：从外到内，从上到下，从左到右样式书写顺序：定位（floatpositionleftrightbottomtopz-index）width,height,margin文字样式背景样式过渡animationstyle写法规范：0.5可以写成.5，0可以省略。对于可以简写的属性，尽量简写backgroundmarginpaddingborder。在给子元素添加样式之前先写父类名。尝试使用类而不是ID。(propertylost,wrongpath)clearfloatingproblem定位问题---找到绝对定位的parentAddrelativepositioningalabelMouseoverinvalidproblem--a:linka:visiteda:hovera:active兼容性问题(CSSHACK)概念：CSShack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号。CSS属性Hack、CSS选择器Hack和IE条件注释Hack，Hack主要针对IE浏览器。1.属性级Hack：IE6可以识别下划线“_”和星号“”，IE7可以识别星号“”，但不能识别下划线“_”，firefox不能识别。2.SelectorlevelHack：IE6可以识别html.class{}，IE7可以识别+html.class{}或*:first-child+html.class{}。3.IE条件注释Hack：IE条件注释是微软IE5提供的非标准逻辑语句。对于所有IE：对于IE6及以下版本：;，这种Hack不仅对CSS生效，对判断语句中写的所有代码都生效。