html 初識文檔結構經常使用標籤

時間 2019-12-09

標籤 html 文檔結構經常使用標籤欄目 HTML 简体版

原文原文鏈接

HTML初識

△HTML:css

超文本標記語言，是一種用於建立網頁的標記語言，不是編程語言,沒有邏輯
本質上是瀏覽器可識別的規則
咱們按照規則寫網頁，瀏覽器根據規則渲染咱們的網頁。對於不一樣的瀏覽器，對同一個標籤可能會有不一樣的解釋。（兼容性問題）
網頁文件的擴展名：.html或.htm（沒有區別）html

網頁文件的擴展名：.html或.htm（沒有區別）前端

咱們按照規則寫網頁，瀏覽器根據規則渲染咱們的網頁。對於不一樣的瀏覽器，對同一個標籤可能會有不一樣的解釋。（兼容性問題）python

網頁文件的擴展名：.html或.htm（沒有區別）web

△css：
層疊樣式表是一種用來表現HTML等文件樣式(效果)的計算機語言編程

JavaScript：
簡稱「JS」，是一種屬於網絡的腳本語言
經常使用來爲網頁添加各式各樣的動態功能,爲用戶提供更流暢美觀的瀏覽效果
一般JavaScript腳本是經過嵌入在HTML中來實現自身的功能的bootstrap

△jQuery：
jQuery是一個快速、簡潔的JavaScript框架，它封裝JavaScript經常使用的功能代碼後端

△boodstarp(JQ+css):
bootstrap：簡潔、直觀、強悍的前端開發框架
它在jQuery的基礎上進行了更爲個性化的完善，造成一套本身獨有的網站風格，併兼容大部分jQuery插件。瀏覽器

△B/S (前端/後端)服務器

Web服務的本質：
瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 -->
服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面
瀏覽器內嵌了一個socket客戶端，默認TCP連接

△瀏覽器自帶socket客戶端，本身編寫的服務端也能夠爲瀏覽器服務

from socket import *
jd_server = socket()

jd_server.bind(("",8001))
jd_server.listen(5)
conn,client_add = jd_server.accept()
from_client_msg = conn.recv(1024)
print(from_client_msg.decode())
conn.send("nihao".encode())
conn.close()
jd_server.close()

按照HTTP協議加載瀏覽器能看懂的數據：

conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"nihao")

HTTP/1.1 200 OK:
HTTP/1.1 是一個規範
200 表明請求成功
OK 表示一切正常

conn.send(b"<h1>nihao</h1>")  #用標題包裹數據，更好看一些

標籤通常造成一個結構寫在文件裏，這個文件就是HTML文件

HTTP/1.1 是一個規範

conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"nihao")

pycharm中建立一個html文件（英文名，不要空格）
你會發現，整個結構都直接生成好了,由於無論什麼瀏覽器，文檔結構都是這樣的

html文件能夠在pycharm中就能打開

△本身寫一個服務器
當瀏覽器來連服務器時,把HTML文件發送給瀏覽器

from socket import *

s = socket()
s.bind(("",8881))
s.listen(5)
new_s, addr = s.accept()
data = new_s.recv(1024)
print(data.decode())
new_s.send(b"HTTP/1.1 200 OK\r\n\r\n")

with open("test.html","rb") as f:
    data = f.read()
    new_s.send(data)
new_s.close()
s.close()

HTML文檔結構

△最基本的HTML文檔：

<!DOCTYPE html>     
<html lang="zh-CN">   
<!--這個lang表示語言，zh-CN是中文的意思，就是說，你整個文檔的內容以中文爲主-->
<!--若是以英文爲主，就寫成lang='en'，用谷歌之類打開，它會認爲是英文的，自動給翻譯（若是設置了自動翻譯的話）-->
<head> 
  <meta charset="UTF-8">
  <title>標題</title>
</head>
<body> 
</body>
</html>



<!DOCTYPE html>:HTML文件聲明，聲明爲HTML5文檔
<html>、</html>:是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）

<head>、</head>:定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據，配置信息等，是給瀏覽器看的，你看到的是在body標籤裏面寫的

