python html簡單入門
阿新 • • 發佈：2018-12-22
# HTML入門 ### C/S與B/S架構 - C/S架構 - client：客戶端 - server：伺服器 - B/S架構 - browser：瀏覽器 - server：伺服器 ### WEB工作原理 - 瀏覽器 => 伺服器：傳送請求，索取相關資料。 - 伺服器 => 瀏覽器：接收請求並解析，處理業務，返回資料(響應) - 頁面組成：HTML、CSS、JS ### 開發工具 - 編輯工具：notepad++ - 測試工具：chrome ### HTML簡介 - 說明：超文字標記語言，所見即所得的文字 - 字尾：.html或.htm，現在統一使用.html ### 標籤格式- 格式： - 雙邊：`<標籤名 屬性1="值1" 屬性2='值2' 屬性3=值3>內容</標籤名>` - 單邊：`<標籤名 屬性1="值1" 屬性2='值2' 屬性3=值3 />` - 特點： - 成對出現 - 容錯性強 - 標籤名已預定義 - 全部小寫，注意格式 - 屬性使用雙引號包括 - 說明：標籤就是HTML的骨架，最重要的組成部分。 ### 全域性架構標籤 - 示例： ```html <html> <!--註釋--> <head> <title>網頁標題</title> </head> <body text="red" bgcolor="#0000ff"> 這是頁面的內容 </body> </html> ``` - 說明： - html：是文件中最大的標籤，所有標籤都要放在該標籤內部 - head：頭部，存放頁面顯示以外的內容，如：標題、字符集等 - body：身體，存放頁面要顯示的內容，其中的內容會顯示在頁面中。 - 屬性： - text：字型顏色 - bgcolor：背景色 - 幾乎每個標籤都有的屬性： - class、id、name、style - 後面集合CSS與JS經常使用 ### 常用標籤(文字修飾)- 標題：h1~h6，字型從大到小；h1一個頁面中最多一個，不要為了調整字型大小而使用。 - 加粗：`<b></b>、<strong></strong>` - 斜體：`<i></i>、<cite></cite>、<em></em>` - 下劃線：`<u></u>` - 刪除線：`<s></s>` - 上標：`<sup></sup>` - 下標：`<sub></sub>` - 字型：`<font></font>` - size：大小 - color：顏色 - face：臉型(字型型別) ### 常用標籤(格式控制) - 換行：`<br />`，對於任意多個空格或回車，瀏覽器都解析為一個空格 - 段落：`<p></p>`，表示一個段落 - 橫線：`<hr />`，水平的直線 - 滾動：`<marquee></marquee>` - 原樣：`<pre></pre>`，瀏覽中顯示的內容與文件中的格式一樣 - 無序列表：`<ul></ul>`，其中的每個元素都是一個`<li></li>` - type：disc(實心圓，預設)，circle(空心圓)，square(實心方框) - 有序列表：`<ol></ol>` - type：1、a、A、I - start：序號的其實位置 ### 字元實體 - 說明：HTML 中的預留字元必須被替換為字元實體，否則無法顯示。 - 提醒：不用刻意記錄字元實體，用的時候查一下就可以了。 - 示例： ``` < 小於 < > 大於 > 空格 & & ``` - 參考：http://www.w3school.com.cn ### URL(重點) - 說明：統一資源定位符，是URI的一種，可以唯一的標識一個網路資源。 - 組成：協議://主機:埠/檔案?引數1=值1&引數2=值2 - http：80埠，會自動省略 - https：443埠 - 例子：http://www.baidu.com:80/index.html?page=3&wd=python ### 超連結(a) - 名稱：`<a></a>` - 說明：超連結，可以完成頁面的跳轉 - 屬性： - href：指定跳轉地址 - title：游標放上去的提示資訊 - target：新頁面的開啟目標 - _self：當前標籤欄 - _blank：新的空白標籤欄 - _parent：覆蓋父級頁面 - _top：覆蓋最外層頁面 - name：設定錨點，可以用於跳轉定位 - 設定該屬性後，可以根據其值進行跳轉定位(設定a標籤的href屬性) - 如：`<a name="p5"></a>`，使用：`<a href="xxx#p5"></a>` - 說明：不但可以在一個頁面內部跳轉，也可以在不同頁面間跳轉。