python學習第二十六天（HTML）
阿新 • • 發佈：2018-11-01
- HTML簡介
HTML是一種超文字標記語言，它有自己的樹型結構，符合HTML結構的檔案稱作HTML檔案。我們使用瀏覽器從服務端獲得的頁面只是一個HTML檔案，然後經過瀏覽器按照固定規則渲染後，才是我們所看的網頁。所以瀏覽器是一個HTML檔案的直譯器。
<!DOCTYPE html> <!--渲染標準--> <html lang="en"> <!--根標籤--> <head>. <!--一級子標籤--> <meta charset="UTF-8"> <!--字元編碼--> <!--二級子標籤--> <title>cheng</title> <!--網頁的標題--> <!--二級子標籤--> </head> <body> <!--一級子標籤--> </body> </html>
<!–xxxxx–>是HTML檔案的註釋。<x>是開始標籤，寫在開始標籤裡面的叫做屬性，如charset=“UTF-8”，<\x>是結束標籤，開始標籤和結束標籤之間的叫做標籤體。
- head標籤
-
- meta標籤
meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的引數值，這些不同的引數值就實現了不同的網頁功能。
1、name屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人查詢資訊和分類資訊用的。
2、http-equiv顧名思義，相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content， content中的內容其實就是各個引數的變數值。
- meta標籤
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="網頁描述">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> <!--2秒後跳轉到給出的URL，這裡是百度--> <meta http-equiv="content-Type" charset=UTF8"> <!--字元編碼--> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> <!--相容-->
-
- 非meta標籤
<title>cheng</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
<!--小圖示-->
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
- body標籤
-
- 基本標籤
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.
<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.
<b> <strong>: 加粗標籤.
<strike>: 為文字加上一條中線.
<em>: 文字變成斜體.
<sup>和<sub>: 上角標 和 下角表.
<br>:換行.
<hr>:水平線
<div>沒什麼特別的，用於css重構
<span>同div標籤
塊級標籤：獨佔一行，如<p>,<hn>,<div>
內聯標籤：與塊級標籤對應，如<sub>,<sup>,<span>
-
- img標籤
屬性如下：
src: 要顯示圖片的路徑.
alt: 圖片沒有載入成功時的提示.
title: 滑鼠懸浮時的提示資訊.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
-
- a標籤， 超連結標籤
屬性如下：
href:要連線的資源路徑 格式如下: href="http://www.baidu.com"
target: _blank : 在新的視窗開啟超連結. 框架名稱: 在指定框架中開啟連線內容.
name: 定義一個頁面的書籤.
- 列表標籤
<ul>: 無序列表
<li>:列表中的每一項.
</ul>
<ol>: 有序列表
<li>:列表中的每一項.
</ol>
<dl> 定義列表
<dt> 列表標題
<dd> 列表項
</dl>
例如：
<!DOCTYPE html> <!--渲染標準-->
<html lang="en"> <!--根標籤-->
<head>
<meta charset="UTF-8"> <!--字元編碼-->
<title>cheng</title> <!--網頁的標題-->
</head>
<body>
<ol>
<li>我</li>
<li>是</li>
<li>誰</li>
</ol>
<ul>
<li>我</li>
<li>是</li>
<li>誰</li>
</ul>
<dl>
<dt>我</dt>
<dd>是</dd>
<dd>誰</dd>
<dt>誰</dt>
<dd>是</dd>
<dd>我</dd>
</dl>
</body>
</html>
-
- 表格標籤
屬性如下：
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 畫素 百分比.（最好通過css來設定長寬）
rowspan: 單元格屬性，豎跨多少行
colspan: 單元格屬性，橫跨多少列（即合併單元格）
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="10px" cellpadding="10px" cellspacing="10px">
<tr>
<th rowspan="2">111</th>
<th>222</th>
<th>333</th>
</tr>
<tr>
<td colspan="2">333</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
</body>
</html>
