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.标签+类的写法