HTML

好好學web前端技術之html标簽

不要有強迫症

注釋

屬性分為以下兩組

name 與 content

– 描述網頁

值 discription 用于描述。使用content屬性提供網頁簡短描述 值 keywords 用于定義網頁關鍵字。使用content屬性提供網頁的關鍵字 值 robots 用于定義網頁搜尋引擎方式。使用content屬性描述網頁搜尋引擎方式

http-equiv 與 content

– 提供http協定的響應封包頭(mime 文檔頭)，以名稱/值的形式表示

content-type:用于定義使用者浏覽器或相關裝置如何顯示要加載的資料， 或者如何處理将要加載的資料 refresh:用于重新整理或跳轉(重定向)頁面。 使用content屬性表示重新整理或跳轉的開始時間與跳轉的網址 expires:用于網頁緩存過期時間。 使用content屬性表示頁面緩存的過期時間。一旦網頁過期，将從伺服器上重新下載下傳新頁面 pragma與no-cache:用于定義緩存頁面。 使用content屬性的no-cache表示是否緩存網頁

示例：

通過實作頁面的自動跳轉來示範标簽的使用

建立一個meta.html的頁面(前提有一個helloworld.html頁面)

特點：自動換行，并且上下留白

屬性：align用于設定标題的對齊方式,取值left左對齊(預設),right右對齊,center居中對齊

size屬性：字型大小(即字号)，隻有1~7，最大是7，再大就得用css選擇器實作

face屬性：表示設定字型類型：（宋體、楷體、微軟雅黑）

color屬性：字型顔色

– a. 英文單詞顔色名字，格式

– b. #rgb（三原色紅綠藍），

取值 00-ff 十六進制 比如：純紅 #ff0000, 純綠 #00ff00, 純藍 #0000ff

借助螢幕取色器取色

注：預設字型顔色黑色

<b>b加粗</b>粗體

i傾斜斜體

<b>既加粗又傾斜</b>

u對文體加下劃線

strong對文本加強效果，相當于粗體

big在目前文字大小的基礎再增大一級

small在目前文字大小的基礎再減小一級

sup上标

sub下标

em強調文本，通常以斜體顯示

空格 &amp; nbsp;

大于号(&gt;) &amp; gt;

小于号(&lt;) &amp; lt;

