HTML學習教程5-頭元素腳本鏈接

TML<head>元素

<head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。

可以添加在頭部區(qū)域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

HTML <title> 元素

<title> 標簽定義了不同文檔的標題。

<title> 在 HTML/XHTML 文檔中是必須的。

<title> 元素:

定義了瀏覽器工具欄的標題
當網(wǎng)頁添加到收藏夾時，顯示在收藏夾中的標題
顯示在搜索引擎結果頁面的標題

一個簡單的 HTML 文檔:

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

HTML <base> 元素

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

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

HTML <style> 元素

在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <meta> 元素

meta標簽描述了一些基本的元數(shù)據(jù)。

META 元素通常用于指定網(wǎng)頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數(shù)據(jù)。

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

<meta> 標簽- 使用實例

為搜索引擎定義關鍵詞:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

為網(wǎng)頁定義描述內容:

<meta name="description" content="免費 Web & 編程 教程">

定義網(wǎng)頁作者:

<meta name="author" content="tom">

每30秒鐘刷新當前頁面:

<meta http-equiv="refresh" content="30">

HTML <script> 元素

JavaScript 最常用于圖片操作、表單驗證以及內容動態(tài)更新。

下面的腳本會向瀏覽器輸出"Hello World!"：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head>
<body>
<script>
document.write("Hello World!")
</script> 
</body>
</html>

HTML<noscript> 標簽

只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 <noscript> 元素中的內容：

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

<script>
document.write("Hello World!")
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落。</p>");
</script>
<noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的瀏覽器會使用 <noscript> 元素中定義的內容（文本）來替代。</p>
 
</body>
</html>

JavaScript事件響應:

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

<h1>我的第一個 JavaScript </h1>

<p id="demo">
JavaScript 可以觸發(fā)事件，就像按鈕點擊。</p>

<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">點我</button>

</body>
</html>

HTML 腳本標簽

標簽	描述
<script>	定義了客戶端腳本
<noscript>	定義了不支持腳本瀏覽器輸出的文本

HTML鏈接

HTML使用標簽 <a>來設置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?/span>

在標簽<a> 中使用了href屬性來描述鏈接的地址。

默認情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：

一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設置了 CSS 樣式，展示樣式會根據(jù) CSS 的設定而顯示。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title> 
</head>
<body>
<p><a href="//www.microsoft.com/">本文本</a> 是一個指向萬維網(wǎng)上的頁面的鏈接。</p>
</body>
</html>

HTML head 元素

標簽	描述
<head>	定義了文檔的信息
<title>	定義了文檔的標題
<base>	定義了頁面鏈接標簽的默認鏈接地址
<link>	定義了一個文檔和外部資源之間的關系
<meta>	定義了HTML文檔中的元數(shù)據(jù)
<script>	定義了客戶端的腳本文件
<style>	定義了HTML文檔的樣式文件

lt;table>和<form>結合效果圖：

在HTML/CSS 中，我們經(jīng)常用HTML來布局和填充內容，用CSS來添加效果，修飾內容和布局，使整個頁面變得更好看。

HTML和CSS的配合方法：

即在<head></head>標簽內添加CSS樣式表的鏈接：

代碼展示如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Make a Table Frame</title>
 <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" >
</head>

CSS選擇器

定義：

對帶有指定屬性的 HTML 元素設置樣式。

注意：

只有在規(guī)定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。

功能：

“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素。

CSS中的選擇器有三個：

標簽選擇器、class類選擇器、id選擇器

1.標簽選擇器樣式表：a{}、 div{}、table{} ...

{對全局所有的選中類型標簽的樣式修改}

2.class類選擇器樣式表： .class{}

{在HTML中每個標簽都可以同時綁定多個類名，每個標簽都可以設置class；同一個界面中class是不可重復}

3. id選擇器樣式表： #d1 {}

{每個標簽都可有id，每個頁面不可重復id，}

【一個HTML標簽只能綁定一個id屬性,一個HTML標簽可以綁定多個class屬性】

單純選擇<div>標簽的時候是對全局的的（所有的）<div>進行修飾；

選擇器優(yōu)先級：

id選擇器>class類選擇器>標簽選擇器

所以有id和class 選擇器的標簽將不會被覆蓋。交叉時是按照優(yōu)先級覆蓋顯示的。

<table>部分：電腦配件管理表2018年5月-8月

單純的HTML 表格表單內容

標題<caption>標簽：

表格的標題<caption>的內容填充（HTML）：

<caption> 表格標題</caption>

標題<caption>的樣式修飾(CSS)

table.formdata caption
{
	text-shadow: #FF00ff;
	text-align: center;
	padding-bottom: 6px;
	font-weight: bold;
}

其他<table>標簽相關內容可參考 HTML中表格的實例應用一文。

<form>部分：

form在網(wǎng)頁中主要負責數(shù)據(jù)采集功能。

一個表單有三個基本組成部分：

（1）表單標簽：包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務器的方法。

（2）表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。

（3）表單按鈕：提交按鈕、復位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務器上的CGI腳本或者取消輸入。還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

<input>標簽

定義：

<input> 標簽規(guī)定用戶可輸入數(shù)據(jù)的輸入字段。

根據(jù)不同的 type 屬性，輸入字段有多種形態(tài)。輸入字段可以是文本字段、復選框、密碼字段、單選按鈕、按鈕等等

