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++一樣。