整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
<head> 元素包含了所有的頭部標(biāo)簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>
<title> 標(biāo)簽定義了不同文檔的標(biāo)題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素:
一個簡單的 HTML 文檔:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標(biāo)題</title>
</head>
<body>
文檔內(nèi)容......
</body>
</html><base> 標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo)，該標(biāo)簽作為HTML文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head><style> 標(biāo)簽定義了HTML文檔的樣式文件引用地址.
在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>meta標(biāo)簽描述了一些基本的元數(shù)據(jù)。
<meta> 標(biāo)簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時間，作者，和其他元數(shù)據(jù)。
元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)。
<meta> 一般放置于 <head> 區(qū)域
為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="免費 Web & 編程 教程">定義網(wǎng)頁作者:
<meta name="author" content="tom">每30秒鐘刷新當(dāng)前頁面:
<meta http-equiv="refresh" content="30"><script>標(biāo)簽用于加載腳本文件或定義客戶端腳本，如： JavaScript。
<script> 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件。
JavaScript 最常用于圖片操作、表單驗證以及內(nèi)容動態(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><noscript> 標(biāo)簽提供無法使用腳本時的替代內(nèi)容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。
<noscript>元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 <noscript> 元素中的內(nèi)容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標(biāo)題</title>
</head>
<body>
<script>
document.write("Hello World!")
document.write("<h1>這是一個標(biāo)題</h1>");
document.write("<p>這是一個段落。</p>");
</script>
<noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>
<p>不支持 JavaScript 的瀏覽器會使用 <noscript> 元素中定義的內(nèi)容（文本）來替代。</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標(biāo)題</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>標(biāo)簽 | 描述 |
<script> | 定義了客戶端腳本 |
<noscript> | 定義了不支持腳本瀏覽器輸出的文本 |
HTML使用標(biāo)簽 <a>來設(shè)置超文本鏈接。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分。
當(dāng)您把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?/span>
在標(biāo)簽<a> 中使用了href屬性來描述鏈接的地址。
默認(rèn)情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：
注意：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會根據(jù) CSS 的設(shè)定而顯示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標(biāo)題</title>
</head>
<body>
<p><a href="//www.microsoft.com/">本文本</a> 是一個指向萬維網(wǎng)上的頁面的鏈接。</p>
</body>
</html>標(biāo)簽 | 描述 |
<head> | 定義了文檔的信息 |
<title> | 定義了文檔的標(biāo)題 |
<base> | 定義了頁面鏈接標(biāo)簽的默認(rèn)鏈接地址 |
<link> | 定義了一個文檔和外部資源之間的關(guān)系 |
<meta> | 定義了HTML文檔中的元數(shù)據(jù) |
<script> | 定義了客戶端的腳本文件 |
<style> | 定義了HTML文檔的樣式文件 |
在HTML/CSS 中，我們經(jīng)常用HTML來布局和填充內(nèi)容，用CSS來添加效果，修飾內(nèi)容和布局，使整個頁面變得更好看。
即在<head></head>標(biāo)簽內(nèi)添加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>
定義：
對帶有指定屬性的 HTML 元素設(shè)置樣式。
注意：
只有在規(guī)定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。
功能：
“選擇器”指明了{(lán)}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素。
CSS中的選擇器有三個：
標(biāo)簽選擇器、class類選擇器、id選擇器
1.標(biāo)簽選擇器樣式表：a{}、 div{}、table{} ...
{對全局所有的選中類型標(biāo)簽的樣式修改}
2.class類選擇器 樣式表： .class{}
{在HTML中每個標(biāo)簽都可以同時綁定多個類名，每個標(biāo)簽都可以設(shè)置class；同一個界面中class是不可重復(fù)}
3. id選擇器樣式表： #d1 {}
{每個標(biāo)簽都可有id，每個頁面不可重復(fù)id，}
【一個HTML標(biāo)簽只能綁定一個id屬性,一個HTML標(biāo)簽可以綁定多個class屬性】
單純選擇<div>標(biāo)簽的時候 是對全局的的（所有的）<div>進(jìn)行修飾；
選擇器優(yōu)先級：
id選擇器>class類選擇器>標(biāo)簽選擇器
所以有id和class 選擇器的標(biāo)簽將不會被覆蓋。交叉時是按照優(yōu)先級覆蓋顯示的。
單純的HTML 表格表單內(nèi)容
標(biāo)題<caption>標(biāo)簽：
表格的標(biāo)題<caption>的內(nèi)容填充（HTML）：
<caption> 表格標(biāo)題</caption>
標(biāo)題<caption>的樣式修飾(CSS)
table.formdata caption
{
text-shadow: #FF00ff;
text-align: center;
padding-bottom: 6px;
font-weight: bold;
}
其他<table>標(biāo)簽相關(guān)內(nèi)容可參考 HTML中表格的實例應(yīng)用 一文。
form在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能。
一個表單有三個基本組成部分：
（1）表單標(biāo)簽：包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。
（2）表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。
（3）表單按鈕：提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入。還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
定義：
<input> 標(biāo)簽規(guī)定用戶可輸入數(shù)據(jù)的輸入字段。
根據(jù)不同的 type 屬性，輸入字段有多種形態(tài)。輸入字段可以是文本字段、復(fù)選框、密碼字段、單選按鈕、按鈕等等
語法代碼：
<input type="value" >
實例代碼：
<td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>
關(guān)系展示：
實例代碼：
<p>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value= "Reset All" class="btn">
</p>
實例展示：
<input>標(biāo)簽的其他屬性值：
input標(biāo)簽外是否添加form標(biāo)簽需要按情形區(qū)分：
應(yīng)用場景的區(qū)別：
1.所有向后臺提交數(shù)據(jù)（包括原生和ajax提交）的<input>都建議用<form>包裹.
2.如果只是用來做前臺交互效果則不推薦使用form包裹。
但提交數(shù)據(jù)時，其實也可以不用form包裹input標(biāo)簽：
1.如果有form標(biāo)簽，在點擊提交銨鈕時，瀏覽器自動收集參數(shù)，并打包一個http請求到服務(wù)器，完成表單提交。在這一過程中，瀏覽器會根據(jù)method的不同，將參數(shù)編碼后，放在urI中(get)，或者放在請求的data中(post)。然后發(fā)送到服務(wù)器。
2.如果沒有form，post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url。
<form>表單其他相關(guān)內(nèi)容可參考 HTML中 表單 的應(yīng)用實例 一文。
最后，附帶一下該可輸入的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;
}
本文部分內(nèi)容來自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系修改。
作為一個前端，經(jīng)常寫html文檔，但是卻很少去在意頭部的標(biāo)簽有哪些，也很少在意每個標(biāo)簽的作用，下面我們來詳細(xì)了解下。
頭部的標(biāo)簽，也就是寫在<head><head/>里。通常會有6個標(biāo)簽：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標(biāo)題</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> 文檔內(nèi)容...... </body>
</html>一、<title>元素。
1.title 標(biāo)簽定義了文檔的標(biāo)題，在HTML文檔中是必須的。它會展示在瀏覽器的工具欄上。
2.如果要展示一個圖標(biāo)，可以再加一個<link>標(biāo)簽，<link>標(biāo)簽的 rel屬性為“icon”,后面的
href跟上圖片的地址。
<link rel="icon" href="圖片url">二、<base>元素。
base標(biāo)簽描述了基本的鏈接地址，該標(biāo)簽作為HTML文檔中所有的鏈接的默認(rèn)鏈接
<head>
<base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" />
</head>
<body>
<img src="banner7.jpg"/>
</body>
上面的img標(biāo)簽的src鏈接的地址就是base里的地址加上img里的地址。
三、<link>元素。
link標(biāo)簽定義了文檔與外部資源之間的關(guān)系，它通常用于鏈接到樣式表。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>四、<style>元素。
style標(biāo)簽定義了HTML文檔的樣式，這個我們經(jīng)常會使用到，都不會陌生。
五、<meta>元素。
meta標(biāo)簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上，但會被瀏覽器解析。它常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時間，作者，和其他元數(shù)據(jù)。
元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)。
// 編碼格式定義
<meta charset="utf-8">
// 為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
// 為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="頭部標(biāo)簽 & 使用">
// 定義網(wǎng)頁作者:
<meta name="author" content="Runoob">
// 每30秒鐘刷新當(dāng)前頁面:
<meta http-equiv="refresh" content="30">
// 視圖層的參數(shù)定義
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
// content屬性值 :
// width:可視區(qū)域的寬度，值可為數(shù)字或關(guān)鍵詞device-width
// height:同width
// intial-scale:頁面首次被顯示是可視區(qū)域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放
// maximum-scale=1.0, minimum-scale=1.0;可視區(qū)域的縮放級別，
// maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。
// user-scalable:是否可對頁面進(jìn)行縮放，no 禁止縮放六、<script>元素。
script標(biāo)簽用于加載腳本文件，比如說javascript,可以直接書寫js,也能用于鏈接外部的js文件。
<script>
document.write("Hello World!")
</script><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