<title>、</title>:定義了網頁標題，在瀏覽器標題欄顯示
<body>、</body>:之間的文本是可見的網頁主體內容

注意：對於中文網頁須要使用 <meta charset="utf-8"> 聲明編碼，不然會出現亂碼
有些瀏覽器會設置 GBK 爲默認編碼，則你須要設置爲 <meta charset="gbk">

△瀏覽器頁面調試工具 F12
Elements（元素）：對瀏覽器看來，全部標籤都是元素
標籤對文本進行了標記，因此HTML叫超文本標記語言
瀏覽器有識別標籤的機制

HTML標籤格式

標籤分類定義

塊級/內聯:判斷依據爲顯示的web中獨佔至少一行的body中的標籤

塊級標籤(行外標籤,獨佔一行):

塊級標籤可以包含內聯標籤,和某些塊級標

<h1>一級標題</h1>        標題標籤 
<br>     換行標籤
<hr>     換行橫線標籤

<p>              段落標籤
    第一章內容
</p>


<div style="color:green">  </div>        換行文檔分區標籤


<ul>           無序列表標籤
     <li>茶</li>    列表內容標籤
</ul>


<ol type="I" start="2">  有序列表標籤
    li>梅</li>             
</ol>


<dl>                 無標識標籤
    <dt>河北省</dt>    
    <dd>邯鄲</dd>       
</dl>


<table border="1">   表格線框寬度      表格標籤    
  <tr> 定義行   第一行
    <th>Month</th>  表頭加粗的內容
    <th>Savings</th>
  </tr>
  <tr>  第二行
    <td>January</td>  表內容
    <td>$100</td>
  </tr>
</table>

內聯標籤(行內標籤,不獨佔一行):
不能包含塊級標籤

<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"> 圖片標籤
<a href="">跳到底部</a>  超連接標籤
<span style="color:blue">藍色</span>  文檔標籤

全封閉標籤:

<title>網頭</title>     網頭標籤
<h1>一級標題</h1>        標題標籤 
<a href="">跳到底部</a>  超連接標籤

<p>個人車是 <span style="color:blue">藍色</span> 的。</p>   段落標籤  文檔分區標籤
<div style="color:green">  </div>        換行文檔分區標籤


<p>              段落標籤
    第一章內容
</p>



<ul>           無序列表標籤
     <li>茶</li>
</ul>


<ol type="I" start="2">  有序列表標籤
    li>梅</li>             
</ol>


<dl>                 無標識標籤
    <dt>河北省</dt>    
    <dd>邯鄲</dd>       
</dl>



<table border="1">   表格線框寬度      表格標籤    
  <tr> 定義行   第一行
    <th>Month</th>  表頭加粗的內容
    <th>Savings</th>
  </tr>
  <tr>  第二行
    <td>January</td>  表內容
    <td>$100</td>
  </tr>
</table>

自封閉標籤:

<meta>   元信息標籤
<link rel="icon" href="圖標文件路徑">  網頭圖標標籤
<br>     換行標籤
<hr>     換行橫線標籤
<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"> 圖片標籤

head內經常使用標籤（瞭解）：

`<meta />` 標籤元信息

用處:標籤位於文檔的頭部,提供的信息是用戶不可見的,是一個自封閉標籤,全封閉標籤,可提供有關頁面的元信息（meta-information）

有一下關鍵字:

charset=

ontent="3"

定義文檔字符編碼和更新頻度的描述:

<meta charset="utf-8"   content="3"/> 
                          三秒刷新
<meta http-equiv="Refresh"  content="2;url=https://www.baidu.com"/>
                                           自動跳轉

http-equiv=

瀏覽器內核（渲染引擎）：渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息
渲染引擎是兼容性問題出現的根本緣由，大部分渲染效果差很少

<meta http-equiv="Refresh">

<meta http-equiv="X-UA-Compatible" cotent="IE=edge">
IE比較個色

name="keyword" content="搜索關鍵字"

