TUE.表单及 CSS
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1"> # border 即表示表格
<thead>
<tr> # 一行数据 -- 表头
<td> # 列数据 -- 表头内容
</td>
</tr> # <th></th> 表头加粗
</thead>
<tbody>
<tr>
<td colspan="2"> # colspan="2" 表示占两列、rowspan="2" 表示占两行
</td>
</tr>
</tbody>
</table>
</body>
</html>
无序列表
<ul type="disc">
<li>第一项</li> # li 为块级元素，用来作为导航
<li>第二项</li>
...
</ul> # ul 为块级元素
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
form 表单
- 表单用于向服务器传输数据，从而实现用户与Web服务器的交互
- 表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等
- 表单还可以包含textarea、select、fieldset和 label标签
元素会根据不同的 type 属性，变化为多种形态。
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | |
| date | 日期输入框 | |
| checkbox | 复选框 | |
| radio | 单选框 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| button | 普通按钮 | |
| hidden | 隐藏输入框 |
- input 框是行内元素，因此不添加换行符即在同一行内
- 每个 input 里都应该有一个 name 属性
- name 属性相当于 Python 中的字典
- form 表单默认为 get 提交，需要使用 method 将其修改为 post
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如梦西沉</title>
</head>
<body>
<!--action:
1.什么都不写,即向当前位置提交
2.写全路径
3./index/
自动拼接 ip:port/index/
form表单中要想上传文件，必须修改enctype属性
是一种编码方式
urlencoded， form-data， json
enctype：
1.application/x-www-form-urlencoded (默认)
2.multipart/form-data
form表单只能提交urlencoded， form-data， json格式的数据不能提交，
1. ajax
2. 第三方工具 postman
-->
<form action="/index/" method="post" enctype="multipart/form-data">
<p>
<!-- 文本框,value 表示默认值,disabled 表示禁用,readonly 表示只读-->
username: <input type="text" value="Jason" disabled name="username" placeholder="账号">
</p>
<p>
<!-- 密码框-->
password: <input type="password" value="" name="password" placeholder="密码">
</p>
<p>
<!-- 日期输入框-->
日期: <input type="date">
</p>
<p>
<!-- 复选框, checked 表示默认-->
<input type="checkbox" name="hobby" value="0" checked>篮球
<input type="checkbox" name="hobby" value="1">足球
<input type="checkbox" name="hobby" value="2" checked>排球
</p>
<p>
<!-- 单选框, checked 表示默认-->
<input type="radio" name="gender" value="0" checked>Male
<input type="radio" name="gender" value="1">Female
<input type="radio" name="gender" value="2">Other
</p>
<!-- 下拉框, selected 表示默认-->
<select name="province" id="city">
<option value="0">北京</option>
<option value="1">南京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option selected="selected" value="4" >杭州</option>
</select>
<p>
<!-- 选择文件按钮-->
选择文件: <input type="file" name="myfile">
</p>
<p>
<!-- 提交按钮-->
<input type="submit">
<!-- 重置按钮-->
<input type="reset">
</p>
<p>
<!-- 大段文本框-->
<textarea name="" id="" cols="30" rows="10">
</textarea>
</p>
<p>
<!-- 用于查找数据-->
<input type="hidden" value="1">
</p>
<p>
<!-- 空白按钮,想要提交必须写在 form 中-->
<input type="button">
</p>
</form>
</body>
</html>
CSS
- 层叠样式表，用来给网页骨架增加样式，是网页变得更好看
CSS 语法结构
选择器{
属性名 1; 属性值 1;
属性名 2; 属性值 2;
属性名 3; 属性值 3;
属性名 4; 属性值 4;
属性名 5; 属性值 5;
属性名 6; 属性值 6;
}
<!--
id属性和class属性都是所有标签内置的
id：它唯一不能重复， 一个网页中只能由一个id
class: 可以有多个值，类似于面向对象的继承
自定义属性
-->
<div id="d1" class="c1 c2 c3" username="egon">div1</div>
<div id="d2" class="c1 c2">div2</div>
</body>
</html>
选择器的分类
基本选择器
1.ID 选择器
# 修改该 id 值所对应的属性
2.Class选择器
# 修改带有相同类的属性
3.标签选择器
# 修改相同标签的属性
4.通用选择器
# 选择所有标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器语法*/
#d1 {
color: red;
}
/*类选择器语法*/
.c1 {
color: red;
}
/*标签选择器语法*/
div {
color: red;
}
/*一般用来做初始化的*/
* {
color: purple;
}
</style>
</head>
<body>
<div id="d1" class="c1 c2">div1</div>
<div id="d2" class="c3 c1">div2</div>
<div id="d3" class="c4">div3</div>
<span>sapn1</span>
<p>ppppp</p>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*属性选择器语法*/
/*只要带username属性的所有标签，都会被选中*/
[username] {
color: red;
}
[username='div2'] {
color: red;
}
div[username='div2'] {
color: red;
}
</style>
</head>
<body>
<!--属性选择器-->
<div username="div1">div1</div>
<div username="div2">div2</div>
<p username="div2">pppppp</p>
</body>
</html>
后代选择器和组合选择器
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*逗号表示并列关系, 下列标签全被选中*/
div, p, span {
color: green;
}
/*后代选择器*/
div p span {
color: green;
}
#d1 .c1 span {
color: red;
}
</style>
</head>
<body>
<!-- <div>div</div>-->
<!-- <p>p</p>-->
<!-- <span>span</span>-->
<div id="d1">div
<p id="p1" class="c1">p
<span>span</span>
</p>
<p>
<a href=""></a>
</p>
</div>
<p>p11</p>
<span>span111</span>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认就是link*/
a:link {
color: red;
}
/*当鼠标悬浮时，触发的颜色, 掌握*/
a:hover {
color: green;
}
/*当鼠标点击左键不放时，触发的颜色*/
a:active {
color: blue;
}
/*访问连接之后的颜色*/
a:visited {
color: purple;
}
/*鼠标悬浮时,触发输入框颜色*/
input:focus {
background-color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点我点我</a>
<!--input获取焦点，失去焦点-->
<input type="text">
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p:first-letter {*/
/* color: red;*/
/* font-size: 30px;*/
/*}*/
p:before {
content: "我很帅";
font-size: 30px;
color: red;
}
p:after {
content: "洋哥很帅";
font-size: 30px;
color: red;
}
/* 它可以解决父标签塌陷问题*/
</style>
</head>
<body>
<p>当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。</p>
</body>
</html>
选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <style>-->
<!-- div {-->
<!-- color: red;-->
<!-- font-size: 20px;-->
<!-- }-->
<!-- </style>-->
<!--
<link rel="stylesheet" href="mycss.css">-->
<style>
#d1 {
color: red;
}
.c1 {
color: blue;
}
div {
color: purple;
}
</style>
</head>
<body>
<!--
选择器优先级有两种：
1. 选择器相同的情况下
行内式 > style 外联
style 和 外联，谁后执行就听谁的
2. 选择器不同的情况下
行内式 > id > class > 标签
-->
<!--<div style="color: red;font-size: 30px">div</div>-->
<!--<div>div</div>-->
<div id="d1" class="c1" style="color: green">div</div>
</body>
</html>
行内式
行内式，就是将css样式代码写在具体网页中的一个html标签元素内；行内式要在特定的HTML标记内使用，使用style属性来设置特定HTML标记的样式。比如：<div style="color:#f00"></div>
特点：
1、行内式放在代码中的HTML元素中
2、使用行内样式时，样式只会影响你选择的元素
3、行内样式没有选择器
注：HTML中定义的行内样式只适用于它们添加到的标记。
CSS属性相关
设置长宽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*块级元素可以设置长宽*/
div {
width: 200px;
height: 200px;
background-color: red;
}
/*行内元素不能设置长宽*/
span {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>
字体相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-size: 14px;
/*加粗*/
font-weight: bolder;
/*数字越大加粗程度越大， 100-900*/
font-weight: 100;
color: red;
/*rgb 0-255 255 * 255 * 255*/
color: rgb(101, 250, 100);
/*rgba => a:透明度，范围0-1，数字越小，越趋向于透明*/
color: rgba(101,250,100, 0.9);
/*它有1600w种颜色*/
color: #424242;
color: #6f7071;
}
</style>
</head>
<body>
<p>我是大帅哥</p>
</body>
</html>
文本相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*让文本居中*/
text-align: center;
/*让文本居右*/
text-align: right;
/*默认文本居左*/
text-align: left;
/*下划线*/
text-decoration: underline;
/*中划线*/
text-decoration: line-through;
/*上划线*/
text-decoration: overline;
/*常用于去除超链接的下划线*/
text-decoration: none;
}
a {
/*掌握*/
text-decoration: none;
}
</style>
</head>
<body>
<a href="">点我</a>
<!-- <p>当浏览器读到一个样式表，</p>-->
</body>
</html>