(HTML5+CSS3+Javascript)基础
HTML5知识点
文档说明
<!--注释内容-->
<!DOCTYPE html> 告诉浏览器要处理的为html文档
<html lang="en"> 文档中html部分的开始，属性language，en=English，zh=Chinese
<head> 提供有关文档内容和标注信息
<meta charset="UTF-8"> 定义编码格式
<title> 标题
<body> 编辑主体
基本元素
<h1> 标题大小
<a href="http://..." target="..."> 超链接，href=链接目标，target="_blank"为新建窗口打开，默认为本地刷新
<b> 粗体
<em> 斜体
<u> 下划线，不推荐使用
<s> 删除线
<br/> 换行
表格元素
<table> 表格
<tr> 行
<td> 列
<th> 表头
colspan 合并列单元格，rowspan合并行单元格，reversed倒序
列表元素
<ol> 有序列表
属性：type（设置样式），reversed（降序）
<ul> 无序列表
<li> 表示列表中的项
表单元素
<form>
method=用于发送form-data的http方法,
action=当提交表单时向何处发送表单数据
<input> 属性 Type, Name
Type=text时
value=预填充内容,占位
placeholder=显示内容，不填充，不占位
maxlength=最大填充字符数
size=拓宽单行文本框
readonly只读
Type=button时，按钮
Type=submit时，提交表单
-
button元素比input-button更适用
-
submit用于提交表单，适用范围比input-button小
-
input-button通常用于和JS一起使用并作为绑定事件处理
-
submit用于提交表单时，必须声明form里面的method属性，最好也添加action属性。
Type=range时，数字滑动
min，max=最值
step=步长
value=初值
Type=number时，手动输入数字元素同range
Type=checkbox时，复选框
Type=radio时，复选框，选中后无法取消
name=键值
checked预选中
<form> 三选一 <br/> <input type="radio" name="a" checked>C++ <input type="radio" name="a">Java <input type="radio" name="a">Python </form>Type=email
Type=tel
Type=url
Type=date
Type=color
Type=hidden
Type=image
<input type="image" src="图片地址" width="80px">
Type=file上传文件
Multiple 一次允许上传多个文件
Required 只能上传一个文件
<textarea> 多行文本框
rows=行，cols=列
<select> 单选项列表
<option>表单
<datalist> 多选项列表，配合input使用
<form>
<input type="text" list="datalist1">
<datalist id="datalist1">
<option>C++</option>
<option>Python</option>
<option>Java</option>
</datalist>
</form>
嵌入图片
<img src="">
alt=备用显示内容
图片添加超链接
<a>超链接标签
<a href="www.baidu.com">
<img src="picture.png" width="190">
</a>
分区响应图
<map> <area>点击后导航到指定URL
属性shape、coords共同起作用
shape
rect矩形，circle圆形，poly多边形,default默认
<img src="picture.png" usemap="#map1" width="190">
<map name="map1">
<area href="www.baidu.com" shape="rect" coords="0,0,100,100" target="_blank">
</map>
嵌入视频
<video src="" height="100" controls preload="metadata" poster="picture.png">
<source src="" type="video/mp4">
<source src="" type="video/ogg">
</video>
CSS3选择器
<head>
<meta charset="UTF-8">
<title>Oh my god</title>
<style type="text/css">
a{
font-size:80px;
color: darkcyan;
}
</style>
</head>
*选择所有元素
a{}根据类型选择元素
.class1{} 根据类选择元素
id1{} 根据id选择元素
[href] 根据属性选择元素
a:hover{} 选择器动作，鼠标经过时的动作
CSS控制边框和背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oh my god</title>
<style type="text/css">
.class1{
border-width: 8px;
border-color: darkcyan;
border-style: groove;
}
</style>
</head>
<body>
<p class="class1">what's your name?</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oh my god</title>
<style type="text/css">
.class1{
border: 5px solid red;
border-top: 10px dashed yellow;
background-color: aliceblue;
background-image: url("picture.png");
}
</style>
</head>
<body>
<p class="class1">what's your name?</p>
</body>
</html>
background-attachment: fixed; 随页面滚动
CSS设置文本样式
对齐 text-align:
文本方向 direction:
文字间距，单词间距，行高 letter-spacing, word-spacing, line-height
首行缩进 text-indent
文本装饰 text-decoration
文本大小写转换 text-transform: (capitalize首字母大写 uppercase全部大写)
字体名称 font-family:
字体大小 font-size:
字体样式 font-style:
指定字母是否以小型大写字母显示 font-variant:
设置字体粗细 font-weight
创建文本阴影 text-shadow (水平偏移 竖直偏移 模糊度 颜色)
CSS使用过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oh my god</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: aqua;
}
p:hover{
width: 200px;
height: 200px;
background-color: blue;
transition: 1s;
}
</style>
</head>
<body class="class1">
<p>what's your name?</p>
</body>
</html>
transition-timing-function: (ease, ease-in, ease-out, ease-in-out)过渡时呈曲线变化
CSS使用动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oh my god</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: aqua;
}
p:hover{
animation-duration: 500ms;
animation-delay: 200ms;
animation-name: what;
/*重复无数次*/
animation-iteration-count: 4;
/*变大之后缩小*/
animation-direction: alternate;
}
@keyframes what {
from{
width: 1000px;
height: 2000px;
background-color: brown;
}
50%{
width: 400px;
height: 400px;
background-color: blueviolet;
}
75%{
width: 500px;
height: 2000px;
background-color: darkgreen;
}
to{
width: 200px;
height: 200px;
background-color: darkcyan;
}
}
</style>
</head>
<body class="class1">
<p>what's your name?</p>
</body>
</html>
CSS使用变换
transform:
transform-origin: 更改旋转锚点
CSS的盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oh my god</title>
<style type="text/css">
.class1{
border: 1px solid black;
background-color: antiquewhite;;
/*内边距*/
padding: 50px 10px;
/*内边距背景填充*/
background-clip: content-box;
/*外边框*/
margin: 100px 500px;
}
</style>
</head>
<body>
<div class="class1">
what's your name?
</div>
</body>
</html>
JavaScript基础
外部文件引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS.js">
</script>
</head>
<body>
</body>
</html>
变量
var，const，let
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let num=123;
num += "100";
document.write("<h1>"+num+"</h1>")
let name=prompt("your name is:", "")
document.write("<h1>"+name+"<h1/>")
</script>
</head>
<body>
</body>
</html>
判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let pwd = prompt("your pwd is ?","");
if(pwd == "123456"){
document.write("密码正确");
}else{
document.write("密码错误");
}
</script>
</head>
<body>
</body>
</html>
循环，跟C/C++一样。
