HTML常用標簽及表單標簽

阿新 • • 發佈：2019-01-18

www. sel family 居中 method 文本 borde href 表單

HTML初識

HTML(Hpyer Text Markup Language的縮寫)譯為“超文本標簽語言”，用來描述網頁的一種語言。所謂超文本，因為它可以加入圖片、聲音、動畫、多媒體、一個文件跳轉到另外一個文件，與世界各地主機的文件連接。

HTML的作用就是用標記標簽來描述網頁，把網頁內容在瀏覽器中展示出來。

HTML骨架格式

技術分享圖片

HTML標簽分類

HTML標簽：帶有’<>’符號的元素。主要有2種標簽：雙標簽和單標簽。

HTML標簽關系

並列關系、父子關系、孫子關系。

文檔類型

<!DOCTYPE html>

字符集

<meta charset=”UTF-8”>

UTF-8是目前最常用的字符集編碼方式，常用的字符集編碼包括：gb2312、GBK（包含繁體字）、UTF-8

HTML標簽的語義化

HTML常用標簽

排版標簽

標題標簽

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

段落標簽

<p>

水平線標簽

<hr />

換行標簽

<br />

Div span標簽

<div>aaaa</div>
<span>eeee</span>

Div、span 有2個盒子。

文本格式化標簽

<strong></strong>、<b></b>:文字以粗體方式顯示

<i></i>、<em></em>:文字以斜體方式顯示

<s></s>、<del></del>：文字以加刪除線方式顯示

<u></u>、<ins></ins>：文字以加下劃線方式顯示

圖像標簽（重點）

<img src=”圖像URL” />

<img />標記屬性

屬性	屬性值	描述
src	URL	圖像的路徑
alt	文本	圖像不能顯示時的替換文本
title	文本	鼠標懸停時顯示的內容
width	像素	設置圖像的寬度
height	像素	設置圖像的高度
borde	數字	設置圖像邊框的寬度

鏈接標簽

<a href=”跳轉目標” target=”目標窗口的彈出方式”>文本或圖像</a>

href:用於指定鏈接目標的url目標，當為標簽應用href屬性時，它就具有了超鏈接的功能。

target:用於指定鏈接頁面的打開方式，其取值self和blank兩種，其中self為默認值，blank為在新窗口中打開方式。

PS:

外部鏈接需要添加http://baidu.com
內部鏈接
如果沒有確定鏈接，href屬性值定義為”#”，表示該鏈接暫時為一個空鏈接
不僅可以創建文本超鏈接，在網頁中各種網頁元素。

錨點標簽（難點）

通過創建錨點鏈接，用戶能夠快速定位到目標內容

1、使用”a href=”#id名 “鏈接文本 /a”創建鏈接文本：<a href=”#live”>個人生活</a>

2、使用相應的id名稱註跳轉目標的位置：<h3 id=”live”>個人<h3>

Base標簽

<base />

<base target=”_blank”>:base可以設置整體鏈接的打開狀態。

特殊字符標簽（理解）

特殊字符	描述	字符的代碼
	空格符
<	小於號	<
>	大於號	%gt;

註釋標簽

相對路徑和絕對路徑（重點、難點）

相對路徑：

圖像文件和HTML文件位於同一文件夾：只需輸入圖像文件的名稱即可，如<img src=”logo.gif”>。
圖像文件位於HTML文件的下一級文件夾：輸入文件夾名和文件名，之間用”/”隔開，如<img src=”img/img01/logo.gif”>
圖像文件位於HTML文件的上一級文件夾：在文件名之前加入”../”，如果是上兩級，則需要使用”../../”,以此類推，如<img src=”../logo.gif” />

絕對路徑：

“D:\web\img\logo.gif”，或完整的網絡地址，例如：http://www.itcase.cn/images/logo.gif

列表標簽

無序列表ul（重點）

<ul>

<li>蘋果</li>

<li>香蕉</li>

<li>蘋果</li>

<li>蘋果</li>

</ul>

有序列表（了解）

<ol>

<li>蘋果</li>

<li>香蕉</li>

<li>蘋果</li>

<li>蘋果</li>

</ol>

自定義列表（理解）

<dl>

<dt>重慶</dt>

<dd>渝北區</dd>

<dd>江北區</dd>

<dd>沙坪壩區</dd>

<dd>南岸區</dd>

</dl>

表格table（會使用）

創建表格

<table>

<tr>

<td>單元格內的文字</td>

</tr>

</table>

<table>eee</table>:用於定義一個表格

<tr>eee</tr>:用於定義表格中的一行，必須嵌套在table標簽中，在table中包含幾對tr，就有幾行表格。

