原創教程 鯨吞HTML

2022-02-09 20:35:35 字數 4299 閱讀 7832

首先,我們的angularjs課程分為三大模組:

其中,第一大模組的物件是對前端開發技術有點了解但不熟悉的童鞋,其中會對html/css的基礎進行學習,由於本課程的性質,會對其中的js著重講解。第二大模組的物件導向是對前端技術html/css/js有了一定了解的童鞋,能構建網頁。第三大模組則是我們這個課程的小彩蛋環節,期待一下。

這一節課中,我們將講解下html和css的基礎,後面我們還會詳細講解js,以便最後的我們更好的去學習angularjs,拿更高的工資。

那麼,什麼是html呢,這節課我將為你一層一層的剝開html的衣裳,你們享受。

html是超文字標記語言(hypertext markup language, html),是乙個可以用來結構化你的web內容並給予其含義和目標的編碼語言。

它告訴瀏覽器如何顯示內容。html把內容(文字,,語言,影片等等)和「presentation」(這個內容是如何顯示,比如文字用什麼顏色顯示等等)分開。

html使用預先定義的元素集合來識別內容形態。 元素包含乙個以上的標記來包含或者表達內容。標記利用尖括號表示,而結束標記(用來指示內容尾端)則在前面加上斜線。舉例來說,還是例子好使,講了這麼多。

段落元素包含的起始標記「」和結束標記「

」, 下面的例子展示乙個包含html段落元素的段落:

樂老師真帥!(這是乙個段落)

當此內容顯示在網頁瀏覽器中,它看起來會像這樣:

樂老師真帥!(這是乙個段落 )

瀏覽器利用標記來當作指示如何顯示標記中的內容。包含內容的元素同時可以包含其他的元素,比如強調元素() 可以包裹在段落元素裡面:

樂老師是真帥!

展示的時候它看起來是這樣的:

樂老師是真帥!

這時候有同學就問了,是不是html就是由各種這樣的尖括號標籤組成的啊,不,並不全是。通常而言,尖括號裡面的內容前面有個斜線意味著乙個標籤的結束,這個在html中是可選項,而在xhtml是必須的,包括xml模式下的html元素。

讓我們來解析一下html元素,拿上面的例子:

這個元素的主要部分有:

開始標籤(the opening tag):這裡包含了元素的名稱(這裡是 p),被開、閉尖括號所包圍。這表示這裡是這個元素的開始發揮作用——在這個例子中從這一段的開頭開始。

閉合標籤(the closing tag):與開始標籤相似,只是其中在元素名之前包含了乙個斜槓。表明這裡是元素的結尾——在這個例子中,就是這一段落的結尾。

內容(the content):這是乙個元素的內容,這個例子中就是所輸入的文字本身。

元素(the element):開標籤、閉標籤與內容相結合,便是乙個完整的元素。

元素可以有attribute屬性,看起來像這樣:

屬性(attribute)包含了關於元素的一些額外的資訊,這些資訊本身並不需要被顯現在內容(content)中。在這個例子中,類(class)標籤是你能為元素提供乙個標識名稱,以便進一步為元素指定風格樣式或進行其他操作時使用。

乙個屬性應該包含:

在屬性與元素名稱或上乙個屬性(如果有超過乙個屬性的話)之間的空格符

屬性的名稱,並接上乙個等號

由引號所包圍的屬性值

巢狀元素:

你可以講乙個元素置於其他元素之中--這被稱作巢狀。如果你特別覺得樂老師很帥,那麼,我們可以將「真」用元素包裹,這意味著這個單詞將被特別強調。

樂老師真帥!

巢狀有乙個地方需要注意:你必須保證你的元素被正確的巢狀,一層套一層才對,當然對於像

這樣沒有開始和結束的單標籤(空元素)來說,是不能套別人的,只能被別人套。

元素必須正確的開始和閉合,才能清楚的顯示出正確的巢狀。如果他們不正確的巢狀,那麼你的瀏覽器將會盡量的猜測你想要表達的意思,但是你很大程度上不會得到你期望的結果,所以千萬不要這麼做!

空元素:

空元素就是一些並不包含內容的標籤,像上面講到的

空元素,它們被稱為空元素,看看我們的html**中的

標籤:這個元素包含了兩個屬性,但是這裡並沒有的閉合標籤,而且沒有任何內容。這個因為乙個image標籤不包含任何有效的內容,他的作用是向其所在的位置嵌入乙個影象。

解析html文件

雖然我們上面介紹的是一些基本的html元素,但是他們單獨並不起什麼作用,現在我們來看看如何將他們組合起來稱為乙個完整的html頁面。讓我們來建乙個index.html的檔案,用你的ide開啟,在裡面寫上下面這些內容:(在index.html檔案同級目錄下面建乙個images資料夾,裡面放乙個名為hello.png的。)

