【前端】HTML總結。

編程語言：解釋型和編譯型

WEB前端：HTML+CSS+JavaScript

一、 HTML介紹:

---------------------------------------

1. 什么是HTML？

   超文本標記語言,  <標簽名>--標記（標簽、節(jié)點）

2. HTML是由：標簽和內容構成

3. 程序語言有兩種：解釋性語言（HTML、PHP、Javascript）和編譯型語言（C、C++、Java

4. HTML的標簽組成部分、屬性、實體

    HTML的實體： <:&lt;  >:&gt;  空格:&nbsp;

5. HTML中注釋： <!-- .... -->

注釋的目的：1. 輔助說明  2.代碼調試

6. HTML標簽（標記）的語法： 標簽是由"<"和">"括起來

雙標簽：<標簽名>....</標簽名>

單標簽：<標簽名/>

7. HTML中的顏色：可以是顏色單詞：red/blue/green/yellow...

還可以是：#000000 --- #ffffff

            十六進制：0123456789abcdef

其中前兩位表示紅色，中間兩位綠色，后兩位表示藍色。

二、 HTML中HEAD頭部設置

----------------------------------------

設置網(wǎng)頁編碼：<meta charset="utf-8"/>

    關鍵字：<meta name="Keywords" content="關鍵字" />

    描述：  <meta name="Description" content="簡介、描述" />

    網(wǎng)頁標題：<title>本網(wǎng)頁標題</title>

    導入CSS文件：<link type="text/css" rel="stylesheet" href="**.css"/>

    CSS代碼：<style type="text/css">嵌入css樣式代碼</style>

    JS文件或代碼： <script >。。。</script>

    ... ...

三、 HTML中的文本標簽、格式化標簽

----------------------------------------

    文本標簽：

1. *<br/> 換行

2. *<p>...</p> 換段

3. <i>...</i> 斜體

4. <em>...</em> 強調斜體

5. <b>...</b> 加粗

6. *<strong>...</strong> 強調加粗

7. *<hn>...</hn> 其中n為1--6的值。 標題標簽（加粗、獨立行）

8. <cite></cite> 引用

  9. _...  ^...

10.*<del></del> 刪除線 

....

    格式化標簽：

1. *<br/> 換行

2. *<p>...</p> 換段

    3. 列表：

        <ul> 無序列表

        <ol> 有序列表  其中type類型值：A a I i 1   start屬性表示起始值

        <li> 列表項

        <dl> 自定義列表

        <dt> 自定義列表頭

        <dd> 自定義列表內容

    4. <div> <span>

四、*HTML中中的超級鏈接A

------------------------------------------------

*<a href=""></a> 超級鏈接標簽

屬性：href必須，指的是鏈接跳轉地址

 target: 表示鏈接的打開方式：

_blank  新窗口

_parent 父窗口

_self   本窗口（默認）

_top 頂級窗口

framename 窗口名

 title：文字提示屬性（詳情）

錨點鏈接：

定義一個錨點：<a id="a1"></a> 以前使用的是 <a name="a1"></a>

使用錨點：  <a href="#a1">跳到a1處</a>

五、 *圖片標簽img

---------------------------------------

<img /> 在網(wǎng)頁中插入一張圖片

屬性：src： 圖片名及url地址

alt: 圖片加載失敗時的提示信息

title：文字提示屬性

width：圖片寬度

height：圖片高度

border：邊框線粗細

六、 多媒體標簽（熟悉）

------------------------------------

<audio src="./p_w_picpaths/beidahuang.mp3" controls="controls">

你的瀏覽器不支持播放

</audio>

<br/>

<audio controls="controls">

<source src="./p_w_picpaths/beidahuang.mp3" type="audio/mpeg" />

你的瀏覽器不支持播放

</audio>

<br/><br/>

<video controls="controls" width="400" height="400">

<source src="./p_w_picpaths/fun.mp4" type="video/mp4" />

<source src="movie.webm" type="video/webm">

你的瀏覽器不支持視頻播放

</video>

<video  controls loop poster="tiao.jpg">

<source src="movie.webm" type="video/webm">

<source src="movie.ogg" type="video/ogg">

<source src="movie.mp4" type="video/mp4">

您的破瀏覽器該扔了，不支持視頻標簽

</video>

<br/><br/>

<embed src="./p_w_picpaths/haowan.swf" width="300" height="300" />

