HTML第一天
web标准
01.遵循原因：由于各个浏览器的内核不同，遵循web标准可以让网页能显示在不同浏览器上
02.web标准的好处：易维护、提高页面浏览速度
03.web标准的构成：结构、样式、行为
浏览器内核
IE：trident
firefox： Gecko
chrom、safari：webkit
opera：presto
html骨架(默写) head给浏览器 、body用户
文档类型<!DOCTYPE html> (H5的规范)
作用：首位，告知浏览器文档使用哪种规范
页面语言 <html lang = "en"> 指定html 语言种类
考虑了浏览器和操作系统的兼容性，目前仍然使用 zh-CN属性值
字符集 <meta charset = "UTF-8" /> 必写，否则乱码
字符的编码方式，以便计算机能够识别和储存各种文字
常用标签
分类：单标签、双标签
关系：嵌套关系、并列关系
语义化：根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰
若去掉css，网页结构依然组织有序，则具有良好的可读性
div和span都是用来布局的，而且没有语义的，块级和行级的区别
<strong></strong>加粗 <em></em>倾斜
链接标签：
<a href = "目标地址(#为空链接)" target = "跳转方式"> _self默认/_blank新窗口中打开
图像标签
<img src = "" alt = "图像不能显示时的替换文本" title = “鼠标悬停时显示的内容”/>
base标签
<base target = "_blank"> 设置整体链接的打开状态
<pre>我是与格式化标签</pre>
特殊字符
空格
小于号 ⁢
大于号 >
和号 &
版权 ©
.........
相对路径
当前目录 ./
上级目录 ../
下级目录 /
锚点定位 两步
1.找目标：<h3 id = "id名">第二集</h3>
2.找关系：<a href = "#id名">
XHTML extensible(可扩展的)html(超文本标签语言)
XHTML时、是以XML格式编写的HTML元素，是严格版的HTML
HTML第二天
表格 table(会用)
作用：不是用来布局的，用来常见显示、展示表格式数据；只有行没有列
基本用法：
<table>
// tr表示一行
<tr>
<td> // td表示单元格
</td>
</tr>
属性：
border 默认0
cellspacing 默认2
cellpadding 默认2
宽、高、align(在网页中的水平对齐方式)左中右
表头标签：<th></th>
标题标签：<caption></caption>
合并单元格：(要删除多余的单元格)
跨行合并:rowspan = "个数"
跨列合并:colspan = "个数"
列表标签(重点)
无序列表 ul > li
有序列表 ol > li
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>
表单标签(重点)
目的:收集用户信息
构成:表单控件、提示信息、表单域(容器)
表单控件
input 控件
属性
type
text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
name 控件的名称-用于区别不同的表单
value 默认文本值
size 在页面中的显示宽度
checked 定义选择控件默认被选中的项
maxlength 控件允许输入的最多字符数
label标签
作用：用于绑定一个表单元素
绑定方法一：包裹input表单
绑定方法二：属性 for = "表单的name属性值"
textarea控件 文本域
与文本框的区别：显示多行/双标签/用于留言板
select下拉列表
语法：
<select>
<option>选项1</option>
<option>选项2</option>
...
</select>
注意：
至少包含一对option
option中定义 selected = "selected"时，当前项即为默认选中项
form表单域
用户信息通过form表单域传递给服务器
属性：
action URL地址
method get/post提交的方式
name 用于指定表单的名称，以区别同一页面的多个表单
CSS笔记
引入方式
行内样式：style=""
内部样式：半分离，只控制当前页面，一般在head中，理论上哪都能放，type在H5中可以省略
外部样式：完全分离，<link rel="stylesheet" type="text/css" href="路径">
rel：关系，定义文档间的关系，被链接的文档是一个样式表文件
选择器 (选对人，做对事)
基础选择器 / 复合选择器
基础选择器
通配符选择器
id选择器
类选择器
标签选择器
高级选择器
后代选择器
指定标签选择器
并集选择器
font字体
font-style 字体风格--normal / itallic (倾斜)
font-weight 字体粗细--normal / bold / 100~900 (400=normal 700=bold)
font-size 设置字号-----一般先给body指定整个页面的字号
font-family 字体样式--用中文时注意兼容，可以用英文或unicode
综合设置
CSS外观属性
color 文本颜色有三种方式
text-align 文本内容水平对齐方式
line-height 行高
text-indent 首行缩进
text-decoration 文本修饰
none 取消下划线
underline 添加下划线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
复合选择器
1.后代选择器
作用：用来选择元素组的祖孙后代
符号：空格
语法：父级 子级{属性:属性值;属性:属性值;}
2.子元素选择器
作用：只能选择第一层
符号： 大于号
语法：.class > h3{color:red;font-size:14px;}
3.交集选择器
作用：选择既有标签一的特点，又有标签二的特点
符号：无
语法：如 p.one （中间不能有空格）
4.并集选择器
作用：集体声明
符号：逗号
语法：.one, p , #test {color: #F00;}
5.伪类选择器
链接伪类选择器
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动上的链接
a:active 选定的链接
标签显示模式display
块级元素
h1、p、div、ul、ol、li
特点：默认宽度是父级的100%，高宽，内外边距可以控制
行级元素
a、strong、b、em、i、del、s、ins、u、span
特点：只能容纳文本或其他行内元素，高宽直接设置是无效，默认宽度由内容撑开
行内块级元素
特点：高宽边距都能设置，宽度默认内容撑开
常见导航布局思路
一般导航的布局结构是一个大的 div表示整体盒子，里面是ul嵌套多个li。li里面嵌套a，我们需要将li在一行先是(fudong ,inline-block),然后用IDS【play：block将li里
行高
行高大于高度，偏下；反之偏上
背景 background
颜色 -color
图片 -image url(地址)
平铺 -repeat
repeat 、no-repeat、repeat-x、repeat-y
位置 -position
左/中/右(X坐标) 上/中/下(Y坐标)
背景附着
background-attachment：scroll | fixed
背景透明
background：rgba(0,0,0,0)
CSS三大特性
覆盖性
继承性
子元素继承父元素的样式：(text- font- line- color)
优先级 权重
!important 无穷大、行内1000、id100、class 10、标签 1、继承 0、最后一位不进位
网页布局本质
1.设置盒子大小，放位置
2.盒子里放入元素
盒子模型
没有边框 border：none
内盒实际大小 = 内容宽高(widrh/height) + 内边距 + 边框
表格细线边框 collapse(合并)
1.cellspacing="0"
2.border设置1px
3.取消重叠：table{ border-collapse:collapse; }
padding显示问题
如果给默认宽高的盒子设置了padding，盒子会被撑大
如果没有给一个盒子指定宽度， 如果给这个盒子指定padding， 则不会撑开盒子。
块级盒子水平居中
1.盒子必须指定宽度
2.margin：0 auto
文字居中
text-align:center 盒子里面的行内和行内块元素也可以水平居中对齐
插入图片(多)和背景图片的区别
相邻块元素 垂直外边距的塌陷
产生条件：上下相邻元素外边距相遇，会取两个值得较大者
解决方案：
1.尽量只给一个盒子添加margin值
嵌套块元素 垂直外边距的塌陷
产生条件：
1.如果父元素没有上内边距及边框
2.父元素的上外边距 与 子元素的上外边距 发生合并
3.合并后的外边距取两者中的较大者
解决方案：
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加 overflow:hidden(强制区分父级和子级的关系)
盒子模型布局稳定性
根据稳定性来分，建议优先使用 宽度 > 内边距 > 外边距
border-radius
圆角边框，正方形：50% ；矩形：height/2 px
取值个数详解：
一个值：表示四个角都是一样的
两个值：对角，左上角和右下角 左下角和右上角
三个值：左上 右上和左下 右下
四个值：左上 右上 右下 左下
盒子阴影
div {
width: 200px;
height: 200px;
border: 10px solid red;
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4)
box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
书写规范：空格
浮动
CSS布局的三种机制：普通流、浮动、定位
特性：脱离文档流
浮动的作用：
1.能使多个盒子水平排列成一行 (inline-blobk的话会有空白间隙)
2.能使盒子左右对齐
3.最早是来实现文字环绕图片的效果
浮动的特点：
1.会改变元素的display属性 生成的块级框和行内块极其相似。
2.若父元素宽度不够，则会挤下去
3.尽量宽高实体化
常见布局
左右布局
左中右布局
一父三子，12左，3右，2margin
浮动布局注意
建议给浮动的元素设置一个父元素，父元素设置固定的宽高，避免出现兼容性问题
浮动的扩展
浮动元素与父盒子的关系
1.子的浮动参照父对齐
2.不会与父盒子的边框重叠，也不会超过父盒子的内边距
浮动元素与兄弟(前后)盒子的关系
1.前浮，后前顶对齐
2.前普 后浮，后顶与前底齐
浮动只会影响当前或者后面的标准流盒子，不会影响前面的标准流。
所以浮动一般都是，父盒子里的子盒子全部浮动
清除浮动(清除浮动造成的影响)
需要清除浮动的情况：
1.父级没高度
2.子盒子浮动
3.影响下面布局，就应该清除浮动了
本质:为了解决父级元素因为子元素浮动而引起的内部高度为0的问题。清除后，父级会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
1.额外标签法
在浮动元素末尾添加一个空的标签，如<div style="clear:both"></div>
缺点：添加无意义标签，结构化差
2.父元素添加 overflow：hidden | auto | scroll
缺点：内容多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3.使用after伪元素清除浮动(添加空元素的升级版)
缺点，IE6-7不支持，使用 zoom:1触发 hasLayout。
代表网站：百度、淘宝、网易等
.clearfix:after {
content: ""; display: block; height: 0; clear: both; visibility: hidden;
}
.clearfix {
*zoom: 1;
} /* IE6、7 专有 */
4.使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
缺点：和3一样，但是代码更简洁
定位
三种机制：
普通流(地面)、浮动(半空)、定位(天上)
相对定位：
1.相对于它在标准流的位置来移动的
2.原来在标准流的区域继续占有，后边的盒子任然以标准流的方式对待它
绝对定位：(依赖父级)
1.完全脱离文档流--完全不占位置
2.若父元素没有定位，则以了浏览器为准定位 Document
3.父元素(祖先，逐级向上寻找) 要有定位，相对|绝对|固定 都是
固定定位：
1.完全脱标，---完全不占位置
2.只根据浏览器的可视窗口
浏览器可是窗口 + 边偏移属性
定位的扩展
1.绝对定位的盒子居中
注意：绝对定位/固定定位的盒子 不能通过设置 margin：auto设置水平居中
方法：left + top+ margin-left + margin-top
2.z-index
不加单位，若同值，后来居上
3.定位改变display属性
inline-block 转换行内块
float 转换行内块(类似，并不一样，因为脱标)
绝对定位和固定定位也和浮动类似，默认转换 行内块
脱离文档流的元素不会发生垂直外边距合并的问题
|
|
收藏
淘帖
踩
