python大佬養成計劃----HTML網頁設計<二>

時間 2019-12-05

原文原文鏈接

文本標籤

換行標籤 -- br

是單標籤，意味着它沒有結束標籤。起強制換行做用html

段落中的文字<br>段落中的文字<br>段落中的文字<br>

水平分割線 -- hr

與br相同，也是單標籤。可用來區分不一樣段落或正文與標題。可設置分割線的寬度和高度python

設置了50%寬度，50像素且右對齊的分割線
<hr width='50%' size='50' align='right'>

預格式化文本標籤 -- pre

保留文本的原有格式程序員

<pre>文本</pre>

上標標籤、下標標籤 -- sup/sub

包含在^{標籤與其結束標籤}中的內容，以當前文字高度的一半顯示在文本的左上側
包含在_{標籤與其結束標籤}中的內容，以當前文字高度的一半顯示在文本的左下側shell

<sup>上標文字內容</sup>
<sub>下標文字內容</sub>

塊引用標籤 -- blockquote

表明其中的文字是引用內容。一般在渲染時，這部分的內容會有必定的縮進編程

<blockquote>引用文字</blockquote>

普通文本行內標籤 -- span

若是不對 span 應用樣式，那麼 span 元素中的文本與其餘文本不會任何視覺上的差別。儘管如此，上例中的 span 元素仍然爲 p 元素增長了額外的結構。數組

能夠爲 span 應用 id 或 class 屬性，這樣既能夠增長適當的語義，又便於對 span 應用樣式。
能夠對同一個 <span> 元素應用 class 或 id 屬性，可是更常見的狀況是隻應用其中一種。這二者的主要差別是，class 用於元素組（相似的元素，或者能夠理解爲某一類元素），而 id 用於標識單獨的惟一的元素。瀏覽器

<span>文本內容</span>

普通文本標籤 -- div

<div> 是一個塊級元素。這意味着它的內容自動地開始一個新行。實際上，換行是 <div> 固有的惟一格式表現。能夠經過 <div> 的 class 或 id 應用額外的樣式。網絡

沒必要爲每個 <div> 都加上類或 id，雖然這樣作也有必定的好處。編程語言

能夠對同一個 <div> 元素應用 class 或 id 屬性，可是更常見的狀況是隻應用其中一種。這二者的主要差別是，class 用於元素組（相似的元素，或者能夠理解爲某一類元素），而 id 用於標識單獨的惟一的元素。函數式編程

<div>文本內容</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>張阿機</title>
</head>
<body>
<h1 style="color: green">一級標題</h1>
<span>pre顯示</span>
<pre>
<strong>雨霖鈴·寒蟬悽切</strong>
宋代：柳永
寒蟬悽切，對長亭晚，驟雨初歇。都門賬飲無緒，留戀處，蘭舟催發。執手相看淚眼，竟無語凝噎。念去去，千里煙波，暮靄沉沉楚天闊。
多情自古傷離別，更那堪，冷落清秋節！今宵酒醒何處？楊柳岸，曉風殘月。此去經年，應是良辰好景虛設。便縱有千種風情，更與何人說？
</pre>
<span>bolckquote顯示</span>
<blockquote>
<strong>雨霖鈴·寒蟬悽切</strong>
宋代：柳永
寒蟬悽切，對長亭晚，驟雨初歇。都門賬飲無緒，留戀處，蘭舟催發。執手相看淚眼，竟無語凝噎。念去去，千里煙波，暮靄沉沉楚天闊。
多情自古傷離別，更那堪，冷落清秋節！今宵酒醒何處？楊柳岸，曉風殘月。此去經年，應是良辰好景虛設。便縱有千種風情，更與何人說？
</blockquote>
求解數學方程x<sup>2</sup>+x+6=0.<br/>
所得解:x<sub>1</sub>=-3,x<sub>2</sub>=2
</body>
</html>

超連接標籤

一個網站是由多個網頁組成的，頁面之間依靠連接肯定相互之間的導航關係，各個網頁連接在一塊兒後，才構成一個網站。

超連接標籤--<a>

1.外部連接

若是連接是指向站點文件夾以外的，就稱作外部連接，添加外部連接時，使用絕對路徑，方法是直接輸入路徑地址，如http://www.baidu.com

