第二次学习Web的总结
一、表格与表单
1.1表格标签
<table>:表格的最外层容器
<tr>:定义表格的隔行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
标签之间有嵌套规范
语义化标签:<tHead> <tBady> <tFood>
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 border="1" cellpadding="10">
<tr>
<th>班次名称</th>
<th>科目</th>
<th>授课内容</th>
<th>增值服务</th>
<th>课时</th>
<th>价格</th>
<th>试听</th>
<th>购买</th>
</tr>
<tr>
<td rowspan="3">真题解析班</td>
<td>行测+申论</td>
<td>全科历年真题解析</td>
<td rowspan="3">课后增2套模拟试卷24小时以内答疑</td>
<td>48</td>
<td>1280元</td>
<td>耳机</td>
<td>购物车</td>
</tr>
<tr>
<td>行测</td>
<td>行测历年真题解析</td>
<td>32</td>
<td>980元</td>
<td>耳机</td>
<td>购物车</td>
</tr>
<tr>
<td>申论</td>
<td>申论历年真题解析</td>
<td>16</td>
<td>580元</td>
<td>耳机</td>
<td>购物车</td>
</tr>
<tr>
<td rowspan="3">高分技巧班</td>
<td>行测+申论</td>
<td>全科技巧强化</td>
<td rowspan="3">入学试卷答疑24小时以内答疑</td>
<td>32</td>
<td>980元</td>
<td>耳机</td>
<td>购物车</td>
</tr>
<tr>
<td>行测</td>
<td>行测速解技巧强化</td>
<td>18</td>
<td>680元</td>
<td>耳机</td>
<td>购物车</td>
</tr>
<tr>
<td>申论</td>
<td>申论速解技巧强化</td>
<td>14</td>
<td>580元</td>
<td>耳机</td>
<td>购物车</td>
</tr>
</table>
</body>
</html>
效果展示
1.2表格属性
<border>:表格边框
<cellpadding>:单元格内的空间
<cellspacing>:单元格之间的空间
<rowspan>:合并行
<colspan>:合并列
<align>:左右对齐方式
<valign>:上下对齐方式
注:
-
<border>
,<cellpadding>
,<cellspacing>
:加在<table>
标签中,数字代表像素 -
<rowspan>
,<colspan>
:加在<th>
标签中也能加在<td>
中 -
<align>
,<valign>
:加在<tr>
标签中也能加在<td>
中 -
align:left(左);center(中);right(右)
-
valign:top(上);middle(中);bottom(下)
1.3 表单标签
<form>:表单的最外层容器
<input>(单标签):标签用于搜集用户信息、根据不同的type属性值,展示不同的控件,如:输入框、密码框、复选框等。
<textarea>:多行文本框 属性:cols(行) rows(列)(数字代表格子)
<select>,<option>:下拉菜单(<option>嵌套在<select>中)
<select>属性:size:让菜单显示项数增加
multiple:多选
<option>属性:
selected 框中显示的项
disable 禁止选中的项
selected与 disable配合使用可使该子项在框中但无法被选中
<label>:辅助表单
type | 含义 |
---|---|
text | 普通的文本输入框 |
password | 密码输入框 |
checkbox | 复选框 |
radio | 单选框 |
file | 上传文件 |
submit | 提交按钮 |
reset | 重置按钮 |
name | 使得单选框成为一组 |
action | 填提交表单到的地址 |
check | 默认选中 |
disableed | 默认选中 |
placeholder | 在框中出现的文字 |
1.4表单表格组合
<!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>
<from>
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr >
<td>电子邮箱:</td>
<td><input type="text"></td>
</tr>
<tr >
<td>设置密码:</td>
<td><input type="password"></td>
</tr>
<tr>
<td>真实姓名:</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">性别:</td>
<td ><input type="radio" name="six">男</td>
<td ><input type="radio" name="six">女</td>
</tr>
<tr>
<td align="right">生日:</td>
<td>
<select>
<option selected disabled >请选择</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
</select>
年</td>
<td>
<select>
<option selected disabled >--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
月</td>
<td>
<select>
<option selected disabled >--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
日</td>
</tr>
</table>
</from>
</body>
</html>
二、<div>与<span>
2.1<div>块
<div>块
:div全称为division,“分割、分区”的意思,标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>
标签中,<div>
中还可以嵌套多层<div>
,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。
2.2<span>
- 用来修饰文字的,div与span都是没有任何默认样式的,需要配合CSS才行。
<!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>
<div style="border: 1px gray solid;">
<h2><a href="#">第<span style="color :blue">一</span>个块</a></h2>
<p>这是一段文字</p>
</div>
<div style="border: 1px red solid;">
<h2><a href="a">第<span style="color :red">二</span>个块</a></h2>
<p>这是一段文字</p>
</div>
</body>
</html>
三、CSS语法格式
3.1基础语法
选择器(属性1:值1;属性2:值2)
- 单位 :px(像素)、%(百分比)(相对于外容器)
- 基本样式:width(宽)、height(高)、background-color(背景颜色)
- css注释
/*css注释的内容*/
<!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:25%; height:100px;background-color: aqua;}
span{background-color: blue;}
</style>
</head>
<body>
<div>这是1个块</div>
<div>这是2个块</div>
<div>这是3个块</div>
<div>这是4个块</div>
<span>这是个内联</span>
</body>
</html>
3.2样式
内联(行内、行间)样式
- 在html标签上添加style属性来实现的
内部样式
- 在style标签内添加的样式
注:内部样式的代码可以重复使用(符合w3c的规范标准),进行让结构和样式分开
外部样式
- 引入一个单独的css文件(name,css)
通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性指定资源的地址 - 通过@import方式引入外部样式(这种方式有很多问题,不建议使用)
link的rel属性
值 | 描述 |
---|---|
alternate | 文档的替代版本(比如打印页、翻译或镜像)。 |
stylesheet | 文档的外部样式表。 |
start | 集合中的第一个文档。 |
next | 集合中的下一个文档。 |
prev | 集合中的上一个文档。 |
contents | 文档的目录。 |
index | 文档的索引。 |
glossary | 在文档中使用的词汇的术语表(解释)。 |
copyright | 包含版权信息的文档。 |
chapter | 文档的章。 |
section | 文档的节。 |
subsection | 文档的小节。 |
appendix | 文档的附录。 |
help | 帮助文档。 |
bookmark | 相关文档。 |
一般格式:
<link rel="stylesheet" type="text/css" href="练习index.css">
3.3css中颜色的表示方法
- 单词表示法:red、blue、green、yellow
- 十六进制表示法:#000000、#FFFFFF
- RAB三原色表示法:rbg(255,255,255)
(取值范围255)
-
提取颜色的下再地址:
fehelper下载地址 -
通过ps进行查看
3.4css背景样式
- background-color :背景颜色
- background-image:背景图片(url属性进行添加地址)
- background-position:背景图片的位置
- background-repeat:背景图片的平铺方式
平铺方式的属性:
repeat-x x轴水平对齐
repeat-y y轴水平对齐
repeat(x,y) 进行平铺(默认)
no-repeat 都不平铺
- background-attachment:背景图片的固定
固定方式的属性:
scroll(混动)
fixed (固定,固定在浏览器窗口里面,固定之后就相对于浏览器窗口了)
- background-size:背景图片尺寸
背景图片尺寸的属性:
- 输入一个值控制宽高
- 输入两个值分别控制宽高
- cover :让背景图片充满这个容器,哪怕图片显示不全也没关系,不在乎
- contain :让图片完全在容器中显示(等比例缩小)哪怕容器有空白,也没关系
- 复合属性:
background{ color; image ; repeat ; position ; attachment}
3.4.1渐变背景 线性渐变
当渐变用于背景时,可以使用像图像一样的background-image属性设置。
- 参数渐变
linear-gradient(方位,颜色1,颜色2)
- 参数1:表示方位,不写默认为to bottom ,可选值:
(1)to left,to right,to top,to bottom
(2)xxx deg表示角度,度数
(3)turn表示圈
参数2:颜色1
参数3:颜色2 - 注:默认情况下,颜色等分占比,可手动指定渐变占比。
- 平铺的线性渐变
background-image:repeating-linear-gradient(方位,颜色1,颜色2);
3.4.2渐变背景 放射渐变
- 径向渐变
background-image:radial-gradient(circle, #5c0067 0%, #00d4ff 100%);
- 参数:参数1:圆心的形状
(1)circle 圆形,ellipse椭圆,
- 重复渐变
background:repeating-linear-gradient(to left,#ff0,#0f0);
3.5css边框样式
- border-style:边框的样式
- border-width:边框的大小
- border-color:边框的颜色
注:针对某一条边进行单独设置
边框属性:
- solid:实线
- dashed:虚线
- dotted:点线
边框大小:
- px像素值
边框颜色:
- 与背景颜色格式一样
3.6css文字样式
- font-family
值 | 意义 |
---|---|
erif | 有衬线字体,即在文字笔画的结尾添加特殊的装饰线或衬线 |
sans-serif | 无衬线字体,即在文字笔画结尾处是平滑的 |
monospace | 等宽字体,即每个文字的宽度都是相同的 |
cursive | 草书字体,该字体有连笔或者特殊的斜体效果,会给人一种手写的感觉 |
fantasy | 具有特殊艺术效果的字体 |
- font-style
值 | 意义 |
---|---|
normal | 默认值,文本以正常字体显示 |
italic | 文本以斜体显示 |
oblique | 文本倾斜显示 |
inherit | 从父元素继承字体样式 |
- font-weight
值 | 意义 |
---|---|
normal | 默认值,标准字体 |
bold | 粗体字体 |
bolder | 更粗的字体 |
lighter | 更细的字体 |
100、200、300、400、500、600、700、800、900 | 由细到粗的设置字体粗细,100 为最细的字体,400 等同于 normal,700 等同于 bold |
inherit | 从父元素继承字体的粗细 |
- font-size
值 | 意义 |
---|---|
xx-small、x-small、small、medium、large、x-large、xx-large | 以关键字的形式把字体设置为不同的大小,从 xx-small 到 xx-large 依次变大,默认值为 medium |
smaller | 为字体设置一个比父元素更小的尺寸 |
larger | 为字体设置一个比父元素更大的尺寸 |
length | 以数值加单位的形式把字体设置为一个固定尺寸,例如 18px、2em |
% | 以百分比的形式为字体设置一个相对于父元素字体的大小 |
inherit | 从父元素继承字体的尺寸 |
3.7css段落样式
- text-decoration:文本修饰
下划线(underline);
删除线(line-through);
上划线(overline);
不添加任何修饰(none);
添加多个:通过空格隔开
- text-transform:文本大小写(针对英文的)
小写:lowercase
大写:uppercase
只对首字母大写:capitalize
- text-indent:文本缩进
首行缩进
em单位:相对单位,1em永远都是跟字体大小相同
- text-align:文本对齐方式
方式:left(左对齐),right(右对齐),center(居中),justify(两端点对齐)
- letter-spacing:文字间距
直接写像素大小,控制每个字之间的间距
- 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之前的顺序不管
注:如果非要混合写的话,那么就要先写复合样式,再写单一样式,这样样式才不会被覆盖掉。
3.8css列表属性
属性 | 描述 | 说明 |
---|---|---|
list-style-type | 定义列表符合样式 | list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉符号) |
list-style-image | 将图片设置为列表符合样式 | list-style-image:url(); |
list-style-position | 设置列表项标记的放置位置 | list-style-position: inside;列表的里面list-style-position: inside;列表的里面 |
list-style | 简写 | list-style:none;去除列表符号 |
- 复合写法:
list-style{属性一;属性二;属性三}- 属性一: type
- 属性二:image
- 属性三:position