首頁 > web前端 > html教學 > 開始學習前端開發吧

開始學習前端開發吧

WBOY
發布: 2016-12-05 13:26:29
原創
1288 人瀏覽過

據說最好的輸入是輸出,所以聽我講給你聽我學到的東西吧。

學習前端入門時,無論在哪裡都告訴我們,要學習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 字體逐漸變小

 

萬事起頭難,終於開始寫第一篇了,寫得有點煩,哈哈。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板