我是如何初識HTML，入前端的

人在51RGB網學習HTML+CSS基礎課程，記錄一些文字，方便自己回憶，也希望對大家有所幫助

基礎框架

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>標題標簽</title>
</head>
<body>
<h1>了不起的蓋茨比</h1>
<p>《了不起的蓋茨比》為那個奢靡年代的縮影。蓋茨比懷揣著對"美國夢"的期翼，投身到那個年代的燈紅酒綠之中，卻在名利場中看盡世態炎涼，以及浮華背后一切終將逝去的空虛悵惘。1925年《了不起的蓋茨比》問世。
</p>
</body>
</html>

了解HTML的代碼注釋

什么是代碼注釋？代碼注釋的作用是幫助程序員標注代碼的用途，過一段時間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發網頁代碼。

語法：

認識標簽<head>

文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。

<head> <title>...</title> <meta> <link> <style>...</style> <script>...</script></head>

<title>標簽

在<title>和<title>標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。網頁的title標簽用于告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。

例如：

<head> <title>helloworld</title></head>

<title>標簽的內容“hello world”會在瀏覽器中的標題欄上顯示出來，如下圖所示

<body>標簽，網頁上顯示的內容放在這里

在網頁上要展示出來的頁面內容一定要放在body標簽中。如下圖是一個新聞文章的網頁。

開始學習<p>標簽，添加段落

如果想在網頁上顯示文章，這時就需要<p>標簽了，把文章的段落放到<p>標簽中。

語法：<p>段落文本</p>

注意一段文字一個<p>標簽，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個<p>標簽中。如下圖所示。

了解<hx(1-6)>標簽，為你的網頁添加標題

文章的段落用<p>標簽，那么文章的標題用什么標簽呢？在本節我們將使用<hx>標簽來制作文章的標題。標題標簽一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據重要性遞減。<h1>是最高的等級。

語法：<hx>標題文本</hx> x:1-6

注意：因為h1標簽在網頁中比較重要，所以一般h1標簽被用在網站名稱上。騰訊網站就是這樣做的。如：<h1>騰訊網</h1>

h1-h6標簽的默認樣式：

標簽代碼：

在瀏覽器中顯示的樣式：

加入強調語氣，使用<strong>和<em>標簽

有了段落又有了標題，現在如果想在一段話中特別強調某幾個文字，這時候就可以用到<em>或<strong>標簽但兩者在強調的語氣上有區別:

<em>表示強調，在瀏覽器中<em>默認用斜體表示
<strong>表示更強烈的強調，在瀏覽器中<strong>用粗體表示。
兩個標簽相比，目前國內前端程序員更喜歡使用<strong>表示強調。

在瀏覽器中默認樣式是有區別的：

瀏覽器中的樣子，如下圖。

語法：

<em>需要強調的文本</em>

<strong>需要強調的文本</strong>

栗子：

在網上商城中，某產品的打折后的價格是需要強調的。如下圖。

代碼實現:

使用<span>標簽為文字設置單獨樣式

語法：<span>文本</span>

我們對<em>、<strong>、<span>這三個標簽進行一下總結：

<em>和<strong>標簽是為了強調一段話中的關鍵字時使用，它們的語義是強調。
<span>標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。

如果現在我們想把上一小節的第一段話“美國夢”三個字設置成blue（藍色），但注意不是為了強調“美國夢”，而只是想為它設置和其它文字不同的樣式（并不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到<span>標簽了。如下面例子：

<p>1922年的春天，一個想要成名名叫<em>尼克?卡拉威</em>（托比?馬奎爾TobeyMaguire飾）的作家， 離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，<strong>股票</strong>飛漲的時代。 為了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。</p>

我們如果想設置“美國夢”三個字設置成blue（藍色），只需要在<style>標簽中加入：

span{color:blue; }

css部分，以后會聊，你能大概明白span就是能干單獨設置樣式的活，就ok了

<q>標簽，短文本引用

想在你的html中加一段引用嗎？比如在你的網頁的文章里想引用某個作家的一句詩，這樣會使你的文章更加出彩，那么<q>標簽是你所需要的。

語法：<q>引用文本</q>

<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑

</q>開始的。雖然當時不知道是什么意思，只是覺得詩句挺特別。

后來才明白這個典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的舍棄。

