标签：color 选择器 -- HTML red div TUE CSS 属性
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>
标签：color,选择器,--,HTML,red,div,TUE,CSS,属性 来源： https://blog.csdn.net/Cream_Bule/article/details/119361842
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。