自學的話,首先要理解html的作用。html,hypertext markup language,超文本標記語言,用來展示網頁中的內容。同時 HTML 也是我們學習前端開發的基礎。隨著 web 前端技術的飛速發展,HTML 和 CSS 也成為了編程者的必備技能。而要想做一個網頁光會這一門語言是不夠的,還需要自學css,JavaScript。其中html和css較JavaScript容易。
可以這樣理解,HTML,是一個文件類型,可以被瀏覽器解析。如果不使用瀏覽器打開,我們看到的將是一行行代碼,在瀏覽器中打開以后呢,就會出現一些靜態效果了。下面介紹一下初步的一些HTML語法知識。
HTML 標簽非常注重語義化,很多標簽都是通俗易懂的,大大降低了我們學習的難度。這套 HTML 教程更是為了避免初學者走太多的彎路,指出了許多其它 HTML 教程中沒有提到的學習誤區,并且給初學者提供了一個具體的學習思路,除了注重 HTML 知識點的講解,更加注重 web 前端開發技巧和思維。幫助大家快速入門,其中包含大量的實踐經驗,將知識系統化,濃縮為精華,用通俗易懂的語言直指網頁設計初學者的痛點。
學海無涯,苦做舟,學習如同修行,只有潛心才可以領悟真諦。HTML 中的每一個小知識點都可以讓頁面發生不同的變化,現在就讓我們行動起來,跟著 HTML 教程的步伐,讓我們一起走進 HTML 的世界。
超級文本標記語言文檔制作不是很復雜,但功能強大,支持不同數據格式的文件鑲入,這也是萬維網(WWW)盛行的原因之一,其主要特點如下:
● 簡易性:超級文本標記語言版本升級采用超集方式,從而更加靈活方便。
● 可擴展性:超級文本標記語言的廣泛應用帶來了加強功能,增加標識符等要求,超級文本標記語言采取子類元素的方式,為系統擴展帶來保證。
● 平臺無關性:雖然個人計算機大行其道,但使用MAC等其他機器的大有人在,超級文本標記語言可以使用在廣泛的平臺上,這也是萬維網(WWW)盛行的另一個原因。
● 通用性:另外,HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面,這些頁面可以被網上任何其他人瀏覽到,無論使用的是什么類型的電腦或瀏覽器。
B(Browser)/S(Server)架構方向,也是我們以后主攻方向
我們以后主要為企業內部提供解決方案,例如:企業內部的辦公系統、供應鏈管理系統、客戶關系管理系統等,而這些系統通常對界面的表現要求較低,對業務處理和數據處理要求較高,并且要求降低升級維護的成本,B/S架構可以更好的被企業接受,所以我們以后主要的方向是開發基于B/S架構的應用,B/S架構的開發通常又被叫做Web開發,Web開發通常包括Browser瀏覽器端的開發以及Server服務器端的開發。
雖然我們是學習Java后臺服務器編程,但是前端頁面編寫要了解,能看懂,簡單的頁面效果可以實現即可;
創建一個以 .html或 .htm 結尾的文件,用文本編輯器打開就可以開發
用瀏覽器打開以.html或.htm的文件就可以自上而下解析執行,不需要編譯
● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
● DTD文件的作用
● 幫助你編寫合法的代碼
● 它讓瀏覽器正確地顯示器代碼,或者說DTD只是寫給檢查器看的
HTML規范是由w3c負責制定的,W3C是世界萬維網聯盟(World Wide Web:www)
FireFox、Google、IE
<>表示開始標記
</>表示結束標記
<html>開始標簽
</html>結束標簽
html為元素
HTML 元素指的是從開始標簽(start tag)到結束標簽(end tag)的所有代碼。
● HTML 元素以開始標簽起始
● HTML 元素以結束標簽終止
● 元素的內容是開始標簽與結束標簽之間的內容
● 某些 HTML 元素具有空內容(empty content)
● 空元素在開始標簽中進行關閉(以開始標簽的結束而結束)
● 大多數 HTML 元素可擁有屬性
大多數 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文檔由嵌套的 HTML 元素構成。
上面的例子包含三個 HTML 元素。
● <p> 元素:
這個 <p> 元素定義了 HTML 文檔中的一個段落。
這個元素擁有一個開始標簽 <p>,以及一個結束標簽 </p>。
元素內容是:This is my first paragraph。
● <body> 元素:
<body> 元素定義了 HTML 文檔的主體。
這個元素擁有一個開始標簽 <body>,以及一個結束標簽 </body>。
元素內容是另一個 HTML 元素(p 元素)。
這個元素擁有一個開始標簽 <html>,以及一個結束標簽 </html>
元素內容是另一個 HTML 元素(body 元素)。
即使您忘記了使用結束標簽,大多數瀏覽器也會正確地顯示 HTML:
上面的例子在大多數瀏覽器中都沒問題,但不要依賴這種做法。忘記使用結束標簽會產生不可預料的結果或錯誤。
注釋:未來的 HTML 版本不允許省略結束標簽。
有一些元素必須使用單個標簽表示。這些被稱為空元素。
一個這樣的元素是 hr 。
hr 是一個分組元素,用于表示一個段落級別的內容。
您可以使用以下兩種方式之一使用void元素 - 第一種方法是僅指定開始標記,如以下代碼所示。
瀏覽器知道hr是一個void元素,因此不希望看到結束標記。
您可以使元素與空元素一致,如下面的代碼所示。
注釋是關于HTML元素的有用信息。注釋使HTML文檔更易讀和可理解。
HTML中的注釋以標簽<!-- 開頭,并以 --> 結尾。
瀏覽器將忽略您在這些標記中放置的任何內容。
以下代碼具有HTML注釋。
超文本標記語言(外國語簡稱:HTML)標記標簽通常被稱為HTML標簽,HTML標簽是HTML語言中最基本的單位,HTML標簽是HTML(標準通用標記語言下的一個應用)最重要的組成部分。
HTML標簽的大小寫無關的,例如“主體”<body>跟<BODY>表示的意思是一樣的,推薦使用小寫。
實例
<html> 標簽告知瀏覽器這是一個 HTML 文檔。
<html> 標簽是 HTML 文檔中最外層的元素。
<html> 標簽是所有其他 HTML 元素(除了 <!DOCTYPE> 標簽)的容器。
所有瀏覽器都支持 <html> 標簽。
段落標簽:<p></p>
定義:可以把 HTML 文檔分割為若干段落
標題字:<h1></h1>至<h6></h6>
標題是通過 <h1> - <h6> 等標簽進行定義的
<h1>定義最大標簽,<h6>定義最小標簽
換行:<br>
定義:<br> 可插入一個簡單的換行符
<br> 標簽是空標簽,它沒有結束標簽
注釋:<!-- 這是HTML注釋 -->
水平線:<hr/>
預留格式<pre>內容</pre>
定義:頁面中輸入什么樣式就顯示什么樣式
實例:< >
搭配視頻效果更佳~~
https://www.ixigua.com/690746767030039398
全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。
主要內容:正式引入HTML網頁開發,學習并了解HTML的相關知識。變身Web開發達人,做全棧程序員。這是HTML技術的第二課,主要講解一下開發工具及HTML的結構,做出來屬于我們的第一個Web網頁。
作為程序員,只要做電腦編程寫代碼,一定會選擇一款合適的開發工具。HTML的書寫的話,開發工具就有的選擇了。
程序員寫代碼
作為HTML的開發,其實使用記事本完全就可以了,因為HTML網頁本身就是文本文件。但是沒人會使用記事本進行開發,因為一款適合自己的開發工具可以大大的提高寫代碼的效率。
下面我列出來幾個比較常用的HTML開發工具:
NotePad++、EditPlus、Adobe Dreameaver、Sublime、WebStorm、Visual Studio等。
我們這階段課程,主要使用Sublime這款工具為例進行使用,當然其他的開發工具也是大同小異。
Sublime代碼編輯器
直接打開微軟的必應搜索,這里不得不吐下槽,國內的搜索引擎真的不敢恭維。搜索結果顯示并不是很好。谷歌當然是最不錯的選擇。但是無奈谷歌上不去,所以可以推薦給你使用必應搜索。必應搜索的結果可以說幾乎和谷歌相差不大。
必應搜索
直接打開必應搜索,輸入“sublime text 3”進行搜索,你就能找到官方網址。打開進行下載即可:
Sublime的下載方式
打開Sublime的官網,選擇Download,選擇合適你電腦系統的版本進行安裝:
下載Sublime
打開Sublime,默認打開:
軟件默認界面
此時,會默認打開一個新文件,首先點擊鍵盤上的Ctrl+S。進行文件保存。選擇合適的路徑,并輸入文件名,后綴以html。
保存html
添加代碼HTML的結構:
需要明確的是HTML有一個文檔結構的。就好比人有頭部和身體組成。html也是如此。上面就是html最簡單的結構。
<html>類型標簽,表示開始標簽。</html>類型的表示結束標簽。
兩個標簽之間的內容,輸入整個html標簽。
我們習慣性的把<xxxx>...</xxxx>的格式的代碼,叫做xxxx標簽。
為結構添加內容,做我們第一個Web網頁:
第一個Web網頁
此時,找到html文件所在路徑,雙擊打開,運行你就會看到效果:
網站結構
經過運行結果,你就會明白title、body標簽所展現的樣子了。
本視頻由做全棧攻城獅,原創首發,如有轉載,請注明出處。
如果你有什么比較不錯的編程技巧,或者你想要什么程序員編程資源,點擊下方了解更多。
i網頁設計之前端基礎教程html介紹優秀網頁設計必備web前端講解
*請認真填寫需求信息,我們會在24小時內與您取得聯系。