HTML meta 文本格式排版連接圖表列表表單 frame後臺佈局實例

時間 2019-11-13

標籤 html meta 文本格式排版連接圖表列表表單 frame 後臺佈局實例欄目 HTML 简体版

原文原文鏈接

meta標籤css

content屬性必須和http-equiv或者name屬性一塊兒使用html

http-equiv屬性，就是http當量，用於和服務器發送數據前的提交交互使用。（另層含義這個當量在瀏覽器和服務器同價值，就是當量，採用的http協議）web

服務器代碼response.ContentType=「text/html」，先和瀏覽器提早交互。windows

好比<meta charset="utf-8"></meta>等價<meta http-equiv="content-type" content="text/html;charset=utf-8">緩存

網站關鍵字網站描述網站定時刷新指向網站緩存處理服務器

 1 <html>
 2     <meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--    <meta charset="utf-8"></meta>-->
 3     <meta name="keywords" content="form 表單"/>
 4     <meta name="description" content="最詳細的表單描述講解 表單原理 提交"/>
 5     <meta http-equiv="refresh" content="3;url=http://www.baidu.com" />
 6     <meta http-equiv="cache-control" content="no-cache"/>
 7     <head>
 8     </head>
 9     <body bgcolor="red"text="yellow">
10     hanzi漢子海岸的拉了大蘇打1256165165
11     </body>
12 </html>

參考來源：框架

http://www.w3school.com.cn/tags/tag_meta.aspide

http://blog.csdn.net/boat1980/article/details/2142291函數

<標籤屬性=「」屬性=「」屬性=「」></標籤>

在網頁中顯示出一個標籤。好比<font>字</font>，在html中就要寫&ltfont&gt字&ltfont&gt

顯示商標® &reg 版權© &copy 引號「 &quat 連字符& &amp空格 &nbsp

文本標籤（字體）

1，物理字體2，邏輯字體,主要的做用爲SEO的優化而已。

 1 <!--<b><b/>加粗
 2 <i><i/>傾斜
 3 <tt><tt/>打字機樣本
 4 <u><u/>加下劃線
 5 <sup><sup/>指數標籤
 6 <sub><sub/>腳標籤
 7 <s><s/>加刪除線
 8 -->
 9 <!--我犯錯：封閉標籤是/標籤，而不是標籤/，單個標籤是標籤/-->
10 <html>
11     <meta charset="utf-8"></meta><!--此時gb2312字符集不對。utf-16能夠utf-32不行-->
12     <head>
13     </head>
14     <body>
15     <b>我是</b>&nbsp&nbsp&nbsp&nbsp  <!--&nbsp空格-->
16     <i>一名</i>&nbsp&nbsp&nbsp&nbsp
17     <tt>大學生</tt>，&nbsp&nbsp&nbsp
18     就是&nbsp&nbsp
19     <u>大學生</u><br/>&nbsp&nbsp&nbsp&nbsp&nbsp<br/>
20     我知道一個函數：f<sub>n</sub>=3<sup>2</sup>+4<sup>2</sup>=5<sup>2</sup>，
21     不是<s>小學生<s/>
22     </body>
23 </html>

字體標籤物理字體

 1 <!--<strong></strong>粗體，至關於<b></b>
 2 <code></code>文本代碼
 3 <samp></samp>樣本代碼
 4 <kbd></kbd>鍵盤文本
 5 <var></var>定義文本中變量部分
 6 <dfn></dfn>定義定義項目
 7 <cite><cite>定義引用
 8 <small></small>小號文本
 9 <big></big>大好文本-->
10 <html>
11     <meta charset="utf-8"></meta><!--此時gb2312字符集不對。utf-16能夠utf-32不行-->
12     <head>
13     </head>
14     <body>
15     邏輯字體，沒什麼用處，主要SEO<br/>
16     <em>斜體</em><br/>
17     <strong>粗體</strong><br/>
18     <code>文本代碼system.web</code><br/>
19     <samp>樣本代碼system.web</samp><br/>
20     <kbd>鍵盤文本123dfgd</kbd><br/>
21     <var>定義文本中變量部分</var><br/>
22     <dfn>定義定義項目</dfn><br/>
23     <cite>定義引用dada<cite><br/>
24     <small>小號文本sadsdsa</small><br/>
25     <big>打好文本sadassd</big><br/>
26     </body>
27 </html>

邏輯字體沒用主要SEO

