在web開發時，HTML相當於主體骨架，而CSS是針對樣式優化，JavaScript則是外部鏈接資源。整合自己在學習時的一些資料，具體如下，以供後續學習：
一、HTML 是什麼？
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標籤 (markup tag)
- HTML 使用標記標籤來描述網頁
二、HTML基本結構
|
1 2 3 4 5 6 7 8 |
|
示例：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
執行結果，
這裏要介紹一下上述的編碼代表的含義
標籤基本格式：<標籤名 *屬性名1=“屬性值” 屬性名2=“屬性值”* ……>文件內容</標籤名>
<! DOCTYPE html>：用於代碼開頭指定html版本等信息
<html></html>：告知瀏覽器這是一個 HTML 文檔，是 HTML 文檔中最外層的元素
<head></head>：所有頭部元素的容器，必須包含文檔的標題（title），可以包含腳本、樣式、meta 信息以及其他
<title></title>：定義文檔的標題，定義瀏覽器工具欄中的標題，顯示在搜索引擎結果中的頁面標題
<body></body>：定義文檔的主體，包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等）
<h1></h1>：定義 HTML 標題，從<h1>到<h6>標題的重要程度逐漸降低，字體大小也逐漸減小
<p></p>：定義段落，瀏覽器會自動在其前後創建一些空白，很類似與我們寫作時的段落<br>：一個簡單的換行符，是一個空標籤，意味着它沒有結束標籤。
<div></div>：定義 HTML 文檔中的一個分隔區塊或者一個區域部分。經常與 CSS 一起使用，用來佈局網頁。
三、標籤
head部分的標籤<title>、<base>、<link>、<meta>、<script> 以及 <style>
title
- 定義瀏覽器工具欄中的標題
- 提供頁面被添加到收藏夾時顯示的標題
- 顯示在搜索引擎結果中的頁面標題
meta
右擊你可以看到他head裏面的詳細信息：
- 文檔描述【網站在搜索時，進行描述。】
- <meta name="description" content="汽車之家爲您提供最新汽車報價，汽車圖片，汽車價格大全，最精彩的汽車新聞、行情、評測、導購內容，是提供信息最快最全的中國汽車網站。">
- 文檔關鍵詞【網站在搜索時，進行關鍵字匹配】
- <meta name="keywords" content="汽車,汽車之家,汽車網,汽車報價,汽車圖片,新聞,評測,社區,俱樂部">
- 重定向【頁面重定向】
- <meta http-equiv="Refresh"content="2;URL=https://www.baidu.com">
link用於導入css
- <link rel="stylesheet" type="text/css" href="mystyle.css" />
script用於導入js
<script type="text/javascript">document.write("Hello World!")</script>
style用於定義css
|
1 2 3 4 5 6 7 8 9 10 11 |
|
base:定義頁面上所有鏈接的默認地址或默認目標.
|
1 2 3 |
|
body部分的標籤（可以在網頁上看到的內容）
1、排版標籤:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
（1）、標題標籤 <h1></h1>
- h 即 head 的簡寫
- 有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6種，從左到右字號依次變小。
- 基本格式
<h1></h1> - 像<h7>這種錯誤的標籤在展示時不起作用
（2）、段落標籤<p></p>
- p 即 paragraph 的簡寫
- 基本格式
<p>段落內容</p> - 段落中的文本內容超出瀏覽器寬度之後會執行自動換行
（3）、水平線標籤<hr />
- hr 即 horizontal 的縮寫
- 其作用是在頁面中插入一條水平線
- 基本格式
<hr /> - 這是一個自閉合標籤。（普通標籤成對出現；自閉合標籤不需要包裹內容，自己就執行了開始和結束的操作）
（4）、容器標籤 <div></div> 和 <span></span>
- div 即 division 的縮寫，分割、區分的意思
- span 即 span ，跨度、範圍的意思
- 這倆本質上是一個容器，類似於 Android 中的ViewGroup
- 基本格式
<div>這是div標籤中的內容</div> <span>這是span標籤中的內容</span>
補充：
塊級標籤和內聯標籤區別
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
2、圖像標籤:
- img 即 image 的縮寫
- 基本格式
<img src="圖片URI/URL" /> - <img />常用屬性如下：
| 屬性 | 屬性值 | 屬性含義 |
|---|---|---|
| src | URI/URL | 圖像的路徑 |
| alt | 文本 | 圖像無法正常顯示時的提示文本 |
| title | 文本 | 鼠標懸停於圖像時顯示的文本 |
| width | 像素（XHTML 不支持按頁面百分比顯示） | 圖像的寬度 |
| height | 像素（XHTML 不支持按頁面百分比顯示） | 圖像的高度 |
| border | 數字 | 設置圖像邊框的寬度 |
- 設置圖像的寬高時，如果想等比縮放，則只設置其中一個即可
3、超鏈接標籤:
(1)、超鏈接標籤<a></a>
- anchor 的縮寫
- 基本格式
<a href="跳轉目標url" target="目標窗口的彈出方式">超鏈接文本或圖像</a>- href 即 HyperText Reference , 指定要跳轉的URL地址
- target , 指定目標窗口的打開方式。取值爲 self / blank , self 爲默認值，blank 表示新窗口打開
注意：
- 外鏈需要添加 http:// 或 https:// 前綴
- 內部鏈接 直接鏈接內部頁面名稱即可，如
<a href="index.html">首頁</a>- 如果當時沒有確定鏈接目標時，可以爲 href 賦值 爲 “#” ,即
href="#",表示一個空連接- 各種網頁元素，如 文本、圖像、表格、音頻、視頻等都可以作爲超鏈接的載體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超鏈接文本示例</title>
</head>
<body>
<a href="https://www.jianshu.com/u/414acf7abc2b" target="_blank">CnPeng簡書</a>
<br/>
<a href="https://blog.csdn.net/north1989">CnPeng CSDN</a>
<br/>
<a href="aTag.html" target="_blank">內部鏈接--再打開一個aTag.html</a>
<br/>
<a href="#">空的超鏈接</a>
</body>
</html>
（2）、錨點
- 通過創建錨點，可以快速定位到目標內容區域
- 創建錨點分爲兩步
- 爲目標內容（即錨點）創建id 並賦值
- 將超鏈接文本與錨點的id 關聯，
<a href="#id名稱"> 超鏈接文本 </a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#createAnchor">點擊跳轉到錨點位置</a>
<br/>
通過創建錨點，
可以快速定位到目標內容區域
<!--加這一堆br是爲了增加頁面高度，不然顯示不出錨點效果-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<h3 id="createAnchor">創建錨點分爲兩步</h3>
<hr/>
爲目標內容（即錨點）創建id 並賦值
<br/>
將超鏈接文本與錨點的id 關聯，<a href="#id名稱"> 超鏈接文本 </a>
</body>
</html>
4、列表標籤:<ul><ol><dl>:
- <ul>: 無序列表
- <ol>:有序列表
- <li>:列表中的每一項.
- <dl> 定義列表
- <dt> 列表標題
- <dd> 列表項
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
<ul type="circle" style="background:pink">
<li>無序列表1</li>
<li>無序列表2</li>
<li>無序列表3</li>
<li>無序列表4</li>
<li>無序列表5</li>
</ul>
<ol type="a" style="background:green">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
<li>有序列表5</li>
</ol>
效果圖如下：
注意：
ul：type 有：circle 空心圓，disc 實心圓，square 實心正方形， none ：前面無符號;
ol：type 有：1 ：表示有序的1,2,3； a ：表示有序的a，b，c；i ：羅馬數字i,ii,iii；雖然還可以定義爲：circle、disc、square、none但現實都爲1,2,3等序列；
5 、表格標籤: <table>
- border: 表格邊框.
- cellpadding: 內邊距，content和邊框的距離；
- cellspacing: 外邊距，content和content之間的距離；
- width: 像素 百分比.（最好通過css來設置長寬）
- <tr>: table row 表示一行
- <th>: table head cell 表頭
- <td>: table data cell 表數據
- rowspan: 單元格豎跨多少行
- colspan: 單元格橫跨多少列（即合併單元格）
- <th>: table header <tbody>(不常用): 爲表格進行分區.
<table border="1" cellpadding="20px" cellspacing="10px" style="background:green">
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<tr >
<td colspan="2" style="color:red">胖子 男佔2列</td>
<td>男</td>
</tr>
<tr>
<td rowspan="2" style="color:red">高個佔2行</td>
<td>11</td>
<td>男</td>
</tr>
<tr >
<td>qq</td>
<td>女</td>
</tr>
</table><br/>
效果圖如下：
注意事項：
1、標籤、標籤的屬性、標籤的樣式、一個元素
2、cellspacing和cellpadding
6、表單標籤：<form>
<form enctype="multipart/form-data" action="admin/login" method="post">
<fieldset>
<legend>用戶信息</legend>
用戶名：<input type="text" id='username' name="username" value="defaultname"><br/>
密碼:<input type="password" id='password' name="password"><br/>
性別:男<input type="radio" name="sex" value="男">
女<input type="radio" name="sex" value="女"><br/>
興趣:籃球<input type="checkbox" name="hobby" >
足球<input type="checkbox" name="hobby" >
水球<input type="checkbox" name="hobby" >
玻璃球<input type="checkbox" name="hobby" ><br/>
上傳文件:<input type="file" name="file" ><br/>
所屬部門：<select name="department" multiple>
<optgroup label="研發部">
<option value="de_01">研發1部</option>
<option value="de_02" selected="selected">研發2部</option>
<option value="de_03">研發3部</option>
</optgroup>
<optgroup label="技術部">
<option value="mercedes">運維</option>
<option value="audi">開發</option>
</optgroup>
</select><br/>
個人說明：<textarea cols="100" rows="10">這是個人說明個人說明</textarea><br/>
<button type="button">提交</button>
</fieldset>
</fieldset>
</form>
效果圖如下：
注意：
1、input的type可以爲text、password、raido、checkbox。
2、id爲唯一區分標誌符，而name是作爲傳入後端接受數據的名稱，可以重複。比如flask裏面 request.form.get('username‘)獲取用戶名。
3、raido單選框，name必須一樣，這樣纔會互斥。
4、file 提交文件：form表單設置屬性enctype="multipart/form-data"
5、對於readonly="readonly"這樣的屬性，可以簡寫爲readonly。
6、下拉列表中的multiple，可以選中多個。
7、textarea裏面可以設置默認高度和寬度，通過cols和rows設置。
8、form表單的url和action
url爲數據交互的目標URL
action爲get或post，get方式提交數據後url變爲http://www.test.com/admin/login?username="admin"&password="123456",用戶名和密碼都顯示傳輸，不安全；
post方式通過後臺方式，不會顯示在頁面上，便於隱藏，安全。
7、框架:<frameset>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
效果圖如下：
注意：
1、使用frameset標籤時，注意要去掉外層的<body></body>標籤。
8、佈局:<div+css>
<div> 元素常用作佈局工具，因爲能夠輕鬆地通過 CSS 對其進行定位，css主要實現對頁面部件的樣式進行佈局。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;
}
#header {
background-color:black;
color:white;
text-align:center;
padding:1px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:100px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h4>中國</h4>
</div>
<div id="nav">
北京<br>
上海<br>
深圳<br>
</div>
<div id="section">
<h2>上海</h2>
<p>
上海市總面積6340平方公里，轄16個市轄區，屬亞熱帶溼潤季風氣候，四季分明，日照充分，雨量充沛。
</p>
<p>
上海，簡稱“滬”或“申”，是gcd的誕生地，中華人民共和國直轄市，國家中心城市，超大城市，國際經濟、金融、貿易、航運、科技創新中心[1] ，首批沿海開放城市。上海地處長江入海口，是長江經濟帶的龍頭城市，隔東中國海與日本九州島相望，南瀕杭州灣，北、西與江蘇、浙江兩省相接。
</p>
</div>
<div id="footer">
www.example.com
</div>
</body>
</html>
效果圖如下：
注意：
1、 設置body的margin爲0，默認值爲8px，不然右上角會有一點點空白；
2、選擇器id設置css用“#”，class用“。”；
3、一般使用div進行佈局，比較好控制；
4、margin、padding、boder、content等概念是在CSS盒子模型時會學到；
9、javascript
作爲網頁腳本語言，不需要特殊的準備或編譯即可運行。瀏覽器中的 JavaScript 可以完成下面這些事：
- 在網頁中插入新的 HTML，修改現有的網頁內容和網頁的樣式。
- 響應用戶的行爲，響應鼠標的點擊或移動、鍵盤的敲擊。
- 向遠程服務器發送網絡請求，下載或上傳文件（所謂 AJAX 和 COMET 技術）。
- 獲取或修改 cookie，向訪問者提出問題、發送消息。
- 記住客戶端的數據（本地存儲）。
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
select{
width:100px;
}
</style>
</head>
<body>
省：
<select id="sheng" οnchange="selectShi()">
<option value="">請選擇省份</option>
<option value="0">河北省</option>
<option value="1">山東省</option>
<option value="2">河南省</option>
<option value="3">山西省</option>
</select>
市：
<select id="shi">
<option value="">請選擇市</option>
</select>
</body>
<script type="text/javascript">
var arrs = [];
arrs[0] = ["秦皇島","保定","石家莊","唐山"];
arrs[1] = ["濟南","臨沂","青島","威海"];
arrs[2] = ["洛陽","鄭州","開封","周口"];
arrs[3] = ["太原","大同","運城","忻州"];
function selectShi(){
var sheng = document.getElementById('sheng').value;
var shi = document.getElementById("shi");
var shis = arrs[sheng];
//清空原來的信息
//獲取市的option屬性
var shi_opts = shi.getElementsByTagName("option");
//遍歷刪除市中的option
for(var i= shi_opts.length - 1; i >= 1; i--){
var shi_opt = shi_opts[i];
shi.removeChild(shi_opt);
}
for(var i = 0; i < shis.length; i++){
var textNode = document.createTextNode(shis[i]);
var opt = document.createElement("option");
opt.appendChild(textNode);
shi.appendChild(opt);
}
}
</script>
</html>
四、標籤的屬性
- 基本格式：
<標籤名 屬性1=”屬性值1“ 屬性2=”屬性值2“></標籤名> - 標籤可以擁有多個屬性
- 屬性必須寫在開始標籤中，位於標籤名後面
- 屬性之間不區分順序
- 標籤名與屬性、屬性與屬性之間使用空格隔開
- 任何屬性都有默認值，省略該屬性表示使用默認值
參考鏈接：
https://www.cnblogs.com/skyflask/p/8325035.html