前端知識學習——html
阿新 • • 發佈：2017-07-24
submit src 加載 lin mpat xhtml area password title
<!--
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> <!--可滾動顯示的多行文本顯示區域，也可通過拖拽右下角調整區域的大小-->
標準通用標記語言下的一個應用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