国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 第一章 HTML語言基礎(chǔ)

第一章 HTML語言基礎(chǔ)

時間：2023-09-26 10:30:01 | 來源：網(wǎng)站運營

時間：2023-09-26 10:30:01 來源：網(wǎng)站運營

第一章 HTML語言基礎(chǔ)：

第一節(jié) HTML的基本結(jié)構(gòu)

1.什么是HTML

2.如何運行HTML文件

通過不同種類的瀏覽器打開html文件：IE,FIrefox,Chrome

3.HTML文檔結(jié)構(gòu)

4.HTML注釋和特殊字符

注釋:就是為代碼加以解釋，另外也可以使用注釋屏蔽無用的代碼

格式:

<!-- 注釋的內(nèi)容 -->特殊符號htm編碼&copy;&reg;<&lt;>&gt;空格&nbsp;

第二節(jié) 創(chuàng)建HTML文檔

第三節(jié) 常用HTML標簽

標簽的寫法：

1.<h1>~<h6>標題標簽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML> <HEAD> <TITLE> New Document </TITLE> <META name="Generator" content="EditPlus"> <META name="Author" content=""> <META name="Keywords" content=""> <META name="Description" content=""> </HEAD>? <BODY> <!--標題標簽--> <h1>這是1級標題</h1> <h2>這是2級標題</h2> <h3>這是3級標題</h3> <h4>這是4級標題</h4> <h5>這是5級標題</h5> <h6>這是6級標題</h6> <!-- 沒有h7，瀏覽器自動忽略該標簽 <h7>這是7級標題</h7> --> 這是普通內(nèi)容? </BODY></HTML>?


2.<p>段落標簽

p:用于表示一個段落，段落之間會存在段間距

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML> <HEAD> <TITLE> New Document </TITLE> <META name="Generator" content="EditPlus"> <META name="Author" content=""> <META name="Keywords" content=""> <META name="Description" content=""> </HEAD>? <BODY> <h3>今天天氣非常熱</h3> <p> 各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況 </p> <p> 各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況各地出現(xiàn)不同的情況 </p> </BODY></HTML>?

3.<br/>換行標簽

br:讓內(nèi)容換行，換行的兩行之間沒有間距

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML> <HEAD> <TITLE> New Document </TITLE> <META name="Generator" content="EditPlus"> <META name="Author" content=""> <META name="Keywords" content=""> <META name="Description" content=""> </HEAD>? <BODY> <h1>再別康橋</h1> <p> 作者：徐志摩 </p> <p> 輕輕的我走了，<br/> 正如我輕輕的來；<br/> 我輕輕的招手，<br/> 作別西天的云彩。<br/> </p> <p> 那河畔的金柳，<br/> 是夕陽中的新娘；<br/> 波光里的艷影，<br/> 在我的心頭蕩漾。<br/> </p> <p> 軟泥上的青荇，<br/> 油油的在水底招搖；<br/> 在康河的柔波里，<br/> 我甘心做一條水草！<br/> </p> <p> 那榆蔭下的一潭，<br/> 不是清泉，是天上虹；<br/> 揉碎在浮藻間，<br/> 沉淀著彩虹似的夢。<br/> </p> <p> 尋夢？撐一支長篙，<br/> 向青草更青處漫溯；<br/> 滿載一船星輝，<br/> 在星輝斑斕里放歌。<br/> </p> <p> 但我不能放歌，<br/> 悄悄是別離的笙簫；<br/> 夏蟲也為我沉默，<br/> 沉默是今晚的康橋！<br/> </p> <p> 悄悄的我走了，<br/> 正如我悄悄的來；<br/> 我揮一揮衣袖，<br/> 不帶走一片云彩。<br/> </p> </BODY></HTML>?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML> <HEAD> <TITLE> New Document </TITLE> <META name="Generator" content="EditPlus"> <META name="Author" content=""> <META name="Keywords" content=""> <META name="Description" content=""> </HEAD>? <BODY> <h1>再別康橋</h1> <p> 作者：徐志摩 </p> <p> 輕輕的我走了，<br/> 正如我輕輕的來；<br/> 我輕輕的招手，<br/> 作別西天的云彩。<br/> </p> <p> 那河畔的金柳，<br/> 是夕陽中的新娘；<br/> 波光里的艷影，<br/> 在我的心頭蕩漾。<br/> </p> <p> 軟泥上的青荇，<br/> 油油的在水底招搖；<br/> 在康河的柔波里，<br/> 我甘心做一條水草！<br/> </p> <p> 那榆蔭下的一潭，<br/> 不是清泉，是天上虹；<br/> 揉碎在浮藻間，<br/> 沉淀著彩虹似的夢。<br/> </p> <p> 尋夢？撐一支長篙，<br/> 向青草更青處漫溯；<br/> 滿載一船星輝，<br/> 在星輝斑斕里放歌。<br/> </p> <p> 但我不能放歌，<br/> 悄悄是別離的笙簫；<br/> 夏蟲也為我沉默，<br/> 沉默是今晚的康橋！<br/> </p> <p> 悄悄的我走了，<br/> 正如我悄悄的來；<br/> 我揮一揮衣袖，<br/> 不帶走一片云彩。<br/> </p> </BODY></HTML>?

