浏览器工作原理
- 客户端：Client 例如：浏览器 APP
- 服务器：sever
- CS开发: Client/Server或客户端/服务器模式，，开发难度大，不利于后期维护
- BS开发: Brower/Server或浏览器/服务器，，快速便捷，是未来的趋势
.com .cn .edu .gov .org
- http协议：
- http超文本传输协议（HTTP，HyperText Transfer Protocol) HTTP是一个客户端和服务器端请求和应答的标准，是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。
- FTP
- File Transfer Protocol（文件传输协议）的英文简称，而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。
了解html语言和Dreamweaver界面；
- HTML(hyper text markup language)超文本标记语言
- 1993年提出了html的草案
- 1995年html2.0成型
- 目前html5已基本成熟并开始应用到互联网开发中
- html编辑器： hbuilder、Dreamweaver、editorPlus、sublime、webstorm等等
- 视图
- 代码
- 设计
- 拆分
- 预览
初识标签
- 双标签与单标签
<div>helloworld</div> <img /> <img> - 标签的开始与结束
<div>helloworld</div> <img /> <img> - 标签的style属性
width height background-color - 块级标签 block:自己独占一行，可以自定义宽高。
- 内联标签 inline：自己不独占一行，不能自定义高度和宽度。
- inline-block：自己不独占一行，可以定义高度宽度。
- display:block/inline/inline-block
通过div的书写熟悉html语法；
- 结束标签要加 /，单标签可不加 ，如
<div>helloworld</div> <img /> <img> - 完整的写完一个闭合的标签再去填充内容
- 属性名要与标签名空至少一个字节空格
- 属性书写格式：属性名=”属性值”
- 多属性值用；隔开 属性名=”属性值1；属性值2；属性值3”
- 标签的基本属性之一：style
- 标签的常见样式：width、height、background-color、border
- 大小写不敏感，建议全用小写；
- 纯英文标点，单引号、双引号都行但前后要对应。
- 标签之间的关系：兄弟、父子；
- 父级决定宽度
- 子级撑起高度
- Margin（左右margin相加，上下margin大吞小，子级margin-top溢出）
- Padding（padding会撑大标签内部空间）
- 盒子模型，配合浏览器查找错误（建议用Chrome）
- width、height、margin、padding、border、background-color
- 五大浏览器
- W3c
- Chrome（谷歌）
- Safari（苹果）
- Opera（欧朋）
- Firefox（火狐）
- IE
-webkit-
-moz-
-ms-
- 浮动/清除浮动
- float：left/right/both
- overflow：hidden；
- 给父级容器一个确定的高度；（特殊情况使用）
- 结尾处加空标签 clear:both;
- IT开发命名规范
- 组成元素： 英文字母 数字 _ - $
- 组合方式： 数字不能打头
- 望文知义
- 驼峰命名 匈牙利命名
- 不能是关键字、保留字
15.盒模型布局练习
15. 文字标签：<p> <h1>~<h6>
16. 常见文字样式
- font-size
- font-family
- font-weight
- font-style
- text-decoration
- color
- Line-height
- text-align
- letter-spacing
- word-spacing
- 文本复合样式的书写：
body{ font: italic bold 14px/1.5 "microsoft yahei";}*（不建议这样写）
- 图片引入
<img src=’’ alt=’’> 引入
- 图框得设定宽和高
- 设定
<img>的宽度是100% - 有图片必有图框
- 背景图引入
background:url(XX/XX.JPG) left /center /right top /center /bottom no-repeat;
- 链接
<a href=’#’></a> - CSS样式表、
<style>标签与内联样式 以及优先级
- 谁近谁的优先级更高
- Inherit 继承的属性优先级最低
- 一般文字样式会向下继承
- 内联样式》style嵌入》CSS样式表》默认》继承
-
id命名
id命令与元素是一一对应的 -
<ul> <li>无序列表和<ol><li>有序列表
- List-style:
<dl> <dd> <dt> 定义列表
<Input> 单行输入域
<textarea> 多行输入域 row=”” cols=””
<button>
- 常见的选择器写法
1.标签 ： div{} li{} *{}
2.类选择器（class名）： .headContainer{} .navCon{} - id选择器
#logoBox{} #sideBar{} - 后代选择器：
.headContainer>li>a{}代表直接子级
.headContainer>li.navCon >a{} li.navCon表示class名是“navCon”的li
.headContainer a{} 空格表示 所有后代a标签 - 属性选择器：
img[title="Figure"] {border: 1px solid gray;} - 兄弟选择器
h1 + p {margin-top:50px;} 紧跟在h1后面出现的p标签 - 内联样式
/<style>标签/CSS文件 样式的优先级
- 一个更加具体的选择器往往会比一个笼统选择器获得更大的权重
- 选择器的权重计算
- 第一等：代表内联样式，如: style=””，权值为1000。
- 第二等：代表ID选择器，如：#content，权值为100。
- 第三等：代表类，伪类和属性选择器，如.content，权值为10。
- 第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
#content .content div = 100+10 +1 =111
#wang div p a = 100 + 1 + 1 + 1 = 103
#taian .wang div li p =100+10+1+1+1=113
非到万不得已不要用!important。
- 定位
- position: fixed/absolute/relative
- absolute：相对于已定位的父级定位，如果没有，直接定位到body。
- 注释
- css里面
/*注释*/ - html里面
<!--注释--!>
