html基礎

時間 2019-11-17

標籤 html 基礎欄目 HTML 简体版

原文原文鏈接

B/S結構網絡模式

Browers(瀏覽器)，Server（服務器），是web後出現的一種網絡結構模式。php

這種模，在客戶端只須要安裝瀏覽器，剩下的工做都交給服務器來處理。html

好處：客戶端的壓力、負荷很小、下降咱們的使用成本。web

B/S結構的工做原理：sql

（1）首先是WEB瀏覽器向服務器端發出請求。在瀏覽器的地址欄裏輸入網址或IP地址。每臺計算機都有一個惟一的IP地址，那網址是和IP地址是一一對應的。IP地址的形式192.168.0.345，域名www.baidu.com、www.sina.com.cn數據庫

DNS域名解析器：是當你在地址欄輸入域名後，將該域名轉換成對應的IP地址。編程

（2）服務器接受請求，第一種：若是該文件是純靜態的網頁(.htm或.html)，服務器直接返回；若是請求的文件是.php、.net後綴的文件(服務器端腳本程序，由服務器來處理)，先進行相應的處理，把處理的結果返給你。可是在服務器端還有一項功能：若是你訪問的程序文件含有數據庫內容，服務端去向數據庫發出請求，將請求的結果返回給服務器端調用程序。數據庫是：存儲網站數據的地方(MySQL、ACCESS)。數組

（3）WEB服務器將查詢到的結果，再返回給WEB瀏覽器。WEB瀏覽器將結果顯示出來。WEB瀏覽器是一種解釋器，或者叫翻譯器。瀏覽器

HTML

HTML（HyperText Markup Language），超文本標註語言。是一種標準，是一種規範，是用於顯示網頁上各元素的標準。服務器

標註：又叫標記，或叫標誌。好比：<b>內容</b><font color=」red」>中國</font>網絡

瀏覽器是一種解釋器，HTML標記，它就是告訴瀏覽器，這個內容該如何顯示？

超文本：就是加「超級連接」的文本就是超文本。

語言：不是咱們所理解的編程語言，只是一標註語言。程序語言（PHP、C、JAVA）。

靜態網頁擴展名：.htm .html

動態網頁擴展名：.php .net

HTML文件的代碼結構

一個HTML文件的結構是

<html>放在文件頭部

<head>

文件頭內容

</head>

<body>

文件主體內容

</body>

</html>放在文件尾部

<html></html>含義：告訴瀏覽器，當遇到<html>標記時，把其中的全部內容按網頁格式來翻譯。

<head></head>叫文件頭部標記。做用：是發送給瀏覽器的一些控制信息。

<body></body>叫文件主體內容。

HTML標記的語法

每個標記都包圍在< >內：<b>內容</b>中國

每一個標記均可能有結束標記(又叫雙邊標記)：有開始標記<b>，有結束標記</b>

斜體文字：<i>文本內容</i>

每個標記還可能有屬性：<font color=」red」>內容</font>

語法格式：<開始標記屬性=屬性值屬性=屬性值>內容</結束標記>

屬性是對標記的更多的限制。

保存快捷鍵：Ctrl+S

網頁亂碼的解決：保證網頁文件的<meta>標記的編碼與網頁保存時的文件編碼是否一致。若是不一致，將可能會產生亂碼。

代碼編輯器

做用：用了代碼編輯器，能夠加速網頁代碼的編寫效率。

分類：一種是IDE集成開發環境，一種是加強的文本編輯器。

介紹幾種代碼編輯器

1) EditPlus：比較小、佔用系統資源少，語法高亮顯示，自動縮進等功能。但沒有代碼自動補齊功能。Mysql_fetch_array()。

2) Notepad++：與EditPlus類似。

3) Dreamwear：有可視化視圖、有代碼視圖。比較大，佔用系統資源相對多些。語法高亮有，代碼自動補功能。

4) Zend Studio：是IDE開發環境，是常獲PHP集成開發環境軟件大獎。代碼自動補齊功能。

EditPlut

1）經常使用的快捷鍵

新建：Ctrl+N

保存：Ctrl+S

撤消：Ctrl+Z

重作：Ctrl+Y

查找：Ctrl+F

替換：Ctrl+H

複製當前行：Ctrl+J

Tab:縮進

Shift+Tab：向左縮進，向上縮進

2）EditPlut的基本設置：工具——參數設置

背景顏色、字體、大小、行高、佈局設置

