http://www.baidu.com<body>
<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
</form>
</body>
<body>
<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
1. 绑定id值方法一
<label for="d1">用户名:<input type="text" id="d1"></label>
绑定id值 之后在浏览器中点击label标签内文字任何的位置都可以自动选中input框
2. 绑定id值方法二
<label for="d2">用户名:</label>
<input type="text" id="d2">
</form>
<body>
******)******)textarea 标签 获取大段文本
*******）
针对所有选择框来说，传到后端的数据，由value属性决定，所以要手动添加value属性。
enctype="multipart/form-data"css就是层叠样式表
css就是用来控制html标签样式的，让其在浏览器上渲染的样式更合适，好看。
单行注释：/*单行注释*/
多行注释：
/*
多行注释`1
多行注释2
*/通过head标签内部的link标签引入外部的css文件（最正规的用法）
<link rel="stylesheet" href="css文件路径（只能放相对路径）">
直接在html页面上的head内通过style标签直接书写css代码
<style>
h1 {
color: green;
}
</style>行内式（直接在标签内部通过style属性直接书写），不推荐使用
<h1 style="color: orange">我是Oscar</h1>
元素选择器（即标签选择器）
让页面上的所有该标签都变成红色
标签名 {
color: red;
}id选择器
让id为该id值的标签变成绿色 (# + id值)
#id值 {
color: green;
}类选择器
让类中有c1的标签都变成粉红色 (. +类值)
.c1 {
color: pink;
}
通用选择器
让页面的所有标签都变成橘黄色
* {
color: orange;
}后代选择器
只要在标签内部都算作该标签的后代，用1个空格连接
如div 内部的所有span标签：
div span {
color: red;
}儿子选择器
表示一个标签内部的第一层标签。用 > 连接
如 div内的第一个span是儿子标签，第二个是div的孙子标签
<div>
<span>adff</span> # div 的儿子标签
<p>dsfsadf # div 的儿子标签
<span>iuiuio</span> # div 的孙子标签
</p>
</div>
儿子选择器语法：
div>span {
color: green;
}弟弟选择器
属于同一级别标签的标签1的之下的标签都是标签1的弟弟标签， 用 ~ 连接
<div>div
<span>div里面的span</span>
<p>div里面的p
<span>div里面的p里面的span</span>
</p>
<span>div里面最下面的span</span>
</div>
<p>ppp</p> # div 的毗邻标签 也是 # div 的弟弟标签 。当毗邻选择器和弟弟选择器同时出现的时候，以毗邻选择器优先。
<span>span</span> # div 的弟弟标签
<p>ppp</p> # div 的弟弟标签
<span>span</span> # div 的弟弟标签
弟弟选择器语法：
div~span {
color : yellow
}
毗邻选择器
毗邻选择器 标签1的下方的第一个同级别标签 ，用 + 连接
<div>div
<span>div里面的span</span>
<p>div里面的p
<span>div里面的p里面的span</span>
</p>
<span>div里面最下面的span</span>
</div>
<p>ppp</p> # div 的毗邻标签 也是 # div 的弟弟标签 。当毗邻选择器和弟弟选择器同时出现的时候，以毗邻选择器优先。
<span>span</span> # div 的弟弟标签
<p>ppp</p> # div 的弟弟标签
<span>span</span> # div 的弟弟标签
div+span {
color: aqua;
}******)a标签有四种状态
1.没有被点击过
2.鼠标悬浮上面
3.点击之后不松手
4.点击之后 再回去
依次对应上面a标签的4种状态
<style>
a:link {
color: red;
}
a:hover { /*hover表示的就是悬浮的意思*/
color: black;
}
a:active {
color: orange;
}
a:visited {
color: pink;
}
input输入框的聚焦状态：
input:focus {
background-color: orange;
}
普通文本的鼠标悬浮状态：
span:hover {
background-color: pink;
}
</style>input输入框的两种状态
我们将input框鼠标点进去之后的那个状态叫做 input获取焦点 聚焦 focus；
鼠标移出去之后的状态 叫做input框失去焦点
(清除浮动带来的负面影响)，可以通过css添加文本内容
p标签的文本信息首个字符变大且变成红色：
p:first-letter {
font-size: 48px;
color: red;
}
p标签的文本信息首个字符前面加绿色的 *
p:before {
content: '*';
color: green;
}
p标签的文本信息末尾加上蓝色的 ？
p:after {
content: '?';
color: blue;
}1.选择器相同的情况下 引入方式不同
遵循就近原则 谁离标签更近 就听谁的 ， 行内选择器优先级最高
2.选择器不同的情况下
行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
***************分组写法，就是一个一个写*********************
#d1 {
color: red;
}
.c1 {
color: red;
}
p {
color: red;
}
div,
span,
p {
color: blue;
}
****************嵌套，放在一起写，用逗号隔开***********************
#d1,.c1,p {
color: orange;
}
</style>
</head>
<body>
<div id="d1">div</div>
<span class="c1">span</span>
<p class="c2">
p
</p>
</body>
</html>原文：https://www.cnblogs.com/Mcoming/p/11851445.html