優秀論文2022-0028:HTML入門與簡易網頁設計
原創東電電子微學堂
東電電子微學堂
-lab
“東電電子微學堂”是推進電子技術理論與實驗教學多元化、為同學提供全時段、全方位的技術支持的服務平臺。該平臺包含理論學堂、實戰課堂以及課外天地三個板塊，分別對應理論教學、實踐教學以及課外學習。
發表于
收錄于合集
HTML入門與簡易網頁設計
TIME
王海濤，楊佳強
摘要：
HTML是一切網頁開發的基礎，而網頁是構成網站的基本元素。HTML語言使分散的資源連接為一個可能的邏輯整體。學習使用HTML有利于學習者了解網站的構成原理、學會有風格地創作網頁，快捷便利地獲取網絡資源。作為一種標識性語言，HTML通過純文本文件實現網頁的設計，反之也能夠通過變成實現對固定頁面的信息進行檢索，如網絡爬蟲等。本文將簡明地介紹HTML的基本編程原理、方法，并介紹設計一個表單的方法。
關鍵詞：網頁設計；HTML
Part 0
引言
在互聯網時代，如果一個人想要了解一家公司，那么首先這個人將查找這個公司的資料。于是乎打開搜索引擎，搜索相關網頁，找到官方網站。點開網頁，一看，網頁做得十分酷炫，加載特效動畫，整個網頁排版合理，運行流暢。這時此人會覺得這個公司一定是比較正規的，因為它除了業務和產品介紹之外還有專業的前端開發，資金鏈一定是流暢的，效益會是好的，會讓人愿意合作。相反，若是網頁卡頓，點都點不進去，網頁設計陳舊老土，則會給人造成一定的負面影響。在互聯網時代，網站是面向公眾的一張名片，有時一張名片的好壞決定著第一印象的好壞，甚至影響業務的成敗。因此為了設計出一個較好的網頁，有一個好的第一印象，就得學習HTML。
對于有編程經驗的工作者來說，HTML作為前端開發最開始的一部分是簡單易上手的，你可能會說只有HTML能干什么。誠然，HTML、CSS、、數據庫等都是構建一個網站的基本工具，這些工具相互聯系，只有HTML什么也干不了。但是沒有骨架便不可能有血肉，只有HTML學懂學好html顯示圖片自動寬度，才可能學好花里胡哨的網頁特效，才能有漂亮的網頁。下面我將分網頁開發平臺、HTML基本代碼和簡易網頁制作三部分內容的介紹中，帶你初窺網頁制作的門徑。
Part 1
網頁開發工具
所謂“工欲善其事必先利其器”，是旗下推出的一款支持HTML5的Web開發IDE。特點是運行速度快，是的最大優勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發效率。
下載地址：
圖1 官網
或
谷歌瀏覽器或者火狐瀏覽器。制作出的網頁將在瀏覽器上檢驗制作的效果。
下載地址：
谷歌瀏覽器：
火狐瀏覽器：
圖2 谷歌瀏覽器官網
Part 2
總線實現
原理
將輸入的三個口分別連接到三根總線，再取反連接到另三根總線，這樣就獲得了所有可能的排列方式。再將全加器的邏輯表達式化為最小項，分別用與門和或門連接到兩個輸出口上，則可實現全加器
圖3 火狐瀏覽器官網
在軟件安裝完畢后，就可進入到HTML的正式學習了。你問IE行不行，我說最好還是這倆。
Part 02
HTML基本代碼
基本規范
HTML的代碼書寫規范：
1、html5代碼規范非常寬松。
2、html5標簽，屬性可以大寫也可以小寫還可以混寫。
3、在html5中，你可以不用關閉標簽。
4、所有代碼全部使用小寫。
5、所有標簽都要正常關閉。
6、所有代碼必須在英文半角狀態輸入（最重要）
7、必須寫在最前面。
要畫出一個人的外形，要有頭，有身子，有五官，這還不行，沒有神韻啊。得給這畫補充信息，讓人物有神態才躍然紙上，讓欣賞的人能夠揣測到你要干什么。這寫代碼也一樣，有講究。上來第一步，要說明來意吧，我要干什么，正所謂不興無名之師。這樣你就得老實交代來意，你告訴平臺，“你大爺今天要寫HTML文件要做網頁”，平臺一聽“哦，這么回事”，得新建一個文件吧html顯示圖片自動寬度，類型是什么呢？HTML！
圖4 新建HTML文件
新建完文件，平臺知道你的來意了，給你拿來一大張白紙，說“行，你自由發揮吧”，你一看這都是啥啊？有點傻眼，不急，且聽我娓娓道來。
圖5 新建的HTML文件
HTML文檔基本結構與標簽
在HTML中像這樣一對的存在叫做“雙標簽”，而則叫做“單標簽”。雙標簽的前一個開始標簽意味著開始，后一個結束標簽則意味著敘述的結束，里的內容則標志著兩個標簽之間將要書寫的內容類型。標簽之間的內容叫做元素。有了上述概念就能夠理解新建的HTML文件了。
就是在聲明文檔為HTML類型，方便瀏覽器解析。這叫師出有名。
聲明文檔從這里開始，聲明文檔在這結束。這叫有始有終。
則意味著文檔中標題、圖標、元信息、文檔樣式，定義腳本。文檔頭部作用于整篇文檔。文檔頭部相當于人的思想。
中間則能夠寫上網頁的名稱。
中是整個網頁的血肉，一個網頁好不好看就有這中間的內容決定。
學到這，相當于你已經會創作最簡單的空白網頁了。
仿真
圖6 瀏覽器內運行
點擊瀏覽器內運行，下拉菜單有可選的瀏覽器，我們默認用第一個.
圖7 一個空白網頁
實際網頁代碼查看
為了更好的讓大家體會如何將代碼轉換成網頁，以及真實網頁的代碼情形。請用瀏覽器隨意打開一個網站。這里我打開的是百度。按下F12進入開發者調試，你會看到如下畫面。
仿真
圖8 元素
展開body標簽中的內容。
圖9 實際內容
圖9中密密麻麻什么標簽都有，有超鏈接，有屬性名，這些都是后續需要我們學習的。
實際網頁制作初探：
下面將分幾個部分對實際網頁的制作進行淺近的探索。
1
文檔頭部修改
在HTML中使用“Ctrl + /”可以實現對文檔的快速注釋。
在文檔頭部當中可以實現設置關鍵字、描述網頁、頁面跳轉和定義樣式等功能。
下面的圖10、圖11、圖12是修改了一部分代碼而實現的。學習網頁的過程也是一個實踐到認識，再從認識到實踐的過程。
代碼中要善于注釋，說明修改了哪里，作用是什么，和寫作文類似。必要時說明“5W1H”，所謂六合分析法。
圖10 HTML代碼
圖11 實際網頁
圖12 開發者調試
2
超鏈接
超鏈接指從一個網頁連接到另一個網頁。
圖13 超鏈接
表示把文檔載入父窗口或包含了超鏈接引用的框架的框架集
圖14網頁
點擊藍色的東北電力大學字樣，即可進入到學校官網。
圖15 學校官網
3
輸入標題
網頁制作里最常用的標簽是,在使用css的情況下，能夠使得網頁內容豐富多彩。
圖16 引入一張圖片
div>
表示寬度為1100像素，背景顏色是灰白，邊緣0，引入圖片，寬度是100%。
圖17 網頁中的圖片
4
常用HTML標簽
圖18 按字母順序排列部分 HTML 標簽。
需要注意的是在實際網頁過程當中不可能用到這么多的標簽，有常用的標簽，就和常用漢字一樣，沒人能把這些標簽全部都記住，只要熟練掌握常用的標簽就能順利地完成網頁的制作。具體的標簽在使用時可以到網上查閱，結合具體的語法就可以完成。
5
制作一個表單
表單表單在網頁中主要負責數據采集功能。一個表單有三個基本組成部分：表單標簽：這里面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
最后制作一個簡易的表單，并作適當解釋。寫下面的代碼的目的是為了制作一個收集個人信息的表單。因為表單的任務承載的主體，所以表單的功能寫在兩標簽之間 。
form>用來創造一個表單，中寫入數據要發送的服務器的地址；post是一種提交方法，該方法下數據不會附在地址之后，會將表單中的所有數據進行打包發送給服務器比較安全，絕大多數提交方法都是post。另外注意：雙標簽都是成對存在的，不要顧此失彼。代碼的書寫是層層嵌套的，就像穿衣服，遵循著一套穿脫原則，不可顛倒。
圖19 代碼上
圖中是一個有輸入功能的單標簽是常用的表單控件。括號之間有著標簽的屬性，如type="text"，說明輸入的內容是文本，生成文本框，name="uname"說明輸入的是名稱，，id不輸入內容為默認，后面一樣， value=""，給定的參數值為默認value值會發送到服務器。當type=""時，生成密碼輸入框，輸入的字符會以小圓點或者星號顯示3、輸入內容會被隱藏。
男
女
其中的type="radio"表明有下列值可選，即value中的值，1和0分別代表男和女。
是換行符。
>表示創建一個名為的下拉菜單。
河北省>
山西省>
北京市>
天津市>
內蒙古自治區>
>
表示每一個下拉列表項，向服務器中發送的是value值；用來對進行分組，label屬性設置分組名稱。
中限制了電話號碼只能在0到9之間選擇，長度為11位。
>
表示創建一個文本框，并在style限制了寬度和高度，在沒有輸入時持續顯示“請輸入”。
圖20 代碼下
把表單內容發送到服務器
reset重置表單內容
以上是對代碼的解釋。
圖21 實際表單效果
實際上，只做到這里僅僅是開始，網頁的背景，數據的收集都還沒有制作，這里只是制作了一個表單的雛形。但限于篇幅就不再贅述詳細的過程了，具體實現過程自行學習。
Part 03
結論
學習任何事物不是一蹴而就的，網頁制作同樣如此。這里僅僅開了一個學習HTML的頭，至于詳細的學習過程則還需要時間來實踐與認識。HTML作為網頁設計的開端工具，在網絡世界中無所不在，因此學習掌握HTML對提升日常的網絡安全意識，合理利用網頁進行數據收集是必要的。本文簡要的介紹了HTML的開發平臺，使用方法，基本規范，進行了簡單表單的制作對進一步學習Web開發有幫助。
#參考文獻#
[1] 劉國利．HTML5布局之路[M]．北京：清華大學出版社．
[2] Peter ，Brian ，Frank Salim．HTML5高級程序設計[M]．北京：人民郵電出版社．
[3] , . 2011.HTML5 Step by Step．．
[4] W . 2009.The guide to CSS and HTML Web . ．
[5] HTML 標簽參考手冊[CP]．.
[6] 表單[CP]．%E8%A1%A8%E5%8D%95/?fr=
作者簡介
王海濤
東北電力大學電氣工程學院電氣工程及其自動化專業2018級在讀．
作者簡介
楊佳強
東北電力大學電氣工程學院電氣工程及其自動化專業2018級在讀.
東電電子學報開始持續征稿！！！
·新學期·新旅程 /NEW TERM
#期刊介紹
為了進一步鞏固工程認識成果，并激發學生的創新意識與探索精神，特此創辦適合本科生發表學習心得、工程實踐經驗與學術見解的“微期刊”—《東電電子學報》。
《東電電子學報》是以本科學生發表理論學習心得、實驗案例創新、工程實踐技巧為主，以微信公眾號推文的形式對外發表學術短文的一種“微期刊”。
征文范圍（包含但不局限于）
●理論學習
（1）理論基礎知識學習心得
（2）就理論學習內容中某一點進行科普性深入分析
（3）理論學習與實際相結合的實例分析與研究
●實驗探究
（1） 實驗體驗引起意向，提出探究問題，針對此問題發表見解
（2） 針對實驗過程中的現象，學以致用拓展延伸
●DIY制作
（1） 與學習相關DIY包括但不限于與專業相關作品
（2） DIY過程中涉及的理論知識與制作過程中的收獲介紹
●工程設計
（1）軟件使用心得，如何讓大家高效學會一款新的軟件
（2）硬件使用心得，如何讓大家高效學會一種新的硬件
（3）長通杯競賽分享，競賽過程中遇到的困難，以及解決困難的方法與最終的收獲
稿件投稿須知
1、微期刊必須是原創性、首次公開發表的研究成果，內容應符合征稿范圍；
2、請按《東電電子學報》微期刊的要求和格式撰寫；（具體投稿版式要求鏈接：
提取碼：98N6
）
3、微期刊由東電電子學報編輯部委員會進行評審，對通過審稿的稿件編輯部將根據評審結果通知作者，經錄用作者需提供二寸電子照與自我介紹（基本信息即可，詳細請參考往期介紹）；
4、內容無頁數限制；
5、可以增加視頻介紹便于說明。
時間要求
1、投稿時間：即日起持續收稿；
2、論文錄用時間：經審核通過發布在此公眾號。
獎勵辦法
投稿一經錄用，將以微信推文的形式在東電電子微學堂公眾號中《東電電子學報》上發表，并且加0.5分培養計劃中的科技學分。
投稿方式
發送郵件至投稿郵箱：
零壹工作室
Zero-