前端知識學習——html

來源:互聯網
上載者:User

標籤:烏魯木齊   第一天   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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.