2，格式標籤（文本排版分割）

 1 <!--<br/>換行
 2 <hr/>水平線size width  align noshade color
 3 <p></p>段落 align=left/center/right
 4 <center></center>
 5 <pre></pre>-->
 6 <html>
 7     <meta charset="utf-8"></meta><!--此時gb2312字符集不對。utf-16能夠utf-32不行-->
 8     <head>
 9     </head>
10     <body>
11     <h1 align="center">詩歌</h1>   <!--align靠左右中對齊，在p和h1標籤均可以-->
12     <hr color="red" size="20px" width="50%" align="right"/>
13     <hr size="20px" width="50%" align="left" noshade="noshade"/>
14     <center><p>牀前米單雙打</p><p>一試的撒湖大</p><p>愛的計算大的</p><p>大帶魚大神的</p></center>
15     <p align="right">-----李可2015-1-31</p>
16 <pre>
17         左8個空格
18 右8個空格        
19 有換行
20 顯示也是按照此顯示
21 </pre>
22     </body>
23 </html>

h hr p center pre 屬性

3，連接接與圖表（跳轉錨定顯示圖片）

target=「_blank」用的最多。

<a name="m">跳到這須要名字</a> <a href="#m">跳轉</a> 成對存在

<a href="#">跳轉頂部</a>沒有名字

href還能夠執行js代碼。

還能夠發郵件<a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">給李可發一個郵件</a>

圖片連接<a href=""><img src=""></a>

<html>
    <meta charset="utf-8"></meta><!--此時gb2312字符集不對。utf-16能夠utf-32不行-->
    <head>
    </head>
    <body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <a href="./wenjian.html">本地文件連接</a><br/>
    <a name="m">跳到這裏</a>
    
<pre>
        左8個空格
右8個空格       












































































































 
有換行
顯示也是按照此顯示
</pre>
<a href="#m">跳</a>
<a href="#">一個#號就頂部</a>
<a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">給李可發一個郵件</a>
    </body>
</html>

_blank 跳錨定發郵件 js

/斜槓，除了操做系統文件都是斜槓

\反斜槓，window系統文件用反斜槓

相對路徑：.\文件1 .\表示文件1所在在文件夾（文件1的上一級）

..\文件1，文件1所在的文件夾所在在文件夾。文件的上級的上級文件夾。

圖片標籤：<img src="" width=""/ height="" alt=「圖片顯示的字」 title=「鼠標移上顯示的字」 border=「10」>

寬高，只設定一個就會等比例縮放。同時設定就會拉伸。title：鼠標以上顯示的字，在其餘的標籤也有這種功能。

body的屬性之後用css代替

text link alink vlink bgcolor background

<body bgcolor="red"text="yellow"><!--text爲文本顏色，超鏈接等都不屬於文本-->
    <!--background=「.\wenjian.jpg」」背景=「圖片路徑」-->
    <!--link=「ffffff」 alink=「yellow」 vlink=「blue」這些body下的屬性，對body內的超鏈接點擊以前，點擊時候，點擊事後的顏色變化-->
    <font color="fffcbc">這是字體修飾</font><!--此時的字體顏色覆蓋body中的文本顏色-->

text link avlink bgcolor backgound

4，列表與表格（顯示數據）

 1 <html>
 2     <meta charset="utf-8"></meta>
 3     <head>
 4     </head>
 5     <body bgcolor="red"text="yellow">
 6     <a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">給李可發一個郵件</a>
 7 無序列表
 8     <ul type="square"><!--type不是style哦 在ul內加=「disk" "circle"-->
 9     <li>1</li>
10     <li>2</li>
11     <li>3</li>
12     <li>4</li>
13     </ul>
14 有序列表
15     <ol type="a"><!--A  i  I 1-->
16     <li>5</li>
17     <li>6</li>
18     <li>7</li>
19     <li>8</li>
20     </ol>
21 自定義列表<!--dl dt（引導詞） dd元素 3個哦-->
22 <dl>
23 <dt>引導1</dt><dd>內容1</dd>
24 <dt>引導2</dt><dd>內容2</dd>
25 <dt>引導3</dt><dd>內容3</dd>
26 </dl>
27     </body>
28 </html>

ul ol dl（dt dd）

表格只有行的概念。寫表格從上到下，從左到右。<table><tr><td><td>

1，看有幾行。每一個行有幾個元素

