【實驗題目】HTML&CSS實驗(1)
【實驗目的】掌握基本HTML基本元素的使用方法。
----------------------個人作業，如果有后輩的作業習題一致，可以參考學習，一起交流，請勿直接copy
【實驗內容】
1、根據下圖提示(標出了元素)盡可能做出相似的網頁（文字包含在html1.txt中）。其中包含的圖像(sysu.png，fig1.png)和鏈接的網頁(kj.html~sh.html)都在當前路徑中；有一些元素下面標出了屬性; 最后一行使用了div元素(id="footer")。
* 在線調試可以提交評論。
做完后保存該網頁文件html4.html，並截屏瀏覽器(ctrl+alt+PrintScreen)：
2、在步驟1的網頁的head元素中加入以下style元素：
<style>
a:link,a:visited {color:blue;text-decoration:none}
body,inputC {font-size:24px}
input{margin-top:20px}
p {text-indent:2em}
#main,#footer,#header{clear:both;max-width:40em;margin:80px auto}
#header {margin:0px auto}
ul li {float:left;list-style-type:none;width:4em;}
#fig1 {float:right;}
table {width:100%;border-collapse:collapse}
td {text-align:center}
#cominput {width:100%;height:100px}
#comtitle {margin-top:40px}
</style>
運行后截屏瀏覽器：
3、將步驟1完成的網頁中id為"header"、"main"、"footer"的div元素分別換成html5的元素header、article、footer，並保存為文件html5.html。
運行后截屏：
4、把步驟3完成的網頁中的head元素中加入以下style元素：
<style>
a:link,a:visited {color:blue;text-decoration:none}
body,input,textarea {font-size:24px}
input{margin-top:20px}
p {text-indent:2em}
article,footer,header{clear:both;max-width:40em;margin:80px auto}
header {margin:0px auto}
ul li {float:left;list-style-type:none;width:4em;}
#fig1 {float:right;}
table {width:100%;border-collapse:collapse}
td {text-align:center}
#cominput {width:100%;height:100px}
#comtitle {margin-top:40px}
</style>
運行后截屏：
【完成情況】
是否完成了這些步驟？(√完成 ×未做或未完成)
1 [√ ] 2 [√ ] 3 [√ ] 4 [√ ]
【實驗體會】
寫出實驗過程中遇到的問題，解決方法和自己的思考;並簡述實驗體會（如果有的話）。
一開始，我在win10的edge瀏覽器和chrome瀏覽器下運行html文件時，漢字無法正常顯示（如圖），在這時，代碼中是含有“<meta charset="utf-8">”語句的。在網上查找這一問題的解決方法，可能是瀏覽器字體欠缺或者修改瀏覽器為UTF-8編碼。但是因為處理起來比較麻煩，我就沒有參照解決方法執行。先行刪去了“<meta charset="utf-8">”這一語句，繼續編程了一段部分之后再運行，居然在所有瀏覽器中都可以正常顯示了。而后加上這句也可以正常顯示，仿佛這一問題根本沒有出現過。個人也不是很懂這是為什么，有種玄玄的感覺……
（之后的內容介紹得知，txt文本默認字符並不是utf-8，而是ANSI，也就是說，編寫html的文本不是utf-8編碼，而此時html文件含有“<meta charset="utf-8">”語句，就會出現錯誤，而有時去掉卻可以正常顯示，是因為部分瀏覽器自帶有字符字體檢測的功能）
之后遇到的一個問題則是table的展示：因為最初沒有正確地理解tr(table row)這個標簽的含義，分三塊編寫了table的內容，展示出來的結果完全是錯誤的表現形式（如下圖）。觀察了顯示的表格，突然理解到：tr中row是需要一行一行編寫的。分開編寫每一行之后，問題就解決了。
此外還有一個問題：在老師所提供的在線測評系統中測試代碼時，圖片的底色為綠色，第一次還以為是自己瀏覽器設置的問題，但是之后直接運行HTML文件時，圖片可以正常顯示。聯系測評系統的原理，可能是老師在服務器上保存的同名圖片為綠色背景。
通過此次的實驗，對HTML文件的編寫及各項標簽內容（特別是table和form）有了更加清楚的認識，也理解了部分HTML和HTML5的區別，多少理解了style對網頁顯示的作用，今后也會多瀏覽一些優質網頁並加以練習來鍛煉自己的web編程能力。