Web前端20-45

嵌套列表

列表之间可以互相嵌套形成多层级列表，定义列表也可以做，可以形成不同层级的标签。

表格标签

table表示表格的最外层容器。

tr表示表格行

th定义表头

td定义表格单元

caption定义表格标题

之前是有嵌套关系的，要符合嵌套规范

语义化标签：tHEAD,tBody,tTood

在一个table中，tBody是可以出现多次的，但是tHead,tFood只能出现一次

表格属性

border表格边框

cellpadding单元格内的空间

cellspacing单元格之间的空间

rowspan合并行

colspan合并列

align左右对齐方式

valign上下对齐方式

表单标签

form表单的最外层容器

input标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框等。

type选择不同的属性对应不同的值，例如text对应普通的文本输入框

表单相关标签

textarea多行本文框

select，option下拉菜单

label辅助表单

表格表单组合

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

dib与span

div 全称为division,分割分区的意思,div标签用来划分一个区域，相当于一块区域容器，可以容纳段落，标题，表格，图像等各种网页元素。即HTML在中大多数的标签都可以嵌套在div标签中，div中还可以嵌套多层div，用来将网页分割成独立的，不同的部分，来实现网页的规划和布局。

span 用来修饰文字的，div与span都是没有任何默认样式的，要配合CSS才行。

CSS语法格式

格式：选择器：属性1：值1；属性2;值2

基本样式：width宽,height长,background-color背景色

长度单位； px像素，%百分比。

CSS注释;/CSS注释的内容/

内联样式与内部样式

内联样式是在HTML标签上添加style属性来实现的

内部样式在，《style>标签内添加的样式,是内部样式的特点，可以复用代码。

二者区别，内部样式的代码可以复用，符合W3C的规范标准，进行让结构和样式分开处理。

外部样式的两种写法

引入一个单独的CSS文件，name,css

《link>标签，rel,href.通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。 还可以通过@import方式引入外部样式（这种方法有很多问题，不建议使用）

CSS颜色表示法

单词表示法；red,yellow…

十六进制表示法

rge三原色表示法：

取值范围0-255

提取颜色的下载地址：http://www.baidufe.com/fehelper

photoshop工具

CSS背景样式

background-color背景颜色，background-image背景图片，background-repeat背景图片的平铺方式，background-position背景图片的位置，background-attachment背景图随滚动条的移动方式

scroll默认值，fixed背景是按照浏览器进行偏移的

CSS边框样式

border-style边框的样式，border-width边框的大小，border-color边框的颜色。注意：针对某一边进行单独设置

边框也可以针对某一天进行单独设置：border-lift-style：中间是方向left,right,top,bottom

颜色：透明颜色：transparent

CSS文字样式

font-family:字体类型

英文字体：Arial,

中文字体：微软雅黑，宋体

中文也有英文名称。

微软雅黑：Microsoft

宋体:SimSun

衬线体与非衬线体

注意;多个字体类型的设置目的，引号添加的目的

font-size字体大小

默认大小：16个像素

写法number(px)I单词（small large…不推荐使用）

不同的属性取值对应不同的字体大小

模式：加粗

正常normal…

font-style字体样式

模式：正常（normal)，斜体：（italic) 写法:单词（normal,italic)

注：oblique也是表示斜体，用的比较少

区别：italic带有倾斜字体的才可以设置

oblique没有倾斜属性的字体也可以设置倾斜操作

CSS段落样式

text-decoration文本装饰：删除线，下划线，上划线

不添加任何装饰;none

注:添加多个文本装饰：line-through underline overline

text-transform文本大小写（针对英文段落）

小写lowercase

大写uppercase

只针对首字母大写：capitalize

CSS段落样式

text-indent文本缩进

首行缩进

em单位，相对单位，lem永远都是跟字体大小相同

text-indent文本对齐方式

对其方式：left，right,center,justify(两端点对齐）

CSS文本样式

line-height 定义行高

什么是行高;一行文字的高度，上边距和下边距是等价关系

默认行高不是固定的，而是变化的。根据当前字体的大小不断变化

取值：1，number（PX),scale是比例大小

CSS文本样式

letter-spacing:定义文字间距

word-spacing:定义词间距（针对英文）

强行折行：针对英文和数字

word-break:break-all，非常强烈的折行

word-wrap;break-word不是那么强烈的折行，会产生一些空白区域

CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式

一个CSS属性控制多种样式，叫做复合样式

复合样式，,是通过空格的方式实现的，复合写法有的是不需要关心顺序background,border，有的需要关心顺序font

background:red url()repeat 0 0;

border:1px red solid;

font 至少要有两个值 size family

weight style size family 或者style weight size family，size family写到最后。

尽量不要混写，如果要写，先写复合样式，再写单一样式

CSS选择器

ID选择器：css:#elem{} html:id=“elem”

注意：在一个页面中，ID值是唯一的。

命题规范，字母，数字（命题的第一位不能是数字）

命题方式，驼峰式，下划线式，短线式#

驼峰写法：searchButton小驼峰，SearchButton大驼峰，searchsmallButton

短线写法：search-small-button

下划线写法：search_small_button

CSS选择器

CLASS选择器

css:.elem{}

html:class=“elem”

class选择器是可以复用的

可以添加多个class样式

多个样式的时候，样式的优先级根据CSS决定，而不是class属性中顺序

标签+的写法