HTML的標記編寫規範

1）不區分大小寫，可是儘可能用小寫，爲了與XHTML、XML的兼容；

2）每一個標記使用< >括起來；好比<b>加粗

3）每一個標記可能有結束標記(雙邊標記)，也可能沒有(單邊標記)。

雙邊標記：<div></div>

單邊標記：<br />換行 <hr>水平線 <img>圖片

4)每一個標記可有屬性，也能夠沒有屬性，也可能有多個屬性

屬性和標記，以及屬性間用空格隔開，空格能夠多個。

5）每一個屬性值加引號。

HTML未來會被XHTML替代。

5) HTML標記的多少固定的，不能人爲定義。

6) 標記之間要能順序嵌套：<p><b>內容</b></p>

錯誤寫法：<p><b>內容</p></b>

字體修飾標記(標籤)

加粗：<b>內容</b>

斜體：<i></i>

下劃線：<u></u> underline

字體：

l 大小size屬性，取值1－7；

l 屬性face設置字體，好比「黑體」

l 顏色屬性：值多是單詞、十六進制。好比：red、blue、green ；十六進制

sup：上標 a<sup>3</sup>

sub：下標 a<sub>2</sub>

換行和段落：

<br>換行標記

<p></p>標記

換行和換段區別：段落間會有一個空行，但換行，沒有距離。

標題標記：

<h1>一級標題</h1>自動加粗

屬性： align= left | right | center

網頁顏色

網頁顏色有三種表示法：

1）單詞表示法：red、 blue、green、gray、orange

2）十進制表示法：rgb(233,45,200)

3）十六進制表示法：#FF0000(紅色)

天然界中全部的顏色均可以用RGB三種顏色混合而成，RGB又加三原色，還叫加色模式，根據光的波長不一樣而產生不一樣的強度的光的顏色。

加色模式：紅色+綠色＝黃色

每一種原色可有256(0-255)種，RGB共能夠混合出256*256*256=1670萬

紅色：RGB(0,0,0) RGB(255,0,0)

綠色：RGB(0,0,0) RGB(0,255,0)

藍色：RGB(0,0,255)

黃色：RGB(255,255,0)

紫色：RGB(255,0,255)

青色：RGB(0,255,255)

十六進制：基數 0－9 A-F

前兩位表明R，中間兩位表明G、最後兩位表明B

#FF0000紅色

#00FF00 綠色

#0000FF 藍色

預排版標記<pre></pre>是雙邊標記

在該標記內，全部空格都將保留。

普通標記：說明一個問題，換行必需要有換行標記<br />，換行必需要用換段標記<p></p>。全部格式內容都要有相應的標記來處理。

<pre>日常用的比較少，通常狀況下在PHP中作爲輸出數組來使用。

三個<Meta>標記

1)設定網頁的編碼標準

2)設定網頁關鍵字，是給搜索引擎，好比：baidu.com、google

關鍵字的設定：必定精簡，真正能體現公司的服務或者項目的。

3）網頁描述

描述內容不能寫的太多，通常不超過100個字符。

項目符號列表<ul>

語法格式：

<ul>

</ul>

說明：

1) 項目符號是一個組標記，是由<ul>和<li>構成。

2) 每一個項目的內容要放在<li></li>標記中

3) <ul>標記的屬性 type：square(方塊)、circle(圓)、disc（實心圓點）

4）一個ul能夠有多個<li>標記

<hr />水平線：畫一條水平線

編號列表標記<ol>

語法格式：

<ol>

<li>內容</li>

</ol>

說明：

1) 編號列表分類：數字(3)、大寫字母(A)、小寫字母(a)、大羅馬(I)、小羅馬(i)

2)起始屬性 start=」4」

定義列表<dl>，也是一組標記，不是單個的。

語法格式：

<dl>

<dd>對小標題的說明內容</dd>

<dl>

舉例：

<dl>

<dt>HTML的概念</dt>

<dd>HTML是超文本標註語言，是一個標準，是用於顯示網頁各部分的語言。</dd>

</dl>

注意：在<dl>中至少有一個<dt>和<dd>，能夠包含多個。

應用：在JD的左側商品菜單。

進制介紹

十進制：基數0、一、2……9，規則是逢十進一。

二進制：基數0和1。規則是逢二進一。

八進制：基數0－7。規則是逢八進一。

十六進制：基數0 1 2 3 4 5 6 7 8 9 A B C D E F規則逢十六進一。

