HTML基礎part1

時間 2019-12-14

標籤 html 基礎 part1 欄目 HTML 简体版

原文原文鏈接

HTML基礎css

Web的本質就是利用瀏覽器訪問socket服務端，socket服務端收到請求回覆數據提供給瀏覽器進行渲染顯示。html

import socket
def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8081))    #經過瀏覽器訪問該綁定端口
    sock.listen(5)
    while True:
        print("server is working.....")
        conn, address = sock.accept()
        request = conn.recv(1024)
        conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello world</h1>","utf8"))    #服務端返回數據給瀏覽器渲染顯示，注意頭部信息：版本號和狀態碼
        conn.close()

if __name__ == '__main__':
    main()

超文本標記語言（Hypertext Markup Language，HTML）是一門標記語言，並非編程語言，該語言經過瀏覽器能識別的規則標籤來標記要顯示的網頁中的各個部分。瀏覽器按順序渲染網頁文件，而後根據標記符解釋和顯示內容。但須要注意的是，對於不一樣的瀏覽器，對同一標籤可能會有不徹底相同的解釋（兼容性）。html5

靜態網頁文件擴展名：.html 或 .htm編程

HTML結構瀏覽器

<!DOCTYPE html>     #告訴瀏覽器使用什麼標記語言解釋，如html、html五、xhtml等
<html lang="en">    #Html文件聲明的開始
<head>  #文件開頭部分，裏面的元素不會顯示在頁面中，可是每個元素都有特殊的含義
    <meta charset="UTF-8">
    <title>Title</title>    #網頁的標題
</head>
<body>
    #文件主體部分
</body>
</html>     #Html文件聲明的結束

HTML標籤格式socket

標籤的語法編程語言

閉合標籤：　　<標籤名屬性1=「屬性值1」屬性2=「屬性值2」……>內容部分</標籤名>ide

自閉合標籤：　<標籤名屬性1=「屬性值1」屬性2=「屬性值2」…… />網站

<!DOCTYPE>標籤ui

此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。聲明文檔的解析類型，避免瀏覽器的怪異模式。

BackCompat：怪異模式，瀏覽器使用本身的默認的模式解析渲染頁面。

CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼渲染模式默認就是BackCompat

示例：設置爲html

<!DOCTYPE html>

head內經常使用標籤

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"> #打開該html文件，兩秒後轉到百度
<meta http-equiv="content-Type" charset=UTF8">    #設置文本類型和編碼
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />     #聲明渲染瀏覽器，開發者無需考慮ie8的差異

非meta標籤

<title>個人第一個網站</title>    #標題信息
<link rel="icon" href="http://www.jd.com/favicon.ico">    #標題的圖標
<link rel="stylesheet" href="css.css">    #導入css樣式文件
<script src="hello.js"></script>　    #導入js腳本

body內經常使用標籤

基本標籤

<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.

<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.

<b> <strong>: 加粗標籤.

<strike>: 爲文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角標 和 下角表.

<br>:換行.

<hr>:水平線

特殊字符：
      &lt; &gt；&quot；&copy;&reg;

html特殊符號

<div>和<span>標籤

<div></div> ： <div>只是一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現.
<span></span>： <span>表示了內聯行(行內元素),並沒有實際的意義,主要經過CSS樣式爲其賦予不一樣的表現.

塊級元素與內聯元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門爲定義CSS樣式而生的。

標籤嵌套標準：塊級標籤能夠嵌套內聯標籤和塊級標籤，內聯標籤只能嵌套內聯標籤

<img> 標籤

src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

<a>超連接標籤(錨標籤)

什麼是超級連接？
所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序

什麼是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
各部分之間用「/」符號隔開。

url介紹

<a href="" target="_blank" >click</a>
href屬性指定目標網頁地址。該地址能夠有幾種類型：
    絕對 URL - 指向另外一個站點（好比 href="http://www.jd.com）
    相對 URL - 指當前站點中確切的路徑（href="index.htm"）
    錨 URL - 指向頁面中的錨（href="#top"）

列表標籤

<ul>: 無序列表 [type屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)]
<ol>: 有序列表
         <li>:列表中的每一項.
<dl>  定義列表
         <dt> 列表標題
         <dd> 列表項

<table>表格標籤

表格概念
表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。

#表格的基本結構
<table>
         <tr>    #行
                <td>標題</td>    #列
                <td>標題</td>
         </tr>
         
         <tr>
                <td>內容</td>    #列
                <td>內容</td>
         </tr>
</table>

#表格屬性

border: 表格邊框.

cellpadding: 內邊距

cellspacing: 外邊距.

width: 像素 百分比.（最好經過css來設置長寬）

rowspan:  單元格豎跨多少行

colspan:  單元格橫跨多少列（即合併單元格）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。