web学习第二周

表格标签

<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题

它们之间是有嵌套关系的，要符合嵌套规范
例如：


语义化标签：用于规范表格

<tHead>：头部，<tBody>：身体，<tFood>：尾部

注：tBody可以出现多次，但是tHead、tFood只能出现一次

表格属性

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

注：border、cellpadding、cellspacing是加在table后面的
注：
align：left、center、right
valign: top、middle、bottom
具体例子如下

表单标签

<form>:表单的最外层容器
<input>:标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框等。
<textarea>:多行文本框
<select>、<option>:下拉菜单
<label>:辅助表单

例子如下：

div与span

div（块）：

div全称为division，“分割、分区”的意思，

标签用来划分一个区域，相当于一块区域容器，可以容纳段落，标题，表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在

标签中，

中还可以嵌套多层

，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

span（内联）：

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

css基础语法

格式：

选择器{属性1：值1；属性2：值2}

单位：

px ->像素（pixel）、% -> 百分比

基本样式：

width、height、background-color

CSS注释：

/* css注释的内容*/

css样式的引入方式

内联（行内、行间）样式

在html标签上添加style属性来实现的

内部样式

在style标签内添加的样式
注：内部样式的优点，可以复用代码
例如：

外部样式

1.

方式：引入一个单独的css文件
结构： name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。
link标签的rel属性：
alternate 文档的替代版本（比如打印页、翻译或镜像）。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的上一个文档。
contents 文档的目录。
index 文档的索引。
glossary 在文档中使用的词汇的术语表（解释）。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的小节。
appendix 文档的附录。
help 帮助文档。
bookmark 相关文档。

2.

@import
注：这种方式有很多问题，不建议使用。
例如:

css中的颜色标识法

1. 单词表示法：red blue green…

常见颜色英文：

2.十六进制表示法：

#+（0 1 2 3 4 5 6 7 8 9 a b c d e f）组合

3.rgb三原色表示法：

rgb（数字，数字，数字）；取值范围：0-255

css背景样式

backgrou-color：背景颜色
background-image：背景图片
url（背景地址）
默认：会水平垂直都铺满背景图
background-repeat：背景图片的平铺方式
repeat-x
repeat-y
repeat（x，y都进行平铺，默认值）
no-repeat 都不平铺
background-position：背景图片的位置
x，y：number（数字+px）|单词
x：left center right
y：top middle bottom
background-attachment：背景图随滚动条的移动方式
scroll 默认值（背景图是按照当前元素进行平移的）
fixed（背景位置时按照浏览器进行偏移的）

视觉差

css边框样式

border-style：边框样式
solid：实线
dashed：虚线
dotted：点线
borde-width：边框大小
px
border-color：边框颜色
red #f0000 …

css文字样式

font-family：字体类型

英文字体：Arial，“Times NewRoman”
中文字体：微软雅黑，宋体
衬线体与非衬线体

font-size：字体大小

默认：16px
写法：如下

font-weight：字体粗细

模式：正常（normal），加粗（bold）
写法： 单词（normal，bold）|number（100，200…900）（100到500正常，600到900加粗）

font-style：字体样式

模式：正常（normal），斜体（italic）

css段落样式

text-decoration：文本修饰

分为：下划线（underline），删除线（line-through），上划线（overline），不添加任何修饰
（none）
添加多个：通过空格隔开

text-transform：文本大小写（针对英文的）

小写：lowercase
大写：uppercase
只对首字母大写：capitalize

text-indent：文本缩进

首行缩进
em单位：相对单位，1em永远都是跟字体大小相同

text-align：文本对齐方式

方式：left（左对齐），right（右对齐），center（居中），justify（两端点对齐）

line-height：定义行高

行高：一行文字的高度，上边距和下边距是等价关系
默认行高不是固定值，而是变化的。根据当前字体的大小在不断的变化
取值：1.number（px）|scale（比例值，跟文字大小进行比例）
letter-spacing：定义字间距
word-spacing：定义词间距（针对英文）
英文和数字不自动折行的问题：
1.word-break：break-all；（非常强烈的折行）
2.word-wrap：break-word；（不是那么强烈的折行，会产生一些空白区域）

css复合样式

复合的写法是通过空格的方式实现的，复合写法有的是不需要关心顺序的如下：
background：red url（）repeat 0 0；
border：1px red solid；
有的需要关心顺序的如：
font
注;font最少要有两个值（size，family）顺序不可改变奇恩必须存在，size和family必须在最后面且顺序不变，size之前的顺序不管
注：如果非要混合写的话，那么就要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

css选择器

ID选择器：#elem{}

html:id=“elem”
ID选择器注意事项：
1、在一个页面中，ID值是唯一的
2、命名规范，字母_-数字（命名的第一位不能是数字）
3、命名方式
驼峰式 ：searchButtom（小驼峰：第二个单词首字母大写），SearchButtom（大驼峰：两个单词首字母都大写）
下划线式：search_small_buttom
短线式：search-small-buttom

CLASS选择器

css：elem{}
html：class=“elem”
注：
1、class选择器是可以复用的。
2、可以添加多个class样式。

3、多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序
4、标签+类的写法