<td>eee</td>:用於定義表格中的單元格，必須嵌套在<tr>aaa</tr>標簽中，一對<tr>ddd</tr>中包含幾對<td>dd</td>,就表示該行中有多少列。（或多少個單元格）

PS:<tr>eee</tr>中只能嵌套<td>ddd</td>,<td>ddd</td>標簽，就像一個容器，可以容納所有的元素。

表格屬性

屬性名	含義	常用屬性值
border	設置表格的邊框（默認border="0"無邊框）	像素值
cellspacing	設置單元格與單元格邊框之間的空白間距	像素值（默認為2像素）
cellpadding	設置單元格內容與單元格邊框之間的空白間距	像素值（默認為1像素）
width	設置表格的寬度	像素值
height	設置表格的高度	像素值
align	設置表格在網頁中的水平對齊方式	left,right,center

表頭標簽

表頭標簽：<th>aaa</th>

單元格標簽：<td>bbbb</td>

表格結構（了解）

<thead>cccc</thead>

定義表格的頭部，位於<table>eee</table>之中：<thead>cccc</thead>。一般包含網頁的logo和導航等頭部信息。

<tbody>qqq</tbody>

定義表格的主體，位於<table>eee</table>之中，一般包含網頁中除頭部和底部之外的其他內容。

表格標題

表格標題：caption

<table>

<caption>我是表格標題</caption>

</table>

caption標簽必須緊隨table標簽之後。您只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。

合並單元格（難點）

跨行合並：rowspan 跨列合並：colspan

合並單元格的思想：將多個內容合並的時候，就會有多余的東西，把它刪除。例如把3個td合並成一個，就多余了2個，需要刪除。

公示：刪除的個數=合並的個數-1

合並順序：先上先左

總結表格

表格提供了HTML中定義表格式數據的方法
表格中由行中的單元格組成
表格中沒有列元素，列的個數取決於行的單元格個數
表格不要糾結於外觀，那是css的作用

表單標簽（掌握）

Input控件

<input />標簽是單標簽，type屬性是最基本屬性，其取值有多種，用於指定不同的控件類型。

屬性	屬性值	描述
type	text	單行文本輸入框
	password	密碼輸入框
	radio	單選按鈕
	checkbox	復選框
	button	普通按鈕
	submit	提交按鈕
	reset	重置按鈕
	image	圖像形式的提交按鈕
	file	文本域
name	由用戶自定義	控件的名稱
value	由用戶自定義	input控件中的默認文本值
size	正整數	input控件在頁面中的顯示寬度
checked	checked	定義選擇控件默認被選中的項
maxlength	正整數	控件允許輸入的最多字符數

Label標簽

Label標簽為input元素定義標註（標簽）。

作用：用於綁定一個表單元素，當點擊label標簽的時候，被綁定的表單元素就會獲得輸入焦點。

For 屬性規定label與哪個表單元素綁定。

<label for =”male”>male</label>

<input type=”radio” name=”sex” id=”male” value=”male”>

Textarea控件（文本域）

如果需要輸入大量的信息，就需要用到<textarea cols=”每行中的字符數” rows=”顯示的行數”>文本內容</textarea>

下拉菜單

<select>

<option>zxxxxx</option>

<option>zxxxxx</option>

<option>zxxxxx</option>

<option>zxxxxx</option>

</select>

<select></select>中至少應該包含一對<option></option>,在option中定義selected=”selected”時，當前項即為默認選中項。

表單域

Form表單用於創建一個表單，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下：

<form action=”url地址” method=”提交方式” name=”表單名稱”>各種表單控件</form>

action屬性用於指定接收並處理表單數據的服務器程序的url地址。Method用於設置表單數據的提交方式，其取值為get或post;name用於指定表單的名稱，以區分同一個頁面中的多個表單。

HTML常用標簽及表單標簽

www. sel family 居中 method 文本 borde href 表單 HTML初識 HTML(Hpyer Text Markup Language的縮寫)譯為“超文本標簽語言”，用來描述網頁的一種語言。所謂超文本，因為它可以加入圖片、聲音、動畫、多媒體、一個

HTML常用標簽及表單標簽

HTML初識

HTML骨架格式

HTML標簽分類

HTML標簽關系

文檔類型

HTML標簽的語義化

HTML常用標簽

排版標簽

標題標簽

文本格式化標簽

鏈接標簽

錨點標簽（難點）

Base標簽

特殊字符標簽（理解）

註釋標簽

相對路徑和絕對路徑（重點、難點）

列表標簽

無序列表ul（重點）

創建表格

表格屬性

表頭標簽

表格結構（了解）

表格標題

合並單元格（難點）

總結表格

表單標簽（掌握）

Input控件

Label標簽

下拉菜單

表單域

相關推薦