標籤:烏魯木齊 第一天 app oct icon 功能 tip 失敗 keyword
<!--
Html,CSS,JS 三者的關係 ==> 人,衣服,動作。
以下展示 html 常用基本編碼
-->
<!-- Html
在PyCharm中建立html檔案預設給出的基本標籤如下:
----------------------
<!DOCTYPE html> 表示標準的html解析格式 w3c
<html lang="en"> html文檔 en 英文, zh中文
<head> 頁面的頭,是一對主動閉合標籤 <head></head>
<meta charset="UTF-8"> 自閉和標籤
<title>Title</title> 頁面標題
</head>
<body> 頁面主體 <body></body>
</body>
</html>
----------------------
-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head> <!--此對標籤之間都是定義頁頭外觀及行為的-->
<meta charset="UTF-8">
<!--<meta http-equiv="refresh" content="1"> <!--網頁標題左側的表徵圖每隔1秒重新整理一次-->
<!--<meta http-equiv="refresh" content="2;http://www.baidu.com"> <!--頁面2秒時重新整理並跳轉到指定連結-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--相容到IE瀏覽器的最高版本-->
<meta name="keywords" content="大師兄"> <!--檢索關鍵字,通常是一個詞語,要查看網頁原始碼才能看到-->
<meta name="description" content="大師兄是個低調的攻城獅"> <!--檢索摘要,通常是一個句子,要查看網頁原始碼才能看到-->
<title>網頁標題名稱</title>
<link rel="shortcut icon" href="title_icon.jpg"> <!-- 連結匯入shortcut icon title表徵圖 -->
<!--<link rel="stylesheet" href="XXX"> <!--連結匯入css樣式表-->
<!--<script src="xxxxx"></script> <!--匯入js檔案-->
<style> <!--寫css樣式的地方>
</style>
</head>
<body>
<p>年輕,就是拿來折騰的。</p> <!-- p是段落標籤,段間有明顯的距離;br是換列標籤,行間沒有距離-->
<p>讓自己具備一技之長的資本,<br>是需要無數個夜晚的靜思,</br>無數寂寞時光的堆積而成的。</p>
<h1>白羊座</h1> <!-- h是頁內標題標籤,標題會區分開本文字型 -->
<h2>白羊座</h2>
<h3>白羊座</h3>
<h4>白羊座</h4>
<h5>白羊座</h5>
<h6>白羊座</h6>
<div> <!-- 塊級標籤的寬度占整個頁面寬度--><!--div是塊級標籤的白板,只有一種屬性-->
塊級標籤
</div>
<span> <!-- 行內標籤的寬度隨標籤內容變化,是包裹標籤內容的大小--><!--span是行內標籤的白板,沒有屬性-->
行內標籤
</span>
<!--
<form> 標籤用於為使用者輸入建立 HTML 表單。
表單能夠包含 input 元素,比如文字欄位、複選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
表單用於向伺服器傳輸資料。
action 提交到那個介面
method post 還是 get
enctype="multipart/form-data" 指定上傳檔案類型
-->
<form action="/login" method="post" enctype="multipart/form-data">
<span>是否讓頁面記住密碼</span>
<input type="checkbox" checked="checked"> <!--複選框,預設選中-->
<input type="radio" checked="checked"> <!--單選鈕,預設選中-->
<input type="radio" name="r1" checked="checked">
<input type="radio" name="r1" > <!--互斥的一對單選鈕,第一個預設選中,用相同name實現互斥-->
</form>
<div>
<input type="text"> <!--普通文本輸入框,輸入可見字元-->
<input type="password"> <!--密文文本輸入框,輸入字元以掩碼顯示-->
<input type="submit" > <!--提交按鈕,表單資料直接提交到後台-->
<input type="file" > <!--實現上傳檔案功能-->
<input type="reset" > <!--重設按鈕,把表單資料重設-->
<input type="text" id="i1">
<label for="i1">使用者名稱</label> <!--label是標籤,用for繫結控制項id,實現點擊控制項的標籤即如點擊控制項一樣的效果-->
</div>
<textarea> <!--可滾動顯示的多行文本顯示地區,也可通過拖拽右下角調整地區的大小-->
標準通用標記語言 (SGML)下的一個應用HTML標準自1999年12月發布的HTML4.01後,
後繼的HTML5和其它標準被束之高閣,為了推動Web標準化運動的發展,
一些公司聯合起來,成立了一個叫做
Web Hypertext Application Technology Working Group (Web超文本應用技術工作群組 -WHATWG) 的組織。
WHATWG 致力於 Web 表單和應用程式,而W3C(World Wide Web Consortium,全球資訊網聯盟)
專註於XHTML2.0。在 2006 年,雙方決定進行合作,來建立一個新版本的 HTML。
</textarea>
<div>
<select > <!--下拉選框,顯示選中的單項-->
<option>烏魯木齊</option>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
<option>天津</option>
<option>重慶</option>
<option>鄭州</option>
</select>
<select size="2" multiple="multiple"> <!--滾動選框,顯示指定個數的多個選項-->
<option>烏魯木齊</option>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
<option>天津</option>
<option>重慶</option>
<option>鄭州</option>
</select>
<select size="4" multiple="multiple"> <!--滾動選框,分組顯示指定個數的多個選項-->
<optgroup label="直轄市">
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
<option>天津</option>
<option>重慶</option>
</optgroup>
<optgroup label="省會城市">
<option>成都</option>
<option>鄭州</option>
<option>烏魯木齊</option>
</optgroup>
</select>
</div>
<div>
<a href="http://www.baidu.com" target="_blank">跳轉到百度首頁</a> <!--target="_blank"是在新頁面開啟跳轉的連結-->
<img src="title_icon.jpg" alt="載入失敗" title="白羊座">
<!-- img 圖片標籤
src 圖片地址
alt 當圖片載入失敗的時候 顯示文案
title 滑鼠懸浮到圖片上時 顯示的文案
-->
</div>
<div>
<!-- ul 定義無序列表
不指定 type 預設圓點
指定type則按type顯示
-->
<ul>
<li>第一天學習ui自動化</li>
<li>第二天學習ui自動化</li>
</ul>
<ul type="square">
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</ul>
<!-- ol 定義有序列表
不指定 type 預設阿拉伯數字升序
指定type則按type a A 1 I i 顯示
-->
<ol type="1" reversed="reversed">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
<div>
<!-- table 表格標籤
thead 表頭
tr 行
th 列
th 的屬性 colspan="2" 代表一列占幾列
tbody 表體
tr 行
td 列
-->
<table border="1">r
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>班級</th>
<th>課程</th>
<th>分數</th>
<th colspan="2">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">1</td>
<td rowspan="3">張三</td>
<td>白羊座</td>
<td>語文</td>
<td>100</td>
<td>編輯</td>
<td>儲存</td>
</tr>
<tr>
<td>白羊座</td>
<td>數學</td>
<td>100</td>
<td>編輯</td>
<td>儲存</td>
</tr>
<tr>
<td>白羊座</td>
<td>英語</td>
<td>100</td>
<td>編輯</td>
<td>儲存</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
前端知識學習——html