HTML基礎（一）

阿新 • • 發佈：2021-06-29

1、HTML概述

HTML：Hyper Text Markup Language，超文字標記語言，用作顯示網頁頁面資訊的標準
超文字：不僅僅是純文字還包括字型效果和多媒體資訊（圖片、音訊、視訊等）
標記語言格式：<開始標籤屬性="xxx">標籤體</結束標籤>

2、如何建立HTML檔案

File-->New-->Project

輸入web進行搜尋，選擇Static Web Project，點選Next

注意：當搜尋後發現沒有Web時，參考部落格：Eclipse新建時無Web專案的解決方法 - 夢想家---小崔 - 部落格園 https://www.cnblogs.com/XiaoCui-blog/p/14939196.html

輸入專案名：webStudy，點選Finish，完成專案建立

是否開啟檢視：此處選擇No，不進行檢視顯示

點開webStudy，在WebContent上右鍵，New，新建路徑Folder

命名為unit01（可理解為包）

在unit01（包）上右鍵，New，Other

在搜尋框中輸入html，選擇HTML File，Next

修改檔名為first，字尾可加可不加，預設html字尾，點選Finish

完成HTML檔案建立，顯示內容如下：

3、HTML檔案基本格式及程式碼作用

<!DOCTYPE html> 文件宣告：告訴瀏覽器使用哪個版本的標準解析頁面
<html> 根標籤（成對存在）：除了文件宣告，其他的都寫在<html></html>裡面
<head> 頭標籤（成對存在）：寫給瀏覽器看的內容，在頭標籤<head></head>裡面
<meta charset="UTF-8"> 告訴瀏覽器頁面的字符集是UTF-8
<title>Insert title here</title> 頁面標題
</head>
<body>
    體標籤（成對存在）：寫給使用者看的內容，在體標籤裡面  
</body>
</html>

4、執行HTML檔案

在html檔案上單擊右鍵，選擇Open With，在右側出現的選單欄中選擇Web Browser開啟即可。

顯示效果如下：

附：如何修改Eclipse中開啟HTML檔案的預設瀏覽器？

Window-->Preference

General-->Web Browser-->Use external web brower-->New(填寫瀏覽器名稱和路徑，推薦使用火狐或谷歌瀏覽器)-->完成後選

擇新新增的瀏覽器，點選Apply，OK即可。

再次使用Web Browser開啟時，會使用上面設定好的瀏覽器開啟HTML檔案。

注意

：

Eclipse每次程式碼編寫完成後需要儲存，再次以瀏覽器開啟或者重新整理原網頁才能載入新內容！

Eclipse如果更改了預設瀏覽器開啟方式，每次雙擊html檔案時，都會以瀏覽器的方式開啟，無法對程式碼進行編輯，建議每次的html編寫後不要關閉！！

解決辦法1：在html檔案上單擊右鍵，選擇Open WIth，以HTML Editor方式開啟（Text Editor也可以）

解決辦法2：直接將html檔案拖到右側空白視窗內，直接開啟

5、HTML標籤介紹

5.1 文字相關標籤

內容標籤h1-h6：字型加粗，獨佔一行，自帶上下間距，數值越大，字型越小
段落標籤p：獨佔一行，自帶上下行間距
換行br
水平分割線hr
加粗b
斜體i
小字small

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一個網頁</title>
</head>
<body>
    <!-- 註釋 -->
    <!-- 
        有些標籤是自帶獨佔一行效果的，有些標籤沒有自帶獨佔一行效果 
        那些自帶獨佔一行效果的我們可以稱為塊級標籤（元素），
        不帶獨佔一行效果的我們稱之為行標籤（元素）
    -->

    <!-- 標題標籤：h1-h6，數字越小，字型越大，預設靠左顯示-->
    <h1>一級標題（最大）</h1>   
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題（最小）</h6>
    <h6 align="left">預設靠左顯示</h6>
    <h6 align="center">居中顯示</h6>
    <h6 align="right">靠右顯示</h6>
    
    <!-- 段落標籤：獨佔一行，自動換行，自帶上下行間距，字型大小與正文內容相同-->
    正文內容 
    正文內容
    <p>段落標籤</p>
    <p align="center">段落標籤前面可設定屬性</p>
    正文內容
    正文內容
    
    <!-- 換行：切換到下一行，相比於段落標籤，間距小，段落標籤間距大 -->
    <br>
    正文內容<br>
    正文內容<br>
    
    <!-- 水平分割線：可設定顏色color、粗細size（以畫素為單位，不可以以百分比顯示）、
          寬度width（以畫素為單位，可用百分比%表示）、預設居中顯示 
    -->
    <hr color="red" size="10" width="1000">
    <hr color="blue" size="10" width="50%">

    <!-- 加粗 -->
    <b>加粗字型</b><br>
    <b>加粗字型</b><br>
    <b>加粗字型</b><br>
    
    <!-- 斜體 -->
    <i>斜體文字</i><br>
    <b><i>加粗斜體</i></b><br>
    <i><b>斜體加粗</b></i><br>
    
    <!-- 小型文字 -->
    <small>小型文字</small>
        
