本文說明
- 你如果點開了這個文章,說明你對html這種東西有想要了解的渴望。在保證你自己是初學者的情況下,你不妨看看我這個初學者在系統學習了html一段時間後的一些心得體會。可能會讓你少走一些彎路。
- 本文主要系統地介紹html的層級架構,以及個人覺得有必要提及的點。
- 本人學習html是基于w3cschool,後續提到的簡單的以及沒必要叙述的點大家可以自行去網站浏覽。
html
-
你應該先簡單的知道什麼是html:
HTML 指的是超文本标記語言(英語:HyperText Markup Language),是用來描述網頁的一種語言。
HTML 不是一種程式設計語言,而是一種标記語言,它有一套标記标簽 。
HTML 文檔包含了 HTML 标簽及文本内容,HTML文檔也叫做 Web 頁面。
用我自己的話說就是寫網頁的語言。html不同于大多數人所熟悉的c,c++,python等進階程式設計語言,隻需要放置對應的标簽來構造自己想要的元素來構造自己想要的頁面,而不需要去自己想與創造。
html的網頁結構
- 簡單的說就是标簽對的嵌套
<html>
<head>
<title>頁面标題</title>
</head>
<body>
<h1>這是一個标題。</h1>
<p>這是一個段落。</p>
</body>
</html>
解釋一下就是:
< html> 與 < /html> 之間的文本是描述網頁。
< head> 與 < /head> 之間的文本是文檔的中繼資料。
< title> 與 </ title> 之間的文本是文檔的标題。
< body> 與 < /body> 之間的文本是可見的頁面内容,是文章的主體部分。
< h1> 與 < /h1> 之間的文本被顯示為一個大标題。
< p> 與 < /p> 之間的文本被顯示為一個段落。
如果稍微了解一點html的話,應該可以懂我什麼意思。不過你如果沒有懂也問題不大,很簡單的東西,往下看就是了。
标簽
- 标簽是html的半壁江山,數量很多,我肯定不能一一列舉什麼标簽有什麼功能,大家可以去w3cschool上去了解每個标簽各自有什麼作用,能産生什麼樣的效果。
-
在這裡我僅僅闡述我覺得在html初學者這裡有用的一些:
< br/ >:換行
< hr/ >:插入水準線
< !-- – >:”注釋
< p > < p >:段落
< b >:定義粗體文本
< em >: 定義着重文字
< i > :定義斜體字
< small >:定義小号字
< strong >:定義重要的文本
< sub >:定義下标字
< sup >:定義上标字
< ins > :定義插入字
< del > :定義删除字
< a >:超連結
< img >:插入圖檔
< table >< /table>:表格
< form >< /form>:表單
當然,像表格表單這種大類裡面還會有很多細節,建議去自行查找。
屬性
- 很多标簽是會有屬性的,屬性是用來規定一些詳細的參數(差不多吧我不知道怎麼概括了。。)
-
列舉一個屬性讓大家知道是什麼就完事了,具體的每個标簽有什麼屬性還是需要大家去w3cschool上參考.
在 超連結< a > 标簽中使用 target 屬性,你可以規定在何處打開連結文檔。
<a href="https://www.w3cschool.cn" target="_blank" rel="external nofollow" target="_blank"> 通路w3cschool </a>
這個target屬性就是來描述超連結打開的網頁是通過什麼樣的方式來彈出。
_blank:在新視窗中打開被連結文檔。
_self:預設。在相同的架構中打開被連結文檔。
_parent:在父架構集中打開被連結文檔。
_top:在整個視窗中打開被連結文檔。
_framename:在指定的架構中打開被連結文檔
樣式表
-
很多初學者都在疑惑為什麼我隻按标簽和屬性搞出來的頁面low的要命。而網絡上的那些頁面都很精美。這就關系到網頁樣式的問題。
樣式就是規定網頁長什麼樣子,樣式存儲在樣式表中。而如果讀者有稍微了解,現在的網頁都是html+css+javascript三個部分共同完成的,其中css就是負責樣式這部分的。
但是一般人在學html的時候并不會先接觸css,而且寫一些小型的簡單的網頁也可以采用更簡潔的方式來完成。
- 我這裡想提的是三種不同的樣式方式。在我之前學校小項目做web的時候,曾經四處找人家現成的網頁去改,不了解樣式的原理,是以當時出現了很多玄學問題,亂七八糟的很苦惱。在這裡給讀者介紹的同時也是自己在給自己梳理
内聯樣式表:當特殊的樣式需要應用到個别元素時,就可以使用内聯樣式。 使用内聯樣式的方法是在相關的标簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。例如:
<h1 style="font-family:arial;">w3cschool</h1>
<p style="font-family:arial;color:red;font-size:20px;">随時随地學程式設計</p>
内部樣式表:當單個檔案需要特别樣式時,就可以使用内部樣式表。你可以在< head > 部分通過 < style >标簽定義内部樣式表。例如:
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
外部樣式表:當樣式需要被應用到很多頁面的時候,外部樣式表将是理想的選擇。使用外部樣式表,你就可以通過更改一個檔案來改變整個站點的外觀。 這個方式也就是css的方式,通過調用外部寫好了樣式的css檔案來改變web網頁的樣式,做到了樣式與網頁元素分離,能更好的管理。
<head>
<link rel="stylesheet" type="text/css" href="/statics/demosource/styles.css" target="_blank" rel="external nofollow" >
</head>
内部樣式和外部樣式沒有優先級關系,頁面後加載的會生效;内聯樣式的優先級最高
表格和表單
- 我為什麼把這兩個東西單拉出來說,因為這兩個東西的使用率很高,而且細節也比較多。現在網絡上搜尋的html教程裡面都會把這兩個部分單獨劃分一個塊。而我這篇文章沒有想講這兩部分東西,讀者如果想系統學習還請去自行搜尋。
我自己這幾天學到的一些細節
大多數 HTML 元素被定義為塊級元素或内聯元素。
HTML < span >元素是内聯元素,可用作文本的容器。< span > 元素也沒有特定的含義。當與 CSS 一同使用時,< span > 元素可用于為部分文本設定樣式屬性。
<p>我的哥哥有 <span style="color:0000FF;font-weight:bold">藍色</span> 的球鞋,我的姐姐有 <span style="color:FF0000;font-weight:bold">紅色</span> 的球鞋。</p>
我懶得總結了,直接把我學習過程中随手截的圖放出來了,感覺還是挺有用的
web的圖形與動畫繪制
想收尾突然又想到這個東西。我們會見到好多網頁上有各種會動的裝飾用的圖形動畫,是可以通過SVG與canvas來繪制與渲染的,我這裡的說明也隻是說明這個方式,也不會進行介紹,因為我自己也不會。。
小結
html其實是一個很簡單的東西。感覺是計算機類裡面對初學者來說最友好的一個選擇,讀者們如果想學習,也是件比較快的事情。我作為一個入門小白,寫的所思所感,也是為自己以後的學習留痕迹與做鋪墊。共勉