簡單學習HTML

時間 2019-12-05

標籤簡單學習 html 欄目 HTML 简体版

原文原文鏈接

　　最近忽然就對靜態頁面頗有興趣，主要是看到幾個比較酷炫的頁面效果，也想本身作一下，可是個人前端頁面就是菜雞，還停留在html+css+jquery的簡單使用上，並且還忘記得差很少了！javascript

　　並且我感受前端比後端麻煩一點，多是我沒有什麼審美吧，本身作的頁面老是很醜陋，哈哈哈！就記錄一下學習html的過程吧！學習主要是參考菜鳥教程，連接：https://www.runoob.com/html/html-tutorial.html css

1.EditPlus編輯器的簡單使用html

　　寫前端頁面仍是有一款編輯器比較好，就好像寫java須要IDEA或者eclipse同樣，雖然你也能夠一直用記事本寫，那估計會勸退n多新人，用編輯器對新人比較友好，等之後變牛了以後再用記事本寫吧！前端

　選擇適合本身的編輯器，這裏推薦幾個，能夠自行下載：java

Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
VS Code：https://code.visualstudio.com/

　　我看了不少的編輯器，最終用了一款叫作EditPlus的軟件，爲何呢？由於簡單，不須要什麼插件，並且最初我是將這個軟件看成是打開各類格式文件的工具來用的，今天才發現竟然還能用於寫不少變成語言編寫代碼，並且功能上也支持代碼補全（功能比較弱，不支持代碼提示），下載的話隨便下載吧！貌似正版是須要收費，我下載的恰好就是正版（有的時候嫌找破解版太麻煩了），打開會出現下面這個提示（記住，別點擊任何按鈕），咱們只須要用鼠標左鍵將這個框框拖到屏幕看不見的位置，OK了，這個軟件照用不誤，如今能夠正常使用了。。。。jquery

　　下面咱們就簡單說說這個編輯器經常使用的用法，點擊下面這個地方：後端

　　　幾個經常使用的設置，咱們如今重點看看代碼自動補全，後期能夠根據咱們的須要設置文件模板；瀏覽器

　　隨意看看HTML補全代碼：前端框架

　　咱們就以h1標籤爲例，咱們只須要輸入h1,不區分大小寫，而後回車（空格鍵也行）就會自動補全，貌似還有更牛的代碼補全方式，一會兒能夠補全一大塊代碼，咱們如今不須要，後面用到的時候再說服務器

　　代碼補全以後咱們就須要測試一下標籤有沒有用，這裏就會用到瀏覽器渲染（記住，千萬不要用EditPlus默認的瀏覽器，默認的好像的IE瀏覽器，比較坑爹）：

　　簡單測試一下：

　　結果以下：

　　注意：用這個EditPlus這個編輯器有點不舒服的地方，就是用空格鍵也會自動補全，因此打出相似<h1 style="xx">這樣的代碼，在h1後面的那個空格會打不出來，查了好半天都沒辦法移除空格這個快捷鍵，emmmm。。。。暫時只能用下面這種方式，若是有其餘的方式請在評論區告訴我，謝謝！

2.認識靜態頁面

　　記得最開始學html靜態頁面的時候學了很久都沒入門，始終都是一臉蒙逼，始終都在想html和css、js到底有什麼關係呢？舉個很簡單的例子，咱們看的動漫通常是怎麼製做出來的呢？首先，咱們要用素描畫出人物的全貌，而後進行上色，最後就是想辦法讓它動起來，這裏的三個步驟就對應於html，css和js；

　　那麼問題來了，什麼是靜態頁面呢？咱們用瀏覽器打開的一個頁面很好看，就好比百度，下圖所示，能夠看做是由不少小塊組成的，這些小塊對應於HTML中是對應一個標籤，也就是相似<div></div>這樣的，咱們能夠在標籤內部繼續插入標籤、圖片、文字等等，而後咱們能夠用css對這些div標籤進行染色和移動位置等，最後咱們還能夠添加一些特效讓這個頁面有些動畫的特效，後面咱們簡單作一個相似這個百度首頁的頁面吧，就當練練手！

3.簡單介紹HTML頁面

　　咱們能夠看到每個新建的HTML文檔都有一些相同的東西，那就是最簡單的標籤，下圖所示：最上面的<!doctype html>表示這是一個html文檔，而後整個文檔都由一個<html></html>標籤包着,在每個html標籤中，包括兩個大標籤，頭（head）和身體（body），就跟一我的同樣有頭和身體；

　　在頭部中有個<title>標籤這裏就是在瀏覽器中顯示的標題，並且後面的css代碼通常都是寫在頭部，用<style></style>包着；在身體中咱們就能夠再嵌套其餘標籤，並且還能夠寫js代碼（js代碼必須用<script></script>包着），不知道你們沒有沒發現我下面的這個h1標籤中有個style，這個和再頭部中的<style>標籤中寫的css代碼是等效的，因此說css代碼有兩種寫法，一種是直接寫在html標籤內部，另一種是寫在頭部的<style></style>標籤中。。。。