"keywords" 是一個常常被用到的名稱。它爲文檔定義了一組關鍵字
某些搜索引擎在遇到這些關鍵字時，會用這些關鍵字對文檔進行分類

<meta name="keywod" content="古風，武俠，悟道"/>

name="description" content="網站描述信息"

設置網站描述信息，用於在搜索引擎搜索時，顯示網站基本描述信息

<meta name="description" content="這是一個古風網站"/>

觸屏縮放

name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>

device-width：設備寬度
- initial-scale=1.0，初始顯示縮放比例。
- minimum-scale=0.5，最小縮放比例。
- maximum-scale=1.0，最大縮放比例。
- user-scalable=yes，是否支持可縮放比例（觸屏縮放）

`<title>網頭</title>` 標籤

link 標籤網頭圖標

<link rel="icon" href="圖標文件路徑"/>

body內經常使用標籤

`<h1> <h1>`標籤標題

<body>
    hehe  #body中沒有包裹的就是普通文本顯示
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題,大聖</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>
</body>

br標籤換行

<h1>123</h1>
<br>
<h2>4<br>5</h2>
 
 123
 
 4
 5

注意點:直接回車、空格等空白內容都被認爲是一個空格

hr 標籤一行橫線

<h2>1<hr>2</h2>

1
----------------------------------
2

a 標籤超連接

錨點：頁面內容進行跳轉（在本身的頁面跳）

<body>

<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>

<h1 id="i1">第一章 XXX</h1>
<p>   #段落標籤
    第一章內容
</p>

不加href屬性,就是普通文本顯示

<a>古風</a>

加上href屬性,不加值文字有顏色效果,還有下劃線,而且點擊後會刷新當前的html頁面

<a href="# ">跳到底部</a>

加上href屬性,而且加上值

<a href="http://www.baidu.com" target="_self" >baidu</a>

跳轉對應網址的頁面
未訪問以前是藍色的字體顏色
訪問以後是紫色的字體顏色
target屬性:
_self:在當前標籤頁打開 href屬性值的那個網址
_blank:在新的標籤頁打開 href屬性值的那個網址

p標籤段落

<p>  
    第一章內容
</p>

span標籤文檔分區

<p>個人車是 <span style="color:blue">藍色</span> 的。</p>
若是不對 div和span 應用樣式，那麼 span 元素中的文本與其餘文本不會任何視覺上的差別

div標籤換行文檔分區

div是一個塊級元素。這意味着它的內容自動地開始一個新行
能夠把文檔分割爲獨立的、不一樣的部分

<div style="color:green">  #字體爲綠色
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

<div style="background: red">內容</div> #背景爲綠色

ul標籤無序列表

興趣愛好:
    <ul>               #<ul>做爲無序列表的聲明
        <li>茶</li>
        <li>酒</li>
        <li>棋</li>
    </ul>

ol標籤有序列表

君子:
    <ol type="I" start="2">     #<ol> 標籤訂義有序列表,有序列表的各個列表項有前後順序，
        <li>梅</li>             #因此會使用數字進行標識
        <li>蘭</li>
        <li>竹</li>
        <li>菊</li>
    </ol>

dl標籤無標識表

<dl>
        <dt>河北省</dt>    表頭
        <dd>邯鄲</dd>      內容 
        <dd>石家莊</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遙</dd>
    </dl>

河北省
    邯鄲
    石家莊
山西省
    太原
    平遙

tble標籤表格

<table border="1">   表格線框寬度
  <tr> 定義行   第一行
    <th>Month</th>  表頭加粗的內容
    <th>Savings</th>
  </tr>
  <tr>  第二行
    <td>January</td>  表內容
    <td>$100</td>
  </tr>
</table>

表格由 table 元素以及一個或多個 tr、th 或 td 元素組成
tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元

border:規定表格邊框的寬度

img標籤圖片

<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"/>

src屬性:圖片路徑  必須寫
alt屬性:圖片加載失敗或者正在加載時提示的內容
title屬性:鼠標懸浮時顯示的內容

# 不經常使用,經過css來控制
width:設置寬度
height:設置高度