html頭部的標簽有哪些？

作為一個前端，經常寫html文檔，但是卻很少去在意頭部的標簽有哪些，也很少在意每個標簽的作用，下面我們來詳細了解下。

頭部的標簽，也就是寫在<head><head/>里。通常會有6個標簽：　

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title>

<base href="http://www.baidu.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">

<style type="text/css">

body {font-size:16px}
p {color:blue}
</style>
<script> document.write("Hello World!") </script>
</head> 
<body> 文檔內容...... </body> 
</html>

一、<title>元素。

1.title 標簽定義了文檔的標題，在HTML文檔中是必須的。它會展示在瀏覽器的工具欄上。

2.如果要展示一個圖標，可以再加一個<link>標簽，<link>標簽的 rel屬性為“icon”,后面的

href跟上圖片的地址。

<link rel="icon" href="圖片url">

二、<base>元素。

base標簽描述了基本的鏈接地址，該標簽作為HTML文檔中所有的鏈接的默認鏈接

　<head>
　　<base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" /> 
  </head> 　　
  <body> 　
   　<img src="banner7.jpg"/>
  </body>

上面的img標簽的src鏈接的地址就是base里的地址加上img里的地址。

三、<link>元素。

link標簽定義了文檔與外部資源之間的關系，它通常用于鏈接到樣式表。

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

四、<style>元素。

style標簽定義了HTML文檔的樣式，這個我們經常會使用到，都不會陌生。

五、<meta>元素。

meta標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。它常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。

元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。

// 編碼格式定義
<meta charset="utf-8"> 
// 為搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
// 為網頁定義描述內容:
<meta name="description" content="頭部標簽 & 使用">
// 定義網頁作者:
<meta name="author" content="Runoob">
// 每30秒鐘刷新當前頁面:
<meta http-equiv="refresh" content="30">

// 視圖層的參數定義
<meta
name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
 //    content屬性值 :
  //    width:可視區域的寬度，值可為數字或關鍵詞device-width
  //    height:同width
  //    intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放
  //   maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，
  //   maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。
  //   user-scalable:是否可對頁面進行縮放，no 禁止縮放

六、<script>元素。

script標簽用于加載腳本文件，比如說javascript,可以直接書寫js,也能用于鏈接外部的js文件。

<script>
    document.write("Hello World!")
</script>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

. HTML 初識

HTML 指的是超文本標記語言 (Hyper Text Markup Language)是用來描述網頁的一種語言。
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)

所謂超文本，有2層含義：

因為它可以加入圖片、聲音、動畫、多媒體等內容（超越文本限制 ）
不僅如此，它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接（超級鏈接文本 ）。

標題標簽       	<hx></hx>     
段落標簽     		<p></p>
水平線標簽			<hr />
 換行標簽       <br/>
 無語義標簽    <div></div>   和 <span></span>             注:這兩個標簽在后期經常使用

文本格式化標簽

<b></b>和<strong></strong>		 文字加粗
<i></i>和<em></em>	               	斜體
<s></s>和<del></del>	            	加刪除線
<u></u>和<ins></ins>		            加下劃線

圖片標簽

<img src="圖像URL" />	src  圖像路徑	圖像標簽	<img src="圖像URL" />

該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標簽的必需屬性。

屬性:

alt 文本,圖像不顯示時顯示文字<img src="" alt="">

title 文本,鼠標懸停時顯示內容<img src="cz.jpg" title="文本" />

width 圖像寬度<img src="cz.jpg" width="300" height="300" />

height 圖像高度<img src="cz.jpg" width="300" height="300" />

border 設置圖像邊框寬度<img src="cz.jpg" border="3" />

鏈接標簽

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

屬性：

href (鏈接地址)必須寫	用于指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，它就具有了超鏈接的功能			1. 外部鏈接需要添加 http:// www.baidu.com 2. 內部鏈接直接鏈接內部頁面名稱即可比如 < a href="index.html"> 首頁 </a > 3. 如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。 4. 不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
target (默認當前窗口打開,可新建窗口打開)	用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中_self為默認值，__blank為在新窗口中打開方式。

