據說最好的輸入是輸出,所以聽我講給你聽我學到的東西吧。
學習前端入門時,無論在哪裡都告訴我們,要學習HTML+CSS+JS。 google之,得到html為超文本標記語言(英文:HyperText Markup Language,簡稱:HTML)。標記語言,意味著這個不是程式語言,而是用來標記文字的,把標題標記為標題,段落標記為段落,這樣,瀏覽器就能知道這些文字是什麼,並用更好的格式顯示出來,換句話說,如果你只用HTML+CSS製作一張網頁,上面的各種特效、格式,是你選擇出來,而不是製作出來的。
接下來來看一份普通的HTML檔案的內容吧。
<span style="color: #008080"> 1</span> <span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span> <span style="color: #008080"> 2</span> <span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span> <span style="color: #008080"> 3</span> <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span> <span style="color: #008080"> 4</span> <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>这是网页标题<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span> <span style="color: #008080"> 5</span> <span style="color: #0000ff"><</span><span style="color: #800000">link </span><span style="color: #ff0000">rel</span><span style="color: #0000ff">="style"</span><span style="color: #ff0000"> type</span><span style="color: #0000ff">="text/css"</span><span style="color: #ff0000"> href</span><span style="color: #0000ff">="style.css"</span><span style="color: #0000ff">></span> <span style="color: #008080"> 6</span> <span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span> <span style="color: #008080"> 7</span> <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="js.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span> <span style="color: #008080"> 8</span> <span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span> <span style="color: #008080"> 9</span> <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span> <span style="color: #008080">10</span> <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span> <span style="color: #008080">11</span> <span style="color: #0000ff"><</span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>这是最大的标题<span style="color: #0000ff"></</span><span style="color: #800000">h1</span><span style="color: #0000ff">></span> <span style="color: #008080">12</span> <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>这是段落<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span> <span style="color: #008080">13</span> <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span> <span style="color: #008080">14</span> <span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
這個標記語言的標記文字的方法很簡單,就是
他們成對出現,後面的「標籤」比前者多一個「/」
還有另一種標籤,不成對出現,如
我們從上往下解釋上面這個html文檔的內容吧。
1. 歷史問題,用來告訴瀏覽器這是個HTML5的網頁,意思是說還有舊版的html,舊版又需要定義一些別的東西。但不用管,以後都是了,嗯,大概吧。
2.html 告知瀏覽器這是個html文檔,內有head標籤和body標籤
3.head、body 用於存放網頁的各種資訊和設置,body用於存放網頁內容
4.head title 網頁標題,就是開啟一個網頁後,瀏覽器網頁標籤上顯示的文字
link 用來引用一個CSS樣式表,所謂樣式表,就是你覺得瀏覽器預設的的樣式太醜了,自己設定樣式
style CSS樣式表內的內容也可以放在html文檔裡
script 引用一個JS文件,同樣也可以把內容寫在html文檔裡
還有一些像meta、base等標籤,無論如何,head內的東西是用來設定這個網頁的,而不是網頁內容
5.body p 段落
h1 標題 還有h2 h3 h4 h5 字體逐漸變小
萬事起頭難,終於開始寫第一篇了,寫得有點煩,哈哈。