HTML基礎知識（常複習，常修正）

時間 2019-11-10

標籤 html 基礎知識複習修正欄目 HTML 简体版

原文原文鏈接

####html基本結構 `<!dcotype html>css

<html> <head> <meta></meta> <title></title>html

</head> <body></body>瀏覽器

</html>`服務器

說明：app

<!dcotype html>（h5文檔聲明) <!doctype>的做用是指示瀏覽器頁面使用哪一個html版本進行編寫。框架

meta用於描述頁面的元信息 [author/keywords/description/others]oop

####塊級元素與行級元素：塊級元素：佔據整行,能夠容納其餘元素或者行元素 div/h1-h6/p/hr/ol/ul/post

行級元素：與其餘行元素佔同一行，能夠容納其餘行元素，不能夠容納塊元素 strong/em/s/u/a/span/img/input動畫

####強調文本： <em>文本</em>強調默認斜體網站

<strong>文本</strong>強調默認加粗

<span>文本</span> 沒有語義，做用就是爲了設置單獨的樣式

####引用文本：引用單行文本：<q>引用文本</q>

引用多行文本：<blockquote>引用段</blockquote>

特殊格式

分行顯示：<br/>     水平線： <hr/>
    特殊符號：空格：&nbsp;  大於：&gt  小於：&lt
    輸入地址：<address>地址信息</address>
    一行代碼：<code>代碼</code>
    多行代碼： <pre>多行代碼</pre>

####列表無序列表： <ul><li>文本</li><li>文本</li></ul>

有序列表：<ol><li>文本</li><li>文本</li></ol>

####表格： `<table>

<caption>表格標題</ caption> <thead>  <tr> <th></th> 瀏覽器對th樣式默認粗體居中顯示 </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> </tr> <tfoot> </table>`

<thead><tbody><tfoot>雖然對於網頁顯示不會有影響，可是能夠方便搜索引擎更好的解析結構

######table樣式取消表格內部之間的距離：設置table的css樣式：border-collapse:collapse;

cellpadding: n px; 單元邊沿與其內容在之間的距離，通常不建議規定；

cellspacing: n px 規定單元之間的空隙通常不建議規定;

合併行： <td rowspan="跨度行數">

合併列： <td colspan="跨度列數">

####超連接 a標籤語法： <a href="目標網址" title="鼠標滑過顯示的文本" target="打開方式">連接文本</a>

target屬性： "_self;    _blank;    _parent;    _top"

外部連接：連接其餘網站

內部連接：網站的其餘頁面或者當期頁面（連接地址用相對路徑)

錨點連接：連接到當前網頁的其餘部分語法：1.設置目標錨點的id屬性 2.設置a標籤的超連接

####圖片img標籤語法: <img src="圖片地址" alt="下載失敗時的替換文本" title = "鼠標移到圖片時的提示文本">

src:相對路徑（網站開發用)和絕對路徑(少用)

圖片格式：位圖和矢量圖位圖(點陣圖）由像素的單個點組成，有8位，24位和32位 8位：即28(2的8次方） 24位：真彩圖（224) 網頁製做經常使用24位 32位：2**24 位圖格式：.jpg/.png/.gif

.jpg格式可以很好的處理大面積色調的圖片， .png支持透明信息，即圖像能夠浮如今其餘頁面文件之上。網頁製做經常使用png格式做用banner,icon和簡單線條構圖; gif通常用於製做動畫圖片

矢量圖：向量圖。用點、直線或者多邊形等基於數學方程的幾何圖形表示圖像，矢量圖不管放大、縮小等操做都不會失真，可是難以表現層次色彩豐富的逼真圖像效果。經常使用於印刷行業、網頁logo或矢量插圖。

矢量圖格式：.ai/.cdf/.fh/.swf .ai靜幀矢量圖 .cdf工程圖較多 .swf flash格式

####表單表單最重要的做用就是在客戶端收集用戶的信息，而後將數據遞交給服務器進行處理

<from>標籤屬性: action="表單的處理程序（表單要提交的地址，該地址的用來處理從表單收集來的信息" ）

method="get/post"

enctype="編碼方式"默認是：application/x-www-form-urlencoded multipart/form-data:MIME編碼，對於「上傳文件」這種表單必須選擇該值。

target=" 」目標窗口的打開方式"同a標籤

表單對象：input / textarea/ select+option

<input type=""/>

type='text'屬性： value（文本框內文字) size(文本框長度) maxlength(最多輸入字符串）

type="password"屬性：同text

type="radio"屬性： name和value都是必填項 (! ! 同一組的單選按鈕，name取值必定要一致)

type="checkboox"屬性： value checked="" 複選框是沒有文本的，在本文內容前加上label for='id'能夠將要捆綁id的值與for值綁定在一塊兒,當點擊label時，會觸發相應的input元素

補充：單純的label標籤只是起展現做用，不能綁定id

type="button" 通常配合js腳原本進行表單的實現

type="reset" 重置按鈕只能重置當前<form>標籤內部的表單元素的信息，不能清除外部信息

type="submit" 提交按鈕與服務器交互

type="image" 圖片（不推薦）

type="hidden" 隱藏域

type="file" 上傳文件：使用file時，必須在form標籤中說明enctype="multipart/form-data"

#####<textarea rows=" " cols=" ">文本內容</textarea>

<select> +<option> 相似 ul+li

<select multiple="multiple" size="可見列表數「> <option vaule=" " selected="selected" >文本</option> </select>

####插入音頻和視頻(含flash)<embed>標籤語法： <embed src="多媒體文件地址" width="播放界面的寬度" height="播放界面高度">

####網頁中插入背景圖片<bgsound>標籤語法： <bgsound src="背景音樂的地址" loop="播放次數"> loop=n/infinte/-1(無限循環) 加入音頻沒有操做界面

####浮動框架:iframe

浮動框架是嵌套在瀏覽器窗口中的子窗口，整個頁面不必定是框架頁面，可是要包含一個框架窗口

語法：<iframe src="浮動框架的源文件" width=" " height=" " scrolling=" "> <iframe>

scrolling屬性值：auto (默認左對齊) yes(老是顯示滾動條) no(不顯示)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。