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元素分类转换
display
block：将元素转换为块级元素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失效，对写在判断语句外面的所有代码都会失效。