語法代碼：

<input type="value" >

實例代碼：

<td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>

關系展示：

<input>中 submit屬性和reset屬性

實例代碼：

<p>

</p>

實例展示：

<input>標簽的其他屬性值：

<input>標簽外是否添加<form>標簽？

input標簽外是否添加form標簽需要按情形區(qū)分：

應用場景的區(qū)別：

1.所有向后臺提交數(shù)據(jù)（包括原生和ajax提交）的<input>都建議用<form>包裹.

2.如果只是用來做前臺交互效果則不推薦使用form包裹。

但提交數(shù)據(jù)時，其實也可以不用form包裹input標簽：

1.如果有form標簽，在點擊提交銨鈕時，瀏覽器自動收集參數(shù)，并打包一個http請求到服務器，完成表單提交。在這一過程中，瀏覽器會根據(jù)method的不同，將參數(shù)編碼后，放在urI中(get)，或者放在請求的data中(post)。然后發(fā)送到服務器。

2.如果沒有form，post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url。

<form>表單其他相關內容可參考 HTML中表單的應用實例一文。

最后，附帶一下該可輸入的EXCEL表格的源碼。

HTML code：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Make a Table Frame</title>
 <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" >
</head>
<body image="">
 <form method="psot">
	<table border="1px" class="formdata">
 	<caption>電腦配件管理表2018年5月-8月</caption>
 	<tr>
 		<th></th>
 		<th scope="col">5月</th>
 		<th scope="col">6月</th>
 		<th scope="col">7月</th>
 		<th scope="col">8月</th>
 	</tr>
 	<tr>
 		<th scope="row">Hard Disk</th>
 		<td><input type="text" name="Hard Disk 5月" id="Hard Disk 5月"></td>
 		<td><input type="text" name="Hard Disk 6月" id="Hard Disk 6月"></td>
 		<td><input type="text" name="Hard Disk 7月" id="Hard Disk 7月"></td>
 		<td><input type="text" name="Hard Disk 8月" id="Hard Disk 8月"></td>
 	</tr>
 	<tr>
 		<th scope="row">Mainboard</th>
 		<td><input type="text" name="Mainboard 5月" id="Mainboard 5月"></td>
 <td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>
 <td><input type="text" name="Mainboard 7月" id="Mainboard 7月"></td>
 <td><input type="text" name="Mainboard 8月" id="Mainboard 8月"></td>
 	</tr>
 	<tr>
 		<th scope="row">Case</th>
 		<td><input type="text" name="Case 5月" id="Case 5月"></td>
 <td><input type="text" name="Case 6月" id="Case 6月"></td>
 <td><input type="text" name="Case 7月" id="Case 7月"></td>
 <td><input type="text" name="Case 8月" id="Case 8月"></td>
 	</tr>
 	<tr>
 	 <th scope="row">Power</th>
 	 <td><input type="text" name="Power 5月" id="Power 5月"></td>
 <td><input type="text" name="Power 6月" id="Power 6月"></td>
 <td><input type="text" name="Power 7月" id="Power 7月"></td>
 <td><input type="text" name="Power 8月" id="Power 8月"></td>	
 	</tr>
 	<tr>
 		<th scope="row">CPU Fan</th>
 		<td><input type="text" name="CPU Fan 5月" id="CPU Fan 5月"></td>
 <td><input type="text" name="CPU Fan 6月" id="CPU Fan 6月"></td>
 <td><input type="text" name="CPU Fan 7月" id="CPU Fan 7月"></td>
 <td><input type="text" name="CPU Fan 8月" id="CPU Fan 8月"></td> 
 	</tr>
 	<tr>
 		<th scope="row">Total</th>
 		<td><input type="text" name="Total 5月" id="Total 5月"></td>
 <td><input type="text" name="Total 6月" id="Total 6月"></td>
 <td><input type="text" name="Total7月" id="Total 7月"></td>
 <td><input type="text" name="Total 8月" id="Total 8月"></td>
 	</tr>
	</table>
 <p>
 <input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
 <input type="reset" value= "Reset All" class="btn">
 </p>
 </form>
</body>
</html>

CSS code :

body
{
	font-family: Arial;
	/*background-image: url(image/mainroad.jpg) no-repeat;*/
	background-color: #00ff00;
	background-size: 100%;
}
table.formdata
{
	width: 300px;
	height: 150px;
	border: 2px solid #F00;
	border-collapse: collapse;
	font-family: Arial;
}
table.formdata caption
{
	text-shadow: #FF00ff;
	text-align: center;
	padding-bottom: 6px;
	font-weight: bold;
}
table.formdata th
{
	border:1px solid #be34hc;
	background-color: #E2E2E2;
	color:#000000;
	text-aglin:center;
	font-weight: normal;
	padding: 2px 8px 2px 6px;
	margin: 0px;
}
table.formdata input
{
	width: 100px;
	padding: 1px 3px 1px 3px;
	margin: 0px;
	border:none;
	font-family: Arial;
}
.btn
{
	width:100px;
	background-color: #FF00ee;
	border:1px solid #00f2f2;
	font-family: Arial;
}

本文部分內容來自網(wǎng)絡，如有侵權，請聯(lián)系修改。

作為一個前端，經(jīng)常寫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文檔的樣式，這個我們經(jīng)常會使用到，都不會陌生。

五、<meta>元素。

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