HTML基礎-01-有解無憂

HTML基礎知識

HTML：超文本標記語言，是一種使用結構化Web網頁（標準制定者：W3C）及其內容的標記語言，

發展程序：XHTML5，HTML5，XHTML1.0,HTML4.01，HTML3.2

HTML5特性：

兼容性，效率，安全性

實用性：新增元素都是對現有網頁和用戶習慣進行跟蹤、分析和概括出來的

分離：將結構和樣式完全分離，提高復用率

簡化，通用性，無插件

C/S架構軟體（C：客戶端，S：服務器）

客戶端：用戶提供客戶端來使用軟體

　　　　服務器用來處理軟體的業務邏輯

特點：　必須安裝之后才能使用

　　　　軟體更新時，服務器和客戶端都需要更新

　　　　軟體無法跨平臺使用

　　　　軟體客戶端和服務器間的通信采用自有協議，安全性好

B/S架構軟體（B：瀏覽器，S：服務器）

特點：網站，利用網站使用軟體

　　不需要安裝便可使用

　　　軟體更新，客戶端不需要更新

　　　軟體可以跨平臺使用

　　　客戶端和服務器間采用HTTP通信協議，安全性差

HTML規范寫法：

<!DOCTYPE html>

<head>

　　<stype>CSS樣式</stype>

</head>

<body>

</body>

</html>

具體解釋：

<html> </html>：根標簽，表示整個網頁，包含兩個屬性<head><body>,lang="en"英文，lang="zh"中文

<head> </head>：檔案頭部，描述檔案的各種資訊和屬性，包括網頁標題----此處內容不會顯示在網頁上，用戶看不見，給瀏覽器看

　　　　<meta http-equiv="refresh" content="3;url=http://www.">三秒重繪頁面

字符集：定義當前檔案使用的字庫

　　　　作用：編碼和解碼采用的規則，出現亂碼的原因：編碼和解碼采用的字符集不同，

　　　　常見的字符集（charset）：

　　　　　　UTF-8：國際標準字庫

　　　　　　ASCII

　　　　　　GBK/gb2312：中國字庫，國家標準

注釋：為代碼添加適當注釋，僅在編輯文本情況下可見，在瀏覽器頁面不會顯示

語法：

DOCTYPE作用：

　　DOCTYPE宣告在檔案最前面，告訴瀏覽器以何種方式渲染頁面，包含二種模式：嚴格模式、混雜模式，

　　嚴格模式的排版和JS運作模式是以該瀏覽器支持的最高標準運行，

　　混雜模式，向后兼容，模擬老式瀏覽器，防止瀏覽器無法兼容，

HTML屬性和值：

屬性：用于修飾元素，必須位于開始標簽里，一個元素的屬性不止一個，多個屬性用空格隔開

每個屬性都有值：屬性和屬性的值之間用等號鏈接

　　　　　　　　屬性的值包含在引號當中

　　　　　　　　屬性總是以名稱/值對的形式出現

<header>網頁頭部 <hgroup>一個標題組

<main>網頁主體 <article>網頁中的一塊內容

<footer>網頁底部 <section>一個區塊

<nav>導航 <aside>輔助資訊

以上均為塊元素，獨占一行，

<q>短參考 <blockquote>長參考

標題與段落

標題：h1-h6等級（從小到大），默認加粗，具有換行符，不能嵌套

　　h1+h2+h3：并行顯示 h1>h2>h3：嵌套顯示

　　h1{標題}*10+tab鍵=創建10個<h1>標題</h1>

　　h1{$}*10+tab鍵=1,2,3.....10個標簽

段落：<p>...</p>

字符物體

有些東西在瀏覽器中打不開，需要使用字符物體

&nbsp；空格

&emsp; 全角空格

¥ 人民幣符號￥

> 大于號>

< 小于號<

快捷符號

+：標簽并行關系

*：創建多個標簽，div*5+tap

{}:設定內容

（）：對內部的內容，（tr>td*4）*5

[]:設定屬性，div[id=demo class]

@:設定$符號的起始位置

$:設定起始位置，div{$@4}*5+tap鍵=4,5,6,7,8

文本修飾標簽

強調：<strong> </strong>(加粗)

　　　<em> </em>(斜體)

<i> </i>：斜體；<b> </b>：加粗

區別：1.寫法和展示效果有區別，一個加粗，一個斜體

　　　2.strong的強調性更強，em稍弱

上標/下標：<sup>上標 </sup> /////<sub>下標 </sub>

洗掉文本，插入文本：<del> </del>/////<ins> </ins>

　　　　　　　　　　兩者配合使用

圖片標簽和屬性