錨點標簽

id=""

錨點定位

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

使用相應的id名標注跳轉目標的位置。 (找目標)

base標簽

base 可以設置整體鏈接的打開狀態

base 寫到 <head> </head> 之間

預格式化標簽

標簽可定義預格式化的文本。

所謂的預格式化文本就是，按照我們預先寫好的文字格式來顯示頁面，保留空格和換行等。

表格標簽

<table> 定義表格標簽 <tr> 定義表格行 <td></td> 表格數據 </tr> </table>	border	設置表格邊框(默認border="0"無邊框)	<table> <tr> <td>單元格內的文字</td> ... </tr> ... </table>
	cellspacing	設置單元格與單元格之間的空白間距 (默認2像素)
	cellpadding	設置單元格內容與單元格邊框之間的空白間距 (默認1像素)
	width	設置表格的寬度
	height	設置表格的高度
	align	設置表格在網頁中的水平對齊方式 (三個屬性:left左 center中 right右 )	align="center" align="right"
	caption	caption 元素定義表格標題，通常這個標題會被居中且顯示于表格之上。	<caption>個人信息表</caption>
	rowspan="合并單元格的個數"	跨行合并	合并的順序我們按照先上后下先左后右的順序
	colspan="合并單元格的個數"	跨列合并	<td colspan="3"> </td>
	<caption></caption>	表格標題標簽
	<tr></tr><td></td>	標簽，他就像一個容器，可以容納所有的元素	<tr><td></td></tr>
	<th><td>	一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中	<th><td></td></th>
	<thead> 于定義表格的頭部。用來放標題之類的東西。<thead> 內部必須擁有 <tr> 標簽！	以上標簽都是放到table標簽中。	更好的給表格劃分結構
	<tbody> 用于定義表格的主體。放數據本體。	以上標簽都是放到table標簽中。
	<tfoot>放表格的腳注之類。	以上標簽都是放到table標簽中。

列表標簽

列表(ul里面只能包含li ,li里面可以包含標簽)	<ul><li></li></ul>	無序列表	1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。 2. <li>與</li>之間相當于一個容器，可以容納所有元素。 3. 無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！	里面只能包含li 沒有順序，我們以后布局中最常用的列表
	<ol><li></li></ol>	有序列表	所有特性基本與ul 一致。但是實際中比無序列表用的少很多。	里面只能包含li 有順序，使用情況較少
	<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> </dl>	自定義列表		里面有2個兄弟， dt 和 dd

input控件

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

<label> </label>

<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名"> </label>	第一種用法就是用label直接包括input表單。		當我們鼠標點擊 label標簽里面的文字時，光標會定位到指定的表單里面
<label for="sex">男</label> <input type="radio" name="sex" id="sex">	第二種用法 for 屬性規定 label 與哪個表單元素綁定。		當我們鼠標點擊 label標簽里面的文字時，光標會定位到指定的表單里面

文本域

通過textarea控件可以輕松地創建多行文本輸入框.

cols="每行中的字符數" rows="顯示的行數" 我們實際開發不用

select下拉列表

在option 中定義selected =" selected "時，當前項即為默認選中項。

form表單域

<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控件 </form>	action 屬性值:url地址	用于指定接收并處理表單數據的服務器程序的url地址。
	method 屬性值:get/post	用于設置表單數據的提交方式，其取值為get或post。
	name 屬性值:名稱	用于指定表單的名稱，以區分同一個頁面中的多個表單。

以上標簽基本包含了前端開發所需常用標簽.來自本人,黑馬程序員.傳智播客學習筆記.

以下是個人筆記整理,需要請關注私信我.

希望本人筆記能對各位有所幫助.

前端不難,難的在于東西多和雜.每天努力學習一點點,不放棄.

、常用html標簽

4.1 常用的 html 標簽

<!-- 1、成對出現的標簽：-->

<h1>h1標題</h1>
<div>這是一個div標簽</div>
<p>這個一個段落標簽</p>