點選儲存,在瀏覽器中檢視效果,你可以修改部分**來檢視效果,這樣更有利於你的學習一門語言,以後的我們的課程中,就是通過這樣的是不斷的修改**,寫**來提高自己的程式設計能力,這非常有用,相信我。

好了,這裡我們有:

影象:讓我恩重新回到image元素:

像我們之前說的,他將影象嵌入到元素所在的位置,它通過包含影象檔案路徑的src(source)屬性實現這一功能。但是這藝元素也要包括alt(alternative)屬性---這個屬性應該是影象的藐視內容,當影象不能被某些使用者看見是,可能是因為:

他們是盲人或者有視覺障礙。某些有嚴重視覺損傷的使用者經常使用螢幕閱讀器來為他們讀出alt屬性裡的內容。

有些**裡的錯誤讓影象不能被展示出來。

alt 屬性的關鍵就是要「可以描述影象的文字」。當被讀出來時, alt 裡面的內容應該向使用者傳遞足夠影象表達的意思。所以上面我們的描述其實並不準確。現在修改你的**,為你的影象提供更加合適的描述資訊。這裡有個點需要注意,以後到公司裡面去,可能會有一大部分的程式設計師不是很喜歡寫上這個alt屬性,但是,寫上這個是個好習慣,童鞋們一定要記得別忘記了,好習慣是一點一點的慢慢積累來的。

這一部分包含了一些基本的標記文字的 html 元素。

標題元素允許你指定內容的標題和子標題。就像一本書擁有主標題,然後每一章還有標題,然後還有更小的標題,html 文件也是一樣。html 包括六個級別的標題,my sub-subheading

現在嘗試一下,在你的

元素上面新增乙個合適的標題。

像上面解釋過的一樣,元素是用來指定段落的。你可以用它來指定常規的文字內容:

this is a single paragraph

新增你的樣本內容到乙個或幾個段落裡,然後將它們放在

元素之下。

很多web上的內容都是列表,所以 html 有一些特別的列表元素。要標記列表通常包括至少兩個元素。最常用的列表型別是有序列表( ordered lists)和無序列表( unordered lists):

無序列表中專案的順序並不重要,就像購物列表。這些內容被包括在乙個

working together ... 

嘗試新增乙個有序列表和無序列表到你的示例頁面。

鏈結非常重要 — 它們讓 web 成為了 web(全球資訊網)。要植入乙個鏈結,我們需要使用乙個簡單的link — 元素 (或html錨元素, anchor element) 用於定義乙個超連結、指定的目標目的地乙個超連結,或者兩者都是。" href="">新增一些文字。我們選擇「mozilla manifesto」。

將文字包含在 元素內,就像這樣:

skylor

賦予 元素乙個 href 屬性,就像這樣:

skyloro

skylor/a>
如果你在**開始部分省略了https://或者http://協議,你可能會得到錯誤的結果。在完成乙個鏈結後,點選它並確保它去向了你指定的**。

當然上面列下了一些標記,還有很多部分標籤沒有列出來,這些都詳細講一遍的話不是本課程要幹的事,學習angularjs初步掌握上面我說將的html的基礎知識,後面見到新的標記我會再稍微講解下,一句話,聽懂上面這麼多,你就具備學習angularjs 的html方面的知識。而我們知道,現在的各大**上網頁都是唯美唯美的。這些美美的網頁通過上面這些,當然是不能做出來的,html是個架子,我們需要在架子上面放些裝飾,做點動畫,下面的課程我們會簡單講解下css藝術花園,以及js的花樣基礎。學完這些,就可以開始我們的angularjs的正式課程了。謝謝您的**,謝謝支援,下期見。

原創 自用 html2

html標籤對換行和空格不敏感,對巢狀關係敏感。p標籤內換行 內加巢狀換行 在中文字間出現的空格和換行都被壓縮為乙個空格。每乙個標籤都有自己特定是屬性,屬性都有屬性值 屬性名k key 屬性值v value 屬性的寫法 鍵值對 1 屬性書寫在標籤的起始標籤的內部,與標籤名之間用空格隔開,屬性之間也用...

原創 HTML學習整理內容

文件第一行 文件型別宣告 不是html標籤 段落 align屬性 left right center justify 分割線 修飾標籤 斜體加粗 下標 上標 特殊符號 列表標籤分類 1.無序列表 type屬性 disc圓點 square正方形 circle空心圓 2.有序列表 列表 type屬性 1...

原創 substr 中文詳解教程

substr 函式功效 字串擷取函式,只限單位元組字元使用 對於中文的擷取時遇上奇數長度是會出現亂碼,需另行處理 本函式可擷取字串指定範圍內的字元。應用範圍 標題 內容擷取 函式格式 stringsubstr string string,int start int length 引數1 處理字串 引...