<img>標簽設定高度height，寬度width

圖片格式：

　　　　jpg(jpeg):支持的顏色豐富，不支持透明效果，適合顯示圖片

　　　　GIF：支持的顏色較少，支持簡單透明，支持動圖

　　　　png:支持顏色豐富，支持復雜透明

　　　　webp:google專門為頁面設計一種圖片格式，支持顏色豐富、支持復雜透明、支持動圖，并且占用記憶體特別小，集各種優點，兼容性差

　　　　通過base64編碼的圖片（背景圖片必須快速出現），base64可以將圖片轉換成字串，直接在網頁中使用，

注意：效果一致，用小的；效果不一致，用效果好的；

音頻標簽

controls:用來設定用戶是否控制音頻播放；沒有屬性值，允許用戶播放就加（有音頻），不允許就不加（無音頻）

autoplay：設定音樂是否自動播放，默認不會

例：<aduio controls autoplay loop(回圈播放）>

　　　　對不起，瀏覽器不支持此標簽

　　 </aduio>

視頻標簽

<embed>標簽：定義嵌入插件，以便播放多媒體資訊，

<object>標簽：定義一個嵌入物件，用于在網頁中插入多媒體資訊（圖片，音頻，視頻）

　　object功能強大，用于替代img

超鏈接

用于引入檔案的地址路徑，相對路徑，絕對路徑，

用 # 號來創建固定鏈接

target:改變鏈接的打開方式

　　　　_self：在當前頁面打開

　　　　_blank：新視窗打開（慎用）

　　<base target='_blank'>:改變標簽的默認行為

錨點

給標簽設定name或id屬性，通過<a href='https://www.cnblogs.com/huaweimian/p/#'>鏈接錨地am，鏈接到當前頁面中的指定位置，或其他頁面的指定位置，

例：當前頁面內錨點：

　　　　<a href='https://www.cnblogs.com/huaweimian/p/#top’>回傳頂部

　　其他頁面：

　　　　跳轉<a href='https://www.cnblogs.com/huaweimian/p/地址#middle'>進入另一個頁面的中間位置</a>

　　　　中間位置設定錨點：<p id=‘middle’>

串列

無序串列：<ul> </ul>，無先后之分；串列項：<li> </li>

ul/li必須同時出現，不能單獨書寫，嵌套一個/多個li，ul只能放li標簽，并不能放其他內容

li：type屬性修改：disc:默認實心圓；

　　　　　　　　circle:空心圓；

　　　　　　　　square:實心方塊；

有序串列：<ol> </ol> <li> </li>

li：type屬性設定專案符號

　　　　　　　　A大寫英文字母

　　　　　　　　a小寫英文字母

　　　　　　　　1阿拉伯數字

　　　　　　　　I大寫羅馬數字

　　　　　　　　i小寫羅馬數字

　　start:設定串列符號從第幾個開始排列，屬性值只能是阿拉伯數字

　　reversed：設定串列符號的倒序，會會出現負號，

例：

　　<li>

　　　　ddwws

　　</li>

</ol>

定義串列

給文本添加定義串列語意

dl:定義串列只能嵌套（一個、多個）dd/dt，兩者為同一級標簽，dd是dt的解釋、定義、說明

　　dt:定義標題容器級　　dd:定義描述容器級，跟在dt后面，解釋dt

例：<dl>

<dd>速度就是路程除以時間</dd>

</dl>

表格

1. 表格基礎：三層嵌套關系table>tr>th|td

table:定義表格容器

tr：定義行

th：定義表頭

td：定義單元格，最簡單的表格要求每一行單元格個數相同

2. 屬性

border：設定表格的邊框，外邊框的寬度

borde-rcolor:設定邊框的顏色

height,weight:設定高寬度

align:設定表格的對齊方式center,left,right

cellspacing:設定邊框與邊框之間的距離

cellpadding:設定內容與邊框之間的距離

background:設定表格的背景圖片

bgcolor:設定表格的背景顏色

Summary:表格隱藏資訊，用于提高SEO

th/td/tr標簽

table>tr>td(th)

tr:行語意，align:設定當前單元格中文本的水平對齊方式left,center,right

bgcolor,background:設定背景顏色或背景圖片

td（th）:單元格語意，th文本具有默認加粗，居中的效果，容器嵌套任何東西

bgcolor,background:設定背景顏色和背景圖片

colspan:列合并，左右合并，橫 rowspan：行合并，上下合并，縱

練習：將表格合并成如下形式

border-collapse:collapse;設定邊框的合并

表格標題：caption;只有一個表題

表頭：thead

主體部分：tbody

底部：tfoot

<table>

<thead>

(tr>td*5)*2+tab鍵

</thead>

<tbody>

(tr>td*5)*5+tab鍵

</tbody>

</table>

3. tr:first-child{設定第一行}

tr:nth-child(2n){設定奇、偶行進行操作}

創建表格時，如果沒有使用tbody，瀏覽器會自動添加tbody，并且將所有的tr都添加到tbody中，所以tr的父元素并不是table而是tbody，

表單

1. form表單：用來收集用戶資料，并提交到對應的地址，

功能性標簽，不是結構性

name:表單的名稱 action：設定表單提交的地址 method:設定資料提交的方式（GET,POST）

target：頁面打開方式（_self,_blank,_parent,_top,framename）

表單中的控制元件：textarea文本域，select下拉串列，input輸入框，button按鈕

textarea與label標簽:多行文本域、多行文本輸入框

rows設定行高，數字 cols設定列寬，數字----代表位元組

label表單控制元件（label input）定義標注 for規定label系結到哪個表單控制元件

一種方法：<form action=’./create’ method=’get’ target=’_blank’>

</form>

另一種：將表單控制元件寫在label元素內，實作聯動

<label for=’description’>---------不需要加id，此處去除

</label>

</form>

Select標簽

Select創建單選或多選選單

multiple:設定多選 size設定顯示在頁面上的串列項數

Option用來定義下拉串列中的一個選項，屬性：selected設定默認被選中的串列項（布爾型）注意：內容只能是文本，不能出現標簽

Optgroup定義選項組： labeltext為選項組規定描述

</optgroup>

</optgroup>

</select>

</form>

button定義按鈕

type規定按鈕型別（button reset submit）

input輸入語意單標簽，搜集用戶資訊

type屬性：

text單行文本框，文本輸入框（默認型別）

pattern規定輸入欄位的值的模式或格式，錯誤輸入會提示

Pattern=’[0-9]{2,5}’：數字0-9,2-5位

Password密碼輸入框

radio單選框單選框要統一設定name屬性，value設定不同值，label標簽說明

checkbox復選框

input:password+tab鍵===<input type=’password’>

input:radio+tab鍵===<input type=’radio’>

radio單選框

例：設定一個性別選項

Checkbox多選框

image圖片

file文本域

hidden隱藏文本

用戶看不見，后端可見

button普通按鈕

沒有任何功能

submit提交按鈕

reset重置按鈕

按下系統資料重置

2. button標簽之間所有內容都是按鈕的內容，比如文本或者多媒體內容

三種型別：button,submit,reset

<button>按鈕</button>：默認submit提交按鈕

3. button與input設定標簽區別

設定內容不一樣：button在標簽之間設定內容，input在value屬性中設定內容

button內容可以包含其他標簽，input不能渲染其他標簽

4. 表單控制元件通用屬性

<value:定義送往服務器的選項值(后)

<name:定義文本區的名稱(前)

<autofocus:自動獲取焦點：打開一個頁面，游標自動出現在某一地方

<placeholder=“”:未輸入任何值時顯示的內容

<disabled:該文本域是禁用的，變成灰色，不能使用

<readonly:該文本域是只讀的

<maxlength/minlength:規定最大/小字符數（textarea、input）

<required:文本區域必填（textarea、input）

5. 廢棄標簽：b加粗,i斜體字,u下劃線,s洗掉線

其他標簽：pre:預格式化原樣輸出

Strong:強調，加粗 em:強調，斜體字 br:換行（單）

Code:單行代碼 ins:下劃線 hr:分割線（單）

del:洗掉線 abbr:定義縮寫

address:定義地址 iframe:行內框架

iframe:行內框架，參考外部資源（外部網頁），開發中不建議使用，中間內容不會被搜索引擎抓住

6. Placeholder占位符是用戶在input輸入框中輸入任何東西前的預定義文本，

給表單添加一個必填欄位

在input元素中加上required屬性就可以了，例如：<input type="text" required> 7.創建一組單選按鈕

單選按鈕只是input輸入框的一種型別，每一個單選按鈕都應該嵌套在它自己的label（標簽）元素中，所有關聯的單選按鈕應該擁有相同的name屬性，

8.創建一組復選框

checkboxes（復選框）就好比多項選擇題，正確答案有多個，復選框是input輸入框的另一種型別，

每一個復選框都應該嵌套在它自己的label（標簽）元素中，所有關聯的復選框應該擁有相同的name屬性，

注：通過添加checked屬性，設定某個單選按鈕或多選按鈕被默認選中，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/5420.html

標籤：Html/Css

上一篇：最全vue的vue-amap使用高德地圖插件畫多邊形范圍

下一篇：CSS基礎-02