</p>

講解:

在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》。因為不是作者自己的文字，所以需要使用實現引用。
注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。

下圖是代碼顯示結果：

注意這里用標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。

<blockquote>標簽，長文本引用

<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標簽。

等等，上一節<q>標簽不是也是對文本的引用嗎？不要忘記<q>標簽是對簡短文本的引用，比如說引用一句話就用到<q>標簽。

如想在我的文章中引用李白《關山月》中的詩句，因為引用文本比較長，所以使用

<blockquote>。

語法：<blockquote>引用文本</blockquote>

如下面例子：

<blockquote> 明月出天山，蒼茫云海間。長風幾萬里，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閑。 </blockquote>

瀏覽器對<blockquote>標簽的解析是縮進樣式。如下圖所示：

使用<br>標簽分行顯示文本

例子，我們想讓一首詩顯示得更美觀些，如顯示下面效果：

怎么可以讓每一句詩詞后面加入一個折行呢？那就可以用到<br />標簽了，在需要加回車換行的地方加入<br />，<br />標簽作用相當于word文檔中的回車。

代碼改為：

<h2>《詠桂》</h2> <p>暗淡輕黃體性柔，<br/>情疏跡遠只香留。<br/>何須淺碧深紅色，<br/>自是花中第一流。

詩文在瀏覽器中顯示為：

為你的網頁中添加一些空格

在html代碼中輸入空格、回車都是沒有作用的。要想輸入空格，必須寫入。不要忘了那個分號

在html代碼中輸入空格是不起作用的，如下代碼。

在瀏覽中顯示，還是沒有空格效果。

輸入空格的正確方法：

在瀏覽器中的顯示出來的空格效果。如下圖所示。

認識<hr>標簽，添加水平橫線

在信息展示時，有時會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。如下圖所示：

語法：

html4.01版本<hr>
xhtml1.0版本<hr />注意：
<hr />標簽和<br />標簽一樣也是一個空標簽，所以只有一個開始標簽，沒有結束標簽。
<hr />標簽的在瀏覽器中的默認樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關系，這些外在樣式在我們以后學習了css樣式表之后，都可以對其修改。
大家注意，現在一般使用 xhtml1.0 的版本（其它標簽也是），這種版本比較規范。

<address>標簽，為網頁加入地址信息

一般網頁中會有一些網站的聯系地址信息需要在網頁中展示出來，這些聯系地址信息如公司的地址就可以<address>標簽。也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份。栗子：

<address>本文的作者：<ahref="mailto:zhaoliangsyn@163.com">zhaolion</a></address>

想加入一行代碼嗎？使用<code>標簽

在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的編程代碼，當代碼為一行代碼時，你就可以使用<code>標簽了，如下面例子：

注意：在文章中一般如果要插入多行代碼時不能使用<code>標簽了。如果是多行代碼，可以使用<pre>標簽。

使用<pre>標簽為你的網頁加入大段代碼

在上節中介紹加入一行代碼的標簽為<code>，但是在大多數情況下是需要加入大段代碼的，如下圖：

怎么辦？不會是每一代碼都加入一個<code>標簽吧，沒有這么復雜，這時候就可以使用<pre>標簽。

語法：<pre>語言代碼段</pre>

<pre>標簽的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。如下代碼：

<pre> varmessage="歡迎"; for(vari=1;i<=10;i++) { alert(message); } </pre>

在瀏覽器中的顯示結果為：

在上面的例子中可以看到代碼中的空格，換行符都保留下來。如果用以前的方法，回車需要輸入<br>簽，空格需要輸入

注意：<pre>標簽不只是為顯示計算機的源代碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標簽的一個常見應用就是用來展示計算機的源代碼。

使用<ul>，添加新聞信息列表

在瀏覽網頁時，你會發現網頁上有很多信息的列表，如新聞列表、圖片列表，如下圖所示。

這些列表就可以使用ul-li標簽來完成。ul-li是沒有前后順序的信息列表。

語法：

<ul> <li>信息</li> <li>信息</li> ......</ul>

舉例：

<ul> <li>精彩少年</li> <li>美麗突然出現</li> <li>觸動心靈的旋律</li></ul>

ul-li在網頁中顯示的默認樣式一般為：每項li前都自帶一個圓點，如下圖所示：

