1. 程式人生 > >python 之 前端初識 html

python 之 前端初識 html

html語法程式碼示例

複製程式碼
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Login</title>
 6 </head>
 7 <body>
 8 
 9 </body>
10 </html>
複製程式碼

程式碼第一行為觸發瀏覽器使用說明模式來解析此html文件,這個示例是目前流行的html5寫法,

之所以存在這種寫法,是因為當前瀏覽器所支援的標準並未完全統一,為了讓html文件能在更多瀏覽器上按照正確的方式解析,我們需要在文件開頭宣告一個文件型別標準,

早期的微軟ie產品使用的是自己的一套標準,並非公認標準,後來慢慢遵循公認標準,但是又不與之情的產品完全相容,故提供一種解決方案

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

該程式碼是為了相容微軟早期ie產品,讓ie使用最新的模式解析文件

該文件型別有多種模式

Quirks Mode怪異模式

Standards Mode標準模式

Almost Standards Mode幾乎接近標準的模式

 

Doctype NS6 Old Moz Moz &
Safari &
Opera 10
&
IE10
& HTML5
Opera 9.0 IE 8, IE 9 & Opera 9.5 IE 7 & Opera 7.10 IE 6 & Opera 7.0 Mac IE 5 Konq 3.2
None Q Q Q Q Q Q Q Q Q
<!DOCTYPE html>
Q S S S S A A A  
<!DOCTYPE html SYSTEM "about:legacy-compat"> ? ? ? ? ? ? ? ?  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> S S S S S A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> S S S S S A A Q A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd"> S S S S S A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> S S S S S A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> S S A A A A A A Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> Q S A A A A A A Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Q Q Q Q A A A A Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> S S S S S A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> S S S S S A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> S S S S S A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> S S A A A A A A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
S S S S S A Q A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
S S S S S A Q A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
S S S S S A Q A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
S S A A A A Q A Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN"> Q S S Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN"> Q S S S S A A A Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HTML//EN"> S S S Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HyperText Markup Language//EN"> S S S S S A A A Q

 

更多用法說明

 1頁面編碼

1 <meta http-equiv="content-type" content="text/html" charset="UTF-8">

2重新整理和跳轉

1 <meta http-equiv="Refresh" content="3" />
2 <meta http-equiv="Refresh" content="5;url=https://github.com/zengchunyun"/>

3關鍵字

通過設定關鍵字,爬蟲會優先將關鍵字錄入,當別人通過關鍵字搜尋時,可以通過關鍵字找到設定了關鍵字的網站

1 <meta name="keywords" content="曾春雲,部落格" />

4描述

1 <meta name="description" content="Python 是世界上最好學的語言" />

5書籤標題

1 <title>https://github.com/zengchunyun</title>

6 link

書籤圖示

1 <link rel="shortcut icon" href="icon.ico" />

匯入css

1 <link type="text/css" href="common.css" rel="stylesheet">

 在head部還可以直接編寫全域性css樣式模版

複製程式碼
 1 <style type="text/css">
 2         .cc{
 3             color: #00A000;
 4             font-size: 24px;
 5         }
 6         .cc2{
 7             color: purple;
 8             font-size: 48px;
 9         }
10 </style>
複製程式碼

引用js程式碼

1 <script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>

直接編寫js程式碼

1 <script type="text/javascript">
2         bla..bla..
3 </script>

 

 

常用標籤

標籤一般分為兩種:塊級標籤和行內標籤 

  • a,span, select等
  • div, h1, p等

各種符號

 

p和br

p表示段落,預設段落之間是有間隔的

br是換行

a標籤

1 <a href="https://github.com/zengchunyun" target="_blank">我的GitHuP</a>
2 <!-- target設定超連結屬性,blank表示在新標籤開啟頁面 -->

 

 

H標籤

複製程式碼
1 <h1>H1</h1>
2 <h2>H2</h2>
3 <h3>H3</h3>
4 <h4>H4</h4>
5 <h5>H5</h5>
6 <h6>H6</h6>
複製程式碼

 

H1

H2

H3

H4

H5
H6

 

 

select標籤