整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML（HyperTextMark-upLanguage）即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言，是WWW的描述語言。
HTML文檔的結(jié)構(gòu)
2.頁面背景色或背景圖像
Hello World！
</body>
（網(wǎng)頁背景圖像）
Hello World!
</body>
（網(wǎng)頁背景色彩）
3.文本相關(guān)標(biāo)簽
標(biāo)題標(biāo)簽<h1>－<h6>，<font>標(biāo)簽。
段落標(biāo)簽<p>，換行標(biāo)簽<br>。
<h#> ... </h#>，#=1, 2, 3, 4, 5, 6 （說明：<h1>到<h6>字體大小依次遞減）
<sub>下標(biāo)文字，<sup>上標(biāo)文字，<del>刪除線。
段落標(biāo)簽<p>，換行標(biāo)簽<br>。
<HR> 標(biāo)簽用于在頁面上繪制水平線。
圖像的基本語法：<img src=“images/adv_2.jpg” width=“300” height=“150” alt=“在線報(bào)名” >
要鏈接到同一目錄 (C:\HTML) 下的頁面，可編寫 <A HREF = “Doc1.htm”> 或 <A HREF = “C:\html\Doc2.htm”>
鏈接到本頁面：
<a href=“http://www.it.com”>
<img src=“images/adv_2.jpg” border=“0” width="300"height="150">
</a>
<marquee scrolldelay=“100” direction=“up”>
滾動(dòng)文字或圖像
</marquee>
說明：scrolldelay：表示滾動(dòng)延遲時(shí)間，默認(rèn)值為90；direction：表示滾動(dòng)的方向，默認(rèn)為從右向左。
目標(biāo)：掌握列表的用法
使用表格的基本結(jié)構(gòu)實(shí)現(xiàn)簡(jiǎn)單表格
使用表格相關(guān)標(biāo)簽實(shí)現(xiàn)跨行、跨列的復(fù)雜表格
會(huì)使用表單的基本結(jié)構(gòu)制作表單頁面
會(huì)使用各種表單元素實(shí)現(xiàn)注冊(cè)頁面
能理解post和get兩種提交方式的區(qū)別
格式： <ul type=“”>
type屬性設(shè)置標(biāo)號(hào)的類型，值可以取：
1 disc ：實(shí)心圓點(diǎn)
2 circle ：空心圓點(diǎn)
3 square ：實(shí)心方塊
無序列表
格式：<ol type=“” start=“”>
type設(shè)置標(biāo)號(hào)的類型，值可以取：
1 1：顯示數(shù)字
2 A：顯示大寫字母
3 a：顯示小寫字母
4 I：顯示大寫羅馬數(shù)字
5 i：顯示小寫羅馬數(shù)字
有序列表
嵌套列表
門戶網(wǎng)站應(yīng)用表格
<table>...</ table >定義表格
創(chuàng)建表格
表格表現(xiàn)
域名數(shù)量報(bào)表的創(chuàng)建
域名數(shù)量報(bào)表
1.跨多列的表格
2.跨多行的表格
3.如何創(chuàng)建跨行跨列的表格
品牌商城表的創(chuàng)建
width用來設(shè)置表格的寬度；height用來設(shè)置表格的高度；border用來設(shè)置表格邊框尺寸大小；bordercolor用來設(shè)置表格邊框顏色。
品牌商城表
背景：background屬性用來設(shè)置表格的背景圖片；bgcolor屬性用來設(shè)置表格、行、列的背景色。
對(duì)其方式：align屬性用來設(shè)置表格、行、列的對(duì)齊方式。
<input type=“text” value="張三" size="20">
文本框的建設(shè)
文本框
<input type=“password” value=“123456” size=“22”>
密碼框的建設(shè)
密碼框，22個(gè)字符寬度
<input type="radio" value="男" checked="checked">
單選按鈕的建設(shè)
單選按鈕框
<input type=“checkbox” name="cb2" value="talk">
<textarea name=“textarea” cols=“40” rows=“6”>內(nèi)容</textarea>
<input type="reset" name=“reset" value=" 重填 ">
其他表單元素：<input type=“hidden”/>表單隱藏域
<input type=“image”/>表單圖片按鈕
<input type=“file”/>文件瀏覽
<label>標(biāo)簽可以綁定某個(gè)表單元素，用于擴(kuò)展可以相應(yīng)點(diǎn)擊等事件的區(qū)域
如：當(dāng)點(diǎn)擊復(fù)選框右邊的提示文字時(shí)，該復(fù)選框也可被選中。
內(nèi)容有限，關(guān)于css，div和網(wǎng)頁布局的部分就下次在和大家分享吧！
TML標(biāo)簽規(guī)范
盡管目前瀏覽器都兼容HTML，但是，使網(wǎng)頁能夠符合標(biāo)準(zhǔn)，應(yīng)該盡量使用XHTML規(guī)范來編寫代碼，需要注意以下事項(xiàng)：
（1）在XHTML中，標(biāo)簽名必須小寫。在HTML中，標(biāo)簽名稱可以大寫，也可以小寫。
（2）在XHTML中，屬性名稱必須小寫。在HTML中，屬性名稱也必須是小寫的。
（3）在XHTML中，標(biāo)簽必須嚴(yán)格嵌套；HTML對(duì)標(biāo)簽的嵌套沒有嚴(yán)格的規(guī)定。
（4）在XHTML中，標(biāo)簽必須封閉；在HTML規(guī)范中，標(biāo)簽不閉合也是正確的，即標(biāo)簽可以不成對(duì)出現(xiàn)。例如，“<p>我沒有結(jié)束標(biāo)簽”和“<p>我有開始標(biāo)簽和結(jié)束標(biāo)簽</p >”，這兩條代碼的顯示效果，在HTML規(guī)范中是完全相同的，但是，在XHTML中，第一條語句是不允許的(不能正常顯示)，必須像第二條語句那樣，嚴(yán)格地使標(biāo)簽閉合。
（5）在XHTML中，即使是空元素的標(biāo)簽也必須封閉，這里說的空標(biāo)簽，就是指那些<img>、<br>、<hr>等不對(duì)稱的標(biāo)簽，它們也必須閉合，即寫作<img>、<br>、<hr/>；而在HTML.規(guī)范中，這類標(biāo)簽可以不封閉。例如，在HTML中書寫為<img>或<img/>均是正確的，但在XHTML規(guī)范中，必須寫為<img/>才正確。
（6）在XHTML中，屬性值必須用雙引號(hào)括起來；在HTML中，屬性可以不必使用雙引號(hào)。
（7）在XHTML中，屬性值必須使用完整形式；在HTML中，一些屬性經(jīng)常使用簡(jiǎn)寫方式設(shè)定屬性值。例如：
<input disabled>
而在XHTML中，必須完整地寫做：
<input disabled="true">
(8)在XHTML中，應(yīng)該區(qū)分“內(nèi)容標(biāo)簽”與“結(jié)構(gòu)標(biāo)簽”。例如，<p>標(biāo)簽是一個(gè)內(nèi)容標(biāo)簽，而<table>標(biāo)簽是結(jié)構(gòu)標(biāo)簽，因此，不允許將<table>標(biāo)簽置于<p>標(biāo)簽內(nèi)部。反之，如果將<p>標(biāo)簽置于<td>…</td>之間，則是完全正確的。
（9)在XHTML中，必須添加文檔類型聲明<！DOCTYPE>。該標(biāo)簽用于描述HTML的版本和文檔類型聲明，進(jìn)行了相應(yīng)的版本和文檔類型聲明之后，才能保證這是一個(gè)XHTML網(wǎng)頁，從而讓瀏覽器以相應(yīng)的規(guī)范來解析網(wǎng)頁，使網(wǎng)頁正常顯示。
TML即超文本標(biāo)記語言 (Hyper Text Markup Language)， 是用來描述網(wǎng)頁的一種語言。
超文本標(biāo)記語言的結(jié)構(gòu)包括"頭"部分（外語：Head）、和"主體"部分（外語：Body），其中"頭"部提供關(guān)于網(wǎng)頁的信息，"主體"部分提供網(wǎng)頁的具體內(nèi)容。
標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
如下代碼：
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
例子解釋:
<html> 與 </html> 之間的文本描述網(wǎng)頁
<body> 與</body> 之間的文本是可見的頁面內(nèi)容
<h1> 與 </h1> 之間的文本被顯示為標(biāo)題
<p> 與 </p> 之間的文本被顯示為段落
2
HTML 元素
HTML 文檔是由 HTML 元素定義的。
HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。
注釋：開始標(biāo)簽常被稱為開放標(biāo)簽（opening tag），結(jié)束標(biāo)簽常稱為閉合標(biāo)簽（closing tag），大多數(shù) HTML 元素可擁有屬性。
空的 HTML 元素：
沒有內(nèi)容的 HTML 元素被稱為空元素。在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關(guān)閉。
在開始標(biāo)簽中添加斜杠，比如:<br>就是沒有關(guān)閉標(biāo)簽的空元素, 而<br />是關(guān)閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使 <br>在所有瀏覽器中都是有效的，但使用 <br /> 其實(shí)是更長(zhǎng)遠(yuǎn)的保障。
HTML 提示：使用小寫標(biāo)簽
HTML 標(biāo)簽對(duì)大小寫不敏感：<P> 等同于<p>。許多網(wǎng)站都使用大寫的 HTML 標(biāo)簽。
W3School 使用的是小寫標(biāo)簽，因?yàn)槿f維網(wǎng)聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強(qiáng)制使用小寫。
3
HTML 屬性
HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。
屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name="value"。
屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定。
屬性實(shí)例:
HTML 鏈接由 <a>標(biāo)簽定義。鏈接的地址在 href 屬性中指定：
<a href="http://www.w3school.com.cn">This is a link</a>
注釋：屬性值應(yīng)該始終被包括在引號(hào)內(nèi)。雙引號(hào)是最常用的，不過使用單引號(hào)也沒有問題。在某些個(gè)別的情況下，比如屬性值本身就含有雙引號(hào)，那么您必須使用單引號(hào)，例如：name='Bill "HelloWorld" Gates'。
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。
HTML 提示：使用小寫屬性
屬性和屬性值對(duì)大小寫不敏感。
不過，萬維網(wǎng)聯(lián)盟在其 HTML 4 推薦標(biāo)準(zhǔn)中推薦小寫的屬性/屬性值。
而新版本的 (X)HTML 要求使用小寫屬性。
一些常見HTML屬性:
HTML 編輯器
使用 Notepad 或 TextEdit 來編寫 HTML
可以使用專業(yè)的 HTML 編輯器來編輯 HTML：
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
5
HTML 標(biāo)題
標(biāo)題（Heading）是通過 <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。
<h1>This is a heading</h1><h1>定義最大的標(biāo)題。
<h6>This is a heading</h6><h6> 定義最小的標(biāo)題。
注釋：瀏覽器會(huì)自動(dòng)地在標(biāo)題的前后添加空行。
注釋：默認(rèn)情況下，HTML 會(huì)自動(dòng)地在塊級(jí)元素前后添加一個(gè)額外的空行，比如段落、標(biāo)題元素前后。
練習(xí)題
1.以下關(guān)于標(biāo)題的說法哪種是錯(cuò)誤的？
A默認(rèn)情況下，HTML 會(huì)自動(dòng)地在塊級(jí)元素前后添加一個(gè)額外的空行
B使用標(biāo)題僅僅是為了產(chǎn)生粗體或大號(hào)的文本
C搜索引擎使用標(biāo)題為您的網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引
2.下面幾個(gè)標(biāo)題哪個(gè)權(quán)重最高，最主要？
A<h1>This is a heading</h1>
B<h2>This is a heading</h2>
C<h3>This is a heading</h3>
3.默認(rèn)情況下，HTML 會(huì)自動(dòng)地在塊級(jí)元素前后添加一個(gè)額外的空行,這個(gè)說法對(duì)嗎？
A對(duì)
B錯(cuò)
4.以下關(guān)于段落的做法哪種是正確的？
A<p>This is a paragraph
B使用空的段落標(biāo)記 <p></p> 去插入一個(gè)空行
C<p>This is a paragraph </p>
原文鏈接：https://mp.weixin.qq.com/s?src=11×tamp=1576462698&ver=2037&signature=T2Y4nDq1tylgwbylaAYBEiwqYNuQy0BzSdRIEzkzni71BqjVzvhA0eT7YdzrQ9*ZeGQtOKZ0z4V6axdTgxpf7n0x*wBZpS6*xYfaZwBzpdk5v1kwcJgPVjudZ8x5yPVx&new=1
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