使用<ol>，添加順序列表

如果想在網頁中展示有前后順序的信息列表，怎么辦呢？如，當當網上的書籍熱賣排行榜，如下圖所示。這類信息展示就可以使用<ol>標簽來制作有序列表來展示。

語法：

<ol> <li>信息</li> <li>信息</li> ......</ol>

舉例：

下面是一個熱點課程下載排行榜：

<ol> <li>前端開發面試心法</li> <li>零基礎學習html</li> <li>JavaScript全攻略</li></ol>

<ol>在網頁中顯示的默認樣式一般為：每項<li>前都自帶一個序號，序號默認從1開始，如下圖所示：

初識div

認識div在排版中的作用

在網頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標簽中，這個<div>標簽的作用就相當于一個容器。

語法：<div>…</div>

確定邏輯部分：

什么是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標簽作為容器。

給div命名，使邏輯更加清晰

在上一小節中，我們把一些標簽放進<div>里，劃分出一個獨立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設置一個名稱，用id屬性來為<div>提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。

如下兩圖進行比較，如果設計師把兩個圖給你，哪個圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。

語法：<div id="版塊名稱">…</div>

table標簽，認識網頁上的表格

table標簽＝我們平時看到到表格

有時候我們需要在網頁上展示一些數據，如某公司想在網頁上展示公司的庫存清單。如下表：

想在網頁上展示上述表格效果可以使用以下代碼：

創建表格的四個元素：table、tbody、tr、th、td

<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內容全部下載完才會顯示。
<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
<th>…</th>：表格的頭部的一個單元格，表格表頭。
表格中列的個數，取決于一行中數據單元格的個數。

上述代碼在瀏覽器中顯示的默認的樣式為：

總結：

table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
表頭，也就是th標簽中的文本默認為粗體并且居中顯示

用css樣式，為表格加入邊框

Table 表格在沒有添加 css 樣式之前，是沒有邊框的。這樣不便于我們后期合并單元格知識點的講解，所以在這一節中我們為表格添加一些樣式，為它添加邊框。代碼中加入：

<styletype="text/css">tabletrtd,th{border:1pxsolid#000;}</style>

上述代碼是用 css 樣式代碼，為th，td單元格添加粗細為一個像素的黑色邊框。

結果窗口顯示出結果樣式：

caption標簽，為表格添加標題和摘要

表格還是需要添加一些標簽進行優化，可以添加標題和摘要。代碼如下

摘要摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。

語法：<table summary="表格簡介文本">

標題用以描述表格內容，標題的顯示位置：表格上方。語法：

<table> <caption>標題文本</caption> <tr> <td>…</td> <td>…</td> …</tr>…</table>

初識<a>標簽

使用<a>標簽，鏈接到另一個頁面

使用<a>標簽可實現超鏈接，它在網頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個標簽。

語法：<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>

例如：<a title="點擊進入我的博客">click here!</a>

上面例子作用是單擊click here!文字，網頁鏈接到http://www.zhaolion.com這個網頁。

title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜索引擎了解鏈接地址的內容（語義化更友好)

提醒

