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
@import
2. 外部款式
代码通常寄存在 <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-weight
font: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> select
textarea 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 失效，对写在判断语句外面的所有代码都会失效。