2，每一個元素跨幾行幾列 rowspan=「」 colspan=「」

 1 <html>
 2     <meta charset="utf-8"></meta>
 3     <head>
 4     </head>
 5     <body bgcolor="red"text="yellow">
 6     <a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">給李可發一個郵件</a>
 7     <table border="2">  <!--此時要給表格加上邊框，便於好看-->
 8         <tr><td rowspan="2">1</td><td>2</td></tr>
 9         <tr><td>3</td></tr>
10         <tr><td colspan="2">4</td></tr>
11         <tr><td>5</td><td>6</td></tr>
12     </table>
13     </body>
14 </html>

rowspan colspan table border

屬性：<table> bgcolor border bordercolor cellspacing cellpadding width height

<td> align vlign bgcolor width height colspan rowspan

<html>
    <meta charset="utf-8"></meta>
    <head>
    </head>
    <body bgcolor="red"text="yellow">
    <a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">給李可發一個郵件</a>
    <table border="2" width="200" height="100" cellspacing="20" cellpadding="20">  <!--此時要給表格加上邊框，便於好看-->
        <tr><td rowspan="2">1</td><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td colspan="2">4</td></tr>
        <tr><td>5</td><td>6</td></tr>
    </table>
    </body>
</html>

table cellspacing cellpadding

<html>
    <meta charset="utf-8"></meta>
    <head>
    </head>
    <body bgcolor="red"text="yellow">
    <a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">給李可發一個郵件</a>
    <table border="2" width="200" height="200" >  <!--此時要給表格加上邊框，便於好看-->
        <tr><td rowspan="2" align="right">1</td><td align="left" valign="bottom">2</td></tr>
        <tr><td align="left" valign="top">3</td></tr>
        <tr><td colspan="2">4</td></tr>
        <tr><td>5</td><td>6</td></tr>
    </table>
    </body>
</html>
<!--去掉table的cellspacing和cellpadding便於觀察-->

td align valign

th就是一個加粗的td。

5，表單標籤（提交數據服務器交互）

 1 <html>
 2     <meta charset="utf-8"></meta>
 3     <head>
 4     </head>
 5     <body bgcolor="red"text="yellow">
 6     <a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">給李可發一個郵件</a>
 7     <!--<form action="http://www.baidu.com" method="get""><!--提交帳號密碼，用post不顯示在地址欄  enctype="multipart/form-data上傳數據-->
 8     <form method="post"><!--向本頁提交，post不顯示地址欄-->
 9     姓名：<input type="text"name="uid"value=""></input><br/><!--http://www.baidu.com/?uid=dasd&pwd=dasd 若是想提交，要具備name value屬性-->
10     密碼：<input type="password"name="pwd"value=""></input><br/>
11     <input type="hidden" name="h」 value="1"></input><!--viewstate-->
12     <textarea rows="5" cols="20">協議內容，法律法律協議內容，協議內容，法律法律協議內容，法律法律協議內容，法律法律協議內容，法律法律法律法律協議內容，法律法律協議內容，法律法律協議內容，法律法律協議內容，法律法律</textarea><br/>
13     <!--textarea內的空格等都會顯示出來 格式不變-->
14     <input type="submit"></input>
15     <input type="reset"></input>
16     <input size="10" maxlength="2"/><!--最多容許輸入2個字符-->
17     <input readonly="readonly"/><!--此文本框不能輸入-->
18     </form>
19     </body>
20 </html>

form hidden submit reset readonly textarea maxlength

btn imgbtn checkbox radio select option combobox listbox

 1 <html>
 2     <meta charset="utf-8"></meta>
 3     <head>
 4     </head>
 5     <body bgcolor="red"text="yellow">
 6     <a href="mailto:416960428@qq.com?subject=this is mail&body=neirong">給李可發一個郵件</a>
 7     <hr/>
 8     <form method="get">
 9     <input type="text" name="n" value=""/>
