【web前端教程开发】

笔记2

1.列表的标签

1.无序列表 ->ul li 符合嵌套的规范
ul与li中不允许放置别的标签，但是li中间可以放置标签
2.无序列表-> ol li :列表的最外层容器，列表项
有序列表用的非常少，无序列表可以代替有序列表，无序列表经常被使用。

3.定义列表：->dl,dt,dd 列表项需要添加标题和标题的内容
表格标签可以相互嵌套，形成多层级的列表

2.表格标签

他们之间是有嵌套关系的，要符合嵌套关系
语义化标签，tBody是可以出现多次的，但是tHead是只能出现一次的。

3.表格属性

border:表格的边框
cellpandding:单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align:左右对齐方式
valign:上下对其方式

4.表单标签

form,input，textarea,select,label…比较常用。
input还有一个type属性，决定是什么控件。
还有一些常见的属性
checked,disabled,name,for…

<textarea>:多行文本框
<select>,<option>:下拉菜单
<label>:辅助表单

表格表单组合，可以相互组合形成数据展示效果。

5.div与span

div：做一个区域快的划分
span:对文字的修饰，内联。

6.css基础语法

选择器：（属性1：值1；属性2：值2）
width:宽
height:高
background-color：背景色
长度单位
px-> 像素
%->百分比
外容器：600px: 当前容器 50%->300px
css注释

 /*注释的内容*/

shift+alt+a:快捷键注释内容

7.CSS的引入方式

内部样式与内联样式

1.内联（行内，行间）样式
在HTML的标签上来添加style来实现
2.内部样式
在style上添加标签来实现
注：内部样式的优点，可以复用代码
区别：内部可以复用代码，符合w3c的标准规范，让结构和样式进行分开处理
3.外部样式
引入一个单独的CSS文件，name.com
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href是属性资源的地址。
通过引入一个@import的方式引入外部文件

8.CSS颜色表示法

1.单词颜色表示法
2.十六进制表示法
3.rgb三原色表示法：rgb(255，255，255)；
取值范围：0~255
提取颜色的下载地址:www.baidufe.com

9.CSS的背景样式

background-color:背景颜色

background-image：背景图片

url(背景地址)
默认：会水平垂直都铺满背景图

background-repeat:北京图片的平铺方式

repeat-x x轴平铺
repeat-y y轴平铺
pepeat （x,y都平铺）
no-repeat（x,y都不平铺）

background-position：背景图片的位置

x,y:number(px,%)|单词
x:left,ringt,center
y:top,center,bottom

background-attachment：背景图随滚动条的移动方式

scroll:默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照浏览器的位置进行偏移的）

10.CSS的边框样式

border-style:边框样式
slid:实践
dash:虚线
dotted:点线
border-width:边框大小
px…
border-color:边框颜色
red-#f00
边框也可以针对某一边框进行设置：border-left-style 中间是方向left,right,top,bottom
颜色：透明颜色；transparent

11.CSS的文字样式

font-fmaiily:字体样式
英文，中文
衬线体与非衬线体
注意点：多字体的目的
引号添加的目的
font-size：字体大小

默认（16px）
写法：单词（normol,bold）| number(100 200 300…900 ,一百到五百都是正常的，600到900是加粗的)
font-style：字体样式
模式：正常（normol） 斜体（italic）
写法:单词（normol,italic）
注：oblique也表示斜体，一般用的比较少，了解即可
oblique在没有倾斜属性的字体也可以设置倾斜
italic只有在有倾斜属性的字体才可以设置倾斜

12.CSS的段落样式

text-decoration:文本样式
下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
添加多个文本装饰：line-hthrough,underline,overline4
text-transform：文本大小写，（针对英文段落）
小写：lowercase
大写：uppercase
只针对英文首字母大小写：capitalize
text-indent:文本缩进
首行缩进
em单位：相对单位。1em永远跟字体相同
text-aglin:文本对齐方式
对齐方式：left,right,center,justify（两端点对齐）
line-height:定义行高
什么是行高，就是一行文字的高度，上边距和下边距的等价关系。
默认行高不是固定值，而是变化的，根据当前的字体不断的变化。
取值：number:1px, scale:比例值，跟文字额大小相关

letter-spacing:字与字 之间的间距
word–sapcing：单词与单词之间的间距
英文和数字不折行的问题
1.word-brrak:breal-all:非常强烈额折行
2.word-wap:breal-word：不是那么强烈的折行，会产生一些空白区域。

13.CSS的复合样式

1.background:red url()repeat 0 0;
2.border:1px red solid/;
3.font:
注：至少有两个值 size,family
weight,style,size,family是可以的
style, weight,size,family也是可以的
weight,style,size/line-height,family也是可以的
如果非要复合写的话，先写复合，再写单一

14.CCS选择器

ID选择
#elem{} ,id=“elem”
1.ID选择器是唯一值，在一个页面只能出现一次
2.命名的规范：由字母，下划线，中划线，（并且第一个不能是数字）
3.驼峰写法：searchButton(小驼峰）SearchButton(大驼峰) searchSmallButton
4.短线写法：search-small-botton
5.下划线写法：；search_small_botton

14.Class选择器

.elem{} ,class=“elem”
1.CSS选择器是可以重复使用的
2.可以添加多个CSS样式
3.多个样式的时候，样式优先根据css决定，而不是class中的属性顺序
4.标签+类的写法