4.格式化標簽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML> <HEAD> <TITLE> New Document </TITLE> <META name="Generator" content="EditPlus"> <META name="Author" content=""> <META name="Keywords" content=""> <META name="Description" content=""> </HEAD>? <BODY> <center> <h3>什么是HTML語言？</h3> </center> <!--hr:水平線--> <hr/> <!-- ol: order list 有序列表 li: list item 列表項 --> <ol> <li>HTML是超文本標記語言</li> <li>HTML有很多標簽</li> <li>擴展名是.html或.htm</li> </ol>? <hr/> <!-- 無序列表: ul : unorder list 無序列表 li : list item 列表項 --> <ul> <li>HTML是超文本標記語言</li> <li>HTML有很多標簽</li> <li>擴展名是.html或.htm</li> </ul> </BODY></HTML>?

5.文本標簽

<b>這是B的效果</b><br/> <u>這是U的效果</u><br/> <i>這是i的效果</i><br/> A<sup>上標</sup> B<sub>下標</sub><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML> <HEAD> <TITLE> New Document </TITLE> <META name="Generator" content="EditPlus"> <META name="Author" content=""> <META name="Keywords" content=""> <META name="Description" content=""> </HEAD>? <BODY> <center> <b> 楓橋夜泊 <sub>作者：張繼</sub> </b> <br/> <p> 月落<i>烏啼</i>霜滿天，江楓<u>漁火</u>對愁眠。 </p> <p> 姑蘇城外寒山寺<sup>①</sup>，夜半鐘聲到客船。 </p> </center> </BODY></HTML>?標簽屬性說明:

size:字號 1-7

face:字體類型，windows安裝的字體。常用:隸書,幼圓,黑體

