HTML應用-html px em pt長度單位(像

HTML應用-html px em pt長度單位(像素相對長度點)

、PX\EM\PT單位介紹

px單位名稱為像素，相對長度單位，像素（px）是相對于顯示器屏幕分辨率而言的國內推薦；

em單位名稱為相對長度單位。相對于當前對象內文本的字體尺寸，國外使用較多；

pt單位名稱為點（Point），絕對長度單位一般老版本的table使用長度大小單位但是現在基本上沒有使用。

html單位簡短介紹：

Px 像素Pixel；相對長度單位。

Pt 點（Point）；絕對長度單位

Em 相對長度單位，這里em與html標簽的"EM"拼寫完全相同，而這里em作為單獨文本單位。

1. 以前IE無法調整那些使用px作為單位的字體大小,但現在幾乎IE都支持在這里也推薦使用PX作為單位;

2. 國外的大部分網站能夠調整的原因在于其使用了em作為字體單位;

3. Firefox能夠調整px和em，但是96%以上的中國網民使用IE瀏覽器(或內核)。

px像素(Pixel)。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的，QQ截圖也是使用PX作為長度寬度單位。

em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。

二、html單位對比案例

1、簡單小例：

Width:300px 寬度為300像素

Width:300pt 寬度為300點

Width:300em 寬度為300相對長度

以上我們設置相同數值的不同單位實例

2、對文字設置不同長度em px pt單位看看效果：

CSS代碼：

.divcss5-px{ font-size:12px}
.divcss5-pt{ font-size:12pt}
.divcss5-em{ font-size:2em}

HTML代碼：

< span>divclass="divcss5-px"<我是divcss5</>div<
< span>divclass="divcss5-pt"<我是divcss5</>div<
< span>divclass="divcss5-em"<我是divcss5</>div<

3、單位長度對比說明圖

html px pt em單位案例對比圖

三、em與px換算

任意瀏覽器的默認字體高度16px（16像素）。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。

12px相當于9pt長度；

12px相當于0.75em長度；

9pt相當于0.75em長度；

一般我們使用em換算px較多

高級em與px換算：

任意瀏覽器的默認字體高度16px（16像素）。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。

具體使用時候：

我們在對全體html標簽聲明初始一次font-size=62.5%

如：

*{font-size=62.5%}

即可此后面布局可依據以下技巧進行設置em單位

font-size:1.2em等于font-size:12px

font-size:1.4em等于font-size:14px

以此類推相當于初始font-size=62.5%后，em與px單位就只有10倍差距，以便方便計算與設置em長度數值使用。

四、em單位有如下特點：

　　1. em的值并不是固定的;

　　2. em會繼承父級元素的字體大小。

我們在寫CSS的時候如果要用em為單位，需要注意兩點：

　　1. body選擇器中聲明Font-size=62.5%;

　　2. 將你的原來的px數值除以10，然后換上em作為單位;

　　3. 重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。

　　也就是避免1.2 * 1.2=1.44的現象。比如說你在#content中聲明了字體大小為1.2em，那么在聲明的字體大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變為了1em=12px。

　　但是12px漢字例外，就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小，而是稍大一點。這個問題 Jorux已經解決，只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時，對于浮點的取值精確度有限。不知道有沒有其他的解釋。

五、推薦網頁單位

所以為了單位換算錯誤推薦使用PX（像素）作為網頁制作單位。

以上為大家介紹了px em pt單位，及換算方式，一般現在我們使用長度單位都以px為長度單位。這里我們也推薦使用以px（像素）為網頁的尺寸長度單位，符合瀏覽器的像素單位，同時也為了方便計算長度尺寸。

關于px pt em單位總結

1）、推薦px像素為單位：通常我們使用px（像素為單位）較多，其次是em單位，平時推薦大家以px為單位；

2）、我們的顯示屏分辨率以px像素為單位；

3）、我們QQ截圖時候也是以px像素單位。

*******HTML********

**Web服務本質**

import socket

sk=socket.socket()

sk.bind(("127.0.0.1", 8080))

sk.listen(5)

while True:

conn, addr=sk.accept()

data=conn.recv(8096)

conn.send(b"HTTP/1.1 200 OK\r\n\r\n")#http協議簡化

conn.send(b"<h1>Hello world!</h1>")#發送內容

conn.close()

sk.close()

瀏覽器發送請求-->HTTP協議-->服務器接受請求-->服務端返回響應-->服務端把HTML文件內容發送給瀏覽器-->瀏覽器渲染頁面

What HTML?

*超文本標記語言（Hypertext Markup Language，HTML）是一種用于創建網頁標記語言

*本質上是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的頁面。

對于不同的瀏覽器，對于同一個標簽可能會有不同的解釋。（兼容性問題）

*網頁文件的擴展名：.html或.htm

*HTML是一種標記語言，他不是一種編程語言，HTML使用標簽來描述網頁。

****HTML文檔結構****

*最基本的HTML文檔**

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

#解釋

1.<!DOCTYPE html>聲明為HTML5文檔

2.<html></html>是文檔的開始標記語言和結束標記，是HTML頁面的根本元素，在他們之間是文檔的頭部(head)和主題(body)

3.<head></head>定義了HTML文檔的開頭部分。他們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據

4.<title></title>定義了網頁標題，在瀏覽器標題欄顯示

5.<body></body>之間的文本是可見的網頁主體內容

注意：

對于中文網頁需要使用<meta charset='utf-8'>聲明編碼。否則會出現亂碼。這些瀏覽器會設置GBK為默認編碼，則需要我們設為

****HTML標簽格式****

*HTML標簽是由尖括號包圍的關鍵字

*HTML標簽通常是成對出現的，比如：<div>和</div>，第一個標簽是開始，第二個標簽是結束。結束標簽會有斜線。

*也有一部分標簽是單獨呈現的，比如：<br/>、<hr/>、<img src="1.jpg" />等。

*標簽里面可以有若干屬性，也可以不帶屬性。

****標簽的語法

<標簽名屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標簽名>

<標簽名屬性1=“屬性值1” 屬性2=“屬性值2”…… />

幾個很重要的屬性：

id：定義標簽的唯一ID，HTML文檔樹中唯一

class：為html元素定義一個或多個類名（classname）(CSS樣式類名)

style：規定元素的行內樣式（CSS樣式

****HTML注釋

****<!DOCTYPE>標簽****

<!DOCTYPE> 聲明必須是HTML文檔的第一行，位于<html>標簽之前

<!DOCTYPE> 聲明不是HTML標簽，他是指示web瀏覽器關于頁面使用哪個HTML版本進行編寫的指令

****HTML常用標簽****

**head內常用的標簽**

1.<title></title> 定義網頁的標題

2.<style></style> 定義內部樣式表

3.<script><script>定義JS代碼或引入外部JS文件

4.<link/> 引入外部樣式文件

5.<meta/>定義網頁原信息

****Meta標簽

Meta標簽介紹：

meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不

同的參數值，這些不同的參數值就實現了不同的網頁功能。

1.http-equiv屬性：相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示

網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

2.names屬性：主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎

機器人查找信息和分類信息用的

******body內常用表標簽******

****基本標簽（塊級標簽和內聯標簽）****

<br>

<hr>

****特殊字符****

空格------

>-------->

<--------<

&--------&

￥--------￥

版權(??)---?

注冊(??)---?

****div標簽和span標簽****

div標簽用來定義一個塊級元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現。

span標簽用來定義內聯(行內)元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現。

塊級元素與行內元素的區別：

所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。

這兩個元素是專門為定義CSS樣式而生的。

注意：

關于標簽嵌套：通常塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。

p標簽不能包含塊級標簽，p標簽也不能包含p標簽。

****img標簽****

****a標簽****

超鏈接標簽

所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，

也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，

甚至是一個應用程序。

什么是URL？

URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁地址，是因特網上標準的資源的地址。

URL舉例

http://www.baidu.com/stu/index.html

http://111.13.100.91/stu/index.html

URL地址由4部分組成

第1部分：為協議：http://、ftp://等

第2部分：為站點地址：可以是域名或IP地址

第3部分：為頁面在站點中的目錄：stu

第4部分：為頁面名稱，例如 index.html

各部分之間用“/”符號隔開。

href屬性指定目標網頁地址。該地址可以有幾種類型：

1.絕對URL-指向另一個站點（不如）

target:

1._blank表示在新標簽頁中打開目標頁面

2._self表示在當前標簽頁中打開目標頁面

****列表*****

1.無序列表

</ul>

type屬性：

1.disc（實心圓點，默認值）

2.circle（空心圓圈）

3.square（實行方塊）

4.none（無樣式）

2.有序列表

</ol>

type屬性：

1.1數字列表，默認值

2.A大寫字母

3.a小寫字母

4.I大寫羅馬

5.i小寫羅馬

3.標題列表

<dl>

</dl>

****表格****

表格是一個二維數據空間，一個表格由若干行組成，一行又有若干單元格組成，單元格里面可以

包括文字。列表。圖案。表單。數字符號。預置文本和其它的表格等內容。

表格最重要的目的是顯示表格類數據。

表格類數據是值最適合組織為表格格式（即按行和列組織）的數據

表格基本結構：

<table>

<thead>

<tr>

</tr>

</theaf>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

屬性：

1.border：表格邊框

2.cellpadding：內邊距

3.cellspacing：外邊距

4.width：像素百分比（最好通過css來設置長度）

5.rowspan：單元格豎跨多少行

6.colspan：單元格橫跨多少列（即合并單元格）

****form（表單）****

功能；

表單用于向服務器傳輸數據，從而實現用戶與web服務器的交互

表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等

表單還可以包含textarea、select、fieldest和lable標簽

***表單屬性

1.accept-charset 規定在被提交表單中使用的字符集（默認：頁面字符集）

2.action 規定在何處提交表單的地址（URL）（提交頁面）

3.autocomplete 規定瀏覽器應該自動完成表單（默認：開啟）

4.enctype 規定被提交數據的編碼（默認：url-encoded）

5.method 規定在提交表單時所用的HTTP方法（默認GET）

6.name 規定識別表單的名稱（對于DOM使用：document.forms.name）

7.novalidate規定瀏覽器不驗證表單

8.target規定action屬性中地址的目標（默認_self）

***表單元素

基本概念：

HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是制作動態網站很重要的內容。

表單一般用來收集用戶的輸入信息

表單工作原理：

訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。

服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，并要求糾正錯誤。

當數據完整無誤后，服務器反饋一個輸入完成的信息。

******input******

<input>元素會根據不同的type屬性，變化為多種形態

type屬性值表現形式對應代碼

text單行輸入文本<input type="text" />

password密碼輸入框<input type="password" />

date日期輸入框<input type="date" />

checkbox復選框<input type="checkbox" checked="checked" />

radio單選框<input type="radio" />

submit提交按鈕<input type="submit" value="提交" />

reset重置按鈕<input type="reset" value="重置" />

button普通按鈕<input type="button" value="普通按鈕" />

hidden隱藏輸入框<input type="hidden" />

file文本選擇框<input type="file" />

屬性說明：

1.name：表單提交時的“鍵”，注意和id的區別

2.value：表單提交時對應項的值

type=“button”，“reset”，“submit”時，為按鈕上顯示的文本信息

type=“text”，“password”，“hidden“時，為輸入框的初始值

type=”checkbox“，”radio“，”file“時，為輸相關聯的值

3.checked：radio和checkbox默認被選中的項

4.readonly：text和password設置只讀

5.disabled：所有input均適用

******select標簽******

</select>

</form>

屬性說明：

1.multiple：布爾屬性，設置后為多選，否則默認單選

2.disabled：禁用

3.selected：默認選中該項

4.value：定義提交時的選項值

******lable標簽******

定義：<lable>標簽為input元素定義標注（標記）

說明：

1.label元素不會向用戶呈現任何特殊效果

2.<lable>標簽的for屬性值應當與相關元素的id屬性值相同

<form>

</form>

******textarea多行文本******

默認內容

</textarea>

屬性說明：

1.name:名稱

2.rows:行數

3.cols:列數

4.disable:禁用

格元素詳解與練習

提到表格，大家最先想到的就是EXCEL這款軟件，實際上在對表格的操作上，HTML與EXCEL非常相似。

在展示數據，統計數據方面，表格比文字描述更具表達優勢，在網頁中，表格也經常被用來展示數據、計劃日常安排等內容。如圖所示：

今天我們就來學習一下如何向頁面中添加表格元素。

首先來介紹一下表格元素中的基本標簽。

NO.1：<table></table>

這個標簽是書寫表格的第一個標簽，它本身在頁面上看不出什么內容，但是它的屬性可以控制表格顯示的全局樣式。這個標簽的開始標簽寫在表格元素的開頭，結尾標簽寫在表格元素的結尾。

NO.2：<caption></caption>

這個標簽是表格的標題標簽。

NO.3：<tr></tr>

這個標簽定義表格的列標簽。

NO.4：<th></th>

這個標簽是列表標題標簽，例如，男生、女士、姓名等。

NO.5：<td></td>

這個標簽定義表格的行標簽。

OK，這些基本標簽就可以構建一個基礎的表格元素。示例代碼如下：

頁面效果如圖所示：沒有表格的外邊框。

如何添加外邊框呢？在<table>標簽中修改border屬性即可，示例代碼如下：border="1"是給表格添加寬為1的邊界線。

<table border="1"><!-- border="1"是給表格添加寬為1的邊界線 -->

效果如圖所示：

這時，您會發現表格在頁面上的尺寸非常小，可不可以按照頁面尺寸來顯示表格嗎？當然可以，這就需要為<table>標簽修改第二個屬性width，示例代碼如圖所示：width="100%"指的是表格寬度與平面寬度一致。

<table border="1" width="100%"><!-- width="100%"指的是表格寬度與平面寬度一致 -->

效果如圖所示：

ok！今天的講解先到這里，明天我會繼續為大家講解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三個標簽，以及合并單元格操作。

今天的完整代碼示例如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body><h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
  <caption>表格標題</caption>
<tr>
  <th>姓名</th>
<th>年齡</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
  <td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body> 
</html>

正所謂萬丈高樓平地起，html技術雖然簡單，但是內容相對繁瑣，也是以后進一步學習網頁制作的基礎，希望大家動手寫每一段代碼，把每一步踩堅實。

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

在線咨詢

上一篇：vue單頁緩存存在的問題及解決方案
下一篇：jQuery UI 實例-對話框（Dialog）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML應用-html px em pt長度單位(像

HTML完整學習目錄

您的項目需求