HTML5、CSS3基础文档、html快速编程
==学习笔记，如有错误，希望尽快在评论区指出，不胜感激。==
参考教程 菜鸟教程. bilibili.JavaScript传送门.
Gitee使用.
廖雪峰Gitee使用.
@TOC
一、 HTML
网页结构编写（超文本标记语言: HyperText Markup Language）
实例
<!DOCTYPE>// 声明为 HTML5 文档 <html>// 元素是 HTML 页面的根元素 <head> <meta charset="UTF-8">//声明编码，否则会出现乱码 <title>页面标题</title> </head> <body>只有<body>//区域才能显示再网页中 <h1>我的第一个标题</h1>//标题标签h1~h6 <p>我的第一个段落。</p>//段落标签，自动换行切行之间间距更大 </body> </html> //注：注释格式是错误的，正确格式 <!--注释-->
1、基本标签
基础标签及其属性、作用
注：提及标签有部分标签H5 已废弃
==已废弃==：已废弃的元素或者属性意味着它已经过时。废弃的元素在以后将会过时，但是浏览器会继续支持已废弃的元素。
文件标签
<html> html文档的根标签 <head> 头标签。指定html文档的一些属性，引入外部的资源 <title> 标题标签 <body> 体标签 <!DOCTYPE> 声明为 HTML5 文档
文本标签
<h1>~<h6> 主题标签，由大到小
<p> 段落标签，自动换行切行之间间距更大
<br> 换行标签
<hr> 展示一条水平线。
<b> 字体加粗
<i> 字体斜体
<font> 字体标签（淘汰）
*属性：size、color、face字体
color：rgb(a,b,c) a、b、c表示红绿蓝占比0
255FF 例 #FF00FF
#abc 00
图像标签
<img> 图像标签
*主要属性 src:规定显示图像的 URL(统一资源定位符)，可以是图片相对路径，图片网络地址
* align:规定如何根据周围的文本来排列图像,值:"top,bottom,middle,left,right"(H5不支持)
* alt：规定图像的替代文本，图像显示错误时，提示用户图像内容显示的字。
//可套用<a>超链接标签 列表标签
//有序列表
<ol> //标签定义了一个有序列表. 列表排序以数字来显示。
*属性 type规定列表类型，及1、2、3或A、B、C,值"1,A,a,I,i"
//无序列表
<ul>//标签定义无序列表。
*属性 type列表的项目符号的类型 值"disc,square,circle"分别显示为“原点，方块，圆圈”注：HTML5 不支持。HTML 4.01 已废弃。
<li> //标签来定义列表选项。
例
<ul type="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
链接标签
<a>定义一个超链接
*属性 href:指定访问资源的URL(统一资源定位符)
* target:指定打开资源方式
*_self：默认值，在当前页面打开
*_blank: 在空白页面打开 块标签
<div>每一个div占满一整行
*常与属性class进行格式控制
<span>文本信息在一行展示，行内标签，内联标签 语义化标签
*提高代码可读性，与css控制样式 <header> <footer> ...
表格标签
<table> 定义表格
<tr> 定义行
<td> 定义单元格
*可用<td><img></img></td>实现对图片格式控制
<th> 定义表头单元格，对样式没有影响
*属性 rowspan行个数，colspan列个数,用于合并单元格
<caption> 表格标题
//与css控制样式，提高代码可读性，对样式无影响，但是标签位置改变不影响最后格式。
<thead> 表示表格头部分
<tbody> 表示表格体部分
<tfoot> 表示表格脚部分
*样例
<table>
<caption>标题</caption>
<thead>
<!-- 表头-->
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
</thead>
<tbody>
<!-- 表体-->
<tr>
<!-- <td></td>-->
<td></td>
</tr>
</tbody>
<tfoot>
<!-- 标尾-->
<tr>
<td colspan="2"></td>
<!-- <td></td>-->
</tr>
</tfoot>
</table> 2、表单标签
<form> 定义表单，采集用户数据
*属性
*action:指定提交数据的URL
*method:指定提交方式（共7种，常用两种）
get:1、请求会在地址栏中显示，会封装在请求体中。
2、请求参数大小有限
3、不安全
post:1、请求不会再地址栏中显示。会封装在请求体中。
2、参数大小没有限制
3、较为安全
*表单数据想被提交，必须指定name属性 表单项标签
*input标签:可以通过type属性，改变元素展示的样式
*type属性：
*text:文本输入
*passworld:密码框输入，隐藏输入内容
*color:取色器
*date、datetime-local:选择时间
*email:邮箱输入框，规定输入格式
*number:数值输入框
*radio:单选框
*注：1、想让单选框实现但是选效果，name属性值必定相等
2、一般会给单选框提供value属性，指定选中后提交的值。
3、checked属性指定默认值
*file:文件选择框
*hidden：隐藏域，不会显示但会提交数据。
*checkbox:复选框
*注：1、提供value属性
2、checked属性指定默认值
*button:按钮，以后学js以前使用
*image:图片按钮，提交表单数据
*src属性指定图片路径
*submit:提交表单
*select标签:下拉列表
*option标签：单选项
*属性：selected默认选择
*注：一般用value属性保证提交的值
例：
<select name="province">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2" selected >济南</option>
</select>
*label标签:
*label的for属性一般会和 input 的 id 属性值对应。对应及点击label区域，会让input输入框获取焦点。及点击跳转到输入框
*textarea标签:文本域
*属性cols列宽，一行的字符数。 ws行高，默认多行。
二、CSS：页面美化布局控制
概念：Cascading Style Sheets 层叠样式表> *层叠：多个样式也以作用在同一HTML的元素上
好处：1、功能强大
2、将内容与样式控制分离
*降低耦合度（分工协作）
*提高开发效率
css的使用、css与html结合方式
1、内联样式
*在标签内使用style属性指定css代码
*如：<div style="color:red;">红色</div>
*不常用 2、内部样式
*在head标签内定义style标签
*如：div{
color:blue;
} 3、外部样式
*定义css资源文件
*在head标签内定义link标签，引入外部资源文件
*如：a.css文件：
div{
color:green:
}
html文件：
<link rel="stylesheet" href="css/a.css">
或
<style>
@import "css/a.css";
</style> 选择器
1、基础选择器
1、id选择器：选择具体的id属性元素，建议一个html页面中id值唯一
*语法：#i的属性值{}
2、元素选择器：选择具有相同标签名称的元素
*语法：标签名称{}
*注意：id选择器优先级高于元素选择器
3、类选择器：选择具有相同class属性值的元素
*语法：.class属性值{}
*注意：类选择器优先级高于元素选择器 2、扩展选择器
1、选择所有元素：
*语法：*{}
2、并集选择器：
*语法：选择器1,选择器2{}
3、子选择器：筛选选择器1元素下的选择器2元素
*语法：选择器1 选择器2{}
4、父选择器：筛选选择器2的父元素选择器1
*语法：选择器1 > 选择器2{}
5、属性选择器：选择元素名称，属性名=属性值的元素
*语法：元素名称[属性名="属性值"]{}
6、伪类选择器：选择一些元素具有的状态
*语法：元素:状态{}
*如：<a>
*状态：
*link:初始化的状态
*visited:被访问的状态
*active:正在访问的状态
*hover:鼠标悬浮状态
*first-child：选取父元素的首个子元素的指定选择器
*last-child：选取父元素的最后一个子元素的制定选择器
*nth-child（n）：匹配属于父元素的第N个子元素，不论元素的类型
*nth-last-child（n）：匹配从父元素最后一个子元素开始倒数的子元素 例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样例</title>
<style>
p{
color: #FFD026;
}
div > p{
border: 1px solid;
color: red;
}
div div{
color: aqua;
}
div input[type="text"]{
border: 5px solid;
border-radius: 5px;
}
a:link{
color: red;
}
a:visited{
color: pink;
}
a:active{
color: #0cf5ff;
}
a:hover{
color: chartreuse;
}
</style>
</head>
<body>
<div>
<p>样例div>p</p>
<div>样例div>div</div>
</div>
<p>样例p</p>
<div>
<input type="text"></input>
</div>
<a href="aaaaa.html">注册界面</a>
</body>
</html> 属性
1、字体文本
* font-size：字体大小
* color：文本颜色
* text-align：对齐方式
* line-height：行高
2、背景
* background：背景图片
* 例：background: url("") no-repeat center;//图片不重复，居中
3、边框
* border：设置边框属性
* border-radius：边框半径
4、尺寸
* width：宽度
* height：高度
5、盒子模型（与div合用）具体应用才会理解
* 内外边距是相对的
* margin：外边距
* padding：内边距
* 默认情况下内边距会影响整个盒子大小
* 用box-sizing: border-box; 固定盒子大小
等等。。。。。。
css动画
浏览器内核前缀
原因：浏览器对新属性支持情况不同
*Gecko内核 前缀-moz- 火狐
*Webkit内核 前缀-webkit- Google、360、世界之窗、猎豹等
*Trident内核 前缀-ms- IE
*Presto内核 前缀-o- opera
/*标准写法：前缀写法+标准*/
-moz-animation: none;
-webkit-animation: none;
-o-animation: none;
animation: none; 圆角
圆角形成：按照指定位置向内偏移量移动圆心或焦点，画圆或椭圆
/*完整格式 2个参数 4个值*/ /*水平（左上，右上，右下，左下） / 垂直（左上，右上，右下，左下），其实就是左上顺时针*/ border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px; /*1个参数 4个值，顺序同上，同时规定水平竖直位置*/ border-radius: 10px 20px 30px 40px /*1个参数 2个值，（左上，右下）（右上，左下），其实就是对角线的角*/ border-radius: 10px 40px; /*四个角的值*/ border-radius: 10px; /*格式可以灵活使用,这里不在过多赘述*/ border-radius: 10px / 10px 20;
阴影
text-shadow/box-shadow: 阴影1.阴影2...
阴影格式：
(inset内阴影/outset默认)横向偏移量，纵向偏移量，模糊度，外延值、颜色
这里偏移量是以元素为原点进行偏移
box-shadow: 10px 20px 5px red, 10px -20px 5px yellow; box-shadow: 0 0 0 100px yellow;
transition
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
语法：transition: property duration timing-function delay;
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
渐变
线性渐变 Linear Gradients/径向渐变 Radial Gradients
需注意这里的只能使用background, background-image,不能使用background-color， 理解并不是很难
background: linear-gradient(direction, color-stop1, color-stop2)
background: radial-gradient(center, shape, size, start-color, ... , last-color)
direction(to x) x: top, bottom, right, left, [numb]deg background: linear-gradient(to top, red, blue) background: linear-gradient(to right bottom, red, blue) background: linear-gradient(45deg, red, blue) background: linear-gradient(-45deg, red, blue) center(at x y)x,y:以左上为参考点，建议使用像素
Transform（2D转换）
Transform 2D函数包括translate()、scale()、rotate()、skew()
transform: translate(0,-10px)//移动 transform: rotate(45deg)//旋转 transform: scale(1.3)//缩放 transform: sknew(45deg) sknew(x y)//倾斜
Transform 3D
注意，此时x，y轴方向依然是左，下，z轴方向向外
animation动画
通过关键帧控制动画的每一步
使元素从一种样式转换为另一种样式
@keyframes
声明动画，指定关键帧
@keyframes语法
@keyframes name{
from|0%{
css样式
}
percent{
css样式
}
to|100%{
css样式
}
} animation属性
//简写 animation:name duration timing-function delay iteration-count direction; 动画子属性 animation-name: ;选择器的关键帧的名称与keyframes名称一致 animation-duration: s|ms;动画完成一个周期所需时间 animation-timing-function: ;动画速度变化类型 animation-delay: s|ms;播放的延迟时间 animation-iteration-count: 数值|infinite; animation-directioin: nomal|alternate动画会在反向和正常轮流播放; animation-fill-mode:默认none|forwards动画停在最后一帧； animation-paly-state:pasued|runing;动画正在运行还是暂停
点动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOT</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.dot-div-1{
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
border: 1px solid #0f0f0f;
}
.dot-div-2{
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 50px;
border: 1px solid #0f0f0f;
}
.dot-div-3{
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 100px;
border: 1px solid #0f0f0f;
}
.dot-div-1 > .dot{
background-color: #8854d0;
}
.dot-div-2 > .dot{
background-color: #2980b9;
}
.dot-div-3> .dot{
background-color: #eb3b5a;
animation: dot-animation-3 1s infinite;
}
.dot{
height: 20px;
width: 20px;
border-radius: 50%;
/*border: 1px solid #e74c3c;*/
position: absolute;
top: 28%;
left: 28%;
z-index: 2;
transition: 0.5s;
}
.dot:hover{
position: absolute;
top: 28%;
left: 28%;
transform: scale(1.3);
transition: 0.5s;
}
.dot-2-border{
height: 18px;
width: 18px;
position: absolute;
top: 31%;
left: 31%;
border-radius: 50%;
background-color: #3498db;
z-index: 1;
animation: dot-animation-2 2s infinite;
}
.dot-1-border-1,.dot-1-border-2,.dot-1-border-3,.dot-1-border-4{
height: 18px;
width: 18px;
position: absolute;
top: 30%;
left: 30%;
border-radius: 50%;
z-index: 1;
}
.dot-1-border-1,.dot-1-border-3{
border: 1px solid #a55eea;
}
.dot-1-border-2,.dot-1-border-4{
border: 1px dashed #D980FA;
}
.dot-1-border-1{
animation: dot-animation-1 linear 2s infinite;
}
.dot-1-border-2{
animation: dot-animation-1 linear 2s 0.5s infinite;
}
.dot-1-border-3{
animation: dot-animation-1 linear 2s 1s infinite;
}
.dot-1-border-4{
animation: dot-animation-1 linear 2s 1.5s infinite;
}
@keyframes dot-animation-2 {
from{
transform: scale(1);
opacity: 1;
}
to{
transform: scale(3);
opacity: 0;
}
}
@keyframes dot-animation-1 {
0%{
transform: scale(0);
opacity: 0.9;
}
100%{
transform: scale(3);
opacity: 0;
}
}
@keyframes dot-animation-3 {
from{
transform: scale(1);
opacity: 0.9;
}
30%{
transform: scale(1.5);
background-color: #fc5c65;
}
to{
transform: scale(1);
opacity: 0.9;
}
}
</style>
</head>
<body>
<div class="dot-div-1">
<div class="dot"></div>
<div class="dot-1-border-1"></div>
<div class="dot-1-border-2"></div>
<div class="dot-1-border-3"></div>
<div class="dot-1-border-4"></div>
</div>
<div class="dot-div-2">
<div class="dot"></div>
<div class="dot-2-border"></div>
</div>
<div class="dot-div-3">
<div class="dot"></div>
<div class="dot-3-border"></div>
</div>
</body>
</html> position属性
参数：static 静态 relative 相对 absolute 相对 fixed 固定
static系统默认，与不加它没有任何区别。
top、bottom、left、left操作位置
定位流：给出定位属性开辟定位流（absolute fixed），relative严格来说并没有脱离文档流。
relative：div相对于原来的标准流（文档流）进行定位
设置top等值，会对其周围进行覆盖，可用来微调元素位置。
absolute：div父级元素有定位属性时，绝对定位就是相对父级元素的位置
div父级元素没有定位属性时，绝对定位就会向更高一级查找，直到查找到定位属性或body为止.
使用absolute的div脱离原来的文档流，新建定位流，后面的元素会向前补全。
同级元素都设置绝对定位，两者之间互不干扰，都会新建自己的定位流，所以会出现重叠的情况，且层级高的在上面。
fixed：相对于页面的可视区，不会随页面移动而消失。
难点
flex下面网站讲的相当的好，相当绝对位置依据菜鸟教程
flex布局传送门
position
成果展示
==道路很远，还需心向远方。==
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="../CSS/a.css">
<!-- <style>-->
<!-- @import "../CSS/a.css";-->
<!-- </style>-->
</head>
<body id="web_bg" style="background-image: url(https://photo.16pic.com/00/15/98/16pic_1598736_b.jpg);">
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<form action="#" method="post">
<table >
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></input></td>
</tr>
<tr>
<td class="td_left"><label for="passworld">密码</label></td>
<td class="td_right"><input type="passworld" name="passworld" id="passworld" placeholder="请输入密码"></input></td>
</tr>
<tr>
<td class="td_left"><label for="email">邮箱</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></input></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></input></td>
</tr>
<tr>
<td class="td_left"><label for="phnumber">手机号</label></td>
<td class="td_right"><input type="number" name="phnumber" id="phnumber" placeholder="请输入手机号"></input></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="sex" value="male">男</input>
<input type="radio" name="sex" value="female">女</input>
</td>
</tr>
<tr>
<td class="td_left"><label>生日</label></td>
<td class="td_right"><input type="date" name="brithdata" id="brithday"></input></td>
</tr>
<tr>
<td colspan="2" align="center" ><input id="btn_sub" type="submit" value="登陆"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有帐号？<a class="text_submit" href="#">立即登陆</a></p>
</div>
</div>
</body>
</html>
css文件
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
margin: auto;
margin-top: 15px;
}
.rg_left {
float: left;
margin: 15px;
}
.rg_left > p:first-child {
color: #FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color: #A6A6A6;
font-size: 20px;
}
.rg_right {
float: right;
margin: 15px;
}
.rg_right > p a{
color: pink;
}
.rg_center {
float: left;
width: 450px;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username,#phnumber,#passworld,#name,#email,#brithday{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
}
.rg_form{
padding-top: 50px;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
margin: auto;
} vscode快捷键
1.复制到下一行 Alt+Shift+下键(上下左右的下); 2.复制到上一行 Alt+Shift+上键(上下左右的上); 3.Ctrl+Shift+K 删除行 Delete line 4.移动一行 alt+方向键 5.同时选择多个单词: Alt + Click 6.一次性找出文所有的当前选中的单词: Ctrl + Shift + L 7.矩形框的鼠标选择: 同时按住Shit和Alt并使用鼠标进行拖拽选择
html快速编程
插件自寻，idea自带，输入按Tab即可
<!--div.clasname-->
<!--.clasname-->
<div class="clasname"></div>
<!--div#idname-->
<!--#idname-->
<div id="idname"></div>
<!--div.firstdiv>div.scondiv>div.thirdiv-->
<div class="firstdiv">
<div class="scondiv">
<div class="thirdiv"></div>
</div>
</div>
<!--div>p+a-->
<div>
<p></p>
<a href=""></a>
</div>
<!--div>a*3-->
<div><a href=""></a><a href=""></a><a href=""></a></div>
<!--div>(div>a)*3-->
<div>
<div><a href=""></a></div>
<div><a href=""></a></div>
<div><a href=""></a></div>
</div>
<!--div{测试}-->
<div>测试</div>
<!--div{$}*3-->
<div>1</div>
<div>2</div>
<div>3</div>
<!--div{测试$$}*10-->
<div>测试01</div>
<div>测试02</div>
<div>测试03</div>
<div>测试04</div>
<div>测试05</div>
<div>测试06</div>
<div>测试07</div>
<div>测试08</div>
<div>测试09</div>
<div>测试10</div>
<!--div[id=idname class=classname]-->
<div id="idname" class="classname"></div> 演示
div.nev>(div.nevitem>img[src=$.png]+p{标题$})*10
<div class="nev">
<div class="nevitem"><img src="1.png" alt="">
<p>标题1</p>
</div>
<div class="nevitem"><img src="2.png" alt="">
<p>标题2</p>
</div>
<div class="nevitem"><img src="3.png" alt="">
<p>标题3</p>
</div>
<div class="nevitem"><img src="4.png" alt="">
<p>标题4</p>
</div>
<div class="nevitem"><img src="5.png" alt="">
<p>标题5</p>
</div>
<div class="nevitem"><img src="6.png" alt="">
<p>标题6</p>
</div>
<div class="nevitem"><img src="7.png" alt="">
<p>标题7</p>
</div>
<div class="nevitem"><img src="8.png" alt="">
<p>标题8</p>
</div>
<div class="nevitem"><img src="9.png" alt="">
<p>标题9</p>
</div>
<div class="nevitem"><img src="10.png" alt="">
<p>标题10</p>
</div>
</div> 
京公网安备 11010502036488号