七、 *表格標簽

------------------------------------

*table  表格標簽

caption 表格標題

*tr 行標簽

*th  列頭標簽

*td  列標簽

        和打印機有關，把表頭和表尾寫在表體之前，有助于查看代碼

*thead  表頭

*tbody  表體

tfoot  表尾

八、**form表單標簽

---------------------------------------------------------

1. <form></form> --表單標簽

form標簽常用屬性：

*action屬性:提交的目標地址(URL)

*method屬性:提交方式:get(默認)和post

get方式是URL地址欄可見,長度受限制(IE2k 火狐8k),相對不安全.

post方式是URL地址不可見,長度不受限制,相對安全.

enctype:提交類型

target: 在何處打開目標 URL。

name:屬性為表單起個名字.HTML5不支持。用 id 代替。

2. <input> 表單項標簽input定義輸入字段，用戶可在其中輸入數(shù)據(jù)。在 HTML 5 中，type 屬性有很多新的值。

具體在下面有詳解：

如：<input type="text" name="username">

3. <select> 標簽創(chuàng)建下拉列表。

*name屬性:定義名稱,用于存儲下拉值的

size：定義菜單中可見項目的數(shù)目，html5不支持

disabled 當該屬性為 true 時，會禁用該菜單。 

multiple 多選

*<option>  下拉選擇項標簽,用于嵌入到<select>標簽中使用的;

*value屬性:下拉項的值

*selected屬性:默認下拉指定項.

4. *<textarea> 多行的文本輸入?yún)^(qū)域

*name :定義名稱,用于存儲文本區(qū)域中的值。

*cols ：規(guī)定文本區(qū)內可見的列數(shù)。

*rows ：規(guī)定文本區(qū)內可見的行數(shù)。

disabled： 是否禁用

readonly： 只讀

...

默認值是在兩個標簽之間

5. *<button> 標簽定義按鈕。

您可以在 button 元素中放置內容，比如文檔或圖像。這是該元素與由 input 元素創(chuàng)建的按鈕的不同之處。

6. <fieldset> html5標簽--fieldset 元素可將表單內的相關元素分組。

disabled屬性：定義 fieldset 是否可見。

form屬性： 定義該 fieldset 所屬的一個或多個表單。

7. <legend> html5標簽--<legend> 標簽為 <fieldset>、<figure> 以及 <details> 元素定義標題。

<form>

 <fieldset>

<legend>健康信息：</legend>

身高：<input type="text" /><br/>

體重：<input type="text" /><br/>

 </fieldset>

</form>

8. <optgroup> html5標簽--<optgroup> 標簽定義選項組。此元素允許您組合選項

樣例：

<select>

 <optgroup label="Swedish Cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

 </optgroup>

 <optgroup label="German Cars">

<option value="mercedes">Mercedes</option>

<option value="audi">Audi</option>

 </optgroup>

</select>

9. <datalist> html5標簽--<datalist> 標簽定義可選數(shù)據(jù)的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。

樣例：

<form action="demo_form.php" method="get">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</form>

10. **<input/>  表單項中的屬性，可以提供

  *type屬性:表示表單項的類型:值如下:

text:單行文本框

password:密碼輸入框

checkbox:多選框 注意要提供value值

radio:單選框   注意要提供value值

file:文件上傳選擇框

button:普通按鈕 

submit:提交按鈕

p_w_picpath:圖片提交按鈕

reset:重置按鈕, 還原到開始(第一次打開時)的效果

hidden:主表單隱藏域,要是和表單一塊提交的信息,但是不需要用戶修改

*name屬性:表單項名,用于存儲內容值的

*value屬性:輸入的值(默認指定值)

size屬性:輸入框的寬度值

maxlength屬性:輸入框的輸入內容的最大長度

readonly屬性:對輸入框只讀屬性

*disabled屬性:禁用屬性

*checked屬性:對選擇框指定默認選項

accesskey屬性:指定快捷鍵(不常用) (IE:alt+鍵  火狐:alt+shift+鍵)

tabindex屬性:通過數(shù)字指定tab鍵的切換順序(不常用)

src和alt是為圖片按鈕設置的

注意：reset重置按鈕是將表單數(shù)據(jù)恢復到第一次打開時的狀態(tài)，并不是清空

     p_w_picpath圖片按鈕，默認具有提交表單功能。