|
1、<body>標簽，網頁上顯示的內容放在body標簽中 在網頁上要展示出來的頁面內容要放在body標簽中。 Html代碼為：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的蓋茨比</title> </head> <body> <h1>了不起的蓋茨比</h1> <p>1922年的春天，一個想要成名名叫<em>尼克·卡拉威</em>（托比·馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。</p>
<p>菲茨杰拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為<strong>"爵士樂時代"</strong>吟唱華麗挽歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二注解。</p> </body> </html> 效果圖： 了不起的蓋茨比 1922年的春天，一個想要成名名叫尼克·卡拉威（托比·馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。 菲茨杰拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗挽歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二注解。
<hx>標簽HTML中提供了六級標題，為<h1>至<h6>。其中，<h1>字體最大，<h6>字體最小。 代碼： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>標題標簽的使用示例</title> </head> <body> <h1>這是一級標題</h1> <h2>這是二級標題</h2> <h3>這是三級標題</h3> <h4>這是四級標題</h4> <h5>這是五級標題</h5> <h6>這是六級標題</h6> </body> </html>
效果：
<br>標簽：換行<br/> 代碼： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>換行標簽的使用</title> </head> <body> 春眠不覺曉<br/>處處聞啼鳥<br/>夜來風雨聲<br/>花落知多少 </body> </html>
段落標簽<p>：可以使文字排列更加整齊、清晰?？梢猿蓪κ褂茫部梢詥为毷褂?。 <p>標簽有一個屬性align，用來指定文本顯示時的對齊方式，可取center、left、right三個值。 代碼： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>段落標簽使用示例</title> </head> <body> <p align="center">春曉</p> <p align="center"> 春眠不覺曉<br/>處處聞啼鳥<br/>夜來風雨聲<br/>花落知多少 </p> </body> </html>
效果：
轉義字符 三部分組成，第一部分是“&”符號；第二部分是實體名字或者是“#”加上實體編號；第三部分是分號，表示轉義字符結束。同一個符號，既可以使用實體名稱，例如“<”，也可以使用實體編號，例如“<”，這兩種方式都表示符號“<”。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>轉義字符的使用示例</title> </head> <body> 在HTML中，常用的特殊字符有：<br/> <、>、&、"、©、®、™、×、÷等。 </body> </html>
效果：
任務：在 “來源：作文網”文本的后面輸入兩個空格。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>空格講解</title> </head> <body> <h1>感悟夢想</h1> 來源：作文網作者：為夢想而飛 </body> </html>
<hr>標簽，添加水平橫線 其屬性及可取值如表所示。
任務:在二段之間添加一條水平橫線，高度：100px,寬50% <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>hr標簽使用</title> </head> <body> <p>火車飛馳過暗夜里的村莊，月光，總是太容易讓思念寂寞，太容易讓人覺得孤獨。</p> <p>每一枚被風吹起的蒲公英，都載滿了一雙眼睛的深情告別與一個目光的依依不舍。那天，我拿著行李，帶上一個背影的祝福與惆悵，揮手告別了這片土地。我不知道，我何時會回來。</p> </body> </html>
無序列表使用標簽<ul>定義，列表項使用<li>標簽定義，列表項的內容位于一對<li>標簽之內。 <li>標簽的type屬性可以定義列表項的標記符。其中： disc是默認值，為實心圓； circle為空心圓； square為實心方塊；
代碼： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>無序列表的使用示例</title> </head> <body> 常見的體育運動有：<br/> <ul> <li>籃球</li> <li>排球</li> <li>乒乓球</li> <li>足球</li> </ul> </body> </html>
效果圖：
<ol>有序列表 標簽的type屬性可以指定有序列表的項目符號的類型，type屬性各個取值的含義如表所示。
代碼： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>有序列表的使用示例</title> </head> <body> <ol> <li>春思</li> <li>望岳 <ol type="i"> <li>岱宗夫如何，齊魯青未了。</li> <li>造化鐘神秀，陰陽割昏曉。</li> <li>蕩胸生層云，決眥入歸鳥。</li> <li>會當凌絕頂，一覽眾山小。 </li> </ol> </li> <li>送別</li> <li>渭川田家</li> </ol> </body> </html>
效果圖：
<a>標簽，其格式如下： <a href=“…” target=“…”>文本</a> 其中，href指文本鏈接的目標資源的地址，target指在何處打開目標資源。target的可取值及其含義如表所示。
代碼： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>文本鏈接示例</title> </head> <body> 常用的門戶網站有： <ul> <li><a >新浪</a></li> <li><a >搜狐</a></li> <li><a >網易</a></li> </ul> </body> </html>
效果圖：
任務：在右部編輯器中的的“托比·馬奎爾Tobey Maguire”這幾個字做鏈接，鏈接到的目標網址為“http://www./mdb/star/3316/” <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的蓋茨比</title> </head> <body> <ul> <li><a href="#" title="前端開發(fā)面試心法">前端開發(fā)面試心法</a> </li> <li><a href="#" title="零基礎學習html">零基礎學習html</a></li> <li><a href="#" title="JavaScript全攻略">JavaScript全攻略</a></li> </ul> <p>1922年的春天，一個想要成名名叫尼克·卡拉威（托比·馬奎爾Tobey Maguire飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p> <p>菲茨杰拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗挽歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二注解。</p> </body></html> 任務：把編輯器中的超鏈接改為在新窗口中打開。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的蓋茨比</title> </head> <body> <p>1922年的春天，一個想要成名名叫尼克·卡拉威（<a href="http://www./mdb/star/3316/">托比·馬奎爾Tobey Maguire </a>飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p> <p>菲茨杰拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗挽歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二注解。</p> </body> </html>
<img>標簽在網頁中嵌入圖像，并設置圖像的屬性。 其格式如下： <img src=“…” alt=“…” height=“…” width=“…” /> 其中，src屬性和alt屬性是必需的。 src屬性指的是引用圖像的URL，一般使用相對路徑； alt指的是圖像的替代文本； height指的是圖像的高度； width指的是圖像的寬度。
代碼： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>圖像標簽使用示例</title> </head> <body> <h4>一幅鮮花圖像</h4> <img src="image/flower.jpg" width="200"/> </body> </html>
|
|
|