2.內部連接

是指同一個網站內部，不一樣頁面之間的連接關係，也可稱做站內連接。創建內部連接時，使用相對路徑。

超連接屬性 -- herf
在添加超連接時，屬性設置很是重要。

<a href='超連接路徑'>設置連接的文字或圖片等屬性</a>

超連接屬性 -- target
默認狀況下，超連接打開新頁面的方式是在當前窗口中打開，屬性能夠用來定義目標窗口打開方式。

_parent-->在上一級窗口中打開，使得頁面載入父窗口
_blank--->瀏覽器在一個新的窗口中打開網頁

<a href='超連接路徑' target='頁面打開方式'>設置連接的文字或圖片等屬性</a>

![clipboard.png](/img/bVbhvZI)
ml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--a標籤-->

<!--1. 跳轉到指定的url地址-->
<a href="http://www.baidu.com"> 百度</a>
<a href="http://www.baidu.com" target="_parent"> 百度</a>
<!--新建一個瀏覽器窗口並打開-->
<a href="http://www.baidu.com" target="_blank"> 百度</a>

<!--2. 跳轉到當前頁面的指定位置（錨點）-->
<a href="#C1">下載python</a>
<a href="#C2">發展歷史</a>
<a href="#C3">風格</a>
<a href="#C4">與Matlab對比</a>
<a href="#C5">設計定位</a>