引号(") &amp; quot;

版權号 &amp; copy;

段落标簽：為文字分段落

– 特點：自動換行，上下留白;

上下有一定的空間

br換行标簽

強制換行

強制分段

屬性size: 水準線的高度 粗細 可以1px

屬性noshade: 設定純色效果，設定hr的陰影，如果不要陰影隻要将noshade加入即可

屬性width: 設定寬度，線上下間隔

屬性color: 設定顯示的顔色

屬性align: 分割線的對齊方式，left左對齊, right右對齊, center居中對齊

加紅加粗傾斜效果

– <b>案例1</b>

ol有序清單

ul無序清單

ol每一個清單項li都有一個序号

ul每一個清單項li都是一樣的圖案

ol和ul有一個共同屬性，

type屬性：設定有序清單的序号和無序清單的圖案

– ol的type屬性取值 1(預設的),a,i,a,i

– ul的type屬性取值 circle空心圓圈,disc實心圓點(預設的),square實心正方形

還有 dl自定義清單和嵌套清單

a标簽

href屬性:被點選後跳轉到哪一個網頁

target屬性:指的是跳轉後的目标檔案的打開位置

可以取值:

– _self, 在目前視窗中打開目标檔案，隻是target的預設值，

– _blank, 在一個空白的新視窗打開目标檔案

– _top,在頂層架構中打開網頁，同一個頁面。

這個目标使得文檔載入包含這個超連結的視窗，

用 _top 目标将會清除所有被包含的架構并将文檔載入整個浏覽器視窗。

– _parent,在目前架構中的上一層架構打開網頁，父和子兩個頁面有關系的。

這個目标使得文檔載入父視窗或者包含來超連結引用的架構的架構集。

如果這個引用是在視窗或者在頂級架構中，那麼它與目标 _self 等效。

– framename, 在指定的架構内打開被連結文檔。

可以跳到網站,或者直接跳轉本地路徑的網頁html檔案

點我

還是跳到本頁面

本頁面打開

新的空白頁面打開

站内連結

站外連結

郵箱連結給某某寫信

内容

屬性src：圖檔路徑

– 1.絕對路徑 https://www.baidu.com/logo.png

– 2.相對路徑：相對本檔案所在的檔案夾

— 有兩種路徑格式：

a. ./表示本檔案夾 b. …/上一層檔案夾

屬性width:圖檔寬度，可以使用像素，也可以百分比；預設則顯示圖檔原始寬度

屬性height:圖檔高度，可以使用像素，也可以百分比；預設則顯示圖檔原始高度

– 不要同時設定寬度和高度都使用百分比，因為圖檔會等比例放大或者縮小

屬性atl：圖檔顯示有問題的代替文本

屬性align：設定圖檔的垂直對齊方式(居上中下)和水準對齊方式(居左中右)

屬性title：滑鼠移動到圖檔上面時顯示的文字

圖檔輪播圖

– img

設定一個定時器

function 函數名(參數){函數體};

– 調用：函數名(實際參數);

也可以用匿名函數(不推薦)

var fun1 = function(參數){函數體};

– 調用 fun1(實際參數);

格式：

– window對象是dom中的内置對象，這個對象又稱為全局對象

– window.setinterval(code.millisec);

— code:代碼段

a.“正常js代碼”

代表：

– 設定一個定時器，這個定時器每隔millisec毫秒會觸發一次，每次都會執行code代碼段

– window對象可以不寫，直接調用setinterval方法也可以，但是建議不寫

window.onload事件，當頁面加載完畢之後才會觸發

給頁面加載事件綁定函數：

方式一:

window.onload = 函數名;

function 函數名(){}

不推薦使用

方式二:

window.onload = function(){ // 匿名函數

設定定時器

}

使用window.onload事件，是為了防止頁面沒加載完畢就觸發事件

table定義表格

caption定義表格标題

th定義表格的頭，自動加黑加粗

tr定義表格的一行

td定義表格單元，包含在tr标簽中

thead定義表格的表頭

tbody定義表格的主體

tfoot定義表格的頁腳（腳注）

col定義用于定義表格列的屬性，隻能在表格或colgroup标簽中使用此标簽

colgroup定義表格列的分組，此标簽隻能用在table标簽的内部。

table标簽的屬性：

border:表格邊框的高度，機關px像素,預設是0，不顯示

bgcolor:表格背景顔色rgb(x,x,x),#xxxxxx,colorname；不贊成使用,請使用樣式代替。

background:設定表格背景圖檔

width:表格的寬度，像素px或百分比(按比例占整個)

height:表格的高度，像素px或百分比(按比例占整個)

align:水準對齊方式有：左對齊left,右對齊right,居中對齊center;不贊成使用,請使用樣式代替。

cellpadding:單元邊沿(邊框)與其内容之間的空白。

cellspacing:規定單元格之間的空白。

td合并單元格屬性

colspan:單元格水準合并，值為合并的單元格的數目；表示跨幾行

rowspan:單元格垂直合并，值為合并的單元格的數目；表示跨幾列

align屬性用在table上表示整個表格的對齊方式 用在tr上表示行中所有單元格内容的對齊方式 用在td上表示某一個單元格内容的對齊方式

表單form不是表格

- action:指定處理表單中使用者輸入資料的送出目标url - method:指定向伺服器傳遞資料的http方法，主要有get和post方法，預設是get。 -- 注意：當隻為取得和顯示少量資料時可以使用get方法, -- 一旦涉及資料的儲存和更新，即大量的資料傳輸時則應當使用post方法。 - enctype:指定資料發送時的編碼類型。 - target:用于指定在浏覽器中哪個架構中顯示伺服器的響應html，預設是目前架構。此屬性很少使用。 - onsubmit和onreset:指定送出和重置事件觸發時運作的js。 - accept和accept-charset:分别用來指定伺服器程式接收的mime類型和字元編碼。

文本框(單行)

多行文本框

–

密碼框(特殊文本域)

密碼框并不能保證安全，僅僅使得周圍人看不見輸入的内容，在傳輸過程中還是以明文傳輸， 為保證安全可采用資料加密技術

隐藏域

是用來收集或發送資訊的不可見元素，網頁的通路者無法看到隐藏域，但是當表單被送出時，隐藏域的内容同樣會被送出

複選框

單選按鈕

檔案上傳框

下拉選擇框

表示本選項被選中 ...

送出按鈕

– value值可以在頁面顯示出來

複位按鈕

普通按鈕

– onclick:通過指定腳本函數來定義按鈕的行為，就是js事件

frameset屬性

– cols:用“像素數”或百分比分隔左右視窗，其中“”表示剩餘部分

– rows:用“像素數”或百分比分隔上下視窗，其中“”表示剩餘部分

– frameborder:設定架構的邊框，其值隻有0和1。0表示沒有邊框，1表示顯示邊框，邊框是無法調整粗細的

– framespacing:表示架構與架構之間的空白距離

frame屬性

– bordercolor:設定邊框顔色

– border:設定邊框粗細

– name:架構的名字，在設定超連結時用其作為架構的标記

– scrolling:設定是否顯示滾動條，yes表示顯示，no表示不顯示，auto則是根據實際情況自動調整

– noresize:如果設定了noresize屬性，那麼架構的大小是固定的，如果不設定此屬性，則架構大小可用滑鼠進行調整

– marginwidth:設定内容與視窗左右邊緣的距離，預設為1

– marginheight:設定内容與視窗上下邊緣的距離，預設為1

– width/height:架構的寬度及高度，預設為width=“100”,height=“100”

– align:對齊方式，可選值為: left左,right右,top頂部,middle中間,bottom底部