<!-- 2、單個出現的標簽：-->
<br>
<img src="images/pic.jpg" alt="圖片">
<hr>

<!-- 3、帶屬性的標簽，如src、alt 和 href等都是屬性 -->
<img src="images/pic.jpg" alt="圖片">
<a href="http://www.baidu.com">百度網</a>

<!-- 4、標簽的嵌套 -->
<div>
   <img src="images/pic.jpg" alt="圖片">
   <a href="http://www.baidu.com">百度網</a>
</div>

提示:

標簽不區分大小寫，但是推薦使用小寫。
根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽)2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽2.2 單標簽是一個標簽組成，沒有標簽內容，比如: img標簽

4.2 小結

學習 html 語言就是學習標簽的用法，常用的標簽有20多個。
編寫 html 標簽建議使用小寫
根據書寫形式，html 標簽分為雙標簽和單標簽
單標簽沒有標簽內容，雙標簽可以嵌套其它標簽和承載文本內容

五、資源路徑

當我們使用img標簽顯示圖片的時候，需要指定圖片的資源路徑，比如:

<img src="images/logo.png">

這里的src屬性就是設置圖片的資源路徑的，資源路徑可以分為相對路徑和絕對路徑。

5.1 相對路徑

從當前操作 html 的文檔所在目錄算起的路徑叫做相對路徑

示例代碼:

<!-- 相對路徑方式1 -->
<img src="./images/logo.png">
<!-- 相對路徑方式2 -->
<img src="images/logo.png">

5.2 絕對路徑

從根目錄算起的路徑叫做絕對路徑，Windows 的根目錄是指定的盤符，mac OS 和Linux 是/

示例代碼:

<!-- 絕對路徑 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都會使用相對路徑，絕對路徑的操作在其它電腦上打開會有可能出現資源文件找不到的問題

5.3 小結

相對路徑和絕對路徑是 html 標簽使用資源文件的兩種方式，一般使用相對路徑。
相對路徑是從當前操作的 html 文檔所在目錄算起的路徑
絕對路徑是從根目錄算起的路徑

六、列表標簽

6.1 列表標簽的種類

無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

6.2 無序列表

<!-- ul標簽定義無序列表 -->
<ul>
   <!-- li標簽定義列表項目 -->
   <li>列表標題一</li>
   <li>列表標題二</li>
   <li>列表標題三</li>
</ul>

6.3 有序列表

<!-- ol標簽定義有序列表 -->
<ol>
   <!-- li標簽定義列表項目 -->
   <li><a href="#">列表標題一</a></li>
   <li><a href="#">列表標題二</a></li>
   <li><a href="#">列表標題三</a></li>
</ol>

6.4 小結

列表標簽有無序列表標簽(ul標簽)和有序列表標簽(ol標簽)
列表項目對順序有要求的時候使用ol標簽
列表項目對順序無要求的時候使用ul標簽

七、表格標簽

7.1 表格的結構

表格是由行和列組成，好比一個excel文件

7.2 表格標簽

<table>標簽：表示一個表格
     <tr>標簽：表示表格中的一行
         <td>標簽：表示表格中的列
         <th>標簽：表示表格中的表頭

示例代碼:

<table>
   <tr>
       <th>姓名</th>
       <th>年齡</th>
   </tr>
   <tr>
       <td>張三</td>
       <td>18</td>
   </tr>
</table>

表格邊線合并:

border-collapse 設置表格的邊線合并，如：border-collapse:collapse;

在線咨詢

上一篇：一個基本的HTML5模板「建議收藏」
下一篇：使用Jinja2模板引擎生成html報告

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html頭部的標簽有哪些？

. HTML 初識

、常用html標簽

4.1 常用的 html 標簽

4.2 小結

五、資源路徑

5.1 相對路徑

5.2 絕對路徑

5.3 小結

六、列表標簽

6.1 列表標簽的種類

6.2 無序列表

6.3 有序列表

6.4 小結

七、表格標簽

7.1 表格的結構

7.2 表格標簽

您的項目需求