<h1><a name="C1">下載python</a></h1>
在您開始以前，在你的計算機將須要Python，但您可能不須要下載它。首先檢查(在命令行窗口輸入python)有沒有安裝Python!若是你看到了一個Python解釋器的響應，那麼就能在她的顯示窗口中獲得一個版本號。一般較新的版本均可以作到Python的向後兼容。
若是您須要安裝， 您不妨下載最近穩定的版本。 就是那個以沒有被標記做爲alpha或Beta發行的最高的版本。目前最穩定的版本是Python3.0以上
若是你使用的操做系統是Windows：最穩定的Windows版本下載是"Python 2.5 for Windows"
若是你使用的是Mac，MacOS 10.2 (Jaguar), 10.3 (Panther) and 10.4 (Tiger)已經集成安裝了Python，可是你大概須要安裝最近通用的構架(build)。
對於Red Hat，安裝python2和python2-devel包。
對於Debian，安裝python2.5和python2.5-dev包
<h1><a name="C2">發展歷史</a></h1>
自從20世紀90年代初Python語言誕生至今，它已被逐漸普遍應用於系統管理任務的處理和Web編程。
Python的創始人爲Guido van Rossum。1989年聖誕節期間，在阿姆斯特丹，Guido爲了打發聖誕節的無趣，決心開發一個新的腳本解釋程序，做爲ABC 語言的一種繼承。之因此選中Python（大蟒蛇的意思）做爲該編程語言的名字，是由於他是一個叫Monty Python的喜劇團體的愛好者。
ABC是由Guido參加設計的一種教學語言。就Guido本人看來，ABC 這種語言很是優美和強大，是專門爲非專業程序員設計的。可是ABC語言並無成功，究其緣由，Guido 認爲是其非開標識
放形成的。Guido 決心在Python 中避免這一錯誤。同時，他還想實如今ABC 中閃現過但不曾實現的東西。
就這樣，Python在Guido手中誕生了。能夠說，Python是從ABC發展起來，主要受到了Modula-3（另外一種至關優美且強大的語言，爲小型團體所設計的）的影響。而且結合了Unix shell和C的習慣。
Python已經成爲最受歡迎的程序設計語言之一。自從2004年之後，python的使用率呈線性增加。2011年1月，它被TIOBE編程語言排行榜評爲2010年度語言。
因爲Python語言的簡潔性、易讀性以及可擴展性，在國外用Python作科學計算的研究機構日益增多，一些知名大學已經採用Python來教授程序設計課程。例如卡耐基梅隆大學的編程基礎、麻省理工學院的計算機科學及編程導論就使用Python語言講授。衆多開源的科學計算軟件包都提供了Python的調用接口，例如著名的計算機視覺庫OpenCV、三維可視化庫VTK、醫學圖像處理庫ITK。而Python專用的科學計算擴展庫就更多了，例如以下3個十分經典的科學計算擴展庫：NumPy、SciPy和matplotlib，它們分別爲Python提供了快速數組處理、數值運算以及繪圖功能。所以Python語言及其衆多的擴展庫所構成的開發環境十分適合工程技術、科研人員處理實驗數據、製做圖表，甚至開發科學計算應用程序。
2018年3月，該語言做者在郵件列表上宣佈Python 2.7將於2020年1月1日終止支持。用戶若是想要在這個日期以後繼續獲得與Python 2.7有關的支持，則須要付費給商業供應商。
<h1><a name="C3">風格</a></h1>
Python在設計上堅持了清晰劃一的風格，這使得Python成爲一門易讀、易維護，而且被大量用戶所歡迎的、用途普遍的語言。
設計者開發時總的指導思想是，對於一個特定的問題，只要有一種最好的方法來解決就行了。這在由Tim Peters寫的Python格言（稱爲The Zen of Python）裏面表述爲：There should be one-- and preferably only one --obvious way to do it. 這正好和Perl語言（另外一種功能相似的高級動態語言）的中心思想TMTOWTDI（There's More Than One Way To Do It）徹底相反。
Python的做者有意的設計限制性很強的語法，使得很差的編程習慣（例如if語句的下一行不向右縮進）都不能經過編譯。其中很重要的一項就是Python的縮進規則。
一個和其餘大多數語言（如C）的區別就是，一個模塊的界限，徹底是由每行的首字符在這一行的位置來決定的（而C語言是用一對花括號{}來明確的定出模塊的邊界的，與字符的位置毫無關係）。這一點曾經引發過爭議。由於自從C這類的語言誕生後，語言的語法含義與字符的排列方式分離開來，曾經被認爲是一種程序語言的進步。不過不能否認的是，經過強制程序員們縮進（包括if，for和函數定義等全部須要使用模塊的地方），Python確實使得程序更加清晰和美觀。
<h1><a name="C4">與Matlab對比</a></h1>
提及科學計算，首先會被提到的多是MATLAB。然而除了MATLAB的一些專業性很強的工具箱還沒法被替代以外，MATLAB的大部分經常使用功能均可以在Python世界中找到相應的擴展庫。和MATLAB相比，用Python作科學計算有以下優勢：
● 首先，MATLAB是一款商用軟件，而且價格不菲。而Python徹底免費，衆多開源的科學計算庫都提供了Python的調用接口。用戶能夠在任何計算機上免費安裝Python及其絕大多數擴展庫。
● 其次，與MATLAB相比，Python是一門更易學、更嚴謹的程序設計語言。它能讓用戶編寫出更易讀、易維護的代碼。
● 最後，MATLAB主要專一於工程和科學計算。然而即便在計算領域，也常常會遇到文件管理、界面設計、網絡通訊等各類需求。而Python有着豐富的擴展庫，能夠輕易完成各類高級任務，開發者能夠用Python實現完整應用程序所需的各類功能。
<h1><a name="C5">設計定位</a></h1>
Python的設計哲學是「優雅」、「明確」、「簡單」。所以，Perl語言中「老是有多種方法來作同一件事」的理念在Python開發者中一般是難以忍受的。Python開發者的哲學是「用一種方法，最好是隻有一種方法來作一件事」。在設計Python語言時，若是面臨多種選擇，Python開發者通常會拒絕花俏的語法，而選擇明確的沒有或者不多有歧義的語法。因爲這種設計觀念的差別，Python源代碼一般被認爲比Perl具有更好的可讀性，而且可以支撐大規模的軟件開發。這些準則被稱爲Python格言。在Python解釋器內運行import this能夠得到完整的列表。
Python開發人員儘可能避開不成熟或者不重要的優化。一些針對非重要部位的加快運行速度的補丁一般不會被合併到Python內。因此不少人認爲Python很慢。不過，根據二八定律，大多數程序對速度要求不高。在某些對運行速度要求很高的狀況，Python設計師傾向於使用JIT技術，或者用使用C/C++語言改寫這部分程序。可用的JIT技術是PyPy。
Python是徹底面向對象的語言。函數、模塊、數字、字符串都是對象。而且徹底支持繼承、重載、派生、多繼承，有益於加強源代碼的複用性。Python支持重載運算符和動態類型。相對於Lisp這種傳統的函數式編程語言，Python對函數式設計只提供了有限的支持。有兩個標準庫(functools, itertools)提供了Haskell和Standard ML中久經考驗的函數式程序設計工具。
雖然Python可能被粗略地分類爲「腳本語言」（script language），但實際上一些大規模軟件開發計劃例如Zope、Mnet及BitTorrent，Google也普遍地使用它。Python的支持者較喜歡稱它爲一種高級動態編程語言，緣由是「腳本語言」泛指僅做簡單程序設計任務的語言，如shellscript、VBScript等只能處理簡單任務的編程語言，並不能與Python相提並論。
Python自己被設計爲可擴充的。並不是全部的特性和功能都集成到語言核心。Python提供了豐富的API和工具，以便程序員可以輕鬆地使用C語言、C++、Cython來編寫擴充模塊。Python編譯器自己也能夠被集成到其它須要腳本語言的程序內。所以，不少人還把Python做爲一種「膠水語言」（glue language）使用。使用Python將其餘語言編寫的程序進行集成和封裝。在Google內部的不少項目，例如Google Engine使用C++編寫性能要求極高的部分，而後用Python或Java/Go調用相應的模塊。《Python技術手冊》的做者馬特利（Alex Martelli）說：「這很難講，不過，2004 年，Python 已在Google 內部使用，Google 召募許多 Python 高手，但在這以前就已決定使用Python，他們的目的是 Python where we can, C++ where we must，在操控硬件的場合使用 C++，在快速開發時候使用 Python。

