技術標籤：筆記 html

一: HTML基礎標籤

(在HTML中程式碼的輸入需要是英文符號)

1.1標籤語法

1.1.1 HTML的標籤分為成對標籤和單獨標籤兩種

成對標籤由首標籤和尾標籤組成成對標籤之間的內容還可以包裹其他標籤

單獨標籤作用是在網頁的相應位置插入內容

在HTML頁面內,直接寫文字也可以顯示出來,但是不能用CSS 控制其樣式,寫的內容都要寫在標籤內部這樣方便控制

標籤屬性要寫在開始標籤內,寫到標籤名稱之後(單標籤寫在標籤內,結束符 “/”的前面),與起始標籤名稱之間至少保留一個空格,屬性名寫法大小寫不敏感,屬性值要用雙引號或單引號包起來,屬性值區分大小寫(大小寫敏感),屬性與屬性之間至少保留一個空格.

屬性:開始標籤內部 class:類,屬性名 “屬性值”(除重複用到同一個樣式,其餘名字不要重複)

屬性名和標籤名之間要有一個空格

在頁面上展示的所有內容都要寫在body標籤內部

2.1****標籤分類

2.1.1塊級元素(塊級標籤)

和級聯元素( 行級標籤、行內標籤或內聯元素 ）

<標籤按照性質劃分一般分為三類>

塊級標籤

可以設定寬高

獨佔一行

塊級標籤換行會造成首位都換行

行內塊標籤

可以設定寬高

不獨佔一行

行標籤

不可以設定寬高(內容區的標籤）

不獨佔一行

2.1.2文字標籤

標題標籤<h 1>~<h 6>

標題標籤是塊級標籤，緊跟起始標籤前和結束標籤後的內容要換行展示

段落標籤

塊級標籤

換行符

轉義字元

在HTML頁面內有一些特殊的符號是不能直接打出來的這時候就需要用轉義字元來表示特殊的符號

瀏覽器在解析HTML檔案的時候是按照流式佈局解析.

流式佈局:從上到下從左到右依次解析

2.1.3語義標籤

header元素

Footer元素

H group 元素

N av 元素

Aside元素

Section元素

Article元素

3.1超文字連結

a標籤是超文字連結標籤其中h ref屬性是a標籤獨有的屬性.屬性值要寫你要跳轉到的檔案路徑(u r l地址)

UL標籤名選擇器

標籤巢狀

無序列表:U l>l i *3 (l i標籤叫做列表項)

/* 去除列表前的小黑點 */

/* list-style: none; */

/* list-style: circle; */

/* list-style: square; */

有序列表:o l>l i

Up p e r-lat in:A’ B ’C

Upper-roman:l,ll

Low e r-lat in:a.b.c

Lower-roman:i,ii

定義標籤:D l>d t

標籤名選擇器寫多個選擇器的話,中間要用逗號隔開

類選擇器

路徑是分為三類:

相對路徑 :

”./”:同一目錄(資料夾) 下

“…/”上級目錄

絕對路徑:從檔案所在的碟符開始寫起,寫一個完整的路徑

根路徑:/

Cs s樣式寫在style標籤內部 style標籤一般放在title標籤下面只能寫在head標籤內部

二:表格製作

Table:

表格標籤(定義了表格的區域)

TR:

表示表格中具體的一行

TD:

表示的是表格中具體的一個單元格
(除了文字還可以放圖片也可以放另外的表格)

TH:

表示的是標題單元格（表格表頭），其文字內容會自動居中並加粗顯示

Caption:

表示的是表格的標題,必須包含在table標籤中,在tr外(會自動居中)

表格中需要承載的內容必須包含在TD或TH單元格標籤中

表格標籤的屬性：

border:
邊框線屬性，其值為邊框線的寬度

在設定完border="1"後，table表格就會顯示邊框線，但是視覺效果是兩根線，原因是表格的外邊框線和表格的每個單元格也會設定寬度為1的邊框線，由於單元格和單元格之間有預設的間距，因此給人的視覺效果是兩根線，如果要解決該問題，需要設定table標籤中的另外兩個屬性分別是：
cell spacing:單元格間距
cell padding:單元格和單元格中的內容之間的間距
具體寫法如下
<table border="1" cell spacing="0" cell padding="0"></table>

width:寬度其取值應該是p x或者是em

height:高度其取值應該是p x或者是em

合單元格的屬性一定是寫在TD標籤中

Col span:單元格水平跨度(行合併)(”xx”要合併幾個單元格_)要在相應的行數下面註釋掉相應的程式碼

Row span:單元格垂直跨度(列合併)(=”xx”要合併幾個單元格_)要在相應的行數下面註釋掉相應的程式碼

Border-collapse:collapse(邊框合併)

cell spacing=”0” cell padding=”0”(圖片邊框合併)
結合標籤的語法是：
<td colspan="數字"></td> 數字在計算時要包含自己
<td rowspan="數字"></td>數字在計算時要包含自己

Text-align:控制文字排列方式

align: center（居中） left（左對齊） right（右對齊）文字水平對齊方向,如果將align屬性設定在表格

標籤中則表格中的內容不會居中，而是整個表格在網頁中居中

Background-color ：背景色
在為background-color屬性設定值時，可以直接使用顏色的英語名稱或使用紅綠藍三原色進行設定，注意三原色的值在設定時必須使用#開頭，#後跟六位十六進位制數，每兩位表示一個顏色。#FF FF FF #000000 #FF 0000
background-color的優先順序：TD或TH>tr>table

三:表單

表單標籤內不要巢狀表單標籤

1、form:

定義表單的區域(表單的範圍)

2、action:

提交的是URL地址

3、method:

提交的方法(get ,post)

4、input:輸入框

        type:輸入框的型別
        text:普通的輸入框
         password:密碼框
         checkbox:多選框
         radio:單選框
        （ label標籤中的id與input標籤中的Name的屬性值必須一樣）
         submit:提交按鈕
         reset:重置按鈕
         image:提交圖片
         file:上傳檔案(預設只能上傳一個 寫上multiple屬性可以上傳多個)
         button:按鈕

5、 name:

用來識別多個輸入框

6、value:

可選屬性初始值

7、max length:

可以在文字框裡面輸入的最大長度

8、checked:

預設選中搭配單選框(radio) 多選框(checkbox)使用

``單詞釋義

HTML是所有標籤的根標籤(開始標籤)

Head 頭部標籤

Title 檔案標題標籤

Body 檔案主題標籤

Div 區分（主要用於設定字、圖片、表格的擺放位置，也常常用於劃分頁面中的佈局結構）

在body標籤內容中,一個或多個空格、回車換行等寫法，在瀏覽器顯示頁面上只代表一個空白字元（一個漢字等於兩個字元）

Meta單標籤:一般用來定義頁面資訊的名稱,網頁使用的編碼字符集、關鍵字、作者等

Border :邊框

PX:邊框的粗細

Royal blue: 邊框顏色

Width:寬

Height:高

Style:樣式

U r l:路徑

Circle:圓環

Square:正方形

I m g :標籤是用來顯示圖片的

Sr c:寫圖片的路徑

(相對路徑前面的./是可以省略的)

Alt:當圖片顯示不成功的時候出現的內容

Target:連結頁面開啟的方式

Self:在原來的視窗開啟(預設值)

Blank:新開啟一個視窗

Top:

UL：標籤名選擇器

``快捷鍵

Ctr l +?:註釋（註釋的內容是不會顯示在瀏覽器上的）

CTRL+K或CTRL+O : 開啟資料夾選項(根目錄)

CTRL+N : 新建檔案

CTRL+S : 儲存瀏覽介面

shift+!: 生成HTML框架

CTRL+B:開啟或者關閉側欄

CTRL+X:刪除行

CTRL+P:命令面板