4.HTML基本標籤

　　這裏的HTML標籤大可能是寫在身體中，那麼有一些什麼標籤呢？

　　（1）<p></p>，這個標籤其實就是至關於新開一個段落

　　（2）<a href="xxx"></a>這個標籤就是生成一個連接，常常網頁上就有各類連接，點擊文字就會進入href這個連接中去

　　（3）<img src="xxx" width="xxx" height="xx" />這個標籤就是插入一張圖片，src表示圖片的url地址，width圖片長度，height圖片寬度；而這裏能夠看出標籤有兩種，一種是兩個標籤<p></p>，另外一種是<img />，

並且每個標籤內部都有一個特殊的東西，好比h1標籤中的style，img標籤中的src、widfth、height等，這些也叫作屬性

　　（4）<h>標籤，有不少個，其實就是字體逐漸變大的過程，能夠用於標題；

　　（5）<hr>標籤，就是一條黑色直線;<br>標籤是換行

　　（6）粗體b和斜體i

　　（7）class屬性和id屬性，這兩個屬性很重要，是爲了能夠惟一的標識一個標籤，由於在html文檔中可能有多個相同的標籤，那麼咱們怎麼樣肯定其中哪個標籤呢？每一個標籤均可以有這兩個屬性，其中，每一個標籤的id屬性值必定要惟一，class屬性值能夠相同；這兩個屬性是寫css常常要用到的東西

　　補充一點：有的時候這種style中的css代碼太多了很影響整個html的佈局，咱們能夠將整個css代碼提取出來在外面新建一個文檔，而後在頭部那裏用link標籤引用一下就能夠了，例如：

<head>

//  ./mystyle.css就是外界的當前目錄下css文件的url地址

<link rel="stylesheet" type="text/css" href="./mystyle.css">

</head>

　　（8）表格標籤table：若是咱們要在頁面上畫一個表出來，那麼必須用到一些表格的標籤，table表示整個表格（屬性border表示表格最外邊沿線的寬度），tr表示行，th表示第一行的每一列（也叫作表頭），td表示從第二行開始的每一列

（9）無序列表標籤ul和有序列表ol

　（10）塊級標籤<div></div>,這個標籤是最經常使用的標籤了，這個標籤有什麼用呢？說實話沒有什麼特殊的效果，既然如此爲何要用這個啊？你想一想啊，一個頁面上有不少個不一樣的標籤（幾百上千個），咱們每次都要去修改一個個的標籤的內容有點太坑爹了，咱們能夠將頁面分紅一塊塊的，每一塊就是一個div標籤，div標籤內部還能夠嵌套各類標籤，這樣佈局起來咱們只須要對div標籤進行操做了，更方便佈局！！！

<body>
 <div id="container" style="width:500px">
 
    <div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">主要的網頁標題</h1>
    </div>
 
    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
    <b>菜單</b><br>
    HTML<br>
    CSS<br>
    JavaScript
    </div>
 
    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
    內容在這裏
    </div>
 
    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    </div>
 
  </div>
 
 </body>

　　（11）表單標籤form，就是每次用戶名密碼登陸的那個界面，一般配合input標籤一塊兒使用，這個也是很經常使用的一個標籤，其中input標籤中的type屬性決定這個input標籤具體有什麼用，name屬性和value屬性值是以鍵值對的形式傳給後端，後端能夠進行邏輯判斷並進行後續處理。。。

<form>
        First name: <input type="text" name="firstname"><br>
        Last name: <input type="text" name="lastname"><br>
        Password: <input type="password" name="pwd"><br>
        
        單選：<br>
        <input type="radio" name="sex" value="male">Male<br>
        <input type="radio" name="sex" value="female">Female<br>

        多選：<br>
        <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
        <input type="checkbox" name="vehicle" value="Car">I have a car<br>

        <input type="submit" value="提交">
 </form>

（12）<ifram>標籤，這個標籤能夠在頁面中顯示一個小頁面，src表示小頁面的url地址，我這裏是我本地的一個特效html；這個標籤和a標籤一塊兒使用能夠看到頗有趣的東西；

　　<iframe src="./star.html" name="iframe_a"></iframe>
    <p><a href="http://www.baidu.com" target="iframe_a">點擊這裏進入百度</a></p>

---------------------------------------------------------------------------------------------------------------------------

　　到這裏基本的html標籤就說的差很少了，後面碰到新的再學一下就ok了，下面咱們來看一些其餘的有趣的東西；

5.顏色

