认识网页
1.网页的定义
包含HTML标签的纯文本文件
2.web标准
万维网联盟（W3C）起草发布
结构化标准语言：XHTML和XML
表现标准语言：CSS
行为标准：JavaScript
3.浏览器及其内核介绍
网页兼容问题主要是因为内核不同（内核指的是浏览器最重要的核心部分）
五大主流浏览器的内核
谷歌浏览器：blink内核
opera浏览器：blink内核
IE浏览器：Trident内核（IE4以上）
火狐浏览器：Gecko
safari浏览器：webkit
4.浏览器与服务器的简单通讯
浏览器：显示屏
服务器：虚拟的主机
认识HTML
1.超文本标记语言（HyperText Markup Language）
2.HTML结构标准
<!DOCTYPE html>声明文档类型
<html>定义HTML文档，限定文档的开始点和结束点</html>
<head>头标签</head>，大部分内容不会在页面显示
<title>标题标签</title>
<body>主体标签</body>，包括文本、超链接、图像、表格和列表等，只能有一对，与<head>是并列的
3.HTML的标签分类
单标签
双标签
4.HTML标签关系分类
包含（嵌套）关系-父子
并列关系-兄弟
5.HTML格式化标签
<b>加粗</b>
<strong>加粗</strong>
<i>斜体</i>
<em>斜体</em>
<u>下划线</u>
<ins>下划线</ins>
<s>删除线</s>
<del>删除线</del>
<p>段落标签</p>
<h1>标题标签</h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>字体越来越小
<hr/>分割线
<br/>换行
6.图片标签<img/>
src属性（必须），它的值是图像文件的路径
绝对路径：带有盘符的路径
相对路径：相对于当前目录来说的路径
同一文件夹下直接文件名./
下级用/分隔
上级../表示
alt属性（必须），规定图像的替代文本，图片加载不出时显示
width：宽度
height：高度
title：鼠标悬停时显示
7.超链接标签<a>页面跳转</a>
href属性：指示跳转到的页面（#：仅用于占位）
target属性：规定在何处打开链接文档
_blank跳转到新窗口新页面；
_self默认；
_parent父窗口；
_top返回当前页面顶部
8.标记分类
行内标记
块状标记
9.特殊字符标记
空格：
小于：<
大于：>
和号：&
人民币：¥
版权：©
注册商标：®
摄氏度：°
正负号：±
乘号：×
除号：÷
平方：²
立方：³
10.列表
无序列表
<ul type="disc""square""circle">
<!-- disc：前面是实心圆点 -->
<!-- square：前面是方块 -->
<!-- circle：前面是空心圆点 -->
<li></li>
<li></li>
</ul>有序列表
<ol type="1""A""I""a""i" start="2">
<!-- start表示起始，只能是数字
1：前面是1.2.3.
A：A.B.C.
I：I.II.III.
a：a.b.c.
i：i.ii.iii. -->
<li></li>
<li></li>
</ol>自定义列表
<dl>
<dt></dt>
<dd></dd>
<!-- dt在前，dd在后 -->
</dl>样式使用
<style type="text/css">
/*定义样式*/
/*可以规定在浏览器中如何呈现 HTML 文档*/
/*type 属性定义 style 元素的内容。唯一可能的值是 "text/css"*/
</style>1.外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<link rel="stylesheet" type="text/css" href="mystyle.css">2.内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
3.内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px"> This is a paragraph </p>优先级
!important有最大优先级
行内样式>页内样式>外部引用样式>浏览器默认样式
伪类
a:link{color: blue;}
a:visited{color: brown;}
a:hover{ font-size: 20px;}
a:active{color: red;}
背景background
background-attachment：背景图片是否固定
background-position：left right top bottom center
background-size：100%水平 100%垂直
background-repeat: no-repeat
行高line-height
行高=上间距+文字大小+下间距
单位px em % 无
px 与文字大小无关
em % 无：行高=文字大小*行高值
盒子模型
1.padding内边距：文字和边框的距离
10px上右下左都是10
10 40 ：上下10 左右40
10 40 20： 上10 左右40 下20
10 40 20 30 ：上右下左
2.border边框
3.margin外边距
小的合并在大的里面 合并时 取大的值
1 给父元素设置边框
2 给父元素设置overflow：hidden（溢出隐藏）
盒子宽度=本身宽度+左右内边距+左右边框宽度
行内元素不要设置margin和padding
溢出隐藏overflow
如果内容超出 设置是否滚动
auto自动滚动
visible默认可见
标准流normal flow（文档流）
块级纵向有序排列
行内块和行内元素横向有序排列
浮动（脱标）
清除浮动的方法
<div style="clear:both;"></div>
定位position——子绝父相
1.静态定位static：按标准流
2.相对定位：position：relative
以自身位置为基准
相对定位占位置
3.绝对定位：position：absoloute
以浏览器的左上角为基准设置位置
当一个盒子包含在另一个盒子中，父盒子有设置定位 则以父盒子的左上角为基准，否则以浏览器的左上角
绝对定位绝对不占空间位置
可以实现模式转换
4.固定定位fixed
相对于浏览器窗口定位
想去哪里就去哪里
网页布局
header
content
sidebar
footer
网页布局优先：标准流，浮动，定位
使用margin规避脱标
margin-left：auto左侧充满
margin-right：auto右侧充满
margin:0 auto
CSS样式命名
| CSS样式命名 | 说明 |
| 网页公共命名 | |
| #wrapper | 页面外围控制整体布局宽度 |
| #container或#content | 容器,用于最外层 |
| #layout | 布局 |
| #head, #header | 页头部分 |
| #foot, #footer | 页脚部分 |
| #nav | 主导航 |
| #subnav | 二级导航 |
| #menu | 菜单 |
| #submenu | 子菜单 |
| #sideBar | 侧栏 |
| #sidebar_a, #sidebar_b | 左边栏或右边栏 |
| #main | 页面主体 |
| #tag | 标签 |
| #msg #message | 提示信息 |
| #tips | 小技巧 |
| #vote | 投票 |
| #friendlink | 友情连接 |
| #title | 标题 |
| #summary | 摘要 |
| #loginbar | 登录条 |
| #searchInput | 搜索输入框 |
| #hot | 热门热点 |
| #search | 搜索 |
| #search_output | 搜索输出和搜索结果相似 |
| #searchBar | 搜索条 |
| #search_results | 搜索结果 |
| #copyright | 版权信息 |
| #branding | 商标 |
| #logo | 网站LOGO标志 |
| #siteinfo | 网站信息 |
| #siteinfoLegal | 法律声明 |
| #siteinfoCredits | 信誉 |
| #joinus | 加入我们 |
| #partner | 合作伙伴 |
| #service | 服务 |
| #regsiter | 注册 |
| arr/arrow | 箭头 |
| #guild | 指南 |
| #sitemap | 网站地图 |
| #list | 列表 |
| #homepage | 首页 |
| #subpage | 二级页面子页面 |
| #tool, #toolbar | 工具条 |
| #drop | 下拉 |
| #dorpmenu | 下拉菜单 |
| #status | 状态 |
| #scroll | 滚动 |
| .tab | 标签页 |
| .left .right .center | 居左、中、右 |
| .news | 新闻 |
| .download | 下载 |
| .banner | 广告条(顶部广告条) |
| 电子贸易相关 | |
| .products | 产品 |
| .products_prices | 产品价格 |
| .products_description | 产品描述 |
| .products_review | 产品评论 |
| .editor_review | 编辑评论 |
| .news_release | 最新产品 |
| .publisher | 生产商 |
| .screenshot | 缩略图 |
| .faqs | 常见问题 |
| .keyword | 关键词 |
| .blog | 博客 |
| .forum | 论坛 |
垂直距离
line-height：块状元素
vertical-align:middle 行内 行内块元素；常与display：inline-block连用
vertical-align属性：baseline sub super top .........
css可见性
overflow:hidden超出部分隐藏
display:none 不显示 元素隐藏不占位置
visibility:hidden不显示 元素隐藏占位置
css内容移除 网页优化
text-indent文本缩进
padding挤开盒子+overflow切割
css精灵技术cssSprites
浏览器通过http协议发送请求给服务器，服务器接收请求，返回请求页面给浏览器
为了减少接收和发送请求的次数，提高网页的加载速度
处理网页背景图像的方式
工作原理
背景图整合到一个精灵图 就只发送一次请求
插入背景图
背景图重复
背景定位（一定要带方位）
使用：只能用打开，不能用导入，格式png
css滑动门技术
指盒子背景能够自动拉伸以适应不同长度的文本
圆角：border-radius: 10px;
方位属性 border-top-left-radius: ;border-bottom-right-radius: ;
渐变：线性linear-gradient(to bottom/right,white,rgba(0,0,0,0));
对角渐变to bottom right
权重：会叠加
css优先级
内联样式最大，优先级最高，最后处理，会覆盖之前的
id选择器#
类选择器.
标签选择器
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
