文章目錄
HTML定義
超文本標記語言(Hyper Text Markup Language)，標準通用標記語言下的一個應用。HTML不是一種編程語言，而是一種標記語言 (markup language)，是網頁製作所必備的。“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
html / css / js
html結構
<!DOCTYPE html>
<html>
<head>
<meta chrset='utf-8'>
<title>文檔頭部!</title>
</head>
<body>
<div >
<h1>文檔主體...</h1>
<p></p>
</div>
</body>
</html>
標籤分類及屬性
屬性：
- 鍵值對
- 只能出現在開始標籤或自閉合標籤中
- 屬性名字小寫，屬性必須用引號引起來
- 如果屬性值和屬性名相同，可以縮寫，例：readonly='readonly’可以寫成readonly.
標籤分爲閉合標籤和自閉合標籤。
標籤分爲塊級標籤(block)和內聯標籤(inline)。
html/dead/body/title/meta
<!--數據展示渲染-->
div/p/span/h/a/br/ul/ol/li/img/stable/td/tr/dd
b/hr/em/up/sub/
<!--可提交數據-->
input/form/textarea/select/option
style/script/link
<!--不常用-->
strike/del/
head
title
<title>在瀏覽器標題欄的顯示</title>
meta
<meta>
<meta charset='utf-8'>
<!--關鍵詞-->
<meta name='keyword' content='關鍵詞、搜索詞'>
<!--網頁介紹-->
<meta name='description' content='網頁介紹'>
<!--自動刷新/刷新時間/跳轉網頁-->
<meta http-equiv='Refresh' content='2'>
<meta http-equiv='Refresh' content='2;www.xxx.com'>
<!--兼容IE-->
<meta http-equiv='X-UA-Compatible' content='IE=EmulataIE7'>
link
<!--設置網頁在標題欄的圖標-->
<link rel='ico' href='ico.ico'>
<!--引入css文件-->
<link type='text/css' style='stylesheet' href='css.css'>
script
<script></script>
style
<style>
<!-- 寫body中各標籤的樣式 -->
</style>
body
標題標籤：h1-6
<!-- 6級標題標籤：按標題大小依次 -->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
跳行標籤：p
<!--塊級標籤-->
<!--跳行標籤:一行結束後會隔一個空行-->
<p>人有悲歡離合，</p>
<p>月有陰晴圓缺，</p>
<p>此事古難全。</p>
<p>但願人長久，</p>
<p>千里共嬋娟。</p>
換行標籤：br
<!--換行標籤-->
人有悲歡離合，<br>月有陰晴圓缺，<br>此事古難全。<br>
但願人長久，<br>千里共嬋娟。
div
<!--塊級標籤-->
span
<!--內聯標籤-->
<span>span1</span>
<span>span2</span>
b、em、strike、del
<!--加粗-->
加粗<b>加粗</b><br>
<!--斜體-->
斜體<em>斜體</em><br>
<!--去除-->
去除<strike>去除</strike><br>
<del>去除</del>
上標(sub)、下標(sup)
<!--下標-->
<p>2<sub>10</sub></p>
<!--上標-->
10<sup>2</sup>
特殊符號
[HTML特殊符號]
(https://www.jb51.net/onlineread/htmlchar.htm)
©<>
圖片標籤：img
<img src="html.jpg" width="300px" height="200px" alt='圖片加載失敗' title='鼠標指到圖片時顯示'>
超鏈接、錨：a
<!--超鏈接：當前頁面跳轉到其他網址-->
<a href='https://blog.csdn.net/weixin_42016382/article/details/100755254'>這是一個超鏈接</a>
<!--在新標籤打開鏈接-->
<a href='https://blog.csdn.net/weixin_42016382/article/details/100755254' target='_blank'>在新標籤打開鏈接</a>
<!--錨：站內位置跳轉-->
<a href='#div1'>這個超鏈接會跳轉到id='div1'的元素</a>
無序列表(ul-unorder list)、有序列表(ol-order list)
<!--無序列表-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--有序列表-->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!--定義列表-->
<dl>
<dt>一
<dd>1</dd>
<dd>2</dd>
</dt>
<dt>二
<dd>3</dd>
<dd>4</dd>
</dt>
</dl>
表格：tab
<table border="1">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
表單：form
<!--
method='get'：數據在url中傳給服務器,安全性差，提交內容長度有限制
method='post'：數據在form表單中傳給服務器，相對較安全，提交內容長度無限制
action='127.0.0.1：8000/index'：數據傳輸到這個url服務端
type:text-輸入框
password-密碼：將輸入數據轉成***
submit-提交：將數據以鍵值對的格式傳給服務器{'game':['lol', 'pubg']}、{'gender':['male']}
button-按鈕：配合js
radio-單選框
checkbox-複選框
file:上傳文件
reset：重置所有輸入
name:將複選框/多選框選項綁定到一起（下面例子中{'game':['lol', 'pubg']}、{'gender':['male']}）,也是給服務器傳輸數據時鍵值對中的key
value：給服務器傳輸數據中鍵值對的value，在submit/button中是按鍵文字
-->
<form action='/index' method="get">
<p>輸入：<input type="text" name="text" value="text" ></p>
<p>密碼(輸入中會自動變成****)：<input type="password" name="pw"></p>
<p>
英雄聯盟<input type="checkbox" name="game" value="lol" >
絕地求生<input type="checkbox" name="game" value='pubg'>
</p>
<p>
男<input type="radio" name="gender" value="male">
女<input type="radio" name="gender" value="female">
</p>
<p><input type="file"></p>
<p><input type="reset"></p>
<p><input type="button" value="按鈕"></p>
<p><input type="submit" value="提交"></p>
</form>
點擊提交後url:
/index?text=text&pw=23123&game=lol&game=pubg&gender=male
選擇框select
單選
<select>語言：
<option value='python'>python</option>
<option value='c++'>c++</option>
<option value='c'>c</option>
<option value='php'>php</option>
<option value='java'>java</option>
</select>
多選
<!--multiple：多選
size='4':可以看見4個選項
-->
<select multiple size='4'>語言：
<option value='python'>python</option>
<option value='c++'>c++</option>
<option value='c'>c</option>
<option value='php'>php</option>
<option value='java'>java</option>
</select>
菜單
<select multiple size="10">
<optgroup label="語言1">
<option value='python'>python</option>
<option value='c++'>c++</option>
<option value='c'>c</option>
<option value='php'>php</option>
<option value='java'>java</option>
</optgroup>
<optgroup label="語言2">
<option value='python'>python</option>
<option value='c++'>c++</option>
<option value='c'>c</option>
<option value='php'>php</option>
<option value='java'>java</option>
</optgroup>
</select>
textarea
<body>
<textarea row="100" cols="60">個人簡介</textarea>
</body>
lable
<!--for定位到id='text'的input標籤，點擊label標籤中的文字'姓名'時，會關聯到input的輸入框或者單選複選框-->
<label for='text'>姓名：</label><input id='text' type="text" name="text" value="text" >