第一次課主要講解了HTML是什么降狠,HTML結(jié)構(gòu)对竣,部分標(biāo)簽的講解,標(biāo)簽的劃分榜配,標(biāo)簽的部分分類否纬。
HTML是用來編寫網(wǎng)頁使用的語言,先學(xué)習(xí)了HTML4的知識點蛋褥。
HTML結(jié)構(gòu)說明临燃,首先是程序的開始<!DOCTYPE html> 是html5的標(biāo)識,html是最外層的標(biāo)簽烙心,然后是head膜廊,boby部分。注意標(biāo)簽都是成對出現(xiàn)淫茵。head部分包括(title(文檔名)爪瓜、meta(基本設(shè)置)、script(引入js)匙瘪、style(樣式設(shè)置)铆铆、link(外部引入css)。
<!DOCTYPE HTML>
<html>
<head>
<title>第一個正規(guī)的html</title>
<meta charset="UTF-8">
</head>
<body>
我我的
</boby>
</html>
標(biāo)題為<h1>到<h6>字體大小越來越小
一般來說h1一個頁面只能用一次
h3可以用兩到三次
h4 h5
seo搜索引擎優(yōu)化只針對h1-h3
<b>粗體</b>?文本
<i>斜體</i>?文本
<u>下劃線</u>
文本 <s>刪除線</s>
文本 下標(biāo)
文本 上標(biāo)
段落元素<p>
換行元素
分隔線元素
預(yù)格式化<pre>
第一次作業(yè)01:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML教程</title>
</head>
<body>
<h1>HTML簡介</h1>
<input type="button" value="上一頁">
<input type="button" value="下一頁">
<h2>HTML教程</h2>
<p>在本教學(xué)中丹喻,你將學(xué)習(xí)如何使用HTML來創(chuàng)建站點薄货。</p>
<p>HTML很容易學(xué)習(xí)!你會喜歡它的碍论!</p>
<p>現(xiàn)在開始學(xué)習(xí)HTML!</p>
<h3>HTML實例<h3>
<p>學(xué)習(xí)100個實例菲驴!使用我們的編輯器,你可以編輯HTML骑冗,然后點擊測試按鈕來查看結(jié)果赊瞬。</p>
<p> <input type="button" value="親自試一試吧!"> </p>
<h4>HTML測驗<h4>
<p>w3School測試你的HTML技能贼涩!</p>
<p>HTML測驗!</p>
<h4>HTML參考手冊<h4>
<p>在w3school,我們提供完整的HTML參考手冊巧涧,其中包括標(biāo)簽、屬性遥倦、顏色谤绳、實體等等。</p>
<p>HTML4.01參考手冊
<input type="button" value="上一節(jié)">
<input type="button" value="下一節(jié)">
</boby>
</html>
第一次作業(yè)02:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML簡介</title>
</head>
<body>
<p>HTML簡介</p>
<input type="button" value="上一節(jié)">
<input type="button" value="下一節(jié)">
<p>實例</p>
<pre style="border:1px gray dotted;">
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<input type="button" value="親自試一試">
<p>什么是HTML?</p>
<p>HTML是用來描述網(wǎng)頁的一種語言袒哥。</p>
<ul>
<li>HTML指的是超文本標(biāo)記語言(Hyper Text Markup Language) </li>
<li>HTML不是一種編程語言缩筛,而是一種標(biāo)記語言(markup language)</li>
<li>標(biāo)記語言是一套標(biāo)記標(biāo)簽(markup tag)</li>
<li>HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁</li>
</ul>
<p>HTML標(biāo)簽</p>
<p>HTML標(biāo)記標(biāo)簽通常被稱為HTML標(biāo)簽(HTML tag)</p>
<ul>
<li>HTML標(biāo)簽是由尖括號包圍的關(guān)鍵詞,比如<html></li>
<li>HTML標(biāo)簽通常是成對出現(xiàn)的堡称,比如<b>和</b></li>
<li>標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽瞎抛,第二個標(biāo)簽是結(jié)束標(biāo)簽</li>
<li>開始和結(jié)束標(biāo)簽頁被稱為開放標(biāo)簽和閉合標(biāo)簽</li>
</ul>
<p>HTML文檔=網(wǎng)頁</p>
<ul>
<li>HTML文檔描述網(wǎng)頁</li>
<li>HTML文檔包含HTML標(biāo)簽和純文本</li>
<li>HTML文檔也被稱為網(wǎng)頁</li>
</ul>
<p>web瀏覽器的作用就是讀取HTML文檔,并以網(wǎng)頁的形式顯示出它們却紧。瀏覽器不會顯示HTML標(biāo)簽桐臊,而是使用標(biāo)簽來解釋頁面的內(nèi)容:</p>
<pre style="border:1px gray dotted;">
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</pre>
<p>例子解釋</p>
<ul>
<li><html>與</html>之間的文本描述網(wǎng)頁</li>
<li><body>與</body>之間的文本是可見的頁面內(nèi)容</li>
<li><h1>與</h1>之間的文本被顯示為標(biāo)題</li>
<li><p>與</p>之間的文本被顯示為段落</li>
</ul>
<input type="button" value="上一節(jié)"> <input type="button" value="下一節(jié)">
</body>
</html>
第一次作業(yè)03:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>基本的HTML標(biāo)簽-四個實例</title>
</head>
<body>
<p>基本的HTML標(biāo)簽-四個實例</p>
<input type="button" value="上一節(jié)">
<input type="button" value="下一節(jié)">
<p><b>本章通過實例向您演示最常用的HTML標(biāo)簽</p></b>
<p>提示:不要擔(dān)心本章中您還沒有學(xué)過的例子胎撤,您將在下面的章節(jié)中學(xué)到它們。</p>
<p>提示:學(xué)習(xí)HTML最好的方式就是邊學(xué)邊做實驗断凶。我們?yōu)槟鷾?zhǔn)備了很好的HTML編輯器伤提。您可以任意編輯一段HTML源碼,然后單擊TLY按鈕來查看結(jié)果认烁。</p>
<p><b>HTML標(biāo)題</p></b>
<p>HTML標(biāo)題(Heading)是通過<h1>-<h6>等標(biāo)簽進(jìn)行定義的肿男。</p>
<p><b>實例</p></b>
<pre style="border:1px gray dotted;">
<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
</pre>
<input type="button" value="親自試一試">
<p><b>HTML段落</p></b>
<p>HTML段落是通過<p>標(biāo)簽進(jìn)行定義的。</p>
<p><b>實例</p></b>
<pre style="border:1px gray dotted;">
<p> This is a paragraph.</p>
<p> This is a another paragraph.</p>
</pre>
<input type="button" value="親自試一試">
<p><b>HTML鏈接</p></b>
<p>HTML鏈接是通過<a>標(biāo)簽進(jìn)行定義的却嗡。</p>
<p><b>實例</p></b>
<pre style="border:1px gray dotted;">
< a href="http://www.w3school.com.cn"> This is a link</a>
</pre>
<input type="button" value="親自試一試">
<p><b>注釋:</p></b> <p>在href屬性中指定鏈接的地址舶沛。</p>
<p>(您將在本教程稍后的章節(jié)中學(xué)習(xí)更多有關(guān)屬性的知識)。</p>
<p><b>HTML圖像</p></b>
<p>HTML圖像是通過<img>標(biāo)簽進(jìn)行定義的稽穆。</p>
<p><b>實例</p></b>
<pre style="border:1px gray dotted;">
<img src="w3school.jpg" width="104" height="142"/>
</pre>
<input type="button" value="親自試一試">
<p><b>注釋:</p></b><p>圖像的名稱和尺寸是以屬性的形式提供的冠王。</p>
<input type="button" value="上一節(jié)"> <input type="button" value="下一節(jié)">
第一次課聽完赶撰,感覺比較迷糊舌镶,有很多標(biāo)簽都記不太清,回宿舍以后馬上開電腦開始寫作業(yè)豪娜,感覺上課都聽懂了餐胀,但是自己回去寫的時候去發(fā)現(xiàn)有點無從下手的感覺。慢慢的寫完寫完第一個思路才稍稍清晰些瘤载。寫完第二個的時候應(yīng)該半夜兩點了否灾。突然有點感概,但既然決定走了鸣奔,那么付出多少將會得到多少墨技。看到代碼一個一個的敲出來挎狸,慢慢成型的頁面扣汪,哪怕很簡單但是很有成就感啊锨匆!老師很幽默也很耐心崭别,菜鳥練成記吧,或許現(xiàn)在菜鳥都不能算==