１. 表格标签
１.１创建表格
表格标签是一种用来处理，显示表格式数据的常用标签。
注意：
１. tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。
２.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。
<body> <!-- 表格创建 --> <!-- table 定义表 th 定义表头 tr 定义行 td 定义单元格 --> <!-- 表格属性 --> <!-- align 设置对其方式 center 水平方向对其 left 左对齐 right右对齐 cellpadding 设置单元格内容与单元格边框之间的空白间距 cellspacing 设置单元格到边框之间的空白间距 border 设置边框 width 设置表格宽度 --> <!-- 表格标题 --> <!-- caption 定义表格的标题 1. caption标签只存在表格里面，必须紧随 table 标签之后。 2. 只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 --> <table cellpadding="10" cellspacing="0" width="500" align="center" border="1"> <!-- 定义标题 --> <caption>信息表</caption> <!-- 定义表头 --> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody align="center"> <tr> <td>张三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>19</td> <td>女</td> </tr> </tbody> </table> </body>
1.2 表格合并
跨行合并：rowspan
跨列合并：colspan
合并单元格思想：将多个内容合并的时候，就会有多余的东西，把它删除，例如：把3个td合并，那就多余了2个td，需要删除。
公式：删除的个数=合并的个数-1
合并的顺序：先上 后下 先左 后右
1. 先确定是跨行还是跨列合并
2. 根据先上 后下 先左 后右 的顺序找到目标单元格
3. 删除单元格 删除的个数=合并的个数-1
<body> <table cellpadding="10" cellspacing="0" align="center" width="500" border="1"> <tr> <!-- 跨列合并 --> <th colspan="3">学生信息</th> <th colspan="2">成绩</th> </tr> <tr> <th>姓名</th> <th>性别</th> <th>专业</th> <th>课程</th> <th>分数</th> </tr> <tr align="center"> <td>张三</td> <td>男</td> <!-- 跨行合并 --> <td rowspan="2">计算机</td> <td>java</td> <td>98</td> </tr> <tr align="center"> <td>李芳</td> <td>女</td> <td>mysql</td> <td>96</td> </tr> </table> </body>
2. 表单标签
2.1 表单的作用
表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
应用场景：主要应用于数据的提交，比如点击按钮向服务端发送数据。
2.3 表单中常用控件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table align="center" width="500" border="1" cellspacing="0" cellpadding="4"> <caption><h2>人员信息录入表</h2></caption> <hr> <!-- 表单创建：form用于定义表单域 action="url" 将数据提交到哪里，一般是后端提供的接口路由 method="请求方式" 一般为get或post get:明文传输，相对不安全，传递数量较少，但是效率较高，一般用于向服务器索要数据 post: 请求体传输（非明文），相对安全，传递数量较多，但是效率低，一般用于给服务器发送数据 name="表单名" 当我们提交表单时，会携带表单内容输入的数据进行传递 传递方式：action路由?name=value&name=value... --> <form action="" method="get" name="information"> <!-- input 用户输入控件 name ： 控件名称 value ： 默认值 type ：输入类型 hidden 隐藏域 --> <input type="hidden" name="id" value=""> <tr> <td> <!-- label 无语义标签 可以在点击的时候，在对应id的输入框获取焦点 --> <label for="a">用户名:</label> </td> <td> <!-- 普通文本输入框 placeholder 提示信息 --> <input id="a" placeholder="请输入用户名" type="text" name="username" value=""> </td> </tr> <tr> <td><label for="b">密码:</label></td> <!-- 密码输入框 --> <td><input id="b" placeholder="请输入密码" type="password" name="password"></td> </tr> <tr> <td>性别:</td> <td> <!-- 单选框，多个单选框时name必须保持一致 checked 默认选项 --> <input checked type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 </td> </tr> <tr> <td>爱好:</td> <!-- 复选框 checked 默认选项 --> <td> <input type="checkbox" name="likes" value="唱">唱 <input type="checkbox" name="likes" value="跳">跳 <input type="checkbox" name="likes" value="篮球">篮球 <input checked type="checkbox" name="likes" value="学习">学习 </td> </tr> <tr> <!-- 文件上传使用 --> <td>头像:</td> <td> <input type="file"> </td> </tr> <tr> <!-- 下拉框 select的传递方式 select的value=选中的option的value --> <td>学历:</td> <td> <select name="edu" id=""> <option value="小学">小学</option> <option value="中学">中学</option> <option value="大学">大学</option> </select> </td> </tr> <tr> <!-- 多行文本域 --> <td>自我介绍:</td> <td> <textarea name="" id="" cols="30" rows="10"></textarea> </td> </tr> <tr> <!-- 按钮 --> <td colspan="2"> <input type="button" value="普通按钮"> <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮"> <button>button按钮-可提交</button> </td> </tr> </form> </table> </body> </html>
页面显示
3. CSS初识
3.1 CSS介绍
CSS(Cascading Style Sheets) 主要用于美化样式。
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
3.2 样式表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 内部样式表 可以控制当前页面的所有样式，但是并没有完全和html分离 --> <style> /* 编写CSS代码 */ /* 选择器：找到要操作的标签 选择器｛属性:值;属性:值;...｝ */ h1{ color: blueviolet; } </style> <!-- 外部样式表 会重新创建一个后缀为.css的文件，存放CSS代码 可以控制整个站点，只要能找到这个CSS文件 内容和样式也是完全分离的 缺点：需要link导入 --> <link rel="stylesheet" href="./test.css"> </head> <body> <h1>标题一</h1> <!-- 行内样式表 通过标签的style属性进行CSS编码，只能影响一个标签 和HTML完全混淆在一起，但是权重高 --> <p style="color: blue;"></p> </body> </html>
三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
3.3 CSS基础选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 标签选择器 每一个标签名就是一个标签选择器 用于选择页面中所用相同的标签，设置相同的样式 */ p{ color: blue; } /* 类选择器 每一个标签都有class属性 选择所有class值相同的标签，设置相同的样式 class用.表示 .class值{属性:值;...} */ .one{ color: red; } /* ID选择器 每个标签都有ID属性 ID一般代表唯一性，适合对页面中某个特定的标签设置单独的样式 ID选择器使用#表示 #id值{属性:值;...} */ #two{ color: purple; } /* 通配符 选择页面中所有标签，对所有标签设置相同的样式 一般用于清理标签的默认内外边距 */ *{ color: green; } /* 优先级：* < 标签 < 类 < id */ </style> </head> <body> <h1 class="one">标题1</h1> <h2 id="two">标题2</h2> <h3>标题3</h3> <p class="one">段落1</p> <p>段落2</p> </body> </html>
页面显示
3.4 CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
3.4.1 交集选择器
交集选择器由两个选择器构成，其中一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 所有class为a的标签 */ .a { color: red; } /* class为a的p标签 */ p.a{ font-size: 40px; } </style> </head> <body> <p class="a">段落1</p> <p>段落2</p> <h3 class="a">标题3</h3> </body> </html>
3.4.2 并集选择器
并集选择器（CSS选择器分组）是各个选择器通过<strong style="color:#f00">逗号</strong>连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 并集选择器 用于对多个选择器设置相同的格式 */ p,div{ color: blue; } </style> </head> <body> <p>段落</p> <div>文本</div> </body> </html>
3.4.3 子元素和后代选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 进行连接，注意，符号左右两侧各保留一个空格。
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 直接子代 使用> 格式：选择器>选择器>选择器...{} */ div>a{ color: red; } /* 空格表示后代 可以是子代，也可以是子代的子代 格式：选择器 选择器 选择器...{} */ div a{ font-size: 40px; } </style> </head> <body> <div> <a href="">div子代</a> <p><a href="">div子代p的子代</a></p> </div> </body> </html>
3.4.4 伪类选择器
伪类选择器用于向某些选择器添加特殊效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 未访问状态 */ a:link{ color: red; text-decoration: none; } /* 已访问状态 */ a:visited{ color: #888; } /* 鼠标移入状态 */ a:hover{ color: blue; text-decoration: underline; } /* 选定状态，鼠标按下不松开 */ a:active{ color: aqua; } </style> </head> <body> <a href="#1">按钮</a> </body> </html>
3.4.5 属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 选择器[属性] 获取选择器中某个有指定属性的标签 */ /* 获取有id属性的input */ input[id]{ color: red; } /* 选择器[属性=值] 获取选择器中某个有指定属性和值标签 */ input[type=text]{ color: aqua; } /* ^=以什么开头 $=以什么结尾 */ a[href^='http']{ color: red; } a[href$='com']{ font-size: 40px; } </style> </head> <body> <input type="text"> <input type="button" value="按钮" id=""> <a href="http://baidu.com">百度一下，你就知道</a> <a href="taobao.com">淘宝</a> </body> </html>
4. CSS字体样式属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p { /* 字体大小 */ font-size: 50px; /* 字体粗细 */ font-weight: 900; /* 字体倾斜 */ font-style: oblique; /* 字体 */ font-family: SimSun; } div{ /* 综合写法 ： 风格 粗细 大小 字体 大小和字体必须要加，否则不生效 */ font: oblique 500 30px SimSun ; } </style> </head> <body> <p>文本内容1</p> <div>文本内容2</div> </body> </html>
5. CSS外观属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { /* 字体颜色 */ color: blue; /* 字体大小和样式 */ font: 30px SimSun; /* 背景颜色 */ background-color: rgb(229, 228, 165); /* 边框 1px 实线 黑色*/ border: 1px solid black; /* 文本水平方向对齐 左中右 */ text-align: center; /* 高度 */ height: 100px; /* 行高 当行高和高度一致时，垂直居中*/ line-height: 100px; /* 文本修饰：下划线 */ text-decoration: underline; /* 鼠标样式 */ cursor: pointer; } a{ /* 去除文本修饰 */ text-decoration: none; } </style> </head> <body> <a href="">静夜思</a> <div>床前明月光</div> <div>疑是地上霜</div> <div>举头望明月</div> <div>低头思故乡</div> </body> </html>
6.CSS颜色属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{ /* 英文单词 */ color: red; /* 三位十六进制整形值 由高到低分别代表红、绿、蓝 0为最小值，f为最大值 */ color: #333; /* 六位十六进制整形值 每两位分别代表红、绿、蓝 */ color: #ff5547; /* 使用rgb函数，填写百分比 分别为红、绿、蓝所占比 */ color: rgb(50%, 50%, 50%); /* 使用rgb函数，填写0——255数字 */ color: rgb(23, 166, 88); /* 使用rgba函数 前三位与上两种相同，第四位为透明度设置，0-1的小数 0 为完全透明，1为不透明 */ color: rgba(0, 0, 0, 0.5); } </style> </head> <body> <p>文本颜色</p> </body> </html>
7. CSS书写规范
7.1 空格规范
【强制】选择器与{之间必须包含空格.
/* 示例 */ select {}
【强制】属性名与之后的：之间不允许包含空格，: 与属性值之间必须包含空格
/* 示例 */ font-size: 10px;
7.2 选择器规范
【强制】当一个rule包含多个selector时，每个选择器声明必须独占一行。
/* good */ .post, .page, .comment { line-height: 1.5; } /* bad */ .post, .page, .comment { line-height: 1.5; }
【建议】选择器的嵌套层级应不到于3级，位置靠后的限定条件应尽可能精确。
/* good */ #username input {} .comment .avatar {} /* bad */ .page .header .login #username input {} .comment div * {}
7.3 属性规范
【强制】属性定义必须另起一行。
/* good */ .selector { margin: 0; padding: 0; } /* bad */ .selector { margin: 0; padding: 0; }
【强制】属性定义后必须以分号结尾。
