html+css初级开发工程师html简介www维网（环球信息网）简称web分为 Web客户端 和 Web服务器程序WWW可以让 Web客户端（常用浏览器）访问浏览 Web服务器上的页面W3C万维网联盟文件名的命名规范：不能数字开头，在项目中不可用汉字命名。不能出现特殊字符html概念：1.描述网页的语言2.超文本标记语言，由一套标记标签组成3.不是编程语言声明：告诉浏览器用什么标准去解析网页网页的组成部分：结构层，表示层，行为层标签：概念：1.由<>包围的关键词2.标签通常成对出现，分为标签开头和标签结尾3.有部分标签是没有结束标签，成为单标签，单标签内必须用 / 结尾组成：标签名 标签内容 标签属性语义化标签：概念：根据标签名就能判断出标签内容作用： 1.网页结构层次更清晰。 2.更容易被搜索引擎收录 3.更容易让屏幕阅读器读出网页内容。注：页面中所有的内容，都要放在 HTML 标签中标签的内容可以是其他标签标题标签<h1 id="main">标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6> 段落标签<p>段落标签<p>非常棒</p></p>换行标签<br/>水平线<hr/>强调标签<em>倾斜</em><i>倾斜</i><strong>强壮</strong><b>加粗</b>图片标签<img src="img/dada.png" alt="dada" title="图"/><img src="img/dada.png" alt=""/>超链接<a href="http://www.baidu.com" target="_blank">百度</a><a href="#main">主题</a><a href="mailto:xxxxx@163.com">打开邮箱</a><a href="笔记1.html#footer">跳转到笔记1的底部</a>列表标签<ul> <li> <a></a> </li> <li>2</li> <li>3</li></ul><ol> <li>a</li> <li>b</li> <li>c</li></ol><dl> <dt>第一章</dt> <dd>第一节</dd> <dd>第二节</dd> <dd>第三节</dd> <dt>第二章</dt> <dd>第一节</dd> <dd>第二节</dd> <dd>第三节</dd> <dt>第三章</dt> <dd>第一节</dd> <dd>第二节</dd> <dd>第三节</dd></dl>表格标签<table border="1" width="800"> <caption>通讯录</caption> <thead> <tr> <th>序号</th> <th>姓名</th> <th>电话</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td rowspan="2">1</td> <td rowspan="2">dada</td> <td>123456789</td> <td rowspan="2">dada</td> </tr> <tr> <td>123456789</td> </tr> <tr> <td>2</td> <td>dada</td> <td>123456789</td> <td>dada</td> </tr> </tbody> <tfoot> <tr> <td colspan="4" align="right">共2人</td> </tr> </tfoot></table>表单标签<form action="" method="post"> 用户名：<input type="text" name="username"/><br/> 密码：<input type="password" name="password"/><br/> 性别： <input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="1">女 <br/> 爱好： <select name="like"> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> <br/> 个人简介： <textarea cols="50" rows="10"></textarea> <input type="button" name="but" value="按钮"> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"></form>无语义标签<div></div><span></span>模块划分常见的企业站，多由头部区，展示图片区域，主题区域，底部信息区域组成css的语法和选择器css概念：CSS 全称为层叠样式表，它主要是用于定义HTML内容在浏览器内的显示样式。引入方式：1.外部样式引入 link @import2.内部样式 代码通常存放在<style></style>标签内3.内联样式语法：css 样式由选择符和声明组成，而声明又由属性和值组成 选择符{属性:值}例：p{color:red;} 选择符：又称选择器，指明网页中要应用样式规则的元素选择器：标签选择器类选择器id选择器通配符选择器后代选择器子元素选择器群组选择器伪类选择器背景：背景颜色 background-color背景图片 background-image背景图片位置 background-position背景图片重复 background-repeat背景图片定位 background-attachment:scroll/fixed简写：background:#ff0000 url(bg01.jpg) no-repeat fixed center重点：link和@import的区别（无样式闪烁问题FOUC）@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。三种引入样式的优先级选择符的优先级通配符* 0 标签 1 类/伪类/属性 10 ID 100 行内样式 1000 important 1/0(无穷大)css样式基本样式：宽 高 鼠标样式 可见样式 溢出隐藏 透明度字体样式：字体 font-family字号 font-size字的样式： font-style字的粗细：font-weightfont:font-style font-weight 20px/40px "宋体"字的颜色：color文本属性：行高：line-height文本修饰：text-decoration：none缩进：text-indent字符间距：letter-spacing空白间距：word-spacing英文大小写：text-transform:capitalize/uppercase/lowercase文字水平对齐方式:text-align文本所在行高垂直对齐方式：vertical-align盒模型/*样式初始化*/body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{ margin:0; padding:0;}ul,ol{ list-style: none;}盒模型：组成部件：外边距+边框+内边距+内容IE盒模型和标准盒模型切换box-sizing:border-box/content-box;元素分类块级元素1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。<br/>2、元素的高度、宽度、行高以及顶和底边距都可设置。<br/>3、元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。<div> <p> <h1>~<h6><ol> <ul> <dl> <li><address> <blockquote><form>行内元素1、和其他元素都在一行上；<br/>2、元素的高度、宽度、行高及顶部和底部边距不可设置；<br/>3、元素的宽度就是它包含的文字或图片的宽度，不可改变。<a> <span> <br/> <i><em> <strong> <label>行内块状元素1、和其他元素都在一行上；<br/>2、元素的高度、宽度、行高以及顶和底边距都可设置。<img> <input> selecttextarea button iframe元素分类转换displayblock：将元素转换为块级元素inline：将元素装换为行级元素inline-block：将元素转换为内联块元素none: 将元素隐藏样式初始化的原因：由于浏览器内核的不同，对标签默认样式的解析不同，导致页面呈现的样式不同。样式初始化h1,h2,h3,h5{ margin:0; list-style:none;}浮动浮动原理浮动使元素脱离文档普通流，漂浮在普通流之上的。浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。浮动会产生块级框（相当于设置了 display:block），而不管该元素本身是什么。清除浮动的方法给浮动元素的后面添加一个空的块级元素用clear:both;css定位相对定位（相对于原位置）需要设置 position:relative（相对定位），它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。相对于原位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，偏移前的位置保留不动。z-index 层级设置绝对定位（相对于父类）需要设置 position:absolute(绝对定位)，这条语句的作用将元素从文档流中拖出来使用 left、right、top、bottom属性相对于其最接近的一个具有定位属性的父类包含块进行绝对定位。如果不存在这样的包含块，则相对于 body元素，即相对于浏览器窗口。z-index 层级设置固定定位（相对于网页窗口）与 absolute 定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed 属性功能相同。z-index 层级设置页面布局布局思路：从外向里从上至下从左至右样式编写顺序：定位（float position left right bottom top z-index）宽、高、边距文字样式背景样式过渡 动画样式书写规范：0.5可以写.5，0可以省略对于可以简写的属性尽量简写 background margin padding border给子元素添加样式前写父级类名尽量使用类，不要使用id问题：乱码问题 编码样式引入无效问题（属性丢失，路径错误）清除浮动问题定位乱的问题---找绝对定位的父级添加相对定位a标签鼠标经过无效问题--a:link a:visited a:hover a:active兼容性问题(CSS HACK)概念：CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号。CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。1、属性级Hack：IE6能识别下划线“_”和星号“*”，IE7能识别星号“*”，但不能识别下划线”_ ”，而firefox两个都不能认识。2、选择符级Hack：IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。3、IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。针对所有IE：<!-[if IE]><!-您的代码-><![endif]>，针对IE6及以下版本：<!-[if it IE 7]><!-您的代码-><![endif]->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
