html標籤：超文字標記語言
阿新 • • 發佈：2019-02-19
html的標籤作用：用於描述一個網頁的結構的。
1.html基礎
**
<!doctype html> 宣告函式 <head>頭部標記 <title>標題標記 <body>主體標記 <meta>元資訊標記 <meta http-wquiv="content-type" content="text/html";charset="utf-8"> 設定頁面關鍵字:<meta name="keywords" content="關鍵字"> 設定頁面說明:<meta name="description" content="頁面說明"> 設定作者資訊:<meta name="author" content="姓名"> 設定網頁的定時跳轉:<meta http-equiv="refresh" content="20;url=index.html">
2.html常用標籤
<h1>~<h6> 表示是一個標題 <p> 段落標籤 <hr/> 水平線標籤 <br/> 換行標籤 <sub> 下標 水的化學式：H<sub>2</sub>O <sup> 上標 2的16次方：2<sup>16</sup> <pre> 原樣標籤： 原樣標籤會保留空格和換行符。 <span> 行內標籤 <div> 塊標籤 <ol> <li> 有序的列表標籤、 <ul> <li> 無序的列表標籤。 <dl dt dd type="i/0/1/一"> 專案列表標籤 1)有序列表的序號型別：type <ol type="1/a/A/i/I"> 2)有序列表的起始數值;<ol type="1/a/A/i/I" start="3"> 逆向排序：<ol type="1/a/A/i/I" start="3" reversed>
3.html常用的實體標籤
常用的實體字元:
空格
小於號 <
大於號 >
-----------------------------
人民幣 ¥； ¥
版權 © ©
商標 ® ®
4.超連結標籤
1.a:link 未訪問的連結 a:vvisited 已訪問 a:hover 滑鼠懸停時 a:active 選擇時 2.去掉網頁下劃線 a{text-decoration:none} 3.連結的目標視窗 <a href="xxx.html" target="開啟方式"> _self 當前頁面 _blank 空白視窗 4.錨點連結 1)<a href="#id"> <id=""> 2)<a href="xxx.html#id"> //其他頁面的錨點 5.連結到E-mail: 使瀏覽者快速反饋自己的意見 <a href="mailto:郵件地址"> 6.連結到FTP: 包含一些上傳和下載檔案的檔案目錄 <a href="ftp=""ftp://地址"> 7.連結到Telnet: 一些遠端登陸方式 <a href="telnet://地址"> 8.下載檔案： <a href="檔案地址">
5.圖片標籤
<img src="url">
src 路徑
alt 不能顯示時轉換文字
title 懸停時顯示內容
width 寬度
height 高度
border 邊框
vspace 垂直間距
hspace 水平間距
align 排列
6.表格標籤
1.表格由行，列，單元格組成
<table>:表格的開始與結束
<caption>:表格標題，居中於表格之上
<tr>:行的開始與結束
<td>:單元格的開始與結束
<th>:設定加粗部分
格式:
<table border="" width="">
<tr height="" align="">
<td width="" align="">
2.表格的基本屬性：
邊框顏色：bordercolor
內框寬度：cellspacing
文字與邊框間距：cellpadding
背景顏色：bgcolor
背景影象：background="url"
水平跨度：colspan="列數"
垂直跨度：rowspan="行數
border-collapse collapse 設定是否把表格邊框合併為單一的邊框。
border-spacing 設定分隔單元格邊框的距離。
caption-side 設定表格標題的位置。
empty-cells 設定是否顯示錶格中的空單元格。
table-layout 設定顯示單元、行和列的演算法。
7.表單標籤
1.<form action="url地址" method="提交方式" name="表單名稱">
2.表單記錄：autocomplete
單表是否有自動完成功能，將輸入內容紀錄，形成列表
on:有
off:無
3.取消驗證：novalidate="true"
提交表單時對錶單取消有效檢查,可以關閉整個表單的驗證
4.控制元件型別：
<input name="控制元件名稱" type="屬性" value="文字欄位的預設取值"
size="控制元件，文字框的長度" maxlength="最長字元數">\
5.屬性：
單行文字框：text
多行文字框：textarea
<textarea name="文字域名稱" cols="列數" rows="行數">
密碼框：password
單選按鈕：<input name="名稱" type="radio" value="取值">
複選框：<input name="名稱" type="checkbox" value="取值">
<input name="s[]" type="checkbox" value="3" />3<br>
<input name="s[]" type="checkbox" value="7" />7<br>
$a=$_POST["s"];
for($i=0;$i<count($a);$i++)
{ echo "選項".$a[$i]."被選中<br />"; }
普通按鈕：button 長用於JS
提交按鈕：submit
重置按鈕：reset
檔案域：file
8.選單和列表
1.下拉選單
<select name="名稱">
<option value="值" selected="selected">選項顯示內容
......
</select>
2.列表項
<select name="名稱" size="顯示的列表項數" multiple>
<option value="值" selected>
......
<select>
9.新增多媒體
<marquee direction="up/down/left/right" behavior="scroll/slide/alternate"
scrollamount="值" scrolldelay="值" loop="值" width,height bgcolor="值">
滾動效果：<marquee>
滾動方向：direction="up/down/left/right"
滾動方式：behavior="scroll/slide/alternate" 迴圈/一次/交替
滾動速度：scrollamount="值"
滾動延遲：scrolldelay="值"
滾動迴圈次數：loop="值"
滾動範圍：width,height
滾動背景顏色：bgcolor="值"
10.video
<video autoplay>
<source src="xxx.mp3" type="video/mp4">
<source src="xxx.wav" type="video/mp4">
<source src="xxx.ogg" type="video/mp4">
<video>
src:視訊的url
poster:視訊載入時顯示的影象
preload:定義視訊是否預載入
preload="none/metadata/auto" 不載入視訊/只載入元資料/載入整個視訊
autoplay:是否自動播放
autoplay="autoplay"
controls:顯示控制元件，控制欄
controls="controls"
width和height連結不同的視訊檔案
這是HTML一個縮排的標籤.<blockquote></blockquote>輸入的文字會2端都縮排..你可以自己試試效果.主要是個排版的標籤
框架標籤
frameSet ： 一個frameSet可以把一個頁面切割成多份。只能按照行或者列切割。
frame 不能被切割的。 frame是位於frameSet中。
iframe: 在一個網頁中分隔一部分的位置顯示另外一個網頁的的資訊。
注意： frameSet標籤不能用於body標籤體內容
框架例子
<html>
<frameset rows="20%,70%,*" >
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame name="center" src="center.html"/>
</frameset>
<frame src="foot.html"/>
</frameset><noframes></noframes>
</html>
程式碼分析
<frameset rows="20%,70%,*" > 把一個頁面分成上中下3框架
<frame src="top.html" /> 上框架連結top.html
<frameset cols="20%,*"> 中框架又分為左右兩框架
<frame src="left.html" />
left.html:<a href="../2常用的標籤.html" target="center" >
即可在中框架左框架改變又框架內容，選擇target="center"
<frame name="center" src="center.html"/>
原先是連結center.html，但是左標籤改變其為2常用的標籤.html
</frameset>
<frame src="foot.html"/> 下框架連結foot.html