Python開發需要學習前端知識,先學習html,沒有任何複雜難懂的邏輯需要燒腦,只需要記憶、練習、練習、練習。
一、HTML初識
1、web服務本質
2、html是什麼
超文本標記語言(Hypertext Markup Language,HTML)通過標籤語言來標記要顯示的網頁中的各個部分。一套規則,瀏覽器認識的規則
瀏覽器按順序渲染網頁文件,然後根據標記符解釋和顯示內容。但需要注意的是,對於不同的瀏覽器,對同一標籤可能會有不完全相同的解釋(兼容性),學習期間建議使用google(谷歌)和Mozilla Firefox(火狐)來進行測試。
靜態網頁文件擴展名:.html 或 .htm
bs模式 Browser-server
HTML 不是一種編程語言,而是一種標記語言 (markup language)
HTML 使用標記標籤來描述網頁
3、html結構
<!DOCTYPE html> 告訴瀏覽器使用什麼樣的html或者xhtml來解析html文檔
<html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔,在它們之間是文檔的頭部<head>和主體<body>。
<head></head>元素出現在文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示,但是其間的元素有特殊重要的意義。
<title></title>定義網頁標題,在瀏覽器標題欄顯示。
<body></body>之間的文本是可見的網頁主體內容
4、html標籤格式
標籤的語法:
<標籤名 屬性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標籤
2、字符實體
顯示結果 | 描述 | 實體名稱 | 實體編號 |
---|---|---|---|
空格 | |   | |
< | 小於號 | < | < |
> | 大於號 | > | > |
& | 和號 | & | & |
" | 引號 | " | " |
' | 撇號 | ' (IE不支持) | ' |
¢ | 分(cent) | ¢ | ¢ |
£ | 鎊(pound) | £ | £ |
¥ | 元(yen) | ¥ | ¥ |
€ | 歐元(euro) | € | € |
§ | 小節 | § | § |
© | 版權(copyright) | © | © |
® | 註冊商標 | ® | ® |
™ | 商標 | ™ | ™ |
× | 乘號 | × | × |
÷ | 除號 | ÷ | ÷ |
3、<img>圖形標籤
常用屬性:
4、<a>超鏈接標籤(錨標籤)
超鏈接是指從一個網頁指向一個目標的連接關係,這個目標可以是另一個網頁,也可以是相同網頁上 的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程序
URL:
常用屬性:
5、表格標籤
表格概念
表格是一個二維數據空間,一個表格由若干行組成,一個行又有若干單元格組成,單元格里可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織為表格格式(即按行和列組織)的數據。
表格的基本結構:
<th>,<td>區別,<th>用來用來標識表格中的表頭單元格,體現的效果就是文本加粗,除此與<td>相同
常用屬性:
瞭解屬性:
bordercolor:邊框顏色
bgcolor:背景顏色
background:背景圖像
align:表格或內容位置 (left,center,right)
<caption>標題</caption>:標籤放在table標籤裡
6、練習
素材:
girl.jpg
logo.png