計算機的存儲裏，若是咱們把它拆開，除了盤片，什麼也看不見。你用放大鏡把盤片放大，會發現凹凸不平。二進制表明兩種狀態，是與否，或者對與錯，也可能說是開與關。凹表明0（沒有），凸表明1（有東西）。二進制好比110101010101011010010101010。

咱們在計算機的應用層，使用不少字符、數字、符號，計算機不能直接識別，要進行相應的轉換。中文搜索器的開發。若是咱們用英語來寫文章的話，搜索速度要至少快一倍以上，道理是美國人。

字符編碼：我本身定義一個110表明a。漢字編碼：

八進制：是用3位二進制來表示，也就是2^3來表示。

十六進制：是用4位二進制來表示，也就是2^4來表示。

將10進制轉換成二進制

10進制轉成二進制：分整數部分和小數部分。好比：(10.125)10

將整數轉換成二進制的方法：除2取餘法，直到商爲0。按倒序來進行組織成二進制：(1010)2

第N次	商	餘數
1	5	0
2	2	1
3	1	0
4	0	1

將小數轉成二進制的方法：乘2取整法，直到小數後爲0爲止。

按順序來進行組織二進制的結果是：001

第N次	積	整數
1	0.25	0
2	0.5	0
3	1	1

十進制(10.125)10轉成二進制是1010.001

二進制轉成十進制

轉換的方法是：按位權相加

1010.001

位權：是從小數點位置開始算起，向左正整數遞增；向右是負整數遞減。

1*2^3+0*2^2+1*2^1+0*2^0=8+0+2+0=10

計算機編碼

目的：是爲解決你網頁中出現亂碼的問題。

計算機只能處理二進制數據，那麼計算機如何處理數字、字母、符號、以及漢字呢？這個就必需要進行編碼處理。例如：65表明A。W3C國標標準化組織，由他制定和發佈相關的統一標準，而後你們都去遵照他的標準。

計算機最初是由美國人發明的，他們的語言：由26個字母組成。最初時的計算機編碼是ASCII碼，是由美國人制定的。包括：26大小寫字母、一些符號、一些控制符號(不可見)。它用2的7位(128個字符)或8位(256個字符)來進行表示。

計算機被引入到了其它國家，好比中國。咱們國家信息標準化局制定了我們本身的計算機編碼：GB2312碼。好比，日本也有本身的編碼。可是每一個國家的編碼並不兼容。GB2312碼是兩個字節，它一共能夠存儲6764個漢字。

有些罕見的漢字，還有少數民族的語言或符號，仍是不能處理。由於標準化局對GB2312編碼進行了擴充，擴充後GBK。GBK兼容GB2312。

還有一個ANSI編碼，是跟隨操做系統來運行的。好比：在中國咱們的操做系統是簡體中文的，那ANSI編碼就表明GB2312。好比：日本的操做系統使用的ANSI編碼，JIS編碼。以上所述，發現一個問題：每一個國家都根據本身國家的語言習慣制定了本身國家的編碼，形成不一樣國家編碼不能相容的問題。

補充：一個漢字是兩個漢字，一個字節是8位二進制，共16位二進制。

臺灣、香港它們用的繁體，但GBK、以及GB2312仍是沒法處理。

當時，在臺灣地區，能夠說每一個公司都有本身的編碼。有五家公司佳佳、大衆等，聯合制定了一個標準，後來叫BIG5，中文名稱大五碼。

可是又出來一個，當這些國家的計算機進行交互時，或者交流時，出現了問題，每一個國家的編碼互不兼容。W3C發現這個問題，並制定了一個標準Unicode(統一)，按4個字節進行編碼。好比：1在ASCII中有8位就能夠表示，但Unicode用32位表示0000000000000001。Unicode包含全世界全部的語言，它有本身的缺點：標準內容大約有500頁左右，太大了。這樣同樣，就浪費了不少的網絡資源。後來又出現了UTF-8(統一轉換格式)，優勢字節長度自適應。

亂碼的解問辦法：

1) 保證網頁中的編碼和文件編碼一致

2) 好比網頁中的編碼用UTF-8，保存網頁時，也要用UTF-8。也就是保存與網頁要一致。與瀏覽器能夠不一致。瀏覽器是根據網頁的編碼來進行解析網頁的。

ASCII碼：

ANSI碼：

GB2312（標準碼）

GBK(標準擴展碼)

Unicode（統一編碼）

UTF-8