</body>
</html>

圖片標籤

圖形圖像可使網頁活躍起來，帶給人的視覺印象要優於文字。
網頁中經常使用的圖像格式包括'jpeg'、'jpg'、'gif'、'png'、'bmp'等。

圖像標籤 -- <img>

想要在頁面上顯示一個圖像，須要使用它的'src'屬性，是'source'的縮寫。

<img src='圖像文件所在位置'>

源文件屬性 -- alt

用來給圖像顯示一個交互文本，用戶可自定義。當瀏覽器沒有徹底加載圖像或加載失敗時，會顯示交互文本內容來替代圖像。

<img src='圖像文件所在位置' alt='圖像的交互文本'>

圖像與文本的對齊方式 -- align
圖像在文字段落中位置的對齊方式有左對齊left、右對齊right兩種，圖像在單行文本中的對齊方式有頂部對齊top、中部對齊middle、底部對齊bottom三種。

<img src='圖像文件所在位置' align='圖像與文本的對齊方式'>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小白</title>
</head>
<body>
<p>
<img src="flower_01.jpg" alt="曇花" align="left" width="160px" height="160px" >
&nbsp;&nbsp;曇花（學名：Epiphyllum oxypetalum  （DC.）Haw ）：附生肉質灌木，高2-6米，老莖圓柱狀，木質化。分枝多數，葉狀側扁，披針形至
    長圓狀披針形，邊緣波狀或具深圓齒，基部急尖、短漸尖或漸狹成柄狀，深綠色，無毛，中肋粗大，老株分枝產生氣根。花單生於枝側的小窠，漏斗狀，於夜間開放，芳香，長25-30釐米，直徑10-12釐米；花托綠色，略具角，被三角形短鱗片；瓣狀花被片白色，倒卵狀披針形至倒卵形，長7-10釐米，寬3-4.5釐米，邊緣全緣或齧蝕狀。漿果長球形，具縱棱脊，無毛，紫紅色。種子多數，卵狀腎形，亮黑色，具皺紋，無毛。
</p>
<br  />
<p>

<img src="flower_02.jpg" alt="曇花" align="right" width="200px" height="300px" >
&nbsp;&nbsp;生長地海拔1000-1200米。喜溫暖溼潤的半陰、溫暖和潮溼的環境，不耐霜凍，忌強光暴曬。曇花享有「月下美人」之譽。當花漸漸展開後，過1-2小時又慢慢地枯萎了，整個過程僅4個小時左右。故有「曇花一現」之說。世界各地區普遍栽培；中國各省區常見栽培。
</p>
<br/>
<br/>
曇花圖片：<img src="flower_02.jpg" alt="曇花" align="middle"  width="200px" height="300px">

</body>
</html>