color:顏色關(guān)鍵字(red,blue,yellow), 6位16進制表示法(#ffffff)，rgb(紅色[0-255],綠色[0-255],藍色[0-255])

<font size="7" face="幼圓" color="red">豬八戒</font><br/><font size="7">豬八戒</font>

6. 圖像標簽<img>

常用的圖片格式:

<BMP> : windows位圖，圖片清晰度高，但是尺寸大，網(wǎng)頁中的圖片一般不用bmp。

<JPG> : 文件擴展名為.jpg或.jpeg , 圖像品質(zhì)高，下載速度快。

<GIF> : 圖片壓縮比高，磁盤空間占用較少，可制作2D動畫文件。

<PNG> : 是網(wǎng)上接受的最新圖像文件格式。PNG能夠提供長度比GIF小30%的無損壓縮圖像文件

語法:

<img src="圖片文件路徑" title="描述圖片信息在鼠標放在圖片上時呈現(xiàn)" alt="圖片無法顯示時的提示" width="寬度" height="高度" align="對齊方式:left/right" /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML> <HEAD> <TITLE> New Document </TITLE> <META name="Generator" content="EditPlus"> <META name="Author" content=""> <META name="Keywords" content=""> <META name="Description" content=""> </HEAD>? <BODY> <!-- 1.文件和圖片先保存到一個目錄中 2.使用img標簽引用圖片 --> <img src="swk.jpg" title="齊天大圣" alt="美猴王" width="100" height="100" align="left" /> 這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空 </BODY></HTML>?


7.文件路徑

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML> <HEAD> <TITLE> New Document </TITLE> <META name="Generator" content="EditPlus"> <META name="Author" content=""> <META name="Keywords" content=""> <META name="Description" content=""> </HEAD>? <BODY> <!-- 1.文件和圖片先保存到一個目錄中 2.使用img標簽引用圖片 --> <img src="../swk.jpg" title="齊天大圣" alt="美猴王" width="100" height="100" align="left" /> 這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空這是孫悟空 </BODY></HTML>

8.超鏈接標簽<a>

語法:

<a href="鏈接的目標頁面">鏈接文本</a>

9.錨點

在網(wǎng)頁中可以設(shè)置一個標記用于定位，這個標記就稱為錨點

定義錨點:

<a name="錨點名稱">普通文本</a>跳轉(zhuǎn)到錨點:

<a href="#錨點名稱">鏈接文本</a>


第四節(jié) HTML5新增標簽

1.文檔結(jié)構(gòu)標簽

<header>:文檔內(nèi)容頁眉

<nav>:文檔內(nèi)容導(dǎo)航

<footer>:文檔的頁腳

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head>? <body> <header> 這是文檔內(nèi)容的頁眉(頭部) </header> <nav> <a href="#">菜單1</a> <a href="#">菜單2</a> <a href="#">菜單3</a> <a href="#">菜單4</a> <a href="#">菜單5</a> </nav> <p> 這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容這是文檔的主體內(nèi)容v </p> <footer> 這是文檔內(nèi)容的頁腳 </footer> </body></html>?

2. 視頻標簽<video>

語法：

<video src="視頻文件名" autoplay="autoplay" controls="controls" width="寬度"/><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head>? <body> <video src="郭靜 - 你的香氣.mp4" autoplay="autoplay" controls="controls"/> </body></html>?


第五節(jié) 標簽的分類

塊狀標簽：獨自占一行 h(標題標簽),p(段落標簽), div(最純凈的塊狀標簽，通常用于頁面布局)

行內(nèi)標簽: 內(nèi)容擠到一行 b(加粗),u(下劃線),i(斜體) span(最純凈的行內(nèi)標簽,通用于限定內(nèi)容)

行內(nèi)塊狀標簽: 同時具有塊狀和行內(nèi)的特征,擠在一行顯示，可以設(shè)置寬和高 典型的行內(nèi)塊狀標簽:img

如何區(qū)分一個元素是塊狀還是行內(nèi)元素:

把一個元素在頁面中寫兩次，看呈現(xiàn)的效果是分行顯示，還在擠在一行顯示，如果分行顯示，說明這個元素是塊狀元素。如果擠在一行顯示，說明這個元素，是行內(nèi)元素。

作業(yè)




1.使用文檔結(jié)構(gòu)標簽(header,nav,footer)實現(xiàn)如下效果

2.使用sub sup 標簽完成如下內(nèi)容

3.使用標題標簽和段落標簽完成如下內(nèi)容

4.使用文本強調(diào)標簽<b> <i> <em> <strong> 完成如下內(nèi)容



關(guān)鍵詞：語言,基礎(chǔ)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