10     <input type="button"value="按鈕"onclick="alert('彈出js腳本雙引號內有單引號,最後有分號');"/>
11     <input type="image" src="./"><!--圖片按鈕，type=image，src來源，/斜線通常.\windows系統文件，這裏均可以，由於在本機模擬-->
12     <!--圖片標籤，能夠作地圖，點擊圖片時會記錄座標，顯示對應位置的放大圖-->
13     <hr/>
14     
15     <!--複選框,能夠多選check-->
16     <input type="checkbox"name="eat"/>吃
17     <input type="checkbox"name="play"/>玩
18     <input type="checkbox"name="sleep"/>睡
19     <!--file:///C:/Users/Administrator/Desktop/文本標籤.html?n=&eat=on&play=on&sleep=on,當checkbox沒有value時，=on-->
20     <!--若是有了value就會eat=value取代on-->
21     <!--爲了用戶體驗，點字的時候也選中對應複選框，須要1，爲input 添加id，2，爲文本添加label 使用for與input關聯-->
22     <input type="checkbox"name="dian"id="4"><label for="4">樂樂</label>
23     <!--能夠checked="checked"-->
24     <hr/>
25     
26     <!--單選框，radio，注意要分組「name屬性」，男女一組，國籍一組，若果沒有分組，選不中-->
27     <!--是radio而不是radiobutton，也可默認選中，能夠label-->
28     <!--若是有了value就會eat=value取代on-->
29     <input type="radio"name="gender"/>男
30     <input type="radio"name="gender"/>女
31     <input type="radio"name="guojia" checked/>中國
32     <input type="radio"name="guojia"/>外國
33     
34     <hr/>
35     <!--下拉列表框，組合框combobox        size爲1的listbox
36                     列表框listbox
37     沒有input=listbox combobox  而只有select  option
38     提交name value時，寫的位置！！！name放select   value放option
39     默認選中checked="checked"，而是selected
40     -->
41     <input typt="text" name="uuid" value=""/>@
42     <select name="email">
43     <option value="1">@163.com</option>   <!--沒有value時候。?n=&guojia=on&email=@163.com-->
44     <option value="2" selected>@126.com</option>
45     <option value="3">@139.com</option>
46     </select>
47     <hr/>
48     <!--列表框，-->
49     <input typt="text" name="u" value=""/>@
50     <select name="email2"size="6" multiple="multiple">
51     <option value="1">@163.com</option>   <!--沒有value時候。?n=&guojia=on&email=@163.com-->
52     <option value="2">@126.com</option>
53     <option value="3">@139.com</option>
54     <option value="2">@1296.com</option>
55     <option value="3">@72.com</option>
56     <option value="2">@156.com</option>
57     <option value="3">@139.com</option>
58     <option value="2">@126.com</option>
59     <option value="3">@189.com</option>
60     <option value="2">@196.com</option>
61     <option value="3">@1397.com</option>
62     </select>
63     <!--n=&guojia=on&uuid=&email=2&u=&email2=3&email2=2&email2=3-->
64     
65     <input type="submit" value="提交"/>
66     </form>
67     </body>
68 </html>

6，frameset框架集。cols 和rows不能同使用。代替body，不能有body。

若是包含一段文本的 <noframes> 標籤，就必須將這段文字嵌套於 <body></body> 標籤內。

就是不支持框架的時候，<noframe><body>不支持框架時顯示的內容</body></noframe>

frame 可否移動邊框 noresize。

作一個導航框架。

文件：

1，

 1 <html>
 2     <head>
 3     </head>
 4     <frameset rows="100,*">
 5         <frame src="top.html"/>
 6         <frameset cols="100,*">
 7             <frame src="left.html"/>
 8             <frame src="right.html" name="main">
 9         </frameset>
10     </frameset>
11 </html>

佈局.html 在這裏的右框架寫上name

2，

1 <html>
2 <head></head>
3 <body>
4 <a href="xianshi01.html" target="main" >連接1</a><br/>
5 <a href="xianshi02.html" target="main">連接2</a>
6 </body>
7 </html>

left.html 在這裏的超鏈接上寫上target

3，

 1 <html>
 2     <head>
 3     </head>
 4     <body>框架1的left頁面中的連接到的1頁面。要顯示在frame name=「main」 的的框內</body>
 5 </html>
 6 
 7 <html>
 8     <head>
 9     </head>
10     <body>框架的left頁面中的連接到的2頁面。要顯示在frame name=「main」 的的框內</body>
11 </html>

xianshi01.html xianshi02.html

4，

 1 <html>
 2     <head>
 3     </head>
 4     <body>開始顯示的內容沒用，此框架爲左面框架中的網頁中超連接的網頁顯示的地方</body>
 5 </html>
 6 
 7 
 8 <html>
 9 <head></head>
10 <body><center><font size="50">頂部</font></center></body>
11 </html>

right.html top.html 這裏沒大用，只是開始顯示的東西

7，iframe嵌套框架，在body內，和frameset不一樣。

好比

1 <html>
2 <head></head>
3 <body><iframe src="http://www.baidu.com" name="weizhi" width="100%" height="200"></iframe>
4 <br/>
5 <a href="http://www.qq.com" target="weizhi">騰訊網，顯示在上個框內</a>
6 </body>
7 </html>