前端學習
""" wwwh what why where how
1、html: 頁面架構
2、css: 頁面布局
3、javascript: 頁面交互
4、jquery: js的工具包
5、bootstrap: 快速頁面搭建的框架
前端：寫網頁 - 用戶能看到一切交互頁面 - 網頁、app、小程序...
"""
HTML
"""
1、什么是html：超文本標記語言
超文本：文本、圖片、音頻、視頻、超鏈接
標記：符號 - 標簽 - 沒有邏輯
2、組成：轉義字符、指令、標簽
3、目的：完成頁面架構的搭建 - 用什么標簽、完成什么樣的標簽嵌套關系
"""
第一個頁面
<!--注釋：doctype 必須出現在頁面的最上方，規定該文檔采用的html版本類型 -->
<!doctype html>
<!--html語言不區分大小寫-->
<!--頁面標簽：包含所有頁面內容，只有head與body兩個子標簽-->
<html>
<!--頭標簽：樣式、腳本、后勤操作：頁面編碼、頁面標簽標題圖標-->
<head>
<title>第一個頁面</title>
<meta charset="utf-8">
<style></style>
<script></script>
</head>
<!--體標簽：頁面顯示內容存放區域、樣式、腳本-->
<body>
你好，html 這是我的第一個頁面
<style></style>
<script></script>
</body>
</html>
指令
"""
指令：被<>包裹，以!開頭 -
注釋：<!-- -->
文檔類型：<!doctype>
"""
轉義字符
"""
轉義字符：被 & ; 包裹，內容為特殊的我字母或數字組成
<: <
>: >
空格：
版權：©
"""
標簽
"""
標簽：被<>包裹，以字母開頭，可以包含數字和減號-
系統標簽：h1~h6 p span div i b a img hr br table form input
自定義標簽：滿足合法命名的所有標簽
注釋：html語言中，系統建議只使用系統標簽，不建議使用自定義標簽
"""
常用標簽
基礎
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標簽</title>
</head>
<body>
<!-- 1、標題：加粗 -->
<!--重點：h1標簽的語義：是該頁面的主標題-->
<h1 title="這是標題">一級標題</h1>
<h2>二級標題</h2>
<h6>六級標題</h6>
正文文本 <br>
正文文本
<!--2、段落: 自帶換行，有段落間距-->
<p>這是一個段落這是一個段落這是一個段落這是一個段落</p>
<p>這是一個段落這是一個段落這是一個段落這是一個段落</p>
<!--3、換行標簽-->
正文文本 <br>
正文文本 <br>
<!--自帶換行的文本標簽：h1~h6 p -->
<!--4、文本類型標簽：不自帶換行的文本標簽 - span i b -->
<span>span</span>
<span>span</span>
<b>加粗標簽</b>
<b>加粗標簽</b>
<strong>以加粗作為強調的強調標簽</strong>
<strong>以加粗作為強調的強調標簽</strong>
<i>斜體標簽</i>
<i>斜體標簽</i>
<em>以斜體作為強調的強調標簽</em>
<em>以斜體作為強調的強調標簽</em>
<br>
<span>一般用來嵌套其它文本類標簽 上<sup>角標</sup> 下<sub>角標</sub> </span>
<!--5、超鏈接標簽-->
<a href="https://www.baidu.com" target="_blank">前往百度</a>
<br>
<!--6、圖片標簽-->
<!--title：鼠標懸浮的文本提示-->
<!--alt：img標簽資源加載失敗-->
<img title="這是二哈" alt="二哈" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2969644141,2516639069&fm=26&gp=0.jpg">
<!--7、列表標簽: 無序ul>li 有序ol>li -->
<!--ul>li{第$列}*5-->
<ul>
<li>第1列</li>
<li>第2列</li>
<li>第3列</li>
<li>第4列</li>
<li>第5列</li>
</ul>
<!--8、表格標簽 table>tr>th|td -->
<!--tr:行 th:標題單元格 td:普通單元格 -->
<!--border:邊框-->
<!--cellspacing:單元格的間距，最小為0，
但是單元格之間是兩條線，可以用rules="all" 處理成一條線 -->
<!--cellpadding：單元格的內邊距（文本與標簽的間距）-->
<table border="1" width="500" height="300" rules="all" cellspacing="0" cellpadding="10">
<caption>表格標題</caption>
<thead>
<tr>
<!--th{標題}*3-->
<th>標題</th>
<th>標題</th>
<th>標題</th>
</tr>
</thead>
<tbody>
<!--(tr>td{單元格}*3)*2-->
<!--rowspan:合並行-->
<!--colspan:合並列-->
<tr>
<td rowspan="2">單元格</td>
<td colspan="2">單元格</td>
</tr>
<tr>
<!--<td>單元格</td>-->
<td>單元格</td>
<td>單元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾表尾</td>
<td>表尾表尾</td>
<td>表尾表尾</td>
</tr>
</tfoot>
</table>
<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><br><br><br><br><br><br><br><br><br>
</body>
</html>
表單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單標簽</title>
</head>
<body>
<!--1、form的作用：完成前后台數據的交互的 - 將用戶錄入的信息提交給后台 | 文件上傳 -->
<form action="">
<p>
<!--label作為input的文本解釋標簽，for綁定id-->
<!--value屬性是表單標簽的內容，就是提交給后台的-->
<!--name是提交給后台的key，value是值-->
<!--placeholder是文本占位符-->
<!--type是決定標簽的類型本質(input|button)-->
<!--multiple,checked布爾類型屬性，不需要寫值，multiple多選 checked默認激活-->
<label for="username">賬號：</label>
<input id="username" type="text" value="Owen" name="usr">
</p>
<p>
<label for="password">密碼：</label>
<input id="password" type="password" placeholder="請輸入密碼" name="pwd">
</p>
<p>
<input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
</p>
<p>
<input type="file" name="file" multiple>
</p>
<p>
男<input type="radio" value="male" name="sex" checked>
女<input type="radio" value="female" name="sex">
</p>
<p>
男<input type="checkbox" value="male" name="hobby" checked>
女<input type="checkbox" value="female" name="hobby" checked>
哇塞<input type="checkbox" value="other" name="hobby">
</p>
<p>
<button type="button">普通按鈕</button>
<button type="reset">重置按鈕</button>
<button type="submit">提交按鈕</button>
</p>
<p>
<textarea cols="30" rows="10"></textarea>
</p>
<p>
<input type="button" value="按鈕" />
<input type="reset" value="重置" />
<input type="submit" value="登錄" />
</p>
</form>
</body>
</html>
標簽的分類
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標簽的分類</title>
</head>
<body>
<h1>標簽的分類</h1>
<hr>
<!-- 1、是否自帶換行 -->
<!--帶換行：h1 p div table form tr ul li -->
<!--不帶換行：span i b a img input button label textarea-->
<!-- 2、單雙標簽 -->
<!--單標簽（主功能）：br hr input img link -->
<!--雙標簽（主內容）：html head body h1 p span div a label button -->
<!-- / 代表標簽的結尾，但是單標簽可以省略 -->
<div></div>
<hr />
<!--3、簡單和組合標簽-->
<!--組合：ul>li table>tr>td|th form>input -->
</body>
</html>
w3c頁面架構分析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>頁面架構</title>
</head>
<body>
<!--
html學習目的：
1、什么時候用什么標簽
最內層：h1~h6、p、a、img、input
外層：ul>li、form、table
架構：div
-->
<!--頁面頭-->
<div class="header">
<h1>
<a href=""></a>
</h1>
<form action="">
<input type="text">
<button></button>
</form>
</div>
<!--導航欄-->
<ul class="nav">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</ul>
<!--頁面主體-->
<div class="main">
<!--.main-left+.main-center+.main-right-->
<div class="main-left"></div>
<div class="main-center">
<div class="main-box box1">
<h2>領先的 Web 技術教程 - 全部免費</h2>
<p>在 W3School，你可以找到你所需要的所有的網站建設教程。</p>
<p>從基礎的 HTML 到 CSS，乃至進階的 XML、SQL、JS、PHP 和 ASP.NET。</p>
<p>
<b>從左側的菜單選擇你需要的教程！</b>
</p>
</div>
<div class="main-box box2">
<img src="" alt="">
<div>
<h2></h2>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="main-right"></div>
</div>
<!--頁面尾部-->
<div class="footer"></div>
</body>
</html>
