html css
- 1、网页的组成
网页主要由文字、图像和超链接、音频、视频以及Flash等元素构成。
- 2、常用浏览器及内核
浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。Safari – webkit Chrome --blink
- 3、W3C标准作用及web 标准三层组成
约束浏览器 使浏览器内容统一
结构（html）、 表现（css）、 行为（JavaScript）
- 4、html介绍
HTML 指超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
超文本，有2层含义： 因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。
- 5、HTML骨架标签 分类及关系
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
标签分类：双标签 和 单标签
标签关系：嵌套关系（父子关系） 和 并列关系（兄弟关系）
- 6、排版标签
标题标签：h1~h6 （块级元素）
段落标签：p （块级元素）
水平线标签：<hr/单>
换行标签：<br / 换>
盒子标签：div 和 span没有具体语义，div独占一行（块级元素），span一行可以显示多个（行内元素）。
粗体标签：b 和 strong（推荐使用后者）（行内元素）
斜体标签：i 和 em（推荐使用后者） （行内元素）
删除线标签：s 和 del（推荐使用后者）（行内元素）
下划线标签：u 和 ins（推荐使用后者） （行内元素）
图像标签：<img图 src=“图像URL” /> 属性：alt：图像不显替换文本 title：鼠标悬停提示文本（行内块元素）
超链接标签：<a链接 href=“跳转目标” target=“目标窗口的弹出方式__blank新窗口打开”>文本或图像 （行内元素）
注释标签：Ctrl+/ 即可 格式：
注释位于要注释代码的上面，单独一行
- 7、路径
分相对路径和绝对路径，通常我使用的是相对路径，绝对路径不建议使用。
相对路径分：同级路径、下一级路径、上一级路径
- 8、锚点定位
- 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>
- 使用
<a href="#id名">链接文本创建链接文本（被点击的） （拉关系） 我也有一个姓毕的姥爷…
<a href="#two">
快速记忆法：
好比找个人办事， 首先找到他，然后拉关系，最后看效果。
- 9、base标签
语法：<base target="_blank" /> 单标签
总结：
1>base 可以设置整体链接的打开状态
2>base 写到 <head> </head> 之间
3>把所有的连接 都默认添加 target="_blank"
- 10、特殊字符
- 11、表格标签及应用
<table>
<caption>表格标题</caption> 位于表格之上，紧跟表格，只有在表格中使用才有意义
<tr>代表行
<th></th>
<th></th> 表头单元格标签th：位于单元格第一行或第一列，文本加粗居中
<th></th>
</tr>
<tr>
<td></td>
<td></td> 表示表格的一行
<td></td>
</tr>
</table>
表格属性：width设置宽度–border设置边框–单元格间距cellspacing–内容与边框间距cellpadding–设置表格网页中水平居中align=center/left/right
以上属性均写在table中，平时开发时标红三参为0
合并单元格：
2种方式，按照先上后下，先左后右的顺序，删除多余的单元格
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
语法：<td colspan="3"> </td>
表格结构划分：<thead></thead>定义表格头部，放标题之类的，中间必须包含tr标签
<tbody></tbody>定义表格主体，放表格数据。
- 12、列表标签及应用
列表分：无序列表、有序列表、自定义列表
无序列表：语法
<ul>
<li></li> ul只能嵌套li，但是li中可以嵌套任何标签，不要自带的默认样式，让css来
</ul>
清除列表默认样式：list-style: none;
有序列表：语法
<ol>
<li></li>
</ol>
自定义标签：语法
<dl>
<dt></dt>
<dd></dd>
<dd></dd> 多用于网页底部的帮助导航
</dl>
- 13、表单标签及应用
语法：<input type=”属性值” name=”属性值” value=”属性值” checked=”checked” />
value属性值:value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。
name属性：name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
checked属性：表示默认选中状态。 较常见于 单选按钮和复选按钮。
Label标签：label标签主要目的是为了提高用户体验。 为用户提高最上乘的服务。用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
语法：一、第一种用法就是用label直接包括input表单。
<label>
用户名： <input type="text" name="usename" value="请输入用户名">
</label>
二、第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
Form表单域：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器，同时form表单中都要添加name属性。
语法：
<form action="url地址" method="提交方式" name="表单名称">`
- 各种表单控件
</form>
- H5新增加表单属性和属性值
<detalist>
<option></option>
</detalist>
配合input标签使用
<fieldset>
<legend></legend>
</fieldset>
-
H5新增加标签
<header></header>定义文档的头部 页眉
<nav> </nav>定义导航链接部分
<footer></footer>定义文档或节页脚 底部
<article></article>定义文章
<section></section>滑动块
<aside></aside>定义侧边栏
<audio></audio>音频播放
<video></video> 和audio音频使用相同，但是可以设置宽高
- 结构伪类选择器
其中n是从0开始的，2n就是0.2.4.6 3n就是0.3.6.9.12，用n的好处就是比较灵活
- 目标伪类选择器
- 字间距和英文单词间距
- text-shadow文字阴影属性
- 14、引入css样式表
引入css样式分三种：行内式、内部样式、外部样式
行内式：语法：书写方便，权重高
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
内部样式：语法：是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
外部样式：语法：是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，
通过link标签将外部样式表文件链接到HTML文档中
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
- 15、Css选择器
**基础选择器：**不能设计差异化样式。
标签选择器：语法：标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器：
.类名 {
属性1:属性值1;
属性2:属性值2;
}
类选择器特殊用法- 多类名：
a/各个类名中间用空格隔开。
b/多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
例如：
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
**Id选择器：**具有唯一性，不能出现相同选择器名字的id
#id名 {
属性：属性值；
}
通配符选择器：能把标签全部选择
- {
属性：属性值；
}
Css复合选择器：
后代选择器：作用：用来选择元素或元素组的子孙后代
写法：其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。
.class h3{color:red;font-size:16px;}
子元素选择器：作用：子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
写法：其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
.class>h3{color:red;font-size:14px;}这里的子 指的是 亲儿子 不包含孙子 重孙子之类。
交集选择器：既有元素1的特点又有元素2的特点，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，需要紧挨着。如h3.special。
并集选择器：作用：
如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。
并集选择器（CSS选择器分组）是各个选择器通过“,”连接而成的，通常用于集体声明。
应用：任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。逗号隔开
链接伪类选择器：a:link /* 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标移动到链接上 /
a:active / 选定的链接 */
按照顺序写，实际开发中很少用到四个。
属性选择器
伪元素选择器
伪元素选择器：：before ：：after
- 16、Font字体
font-size：设置字体大小，单位px
font-family：设置字体类型 常用“Microsoft YaHei” “宋体”；
font-weight:normal(400) bold(700);
font-style:normal正常/italic倾斜
font综合写法：选择器 { font: font-style font-weight font-size/line-height font-family;}其中红色的不可忽略
color：有预定义颜色、十六进制#fff、rgb（0,0,0,）
text-align：单行文本水平居中（left center right）
line-height:行高line-height: 24px;
text-indent:首行缩进单位em
text-decoration:文本修饰none去掉下划线 underline添加下划线
emment语法
凹凸文字效果
- 17、标签显示模式（display）
理解：占位、样式设置
块级元素：常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点
（1）比较霸道，自己独占一行
（2）高度，宽度、外边距以及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素。
注意：
只有文字才能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
同理还有这些标签h1,h2,h3,h4,h5,h6,dt，都是文字类块级标签，里面不能放其他块级元素。
行内元素：常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
注意：
（1）链接里面不能再放链接。
（2）特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
行内块元素：在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
标签显示模式互相转换：
（1）块转行内：display:inline;
（2）行内转块：display:block;
（3）块、行内元素转换为行内块： display: inline-block;
- 18、Css背景
background-color：默认透明色transparent
background-image：url（图片路径）
background-repeat : repeat | no-repeat | repeat-x | repeat-y 背景图片平铺
background-position :top | center | bottom | left | center | right图片位置
background-size:可以跟百分值或者具体的数字大小，设置背景图片的大小
注意：
必须先指定background-image属性
position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
如果指定的两个值是精确单位和方位名字混合使用，第一个值是x坐标，第二个值是y坐标
背景附着：
background-attachment : scroll（背景图像是随对象内容滚动） | fixed （背景图像固定）
背景简写：background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background: transparent url(image.jpg) repeat-y scroll center top ;
背景透明：background-color: rgba(0, 0, 0, 0.3);
背景大小：background-size: 宽度 高度；
多背景：用逗号隔开
- 19、Css三大特性
**Css层叠性：**浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
原则：样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
Css继承性：子承父业
（1）子标签会继承父标签的某些样式，如文本颜色和字号。
（2）想要设置一个可继承的属性，只需将它应用于父元素即可。
注意：
（1）恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
（2）子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
Css优先级：
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，
（1）选择器相同，则执行层叠性
（2）选择器不同，就会出现优先级的问题。数位之间没有进制
权重计算公式：
选择器 --------------- 权重大小
继承或者 * --------- 0
标签选择器 --------- 1
类选择器 ------------ 10
Id选择器 ------------ 100
行内样式 ------------ 1000
!important ------------- 无穷大
1、如果选中了，那么以上面的公式来计权重。谁大听谁的。
2、如果没有选中，那么权重是0，因为继承的权重为0.
- 20、盒子模型（padding margin border）
四部分组成：内容、边框（border） 外边距（margin） 内边距（padding）
边框（border）：
border-width: 1px;
border-style：solid实线 dashed虚线 dotted点线
border-color: #ccc;
简写border：1px solid #ccc;
边框可以分别设置上下左右
border-top bottom left right
边框合并：border-collapse:collapse;
内边距（padding）：四个边距可以单独设置，top bottom left right
Padding 可以简写顺时针方向
内容和边框有了距离当给了padding 值后会撑大盒子
当我们不方便给宽度的时候，可以给padding 值撑开盒子
此时就需要我们进行盒子的宽高计算（盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框 ）
如果为这个盒子为块级元素，没有给其设置宽度width 则padding不会撑开盒子
外边距（margin）：四个边距可以单独设置，top bottom left right
添加box-sizing: border-box; padding 和 border 不会再撑开盒子，减少计算，c3新加
margin可以简写顺时针方向
外边距合并：只有垂直方向的问题，水平方向可以正常设置。
相邻块元素垂直外边距合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：尽量给只给一个盒子添加margin值。
嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者
浮动的盒子，不会发生外边距塌陷问题
解决方案：
可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。
- 块级元素水平居中：margin:auto;
盒子必须指定了宽度 不能脱离标准流
Css样式–margin：0 auto；
text-align：center;可以使文字 行内元素 行内块元素水平居中
margin：0 auto；可以使块级元素水平居中，盒子必须制定宽高。
插入图片：我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
背景图片：用于小图标背景 或者 超大背景图片 背景图片 移动位置只能通过 background-position
清楚元素默认内外边距
- {
padding:0; /* 清除内边距 /
margin:0; / 清除外边距 */
}
li { list-style: none; }清除li默认样式 - 圆角：border-radius:50%;
- 盒子阴影：
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);
box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
- 21、浮动
float：left right
浮：脱离标准流，下面的标准流盒子会跑到浮动的盒子下面，浮动在标准流盒子上
漏：位置会留给标准流盒子，不占有原来位置
特：浮动元素会改变display属性会生成一个块级框，和我们前面的行内块极其相似。但是行内块盒子之间会有间隙，浮动的元素不会存在间隙。
浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐
浮动的盒子不会超出父盒子------标准流可以超出父盒子
子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
我们要一浮都浮
注意：我们知道，浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。
清除浮动：因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
准确地说，并不是清除浮动，而是清除浮动后造成的影响
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
- 我们以后什么时候用清除浮动呢？
1、父级没高度
2、子盒子浮动了
3、影响下面布局了，我们就应该清除浮动了。
- 清除浮动方法：
1、选择器{clear:both;} 添加许多无意义的标签，结构化较差。
隔墙法：通过在浮动元素末尾添加一个空的标签
2、可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3、使用after伪元素清除浮动：
.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;
}
- 22、定位
定位=定位模式+边偏移四个方位
定位模式：相对定位 绝对定位 固定定位
相对定位:relative 定位后依旧占位置 移动的距离是相对于自身原来的位置
绝对定位：absolute 定位后不占位置，脱离标准流
绝对定位是元素以带有定位的父级元素来移动位置将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
绝对定位水平居中：
1、left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
2、margin-left: -100px;：让盒子向左移动自身宽度的一半。
Z-index 设置堆叠顺序 属性值正整数 负整数 和0 没有单位，只能用于定位中有效
定位也可以改变元素属性，改为类似于行内块元素，定位 浮动 都可以有效的解决外边距合并和塌陷问题
- 圆角矩形四角设置
border-radius: 左上角 右上角 右下角 左下角;
如果父级没有定位，以浏览器为准
常用类型：子绝父相（子元素是相对定位，父元素要用相对定位）
固定定位：fixed 脱离标准流，不占位置，以浏览器的可视区域为主
定位的盒子，大多数情况需要给宽度
通栏的情况下，需要给宽度100%
- 元素的显示与隐藏
display ：none；元素隐藏 不保留位置
display ：block；元素显示
- 鼠标样式cursor
pointer 小手
move 移动
text 文本
not-allowed 禁止
- 去除边框轮廓线
outline： none；
- 防止拖拽文本域
resize： none；
- 垂直居中
适用于行内元素 行内块元素
vertical-align：middle | top；可以设置文字和图片垂直居中
- 去除图片底部空白区域
vertical-align：middle| top| bottom
或者给图片转换模式display:block;
- 溢出的文字省略号显示
/1. 先强制一行内显示文本/
white-space: nowrap;
/2. 超出的部分隐藏/
overflow: hidden;
/3. 文字用省略号替代超出的部分/
text-overflow: ellipsis;
- css精灵技术
为了加快浏览器加载速度
主要针对背景图片，关键是使用position进行x轴 y轴精确定位，背景定位一般都是负值
- 三角形
div {
width: 0;
height: 0;
line-height:0；
font-size: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
}
- Ico图标
在网站地址栏输入/favicon.ico 就可以查询到该网站的ico图标
首先把favicon.ico 这个图标放到根目录下。
再html里面， head 之间 引入 代码。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
- 字体图标
@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?7kkyc2’);
src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’),
url(‘fonts/icomoon.woff?7kkyc2’) format(‘woff’),
url(‘fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
- 类名
头部 header
快捷导航栏 shortcut
标志 logo
购物车 shopcar
搜索 search
热点词 hotwrods
导航 nav
导航左侧 dorpdown
导航右侧 navitems
注册专区 registerarea
注册内容 reg-form
错误的 error
成功的 success
默认的 default
- 类名选择器
主体de_container
面包屑导航crumb_wrap
产品介绍product_intro （ introduction介绍）
预览包preview_wrap（左侧部分）
预览缩略图preview_img
预览列表preview_list
左按钮arrow_prev
右按钮arrow_next
小图列表preview_items
产品详细信息区域itemInfo_wrap （
右侧部分）头部名称sku_name skull
头骨新闻news
摘要summary
评价remark
价格摘要summary_price
配送至summary_stock
支持summary_support
选择choose
选择按钮组choose_btns
选择数量choose_amount
减去reduce
加入购物车addshopcar
产品细节product_detail （ detail描述）
左侧边aside
详细描述detail
- Logo 优化
1、logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要
2、h1里面在放一个连接，可以返回首页的， 给连接一个 大小 和 logo 的背景图片
3、连接 里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来
4、要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden 淘宝的做法
直接给font-size: 0; 就看不到文字了， 京东的做法。
5、最后给 连接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了
div class="logo">
<h1>
<a href="#" title="品优购">品优购</a>
</h1>
</div>
样式
.logo a {
position: absolute;
width: 175px;
height: 61px;
top: 50%;
margin-top: -30px;
background: url(../img/logo.png) no-repeat;
overflow: hidden;
text-indent: -9999px;
- Css3 过渡
Transition： all .5s；
样式
Div：hover {
Weigh：
}
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