還有一個有趣的現象不知道小伙伴們發現了沒有，只要為文本加入a標簽后，文字的顏色就會自動變為藍色（被點擊過的文本顏色為紫色），顏色很難看吧，不過沒有關系后面我們學習了css樣子就可以設置過來（a{color:#000}),后面會詳細講解。

在新建瀏覽器窗口中打開鏈接

<a>標簽在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。只需要添加一個屬性target="_blank"

如下代碼：

<a href="目標網址" target="_blank">click here!</a>

使用mailto在網頁中鏈接Email地址

<a>標簽還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進行講解，請看詳細圖示：

提醒:如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“&”分隔。

下面是一個完整的實例: 在瀏覽器中顯示的一個發送按鈕

點擊鏈接會打開電子郵件應用，并自動填寫收件人等設置好的信息，如下圖：

認識<img>標簽，為網頁插入圖片

在網頁的制作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標簽來插入圖片。語法：[站外圖片上傳中……(48)]

舉例：<img src = "myimage.gif" alt = "My Image" title = "My Image" />

講解：

src：標識圖像的位置；
alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
圖像可以是GIF，PNG，JPEG格式的圖像文件。

認識表單

使用表單標簽，與用戶交互

網站怎樣與用戶進行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。

語法：<form method="傳送方式" action="服務器文件">

講解：

<form>：<form>標簽是成對出現的，以<form>開始，以</form>結束。
action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。

method ：數據傳送的方式（get/post）。

<formmethod="post"action="save.php"> <labelfor="username">用戶名:</label> <inputtype="text"name="username"/> <labelfor="pass">密碼:</label> <inputtype="password"name="pass"/> </form>

注意

所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在<form></form>標簽之間（否則用戶輸入的信息可提交不到服務器上哦！）。
method:post/get的區別這一部分內容屬于后端程序員考慮的問題。感興趣的小伙伴可以問谷哥

文本輸入框、密碼輸入框

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。

語法：

<form> <inputtype="text/password"name="名稱"value="文本"/></form>

type：

當type="text"時，輸入框為文本輸入框;
當type="password"時, 輸入框為密碼輸入框。

name：為文本框命名，以備后臺程序ASP 、PHP使用。

value：為文本輸入框設置默認值。(一般起到提示作用)

舉例：

<form> 姓名：<inputtype="text"name="myName"> <br/> 密碼：<inputtype="password"name="pass"></form>

在瀏覽器中顯示的結果：

文本域，支持多行文本輸入

當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。

語法：<textarea rows="行數" cols="列數">文本</textarea>

<textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。
cols ：多行輸入域的列數。
rows ：多行輸入域的行數。
在<textarea></textarea>標簽之間可以輸入默認值。

舉例：

<formmethod="post"action="save.php"> <label>聯系我們</label> <textareacols="50"rows="10">在這里輸入內容...</textarea></form>

在瀏覽器中顯示結果：

使用單選框、復選框，讓用戶選擇

在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。請看下面的例子:語法：<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>

type:

當 type="radio" 時，控件為單選框
當 type="checkbox" 時，控件為復選框

value：提交數據到服務器的值（后臺程序PHP使用）

name：為控件命名，以備后臺程序 ASP、PHP 使用

checked：當設置 checked="checked" 時，該選項被默認選中

如下面代碼：

在瀏覽器中顯示的結果：

注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。

使用下拉列表框，節省空間

下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下代碼：

講解：

value：

selected="selected"：設置selected="selected"屬性，則該選項就被默認選中。

使用下拉列表框進行多選

下拉列表也可以進行多選操作，在<select>標簽中設置multiple="multiple"屬性，就可以實現多選功能，在 widows 操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。如下代碼：

在瀏覽器中顯示的結果：

使用提交按鈕，提交數據

在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單信息到服務器時，需要用到提交按鈕。語法：<input type="submit" value="提交">

type：只有當type值設置為submit時，按鈕才有提交作用
value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：

使用重置按鈕，重置表單信息

當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”后，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置為"reset"就可以。語法：<input type="reset" value="重置">

type：只有當type值設置為reset時，按鈕才有重置作用
value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：

輸入賬號

單擊重置按鈕

form表單中的label標簽

小伙伴們，你們在前面學習表單各種控件的時候，有沒有發現一個標簽--label，這一小節就來揭曉它的作用。

label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。

語法：<label for="控件id名稱">

注意標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。這樣你會在點慢跑標簽，即使沒有點checkbox 也能選中

例子：

<form> <a>你對什么運動感興趣：</a><br/> <labelfor="1">慢跑</label><inputtype="checkbox"name="manpao"id="1"><br/> <labelfor="2">登山</label><inputtype="checkbox"name="dengshan"id="2"><br/> <labelfor="3">籃球</label><inputtype="checkbox"name="lanqiu"id="3"><br/></form>

限時!！免費送Dreamweaver、js等前端教程

、HTML基本信息

注釋：

DOCTYPE：就是告訴瀏覽器，我們要使用什么規范

head：網頁頭部標簽

title：網頁標題
meta：描述性標簽，描述網站的信息，用來做SEO

charset = "UTF-8"
name = "keyword" content = ""關鍵詞
name = "descrisption" content = ""描述

body：代表網頁主題

二、網頁基本標簽

標題標簽

<h1>一級標簽</h1>一直到6級標簽

段落標簽

<p>段落標簽</p>

換行標簽

<br/> /是閉合的意思，單標簽，閉不閉合都行

水平線標簽

<hr/>

字體樣式標簽

<strong>粗體</strong>
<em>斜體</em>

注釋

特殊字符

空格 ---->一個空格
大于號 >
小于號<
版權符號©

特殊符號就是 & xxx ;

三、圖像標簽

src 圖像地址必填
alt 圖像的代替文字(找不到圖片的時候顯示) 必填
title 鼠標懸停提示文字
width 圖像的寬度
height 圖像的高度

注意：../ 代表上一級目錄

四、鏈接標簽

文本鏈接

<a href="path" target="目標窗口位置">鏈接文本或圖像</a>

href 鏈接路徑，要跳轉帶那個位置必填
target鏈接在哪個窗口打開：常用值_self 當前窗口（默認的）、_blank 新窗口

圖像鏈接：就是嵌套圖片標簽

頁面間鏈接

從一個頁面鏈接到另一個頁面

錨鏈接

第一步需要一個標記使用name做標記
第二步跳轉到標記使用#標記
<a name="top" ></a>
<a href="#top"></a>
上面是頁面內的跳轉

<a name="down"></a>
<a href="第一個頁面的path#down"></a>
頁面間的跳轉

功能性鏈接

郵件鏈接：mailto： <a href="mailto:郵箱"></a>點擊后會打開郵箱
qq鏈接：在qq推廣工具里面的

五、行內元素和塊元素

塊元素

無論內容多少，該元素獨占一行
p、h1-h6

行內元素

內容撐開寬度、左右都是行內元素的可以排在一起
a、strong、em...

六、列表

什么是列表：就是一種展示方式

有序列表

<ol> <li></li> </ol>

無序列表

<ul> <li></li> </ul>

自定義列表

<dl>
    <dt></dt> 標題
    <dd></dd> 選項
    <dd></dd>
    <dd></dd>
</dl>

七、表格

為什么使用表格

簡單通用
結構穩定

基本結構

單元格
行
列
跨行
跨列

<table border="1px" 邊框>表格標簽
    <tr>
        <td></td>列標簽
        <td></td>
        <td></td>
    </tr>行標簽 這代表一行
</table>

跨列：使用colspan="夸的列數" <td colspan="4">

跨行：使用rowspan="夸的行數" <td rowspan="4">

八、視頻和音頻

視頻元素

video
<video src="path" controls autoplay></video>
src:資源路徑
controls控制條
autoplay自動播放

音頻元素

audio
<audio src="" controls autoplay></audio>

九、頁面結構分析

元素名	描述
header	標題頭部區域的內容(用于頁面或頁面中的一塊區域)
footer	標記腳部區域的內容（用于整個頁面或頁面的一塊區域）
section	web頁面中的一塊獨立區域
atricle	獨立的文章內容
aside	相關內容或應用(常用于側邊欄)
nav	導航類輔助內容

十、iframe內聯框架

src必填
width
heigth
name標記
name的使用
<iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>

<a href="path" target="hello"></a>
點擊超連接后，會在內聯框架里顯示這個頁面

十一、表單

表單：form

<form method="post|get" action="result.hetml">
    <input />
</form>

method 規定如何發送表單數據常用psot、get
action 表示向何處發送表單數據，把表單的數據發送給那個地方

get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效

post方式提交：比較安全，可以傳輸大文件

表單元素格式

屬性	說明
type	指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默認為text
name	指定表單元素的名稱必填，用來后臺讀取
value	元素的初試值。type為radio時必須指定一個值
size	指定元素的初始寬度。當type為text時或者password時，表單元素的大小以字符為單位。對于其他類型，寬度以像素為單位
maxlength	type為txet或password時，輸入的最大字符數
cheaked	type為radio或cheackbox時，指定按鈕是否被選中

單選框

input type="radio"
value 單選框的值
name ：表示組，name一樣一次只能選一個，name不一樣可以選多個
checked默認選中的

多選框

input type="checkbox"
value = "sleep"
name = "hooby"
checked默認選中的
<input type="checkbox" name="sleep" value="slppe" checked/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
多選框的結果是以數組的形式返回的

按鈕

<input type="button" name="btn1" value="點擊" />普通按鈕
<input type="image" src ="點擊跳轉的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕

下拉框

<select name="列表名稱">
    <option value="選項的值" select>中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
</select>
提交的格式就是列表名稱和value

selected 默認選擇

文本域

<textarea name="name" cols="列數" rows="行數">文本內容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

郵件驗證

<input type="email" name="youjian">

URL

<input type="url" name="url">

數字驗證

<input type="number" name="num" max="100" min="0" step="10">

滑塊

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表單的應用

隱藏域 hidden

<input type="text" id="mark" hidden>

只讀 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增強鼠標可用性

<label for="mark">點擊</label>
<input type="text" id="mark">

十三、表單初級驗證

為什么要進行表單驗證：緩解服務器壓力、保證數據安全

提示信息

placeholder="提示信息" 在輸入框上

非空判斷

required

正則表達式驗證

pattern
<input type="text" name="mail" pattern="正則表達式">

高級驗證使用js

、新建項目

1、新建===web項目===輸入項目名稱====完成

二、新建html文件

在新建項目中新建html模板

輸入文件名稱：

三、認識基本格式

聯想出基本格式：

四、編輯html文件

運行html，選擇瀏覽器

五、html常用的快捷鍵

（1）ctrl+n+w web項目創建

（2）ctrl+n+h html文檔創建

（3）ctrl+s 保存html頁面（頁面上如果未保存會顯示*號）

（4）ctrl+r html運行
（5）ctrl+z 撤回
（6）！+tab鍵聯想基本格式
（7）ctrl+/ 注釋和取消注釋

（8）ctrl+鼠標滾輪，字體方大和縮小

六、認識標簽

（1）H標簽（標題標簽）

（2）p標簽（段落標簽）

（3）img 標簽（圖片標簽）
兩種：第一種widows上傳圖片，第二種：網上圖片鏈接

第一種

img中顯示圖片

img中引入圖片

第二種：網上圖片的鏈接：

（4）標簽（空格）

（5）em 標簽表示斜體

（6）i 標簽表示斜體

（7）br 表示換行

（8）b 標簽表示加粗

（9） strong 標簽表示加粗

（10）s 標簽（刪除線）

（11）u 標簽（下劃線）

（12）font 顏色

（13）sub下標
（14）sup上標

在線咨詢

上一篇：HTML 樣式
下一篇：JavaScript中解決堆棧溢出，簡單的方法是將堆棧調用改成事件循環

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

我是如何初識HTML，入前端的

了解HTML的代碼注釋

認識標簽<head>

<body>標簽，網頁上顯示的內容放在這里

開始學習<p>標簽，添加段落

了解<hx(1-6)>標簽，為你的網頁添加標題

加入強調語氣，使用<strong>和<em>標簽

使用<span>標簽為文字設置單獨樣式

<q>標簽，短文本引用

<blockquote>標簽，長文本引用

使用<br>標簽分行顯示文本

為你的網頁中添加一些空格

認識<hr>標簽，添加水平橫線

<address>標簽，為網頁加入地址信息

想加入一行代碼嗎？使用<code>標簽

使用<pre>標簽為你的網頁加入大段代碼

使用<ul>，添加新聞信息列表

使用<ol>，添加順序列表

初識div

認識div在排版中的作用

給div命名，使邏輯更加清晰

table標簽，認識網頁上的表格

table標簽 ＝ 我們平時看到到表格

用css樣式，為表格加入邊框

caption標簽，為表格添加標題和摘要

初識<a>標簽

使用<a>標簽，鏈接到另一個頁面

在新建瀏覽器窗口中打開鏈接

使用mailto在網頁中鏈接Email地址

認識<img>標簽，為網頁插入圖片

認識表單

使用表單標簽，與用戶交互

文本輸入框、密碼輸入框

文本域，支持多行文本輸入

使用單選框、復選框，讓用戶選擇

使用下拉列表框，節省空間

使用下拉列表框進行多選

使用提交按鈕，提交數據

使用重置按鈕，重置表單信息

form表單中的label標簽

、HTML基本信息

二、網頁基本標簽

三、圖像標簽

四、鏈接標簽

五、行內元素和塊元素

六、列表

七、表格

八、視頻和音頻

九、頁面結構分析

十、iframe內聯框架

十一、表單

十二、表單的應用

十三、表單初級驗證

您的項目需求

table標簽＝我們平時看到到表格