HTML基礎之標籤

時間 2020-04-29

標籤 html 基礎標籤欄目 HTML 简体版

原文原文鏈接

HTML初識

HTML(Hpyer Text Markup Language的縮寫)譯爲「超文本標籤語言」，用來描述網頁的一種語言。所謂超文本，由於它能夠加入圖片、聲音、動畫、多媒體、一個文件跳轉到另一個文件，與世界各地主機的文件鏈接。css

HTML的做用就是用標記標籤來描述網頁，把網頁內容在瀏覽器中展現出來。【至關於人類的骨頭】html

HTML骨架格式

HTML標籤分類

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

HTML標籤關係

　　並列關係、父子關係、孫子關係。瀏覽器

文檔類型

<!DOCTYPE html>：不是HTML標籤，爲瀏覽器提供一項信息(聲明)，即HTML是用什麼版本寫的。

HTML版本服務器	年份網絡
HTML工具	1991post
HTML+優化	1993動畫
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

字符集

　　元數據（metadata）是關於數據的信息。

　　<meta> 標籤提供關於 HTML 文檔的元數據。典型的狀況是，meta 元素被用於規定頁面的描述、關鍵詞、文檔的做者、最後修改時間以及其餘元數據。

　　<meta> 標籤始終位於 head 元素中。元數據可用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘 web 服務，一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。name 和 content 屬性的做用是描述頁面的內容。

meta屬性：http-equiv、name、content。

　　http-equiv:把content屬性值關聯到http頭部。

- - Content-Type（瀏覽器接受的文檔類型，通常是text/html）
  - refresh(網頁刷新，以秒爲單位)
  - expires(設定網頁到期時間，一旦過時，必須到服務器上重傳)

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Refresh" content="2">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
<meta http-equiv="expires" content="6 Jun 2016"/>

　　name:把content屬性關聯到一個名稱。

- - keywords(搜索關鍵字，用於搜索引擎抓取信息的顯示)
  - description（搜索到網站後顯示的網頁內容的描述）
  - author（站點製做者信息）
  - generator(用以說明生成工具)
  - name也能夠根據特定的功能自定義，在新浪網中有使用360認證和搜狐認證

<meta name="keywords" content="搜索關鍵字">
<meta name="description" content="簡要描述">
<meta name="author" content="http://cnblogs.com/suoning">
<meta name="generator" content="用以說明生成工具">

　　content:定義與http-equiv或name屬性相關的元信息，是必要的屬性。

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

HTML標籤的語義化

標籤語義化：標籤的含義。即一眼看去，就知道哪一個是重點，結構是什麼，知道每塊的內容是幹撒的。

遵循的原則：先肯定語義的HTML，再選合適的CSS。核心：合適的地方給一個最爲合理的標籤。

爲何要有語義化標籤：

　　一、方便代碼的閱讀和維護

　　二、同時讓瀏覽器或是網絡爬蟲能夠很好地解析，從而更好分析其中的內容

　　三、使用語義化標籤會具備更好地搜索引擎優化

HTML經常使用標籤

排版標籤：

　　標題標籤

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

　　段落標籤

<p>

　　水平線標籤

<hr />

　　換行標籤

<br />

Div span標籤：2個盒子

<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屬性值定義爲」#」，表示該連接暫時爲一個空連接
不只能夠建立文本超連接，在網頁中各類網頁元素。

錨點標籤（難點）

經過建立錨點連接，用戶可以快速定位到目標內容

一、使用」a href=」#id名 「連接文本 /a」建立連接文本：<a href=」#live」>我的生活</a> 二、使用相應的id名稱注跳轉目標的位置：<h3 id=」live」>我的<h3>

Base標籤

<base />

<base target=」_blank」>:base能夠設置總體連接的打開狀態。

特殊字符標籤（理解）

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

註釋標籤

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

相對路徑：

圖像文件和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>標籤，就像一個容器，能夠容納全部的元素。

ps:表格沒有列的概念，只有行和單元格的概念。

表格屬性

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

表頭標籤

表頭標籤：表頭單元格(thead)的意思，與單元格(td)的區別：居中、加粗。

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

<tr >

<th>屬性名</th>

<th>經常使用屬性值</th>

</tr>

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

<tr >

<td>屬性名</td>

<td>經常使用屬性值</td>

</tr>

表格結構（瞭解）

<thead>cccc</thead>

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

<tbody>qqq</tbody>

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

表格標題

表格標題：caption

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

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

</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	由用戶自定義	控件的名稱，該名稱若是相同，表示一組，好比type=radio,name=sex，表示男、女爲一組，只能默認選中一個單選框。
value	由用戶自定義	input控件中的默認文本值
size	正整數	input控件在頁面中的顯示寬度
checked	checked	定義選擇控件默認被選中的項
maxlength	正整數	控件容許輸入的最多字符數

Label標籤

Label標籤爲input元素定義標註（標籤）。

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

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

第一種寫法：for屬性能夠針對label內的或者label外的。
<label for =」male」>male</label> <input type=」radio」 name=」sex」 id=」male」 value=」male」>
第二種寫法：

<label for =」male」>

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

</label>

Textarea控件（文本域）

　　若是須要輸入大量的信息，就須要用到<textarea cols=」每行中的字符數」 rows=」顯示的行數」>文本內容</textarea>

下拉菜單

<select> 　　<option selected="selected">zxxxxx</option> 　　<option>zxxxxx</option> 　　... </select>

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

表單域

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

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

action屬性：用於指定接收並處理表單數據的服務器程序的url地址。若是省略 action 屬性，則 action 會被設置爲當前頁面。

Method屬性：用於設置表單數據的提交方式，其取值爲get或post。

name屬性：用於指定表單的名稱，以區分同一個頁面中的多個表單。

其餘屬性	年份
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集）。
action	規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete	規定瀏覽器應該自動完成表單（默認：開啓）。能夠把表單的 autocomplete 設置爲 on，同時把特定的輸入字段設置爲 off，反之亦然。適用於 <form> 以及以下 <input> 類型：text、search、url、tel、email、password、datepickers、range 以及 color。
enctype	規定被提交數據的編碼（默認：url-encoded）。
method	規定在提交表單時所用的 HTTP 方法（默認：GET）。
name	規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate	規定瀏覽器不驗證表單。
target	規定 action 屬性中地址的目標（默認：_self）。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。