</body>
</html>

顯示效果如下：

5.2 列表標籤

無序列表
有序列表
定義列表
列表巢狀：有序列表和無序列表可以任意無限巢狀

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表標籤</title>
</head>
<body>
    <h1>一、無序列表</h1>
    <h2>unordered list(ul)：無序列表、list item(li)：列表項</h2>
    <h3>以disc實心圓表示專案符號</h3>
    <ul>
        <li>小紅</li>
        <li>小黃</li>
        <li>小黑</li>
        <li>小白</li>
        <li>小藍</li>
    </ul>
    
    <!-- ·表示專案符號，可以通過type進行更換
        circle表示空心圓，disc實心圓（預設），square表示實心方塊
     -->
    <h3>以circle空心圓表示專案符號</h3>
    <ul type="circle">
        <li>小紅</li>
        <li>小黃</li>
        <li>小黑</li>
        <li>小白</li>
        <li>小藍</li>
    </ul>
    <h3>以square實心方塊表示專案符號</h3>
    <ul type="square">
        <li>小紅</li>
        <li>小黃</li>
        <li>小黑</li>
        <li>小白</li>
        <li>小藍</li>
    </ul>
    
    <h1>二、有序列表</h1>
    <h2>ordered list(ol)：有序列表，list item(li)：列表項</h2>
    <ol>
        <li>開啟冰箱門</li>
        <li>清空冰箱</li>
        <li>把大象裝進去</li>
        <li>關上冰箱門</li>
        <li>接通電源</li>
    </ol>
    <h2>以start開始有序顯示</h2>
    <ol start="95">
        <li>開啟冰箱門</li>
        <li>清空冰箱</li>
        <li>把大象裝進去</li>
        <li>關上冰箱門</li>
        <li>接通電源</li>
    </ol>
    <h2>倒序顯示</h2>
    <ol reversed="reversed">
        <li>開啟冰箱門</li>
        <li>清空冰箱</li>
        <li>把大象裝進去</li>
        <li>關上冰箱門</li>
        <li>接通電源</li>
    </ol>
    <ol start="100" reversed="reversed">
        <li>開啟冰箱門</li>
        <li>清空冰箱</li>
        <li>把大象裝進去</li>
        <li>關上冰箱門</li>
        <li>接通電源</li>
</ol>
<h2>更換專案符號：A、a、I(羅馬字型)</h2>
<ol type="A">
　　<li>開啟冰箱門</li>
　　<li>清空冰箱</li>
　　<li>把大象裝進去</li>
　　<li>關上冰箱門</li>
　　<li>接通電源</li>
</ol>
　　<ol type="A">
　　<li>開啟冰箱門</li>
　　<li>清空冰箱</li>
　　<li>把大象裝進去</li>
　　<li>關上冰箱門</li>
　　<li>接通電源</li>
</ol>
<ol type="a">
　　<li>開啟冰箱門</li>
　　<li>清空冰箱</li>
　　<li>把大象裝進去</li>
　　<li>關上冰箱門</li>
　　<li>接通電源</li>
</ol>
<ol type="I">
　　<li>開啟冰箱門</li>
　　<li>清空冰箱</li>
　　<li>把大象裝進去</li>
　　<li>關上冰箱門</li>
　　<li>接通電源</li>
</ol>
    
<h1>三、定義列表</h1>
<h2>defined list(dl)：定義列表，
     defined title(dt)：定義標題，
     defined data(dt)：定義資料
</h2>
<dl>
　　<dt>水果</dt>
　　　　<dd>香蕉</dd>
　　　　<dd>蘋果</dd>
　　　　<dd>西瓜</dd>
　　　　<dd>芒果</dd>
　　　　<dd>荔枝</dd>
　　<dt>蔬菜</dt>
　　　　<dd>白菜</dd>
　　　　<dd>蘿蔔</dd>
　　　　<dd>土豆</dd>
　　　　<dd>豆角</dd>
　　　　<dd>茄子</dd>
</dl>
    
<h1>四、列表巢狀</h1>
<ul>
　　<li>水果
　　　　<ul>
　　　　　　<li>香蕉</li>
　　　　　　<li>蘋果</li>
　　　　　　<li>西瓜</li>
　　　　　　<li>芒果</li>
　　　　　　<li>荔枝</li>
　　　　</ul>
　　</li>
　　<li>蔬菜
　　　　<ol>
　　　　　　<li>白菜</li>
　　　　　　<li>蘿蔔
　　　　　　　　<ul>
　　　　　　　　　　<li>胡蘿蔔</li>
　　　　　　　　　　<li>水蘿蔔</li>
　　　　　　　　　　<li>白蘿蔔</li>
　　　　　　　　</ul>
　　　　　　</li>
　　　　　　<li>土豆</li>
　　　　　　<li>豆角</li>
　　　　　　<li>茄子</li>
　　　　</ol>
　　</li>
</ul>
</body>
</html>