20.表格标签
1.<table>:表格的最外层容器
2.<tr>:定义表格行
3.<th>:定义表头
4.<td>:定义表格单元
5.<caption>:定义表格标题
注：之前是有嵌套关系的，要符合嵌套规范。
6.语义化标签：<tHead>、<tBody>、<tFood>
注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<caption>天气预报</caption>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<tr>
<td>2019年1月1日</td>
<td>有小雨，出门带伞</td>
</tr>
</table>
</body>
</html>
21.表格属性
boder：表格边框
cellpadding：单元格内的空间
cellspacing:单元格之间的空间
rowspan：合并行
colspan：合并列
align:左右对齐方式
valign：上下对其方式
align：left、center、right
valign：top、middle、bottom
22.表单标签
1.<form>:表单的最外层容器
2.<input>:(单标签)标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
注：input标签有一个type属性，决定是什么控件。
3.<textarea>:多行文本框
4.<select>、<option>:下拉菜单
5.<label>：辅助表单
| type属性 | 含义 |
|---|---|
| text | 普通的文本输入框 |
| password | 密码输入框 |
| checkbox | 复选框 |
| radio | 单选框 |
| file | 上传文件 |
| submit | 提交按钮 |
| reset | 重置按钮 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h2>输入框：</h2>
<input type="text">
<h2>密码框：</h2>
<input type="password">
<h2>复选框</h2>
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checkbox">葡萄 <!-- discode:禁止勾选 -->
<h2>单选框</h2>
<input type="radio"name="gender">男
<input type="radio"name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select size="3">
<option selected>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</select>
<select multiple ><!-- 多选 -->
<option selected>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<input type="radio"name="gender" for="gender" id="man">男<label>
<input type="radio"name="gender" for="gender" id="woman">女<label>
</form>
</body>
</html>
21.表格表单组合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<table>
<tBody>
<tr alain="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名：</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码：</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr alain="center">
<td colspan="2"></td>
<input type="submit">
<input type="reset">
</tr>
</tBody>
</table>
</form>
</body>
</html>
22.<div>与<span>
23.CSS基础语法
1.格式：选择器{属性1：值1：属性2：值2}
2.单位：px->像素（pixel）、%>百分比
3.基本样式：width、height、background-color
24.CSS的引入方式
1.内联样式
style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width:100px;height:100px;background-color:brown}
</style>
</head>
<body>
<div style="width:100px;height:100px;background-color:brown">这是一个块</div>
<div style="width:100px;height:100px;background-color:brown>这是另一个块</div>
</body>
</html>
2.内部样式
style标签
区别：
内部样式的代码可以复用、复合w3c的规范标准，进行让结构和样式分开处理。
3.外部样式
引入一个单独的css文件，name.css
通过link标签引入外部资源吗，rel属性指定资源跟页面的关系，href属性资源的地址。
通过link标签引入外部样式，（这种方法有很多问题，不建议使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="./commom.css"> -->
<title>Document</title>
<style>
@import url('./commom.css')
</style>
</head>
<body>
<div>这是一个快</div>
</body>
</html>
25.CSS中的颜色表示法
1.单词表示法：red、blue·····
2. 十六进制表示法：#000000 #ffffff
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d
3.rgb三原色表示法：rgb（255，255，255）
取值范围0~255
26.CSS背景样式
background-color 背景色
background-image 背景图片
url背景地址
默认：会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat （x，y都进行平铺，默认值）
no-repeat 都不平铺
background-position：背景位置
x y:number（px %) | 单词
x：left、center、right
y：top、center、bottom
background- attachment；背景图随滚动条的移动方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed (背景位置是按照浏览器进行偏移的）
27.CSS边框样式
border-style:边框的样式
border-width：边框的大小
border-color:边框的眼色
注：针对某一条边进行单独设置
边框也可以针对某一天进行单独设置：border-left-style：中间是方向 left、right、top、bottom’
颜色:透明颜色 transparent
练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width:300px;height: 300px;
border-top-color: black;
border-top-style:solid;
border-top-width:30px;;
border-right-color:red;
border-right-style:solid;
border-right-width:30px;
border-bottom-color:yellow
border-bottom-style:solid;
border-bottom-width:30px;
border-left-color:blue;
border-left-style:solid;
border-left-width:30px;;
}
</style>
</head>
<body>
</body>
</html>
28.CSS文字样式
1.
衬线体与非衬线体
注：
1.多个字体类型的设置目的
2.引号的添加的目的
2.字体大小
font-size：字体大小
默认:16px
写法：number（px）|单词（small large… 不推荐使用）
font-weight：字体粗细
模式：正常（normal) 加粗（bold0
写法:单词（normal、bold）|number（100 200… 900,100到500都是正常的，600到900都是加粗的）
font-style：字体样式
模式：正常（normal） 斜体（italic）
写法：单词（norma、italic）
注：oblique也是表示斜体，用的比较少，一般了解即可。
区别：1.italic所有带有斜体字提的可以设置
2.oblique 没有倾斜属性的字体也可以设置倾斜操作。
color：颜色
29.CSS段落样式
1. 标题text-decoration:文本装饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
*注：添加多个文本修饰：line-through underline overline*
2.text-thransform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写
3.texe-indent：文本缩进
首行缩进
em单位：相对单位， 1em永远都是跟字体大小相同
4.text-align：文本对齐方式
对齐方式：left、right、center、justify（两端点对其）
5.line-height：定义行高
什么是行高：一行文字的高度，上边距和下边距是等价关系。
默认行高：不是固定值，而是变化的。根据当前字体的大小不断变化。
取值：1.number(px) |scale（比例值，跟文字大小）
6.letter-spacing:字之间的间距
word-spacing：词之间的间距(针对英文段落）
英文和数字不自动折行的问题
1.word-break-all（非常强烈的折行）
2。word-wrap：break-word；（不是那么强烈的折行，会产生一些空白区域）
30.CSS复合样式
复合的写法是通过空格的方式实现的。复写写法有的是不需要关心顺序，lirubanckground、border；有的是需要关心顺序的，例如oont
1.background：red url（） repeat 0 0；
2.border：1px red solid；
3.font：
注：最少要有两个值 size famliy
weight style size family√
style weight size family√
weight style size/line-height family √
注：如果非要混合去写的话，那么要先写复合式，在写但一样式 ，这样样式才不会被覆盖掉。
31.CSS选择器
1.ID选择器
#elem{} id="elem"
注：
1. ID是唯一值，在一个页面中只能出现一次，出现多次是不服和规范的。
2.命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数学）
3.驼峰写法：searchButton（小驼峰） SearchButton（大驼峰） searchSmallButton
下划线写法：search_small_buttton
短线写法：search-samll-button
2.CLASS选择器
.elem{} class="elem"
注:
1.class选择器是可以复用的
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4.标签+类的写法
4413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
