標籤：pre 參數 meta 注釋 郵件 嵌套 完全 磁碟 水平對齊
html概述和基本結構HTML概述HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文字標記語言 (HTML)，超文本指的是超連結，標記指的是標籤，是一種用來製作網頁的語言，這種語言由一個個的標籤組成，用這種語言製作的檔案儲存的是一個文字檔，檔案的副檔名為html或者htm，一個html檔案就是一個網頁，html檔案用編輯器開啟顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器開啟，瀏覽器會按照標籤描述內容將檔案渲染成網頁，顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> 網頁顯示內容 </body></html>
標籤的文法：
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標籤名>
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上，html代碼中插入注釋的方法是：
<!-- 這是一段注釋 -->html標籤特點：
<!-- 成對出現的標籤 --><body>......</body><p>......</p><div>......</div><b>......</b><!-- 單個出現的標籤 --><br /><img src="..." /><input type="..." /><!-- 標籤之間的嵌套 --><p> <span>...</span> <a href="...">...</a></p><div> <h3>...</h3> <div> <span>...</span> <p>...</p> </div></div>常用標籤<!DOCTYPE>標籤
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。
作用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。
document.compatMode：
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麼compatMode預設就是BackCompat
<head>內常用標籤 <meta>標籤<meta>提供的資訊是使用者不可見的
meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性
(1)name屬性: 主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人尋找資訊和分類資訊用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="老男孩培訓機構是由一個很老的男孩建立的">
(2)http-equiv屬性：相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以協助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意後面的引號，分別在秒數的前面和網址的後面) <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />非meta標籤
<title>oldboy</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> <script src="hello.js"></script><body>內常用標籤基本標籤（ 塊級標籤和內聯標籤）
1.<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.
通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標籤可以在網頁上定義6種層級的標題。6種層級的標題表示文檔的6級目錄層級關係，比如說： <h1>用作主標題（最重要的），其後是 <h2>（次重要的），再其次是 <h3>，以此類推。搜尋引擎會使用標題將網頁的結構和內容編製索引，所以網頁上使用標題是很重要的。
<h1>這是一級標題</h1><h2>這是二級標題</h2><h3>這是三級標題</h3>
2.<p>: 段落標籤. <p>標籤定義一個文本段落，一個段落含有預設的上下間距，段落之間會用這種預設間距隔開
3.<b> <strong>: 加粗標籤.
4.<strike>: 為文字加上一條中線.
5.<em>: 文字變成斜體.
6.<sup>和<sub>: 上角標 和 下角標.
7..<br>:換行.代碼中成段的文字，直接在代碼中斷行符號換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入<br />來強制換行
8.<hr>:水平線
9.特殊字元：
"；©®
空格的字元實體： 在網頁上顯示 “<” 和 “>” 會誤認為是標籤，想在網頁上顯示“<”和“>”可以使用它們的字元實體:
“<” 和 “>” 的字元實體為 < 和 > 詳見部落格：https://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html<div>和<span>
<div></div> ： <div>只是一個區塊層級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>： <span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.
區塊層級元素與行內元素的區別
block元素通常被現實為獨立的一塊，會單獨換一行；inline元素則前後不會產生換行，一系列inline元素都在一行內顯示，直到該行排滿。
這兩個元素是專門為定義CSS樣式而生的。
嵌套標準：
圖形標籤: <img>
src: 要顯示圖片的路徑.alt: 圖片沒有載入成功時的提示.title: 滑鼠懸浮時的提示資訊.width: 圖片的寬height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)絕對路徑和相對路徑
像網頁上插入圖片這種外部檔案，需要定義檔案的引用地址，引用外部檔案還包括引用外部樣式表，javascript等等，引用地址分為絕對位址和相對位址。
絕對位址在整體檔案遷移時會因為磁碟和頂層目錄的改變而找不到檔案，相對路徑就沒有這個問題。相對路徑的定義技巧：
“ ./ ” 表示當前檔案所在目錄下，比如：“./pic.jpg” 表示目前的目錄下的pic.jpg的圖片，這個使用時可以省略。
“ ../ ” 表示當前檔案所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示目前的目錄下的上一級目錄下的images檔案夾中的pic.jpg的圖片。
超連結標籤(錨標籤): <a> </a>
所謂的超連結是指從一個網頁指向一個目標的串連關係，這個目標可以是另一個網頁，也可以是相同網頁上 的不同位置，還可以是一個圖片，一個電子郵件地址，一個檔案，甚至是一個應用程式
href屬性指定目標網頁地址。
<a href="#"></a> <!-- # 表示連結到頁面頂部 --><a href="http://www.itcast.cn/" title="跳轉到傳智播客網站">傳智播客</a><a href="2.html">測試頁面2</a>定義頁面內滾動跳轉
頁面內定義了“id”或者“name”的元素，可以通過a標籤連結到它的頁面滾動位置，前提是頁面要足夠高，有捲軸，且元素不能在頁面頂部，否則頁面不會滾動。
<a href="#mao1">標題一</a>............<h3 id="mao1">跳轉到的標題</h3>
列表標籤有序列表
在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現，代碼如下
<ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li></ol>
在網頁上產生的列表，每條項目上會按1、2、3編號，有序列表在實際開發中較少使用。
無序列表在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現，代碼如下：
<ul> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li></ul>
在網頁上產生的列表，每條項目上會有一個小表徵圖，這個小表徵圖在不同瀏覽器上顯示效果不同，所以一般會用樣式去掉預設的小表徵圖，如果需要表徵圖，可以用樣式自訂表徵圖，從而達到在不同瀏覽器上顯示的效果相同,實際開發中一般用這種列表。
定義列表定義列表通常用於術語的定義。<dl>標籤表示列表的整體。<dt>標籤定義術語的題目。<dd>標籤是術語的解釋。一個<dl>中可以有多個題目和解釋，代碼如下：
<h3>前端三大塊</h3><dl> <dt>html</dt> <dd>負責頁面的結構</dd> <dt>css</dt> <dd>負責頁面的表現</dd> <dt>javascript</dt> <dd>負責頁面的行為</dd></dl>表格標籤: <table>
表格是一個二維資料空間，一個表格由若干行組成，一個行又有若干儲存格組成，儲存格裡可以包含文字、列表、圖案、表單、數字記號、預置文本和其它的表格等內容。
表格的基本結構：
<table> <tr> <td>標題</td> <td>標題</td> </tr> <tr> <td>內容</td> <td>內容</td> </tr></table>
table常用標籤：
1、table標籤：聲明一個表格2、tr標籤：定義表格中的一行3、td和th標籤：定義一行中的一個儲存格，td代表普通儲存格，th表示表頭儲存格
table常用屬性：
1、border 定義表格的邊框2、cellpadding 定義儲存格內內容與邊框的距離3、cellspacing 定義儲存格與儲存格之間的距離4、align 設定儲存格中內容的水平對齊,設定值有：left | center | right5、valign 設定儲存格中內容的垂直對齊 top | middle | bottom6、colspan 設定儲存格水平合并7、rowspan 設定儲存格垂直合并
練習：
表單標籤: <form>功能：表單用於向伺服器傳輸資料，從而實現使用者與Web伺服器的互動
表單能夠包含input系欄標籤，比如文字欄位、複選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標籤。
<!-- form定義一個表單區域,action屬性定義表單資料提交的地址，method屬性定義提交的方式。 --><form action="http://www..." method="get"><!-- label標籤定義表單控制項的文字標註，input類型為text定義了一個單行文本輸入框 --><p><label>姓名：</label><input type="text" name="username" /></p><!-- input類型為password定義了一個密碼輸入框 --><p><label>密碼：</label><input type="password" name="password" /></p><!-- input類型為radio定義了單選框 --><p><label>性別：</label><input type="radio" name="gender" value="0" /> 男<input type="radio" name="gender" value="1" /> 女</p><!-- input類型為checkbox定義了單選框 --><p><label>愛好：</label><input type="checkbox" name="like" value="sing" /> 唱歌<input type="checkbox" name="like" value="run" /> 跑步<input type="checkbox" name="like" value="swiming" /> 遊泳</p><!-- input類型為file定義上傳照片或檔案等資源 --><p><label>照片：</label><input type="file" name="person_pic"></p><!-- textarea定義多行文本輸入 --><p><label>個人描述：</label><textarea name="about"></textarea></p><!-- select定義下拉式清單選擇 --><p><label>籍貫：</label><select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">廣州</option> <option value="3">深圳</option></select></p><!-- input類型為submit定義提交按鈕 還可以用圖片控制項代替submit按鈕提交，一般會導致提交兩次，不建議使用。如： <input type="image" src="xxx.gif">--><p><input type="submit" name="" value="提交"><!-- input類型為reset定義重設按鈕 --><input type="reset" name="" value="重設"></p><!--button 按鈕(需要配合js使用.) button和submit的區別？-->
<!-- file 提交檔案：form表單需要加上屬性enctype="multipart/form-data"
上傳檔案注意兩點： 1 請求方式必須是post 2 enctype="multipart/form-data" -->
</form>
<2> 表單屬性 name: 表單提交項的鍵. 注意和id屬性的區別：name屬性是和伺服器通訊時使用的名稱； 而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便用戶端編程，而在css和javascript中使用的value: 表單提交項的值.對於不同的輸入類型，value 屬性的用法也不同： type="button", "reset", "submit" - 定義按鈕上的顯示的文本 type="text", "password", "hidden" - 定義輸入欄位的初始值 type="checkbox", "radio", "image" - 定義與輸入相關聯的值checked: radio 和 checkbox 預設被選中readonly: 唯讀. text 和 passworddisabled: 對所用input都好使.
Python--前端之HTML
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
