一,WEB标准的三种组成:
主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
结构:结构对于网页元素进行整理和分类,咱们主要学的是HTML.(排版。结构没有图片)
表现:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS,(加入CSS,变成静态页面)
行为:行为是指网页模型的定义及交互的编写,咱们主要学的是Javascript.(动画)
1,HTML的结构 下面是一个完整的html骨架结构 <html> <head> <title>标题</tilte> </head> <body> 网页内容 </body> </html> 2.html主要标签介绍 所有的html标记(标 签)都要放在一组尖括号<>里面,大部分是双标签,如 <head></head>,也有少数是单标签,如<br />。 标签之间有两种关系:嵌套()父子)和并列(兄弟) 3,表格标签的使用介绍 一对table标签嵌套tr标签,tr标签嵌套td标签; table表示表格整体,tr表示行,td表示单元格(列); <table> <tr> <td></td> </tr> </table>
4,列表:
无序列表 <ul></ul> <li></li>
有列表 <ol></ol> <li></li>
自定义列表
<dl>
<dt>----</dt>
<dd>---<dd>
<dd>---<dd>
<dd>---<dd>
<dl>
二,CSS部分:
CSS中数值之后都会带一个单位:PX
1,行内样式:写在开始标签身上
没有实现结构与样式的分离 尽量不要用
2,内部嵌套:写在head之间
还是在HTML里面写的 没有实现样式和结构的分离
3,外部链接:最好用以后工作中常用
新建一个CSS,,然后用link链接到html中,实现结构与样式的分离
rel:关系
sytlesheet:样式关系
herf:路径,相对路径 实际工作中用的都是相对路径
1,CSS的选择器: 基础选择器:标签选择器(html选择器)、类选择器、ID选择器 复合选择器:后代选择器、并集选择器、指定标签选择器 2,文字属性 字体的综合写法 font复合属性:font:是否倾斜 是否加粗 文字大小/ 行高 字体; 11、
Css的三大特性 分为:层叠性(覆盖性)、继承性、优先级; 层叠性(覆盖性) 层叠性(就近原则):如果一个标签书写的样式重叠冲突了,后写的css样式会把先写的样式覆盖掉,样式不冲突的话就不会层叠; 继承性 有一些css属性子级是可以继承父级的,一般文字控制属性都会被继承,a标签除外,需要单独设置; Css权重 第一等:代表内联样式,如: style=””,权值为1000。 1,0,0,0 第二等:代表ID选择器,如:#content,权值为100。 0,1,0,0 第三等:代表类,伪类和属性选择器,如.content,权值为10。 0,0,1,0 第四等:代表类型选择器和伪元素选择器,如div p,权值为1。 0,0,0,1 特等 !important 提高权重,有提权的效果,有了样式优先生效; 老大 第五等 继承性 权重值为0 0,0,0,0 伪类选择器的权重是10 === 0,0,1,0 3,盒子模型 盒子模型组成 内容: 实体化宽高和里面的文字图片等等 边框: border 内边距: padding 拉开内容到盒子边缘的距离; 外边距: margin 拉开盒子与盒子之间的距离; 综合写法:border:边框宽度 边框样式 边框颜色; 4,网页布局的三种机制 普通流:块级元素独占一行,从上向下顺序排列;常用的元素:div、hr、p、h1-h6、ul、ol、dl、form、table; 行内元素一行共存多个,从左到右排列,碰到父元素边缘则自动换行; 常用元素:span、a、i、em; 浮动:让盒子从普通流中浮起来,让多个块级盒子一行显示; 定位:将盒子在浏览器的某一个位置,后期会经常用到; ,5,定位属性 定位属性:position 取值不同实现的效果不同,如下: 静态定位:position:static; 相对定位:position:relative; 自己本身原来的位置,进行位置的偏移; 绝对定位:position:absolute; 默认情况下是自己的父级盒子,但是如果绝对定位的父级盒子没有任何定位属性,参照物就以浏览器为参照去进行定位; 子绝父相:子级绝对,父级相对,父级盒子做了相对定位定位了,但是依然占位,不会影响其他盒子的布局 固定定位:position:fixed; 电脑屏幕(可视窗口); |