第二次学习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
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
