摘要:是一種基礎技術,常與一起被眾多網站用于設計令人賞心悅目的網頁網頁應用程序以及移動應用程序的用戶界面。此元素告訴瀏覽器其自身是一個文檔,在它們之間是文檔的頭部和主體。此標簽可告知瀏覽器文檔使用哪種或規范。這兩個元素是專門為定義樣式而生的。
【web前端】HTML基礎 一、BS模式
BS(Browser-Server)模式:顧名思義為瀏覽器-服務器的意思,對比的話類似我們PC上面瀏覽器使用的產品即為BS模式產品,例如google doc、各類網站等。
服務端開啟一個socke進程
#!/usr/bin/env python # -*- coding:utf-8 -*- import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(("localhost",8082)) sock.listen(5) while True: print("server is working.....") conn, address = sock.accept() request = conn.recv(1024) conn.sendall(bytes("HTTP/1.1 201 OKHello world
","utf8")) conn.close() if __name__ == "__main__": main()
瀏覽器輸入127.0.0.1:8082訪問到對應的網站
二、HTML的定義Hello world
超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創建網頁的標準標記語言。可以簡單理解為一套規則,瀏覽器認識的規則。
HTML是一種基礎技術,常與CSS、JavaScript一起被眾多網站用于設計令人賞心悅目的網頁、網頁應用程序以及移動應用程序的用戶界面。網頁瀏覽器可以讀取HTML文件,并將其渲染成可視化網頁。HTML描述了一個網站的結構語義隨著線索的呈現,使之成為一種標記語言而非編程語言。需要注意的是,對于不同的瀏覽器,對同一標簽可能會有不完全相同的解釋(兼容性)。
靜態網頁文件擴展名:.html 或 .htm
三、HTML的結構pcharm創建出來的默認html文檔
網頁標題
告訴瀏覽器使用什么樣的html或者xhtml來解析html文檔 是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔,在它們之間是文檔的頭部和主體。 元素出現在文檔的開頭部分。與之間的內容不會在瀏覽器的文檔窗口顯示,但是其間的元素有特殊重要的意義。四、HTML的標簽格式定義網頁標題,在瀏覽器標題欄顯示。 之間的文本是可見的網頁主體內容
標簽的語法:
五、常用標簽 1. 標簽<標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分標簽名>
<標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
聲明位于文檔中的最前面的位置,處于 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。
作用:聲明文檔的解析類型(document.compatMode),避免瀏覽器的怪異模式。
document.compatMode:
BackCompat:怪異模式,瀏覽器使用自己的怪異模式解析渲染頁面。
CSS1Compat:標準模式,瀏覽器使用W3C的標準解析渲染頁面。
這個屬性會被瀏覽器識別并使用,但是如果你的頁面沒有DOCTYPE的聲明,那么compatMode默認就是BackCompat
meta介紹
元素可提供有關頁面的元信息(meta-information),針對搜索引擎和更新頻度的描述和關鍵詞。
標簽位于文檔的頭部,不包含任何內容。
提供的信息是用戶不可見的
meta標簽的組成:meta標簽共有兩個屬性,它們分別是http-equiv屬性和name 屬性,不同的屬性又有不同的參數值,這些不同的參數值就實現了不同的網頁功能。
name屬性: 主要用于描述網頁,與之對應的屬性值為content,content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。
http-equiv屬性:相當于http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確地顯示網頁內容,與之對應的屬性值為content,content中的內容其實就是各個參數的變量值。
//(注意后面的引號,分別在秒數的前面和網址的后面)2.2 非meta標簽
3. 內常用標簽 3.1 基本標簽(塊級標簽和內聯標簽)jd
塊級元素(block)特性:
總是獨占一行,表現為另起一行開始,而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性:
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變,就是里面文字或圖片的大小;
塊級元素主要有: address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
內聯元素主要有: a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var 可變元素(根據上下文關系確定該元素是塊元素還是內聯元素): applet ,button ,del ,iframe , ins ,map ,object , script
3.2: n的取值范圍是1~6; 從大到小. 用來表示標題. : 段落標簽. 包裹的內容被換行.并且也上下內容之間有一行空白. : 加粗標簽.
: 為文字加上一條中線. : 文字變成斜體. 和: 上角標 和 下角標.
:換行.
:水平線 特殊字符: < >;";©®
塊級元素與行內元素的區別
所謂塊元素,是以另起一行開始渲染的元素,行內元素則不需另起一行。如果多帶帶在網頁中插入這兩個元素,不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
3.3 超鏈接標簽(錨標簽):Title yuanspan
什么是超級鏈接? 所謂的超鏈接是指從一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,也可以是相同網頁上 的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程序。
click
href屬性指定目標網頁地址。該地址可以有幾種類型:
絕對 URL - 指向另一個站點(比如 href="http://www.jd.com)
相對 URL - 指當前站點中確切的路徑(href="index.htm")
錨 URL - 指向頁面中的錨(href="#top")
補充:
什么是URL? URL是統一資源定位器(Uniform Resource Locator)的縮寫,也被稱為網頁地址,是因特網上標準的資源的地址。 URL舉例 http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.html URL地址由4部分組成 第1部分:為協議:http://、ftp://等 第2部分:為站點地址:可以是域名或IP地址 第3部分:為頁面在站點中的目錄:stu 第4部分:為頁面名稱,例如 index.html 各部分之間用“/”符號隔開。3.4 圖形標簽:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51047.html
摘要:是一種基礎技術,常與一起被眾多網站用于設計令人賞心悅目的網頁網頁應用程序以及移動應用程序的用戶界面。此元素告訴瀏覽器其自身是一個文檔,在它們之間是文檔的頭部和主體。此標簽可告知瀏覽器文檔使用哪種或規范。這兩個元素是專門為定義樣式而生的。 【web前端】HTML基礎 一、BS模式 BS(Browser-Server)模式:顧名思義為瀏覽器-服務器的意思,對比的話類似我們PC上面瀏覽器使用...
摘要:,簡稱為,是一種腳本語言,和配合使用,提供給用戶的只是一種靜態的信息,缺少交互性。這就是網頁的三大基本組成。父節點擁有子節點,同級的子節點被稱為兄弟節點。選擇屬于其父節點的首個節點的每個節點。同上,從最后一個 上一篇文章:Python3網絡爬蟲實戰---15、爬蟲基礎:HTTP基本原理下一篇文章:Python3網絡爬蟲實戰---17、爬蟲基本原理 我們平時用瀏覽器訪問網站的時候,一個...
摘要:在前面我們講到了和的概念,我們向網站的服務器發送一個,返回的的便是網頁源代碼。渲染頁面有時候我們在用或抓取網頁時,得到的源代碼實際和瀏覽器中看到的是不一樣的。所以使用基本請求庫得到的結果源代碼可能跟瀏覽器中的頁面源代碼不太一樣。 上一篇文章:Python3網絡爬蟲實戰---16、Web網頁基礎下一篇文章:Python3網絡爬蟲實戰---18、Session和Cookies 爬蟲,即網...
摘要:課程簡介簡明易懂的課程,不僅適用于那些有其它語言基礎的同學,對沒有編程經驗的同學也非常友好。建議遵守以下約定使用個空格來縮進永遠不要混用空格和制表符在函數之間空一行在類之間空兩行字典,列表,元組以及參數列表中,在后添加一個空格。 showImg(https://segmentfault.com/img/bVCldE); 課程簡介:簡明易懂的 Python3 課程,不僅適用于那些有其它語...
閱讀 2632·2021-10-14 09:47
閱讀 4909·2021-09-22 15:52
閱讀 3355·2019-08-30 15:53
閱讀 1428·2019-08-30 15:44
閱讀 669·2019-08-29 16:41
閱讀 1646·2019-08-29 16:28
閱讀 439·2019-08-29 15:23
閱讀 1618·2019-08-26 12:20