python/HTML基礎
阿新 • • 發佈：2017-05-17
doctype 自動 hello 解析 內聯 搜索引擎 標準 嵌套 格式
<div></div> ： <div>只是一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現.
---恢復內容開始---
python/HTML基礎
HTML：
超文本標記（標簽）語言 （以<>擴起來的都是標簽語言，放入標簽裏的不僅僅是文本）一套語言規則
瀏覽器的渲染順序是從上到下，從左到右
不同的瀏覽器，對同一標簽可能會有不完全相同的解釋（兼容性）至今已經解決的差不多了
.html或htm 靜態網頁文件擴展名後綴
標簽可以進行嵌套，但是不能進行交叉嵌套
HTML 不是一種編程語言，而是一種標記語言，HTML使用標記標簽來描述網頁
HTML結構：
<html></html>:是文件的開始標記和結束標記（包含 了<head><body>）
<head><head>:是不能會渲染出的
<body><body>:之間的文本是可見的網頁主題內容
html的標簽通常都是成對出現的（單獨的是自閉合標簽）
html的標簽不區分大小寫
HTML標簽格式：
標簽的語法：
<標簽名 屬性名=‘ 屬性值’>內容部分<標簽名>
常用標簽
<！DOCTYPE> 標簽聲明文檔的最前面的位置，處於<html>標簽之前，此標簽告知瀏覽器文檔使用哪種解析類型（html或xhtml）
<！DOCTYPE> 標簽作用：避免瀏覽器的怪異模式。
document.compatMode:
1、BackCopat:怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。
2、CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面
這個屬性會被劉拉你識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麽compatMode默認就是BackCompat
<head>內常用標簽：
<meta>標簽
meta介紹
<meta>元素可提供有關頁面的元信息，針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標簽位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的
meta標簽的組成：meta標簽共有倆個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
（1）name屬性：主要用於描述網頁，與只對應的屬性值為content，content中的內容主要是便於搜索引起機器人查找信息和分類信息用的。
例如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="IT"> name屬性 6 <meta name="description" content="老男孩開的"> name屬性 7 <title>Meet</title> 8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 9 <meta http-equiv="refresh" content=""> 10 </head> 11 <body> 12 <a href="http://www.baidu.com"><img src="hello.jpg" width="640" height="413" title="機車"></a> 13 </body>
（2）http-equiv屬性：相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="IT"> 6 <meta name="description" content="老男孩開的"> 7 <title>Meet</title> 8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 9 <meta http-equiv="refresh" content="3;http：//www.baidu.com"> 這是一個（跳轉，3是幾秒後，http：//www.baidu.com 是要跳轉到的網址） 10 </head> 11 <body> 12 <a href="http://www.baidu.com"><img src="hello.jpg" width="640" height="413" title="機車"></a> 13 </body> 14
1 <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 是聲明瀏覽的兼容性
非meta標簽：
1 <title>oldboy</title> 2 <link rel="icon" href="http://www.jd.com/favicon.ico"> 3 <link rel="stylesheet" href="css.css"> 4 <script src="hello.js"></script>
<body>內常用標簽
基本標簽（塊級標簽和內聯標簽）
<hn> n的取值範圍是1~6，從小到大，用來比表示標題
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <h1>Meet</h1> 10 <h2>Meet</h2> 11 <h3>Meet</h3> 12 <h4>Meet</h4> 13 <h5>Meet</h5> 14 <h6>Meet</h6> 15 16 </body> 17 </html>
<p> 段落標簽，包裹的內容被換行，並且也上下內容之間有一行空白
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <p>千山鳥飛絕</p> 10 <p>萬經人終滅</p> 11 <p>孤舟梭立翁</p> 12 <p>獨釣寒江雪</p> 13 14 </body> 15 </html>
<b> <strong>: 加粗標簽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <b>Meet</b>Meet 10 11 </body> 12 </html>
<strike>: 為文字加上一條中線
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <strike>100</strike> 10 11 </body> 12 </html>
<em>: 文字變成斜體
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <em>yuan</em> 10 </body> 11 </html>
<sup>和<sub>: 上角標 和 下角表 以及 換行
1 <!--2<sub>3</sub>--> 2 <!--<br>--> 3 <!--2<sup>3</sup>-->
<hr>:水平線
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <b>GBY</b> 10 <hr> 11 </body> 12 </html>
<dir>和<span>
<div></div> ： <div>只是一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>： <span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.
塊級元素與行內元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門為定義CSS樣式而生的。
常用標簽：
hn(標題） p（分段，段落） br（強制換行） a標簽
標簽分類：
1、塊級標簽 -----block
塊級便簽獨占一行
h1、p、div、
2、內聯標簽 -----inline
根據內容而定
sub 、 sup、span
圖形標簽<img>
src: 要顯示圖片的路徑. alt: 圖片沒有加載成功時的提示. title: 鼠標懸浮時的提示信息. width: 圖片的寬 height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="IT"> 6 <meta name="description" content="老男孩開的"> 7 <title>Meet</title> 網頁的標題名稱 8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 網頁的圖片 9 <meta http-equiv="refresh" content=""> 10 </head> 11 <body> 12 <a href="http://www.baidu.com"><img src="helloo.jpg" alt="出錯啦" width="640" height="413" title="機車"></a> 13 </body>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="IT"> 6 <meta name="description" content="老男孩開的"> 7 <title>Meet</title> 網頁的標題名稱 8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 網頁的圖片 9 <meta http-equiv="refresh" content=""> 10 </head> 11 <body> 12 <a href="http://www.baidu.com"><img src="hello.jpg" alt="出錯啦" width="640" 寬 height="413" 高 title="機車" 懸浮提示 ></a> 13 </body>
超鏈接標簽（錨標簽）<a></a>
什麽是超級鏈接？ 所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上 的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序
1 什麽是URL？ 2 URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁地址，是因特網上標準的資源的地址。 3 URL舉例 4 http://www.sohu.com/stu/intro.html 5 http://222.172.123.33/stu/intro.html 6 7 URL地址由4部分組成 8 第1部分：為協議：http://、ftp://等 9 第2部分：為站點地址：可以是域名或IP地址 10 第3部分：為頁面在站點中的目錄：stu 11 第4部分：為頁面名稱，例如 index.html 12 各部分之間用“/”符號隔開。
href屬性指定目標網頁地址。該地址可以有幾種類型：
1 <a href="http://www.baidu.com"></a> 2 指向另一個地址 3 <a href="hello.jpg"></a> 4 指向本地文件 5 <a href="#part1"></a> 6 指向本內容中的‘錨’
列表標簽：
2 無序列表、有序列表、定義列表 3 無序列表： unorder list----ul 4 <ul> 5 <li>111<li> 6 <li>222<li> 7 <li>333<li> 8 </ul> 9 有序列表 : order list----ol 10 <ol> 11 <li>111<li> 12 <li>222<li> 13 <li>333<li> 14 </ol> 15 定義列表:define list ----dl 16 17 <dl> 18 <dt>標題</dt> define title 19 <dd>222<dd> define data 20 <dd>333<dd> 21 </dl>
表格標簽：<table>
表格概念，表格是一個二維 數據空間，一個表格由若幹行租成，一行又有由若幹單元格組成，單元格可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容
表格最重要的目的是顯示表格類數據，表格類數據是指最適合組織為表格格式（即按行和列組織）的數據
表格的基本結構：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>菜單</title> 6 </head> 7 <body> 8 9 <table border="2px" cellpadding="10px" cellspacing="1px"> 10 <tr> 11 <th colspan="3" align="center">星期一菜譜</th> 12 </tr> 13 <tr> 14 <td rowspan="2">素菜</td> 15 <td>青草茄子</td> 16 <td>花椒扁豆</td> 17 </tr> 18 <tr> 19 <td>小蔥豆腐</td> 20 <td>炒包菜</td> 21 </tr> 22 <tr> 23 <td rowspan="2">葷菜</td> 24 <td>油燜大蝦</td> 25 <td>海參魚翅</td> 26 </tr> 27 <tr> 28 <td><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1494917021&di=8e8587c2bbe1f2ea7f6b0b923e411c73&src=http://pic30.photophoto.cn/20140219/0042040275809384_b.jpg" height="300px" width="300px">紅燒肉</td> 29 <td>烤全羊</td> 30 </tr> 31 </table> 32 33 </body> 34 </html>
python/HTML基礎