Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

編程語言 HTML Python Google 我用Python 我用Python 2017-09-14

Python開發需要學習前端知識,先學習html,沒有任何複雜難懂的邏輯需要燒腦,只需要記憶、練習、練習、練習。

一、HTML初識

1、web服務本質

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

2、html是什麼

  1. 超文本標記語言(Hypertext Markup Language,HTML)通過標籤語言來標記要顯示的網頁中的各個部分。一套規則,瀏覽器認識的規則

  2. 瀏覽器按順序渲染網頁文件,然後根據標記符解釋和顯示內容。但需要注意的是,對於不同的瀏覽器,對同一標籤可能會有不完全相同的解釋(兼容性),學習期間建議使用google(谷歌)和Mozilla Firefox(火狐)來進行測試。

  3. 靜態網頁文件擴展名:.html 或 .htm

  4. bs模式 Browser-server

  5. HTML 不是一種編程語言,而是一種標記語言 (markup language)

  6. HTML 使用標記標籤來描述網頁

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

3、html結構

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

  1. <!DOCTYPE html> 告訴瀏覽器使用什麼樣的html或者xhtml來解析html文檔

  2. <html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔,在它們之間是文檔的頭部<head>和主體<body>。

  3. <head></head>元素出現在文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示,但是其間的元素有特殊重要的意義。

  4. <title></title>定義網頁標題,在瀏覽器標題欄顯示。

  5. <body></body>之間的文本是可見的網頁主體內容

4、html標籤格式

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

Python群643692991

標籤的語法:

<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標籤名>

<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />

二、常用標籤介紹

1、<!DOCTYPE> 標籤

<!DOCTYPE html> 聲明位於文檔中的最前面的位置,處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。

作用:聲明文檔的解析類型(document.compatMode),避免瀏覽器的怪異模式。

document.compatMode:

1)BackCompat:標準兼容模式關閉。瀏覽器使用自己的怪異模式解析渲染頁面。

2)CSS1Compat:標準兼容模式開啟。瀏覽器使用W3C的標準解析渲染頁面。

這個屬性會被瀏覽器識別並使用,但是如果你的頁面沒有DOCTYPE的聲明,那麼compatMode默認就是BackCompat

2、meta標籤

meta介紹:

<meta>元素可提供有關頁面的元信息(meta-information),針對搜索引擎和更新頻度的描述和關鍵詞。

<meta>標籤位於文檔的頭部,不包含任何內容。

<meta>提供的信息是用戶不可見的

meta標籤的組成:meta標籤共有兩個屬性,它們分別是http-equiv屬性和name 屬性,不同的屬性又有不同的參數值,這些不同的參數值就實現了不同的網頁功能。

1)name屬性: 主要用於描述網頁,與之對應的屬性值為content,content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

<meta name="keywords" content="搜索關鍵詞">

<meta name="description" content="網頁簡介">

2)http-equiv屬性:相當於http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確地顯示網頁內容,與之對應的屬性值為content,content中的內容其實就是各個參數的變量值。

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> (網頁在兩秒後跳轉至百度)

<meta http-equiv="content-Type" charset=UTF8"> (頁面編碼)

3、link標籤

<link rel="icon" href=""> 網頁標題前的logo

三、<body>內常用標籤

1、基本標籤(塊級標籤和內聯標籤)

1)塊級標籤:獨佔一行 例:h1,p標籤

2)內聯標籤:按內容佔位 例:a,img標籤

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

2、字符實體

顯示結果描述實體名稱實體編號

空格&nbsp;&#160;
<小於號&lt;&#60;
>大於號&gt;&#62;
&和號&amp;&#38;
"引號&quot;&#34;
'撇號 &apos; (IE不支持)&#39;
分(cent)&cent;&#162;
£鎊(pound)&pound;&#163;
¥元(yen)&yen;&#165;
歐元(euro)&euro;&#8364;
§小節&sect;&#167;
©版權(copyright)&copy;&#169;
®註冊商標&reg;&#174;
商標&trade;&#8482;
×乘號&times;&#215;
÷除號&divide;&#247;

3、<img>圖形標籤

常用屬性:

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

4、<a>超鏈接標籤(錨標籤)

超鏈接是指從一個網頁指向一個目標的連接關係,這個目標可以是另一個網頁,也可以是相同網頁上 的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程序

URL:

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

常用屬性:

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

5、表格標籤

表格概念

表格是一個二維數據空間,一個表格由若干行組成,一個行又有若干單元格組成,單元格里可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。

表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織為表格格式(即按行和列組織)的數據。

表格的基本結構:

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

<th>,<td>區別,<th>用來用來標識表格中的表頭單元格,體現的效果就是文本加粗,除此與<td>相同

常用屬性:

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

瞭解屬性:

bordercolor:邊框顏色

bgcolor:背景顏色

background:背景圖像

align:表格或內容位置 (left,center,right)

<caption>標題</caption>:標籤放在table標籤裡

6、練習

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

素材:

girl.jpg

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

logo.png

Python 開發的大牛寫項目時隨手寫下的html前端基礎認識&常用標籤

相關推薦

推薦中...