　　在頁面上咱們能夠調整任意標籤文字的顏色，只須要用css代碼中聲明一個color屬性而後賦值就能夠了，計算機中的任何顏色均可以由三種顏色紅，綠，藍的組合獲得，並且計算機中每種顏色都數值化以便咱們進行調整，每種顏色的數值都是0到255，因此計算機中顏色共有255x255x255=1600多萬種顏色，使用顏色有兩種用法：一種是RGB表示，一種是顏色十六進制表示，咱們隨便看看這兩種方式：

　　注意這個不用記，咱們只須要用的時候去查顏色對照表就好了，或者本身慢慢調試到本身喜歡的顏色；

　　因爲這兩種形式顏色都很差記憶，因而就設計了一些英語單詞和這些經常使用的顏色對應，咱們能夠直接用這些單詞就好，好比red，green等，比較詳細的能夠看看菜鳥教程https://www.runoob.com/html/html-colornames.html，這裏大概列舉了一些顏色對應的英語單詞。。。。

6.HTML腳本

　　什麼叫作腳本呢？大白話說一下就是根據咱們鼠標的點擊，會動態的生成須要的html標籤，頁面就會發生變化了，這個腳本語言最經常使用的就是js，記住哦，js代碼必須下載身體標籤中的<script>標籤中，咱們隨便看看一個例子：

　　能夠看到堆出現這個彈窗，這是最簡單的js腳本了，下面咱們簡單說說js腳本中一些其餘的東西，建議本身去學一下js這個腳本語言（全稱是javascript，注意，和java沒什麼鳥關係），很容易，就是一些數據類型，循環呀，函數什麼的，能夠說門檻極低，即便是零基礎快的話幾天應該也差很少了，要多用就能夠了；

　　並且在腳本中，js腳本是基於事件的，提及來很抽象，什麼是事件呢？舉個很簡單的例子：咱們打開一個頁面，只要咱們的鼠標移動了或者點擊了什麼按鈕，腳本均可以捕捉到這個變化，是否是很厲害，這個變化就是一個事件，根據這個事件咱們能夠添加一下特效，根據上面的例子修改一下，點擊一下這個按鈕就會出現彈窗；

<body>
    <button type="button" onclick="myFunction()">點我一下你就知道！</button>

    <script>
        function myFunction(){
            alert("hello,我是java小新人");
        }
        </script>
 
 </body>

------------------------------------------------------------------------------------------------------------------------------------------------------------------

7.特殊符號

　　在html標籤中有一些特殊符號是不能直接用的，爲何呢？看下面這個簡單的例子，我想在頁面上顯示這樣一句話：這裏不是</button>點我一下你就知道！，然而當瀏覽器解析到第一個</button>標籤就覺得是結束標籤，因而顯示的結果和咱們要額不同下圖所示！！！因此咱們要對<、>等特殊符號作一些處理，防止這種情形發生；

<button type="button" onclick="myFunction()">這裏不是</button>點我一下你就知道！</button>

　　我隨便截了一下圖，這個也不用記，用到的時候來查一下就能夠了，咱們直接用表中的實體名稱來代替特殊符號便可：

　　修改後的代碼和顯示的結果爲：

<button type="button" onclick="myFunction()">這裏不是&lt;/button &gt;點我一下你就知道！</button>

8.URL路徑

　　這個其實很容易，咱們常常用www.baidu.com這種方式進行訪問百度首頁，那麼這些單詞表明什麼意思呢？咱們隨便說一下，好比有一個URL爲 http://www.runoob.com/html/html-tutorial.html ，對應的語法規則是：scheme://host.domain:port/path/filename，說明以下：

scheme - 定義因特網服務的類型。最多見的類型是 http
host - 定義域主機（http 的默認主機是 www）
domain - 定義因特網域名，好比 runoob.com
:port - 定義主機上的端口號（http 的默認端口號是 80）
path - 定義服務器上的路徑（若是省略，則文檔必須位於網站的根目錄中）。
filename - 定義文檔/資源的名稱

　　新手看這個確定看不懂，我就用大白話來講說：schema表示一些協議，或者叫作約束，其實就是兩臺電腦通訊的約定規則，通常有以下幾種；

　　host.domain一塊兒看做是每臺電腦上網的ip地址，port表示電腦通訊的端口，path表示目標計算機的某個文件夾，filename表示該文件夾下肯定的文件；

9.總結

　　看起來這麼多，其實內容很少，就是一些最基本的html標籤，記住html標籤是瀏覽器內部去解析的，全部說到的標籤總結：https://www.runoob.com/html/html-quicklist.html，除了這些標籤以外咱們還簡單的使用的使用了一下CSS對標籤內容進行渲染，而且用了一下簡單的js腳本，其實一個網頁作的怎麼樣，最重要的首先是佈局（用的最多的是div標籤），而後通過一些有藝術細胞的人用CSS進行渲染，再由js腳本弄出比較華麗的動態效果，因而一個看起來就很牛的頁面就出來了。。。。。

　　固然後續會用到不少的前端框架，暫時也不熟悉就不瞎說了！