HTML學習筆記

levizhong發表於2024-04-20

HTML筆記

一. HTML簡介

1. 什麼是HTML

HTML是用來描述網頁的一種語言。

HTML指的是超文字標記語言
HTML不是一種程式語言，而是一種標記語言
標記語言是一套標記標籤
HTML使用標記標籤來描述網頁

2. HTML標籤

HTML標籤是由尖括號包圍的關鍵詞，比如<html>
HTML標籤通常是成對出現的，比如<b>和</b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱為開放標籤和閉合標籤

3. HTML文件=網頁

Web瀏覽器的作用是讀取HTML文件，並以網頁的形式去顯示出它們。瀏覽器不會顯示HTML標籤，而是使用標籤來解釋頁面的內容。

<html>
<body>

<h1>我的第一個標題</h1>

<p>我的第一個段落。</p>

</body>
</html>

<html>和</html>之間的文字描述網頁
<body>和</body>之間的文字是可見的頁面內容
<h1>和</h1>之間的文字被顯示為標題
<p>和</p>之間的文字被顯示為段落

二. 簡單的HTML標籤

1. 四大元素

HTML 標題（Heading）是通過 <h1> - <h6> 等標籤進行定義的。
HTML 段落是通過 <p> 標籤進行定義的。
HTML 連結是通過 <a> 標籤進行定義的。

<a href="http://www.baidu.com"> This is a link </a>

HTML 影象是通過 <img> 標籤進行定義的。

<img src = "wcschool.jpg" width = "104" height = "141"/>

2. 空的HTML元素

沒有內容的HTML元素被稱為空元素，空元素是在開始標籤中關閉的。用<br/>表示空行。

三. HTML屬性

屬性總是以名稱/值對的形式出現，如：name = "value"，且總是在HTML元素的開始標籤中規定。

下面的程式碼中，href屬性指定連結的地址，<a>標籤定義連結。

<a href="http://www.baidu.com"> This is a link </a>

下面的程式碼中，align屬性指定對齊方式

<h1 align = "center"> message </h1>

下面的程式碼中，bgcolor屬性指定背景顏色的附加資訊

<body bgcolor = "yellow"> body </body>

屬性值始終被引號包圍，如果內容有雙引號，則需要用單引號來描述，如

name='Bill "HelloWorld" Gates'

四. HTML樣式

style屬性：用於改變HTML元素的樣式，它提供了一種改變所有HTML元素的樣式的通用方法，可以使用style屬性直接將樣式新增到HTML元素，或者間接地在獨立的樣式表中（CSS檔案）進行定義。

下面的程式碼中，background-color 屬性為元素定義了背景顏色：

<html>

<body style = "background-color:yellow">
<h2 style = "background-color:red"> heading2 </h2>
<p style = "background-color:green"> paragraph </p>
</body>

</html>

下面的程式碼中，font-family、color 以及 font-size 屬性分別定義元素中文字的字型系列、顏色和字型尺寸：

<html>

<body>
<h2 style = "font-family:verdana"> heading2 </h2>
<p style = "font-family:arial; color:red; font-size:20px"> paragraph </p>
</body>

</html>

下面的程式碼中，text-align 屬性規定了元素中文字的水平對齊方式：

<html>

<body>
<h1 style = "text-align: center"> heading1 </h1>
<p> paragraph </p>
</body>

</html>

使用樣式的三種方法：

外部樣式表：當樣式需要被應用到很多頁面的時候，外部樣式表是理想的選擇。使用外部樣式表，可以通過更改一個檔案來改變整個站點的外觀。

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

內部樣式表：當單個檔案需要特別樣式的時候，就可以使用內部樣式表，可以在head部分通過<style>標籤定義內部樣式表。

<head>

<style type = "text/css">
body {background-color: red}
p {margin-left: 20px}
</style>

</head>

內聯樣式：當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何CSS屬性。

<p style = "color:red; margin-left: 20px">
This is a paragraph
</p>

五. 分組標籤

塊元素：在瀏覽器顯示時，通常會以新行來開始（和結束），如<h1>, <p>, <ul>, <table>
內聯元素：在顯示時不會以新行開始，如<b>, <td>, <a>, <img>
<div>元素：是塊級元素，可用於組合其他HTML元素的容器，它沒有特定的含義，瀏覽器會在其前後顯示折行。

<body>

<h1>NEWS WEBSITE</h1>
<p>some text.</p>
...

<div class = "news">
<h2>Headline1</h2>
<p>some text...</p>
</div>

<div class = "news">
<h2>Headline2</h2>
<p>some text...</p>
</div>
...

</body>

在上面的HTML程式碼模擬了新聞網站的結構，每個div把每條新聞的標題和摘要組合在一起，div為文件新增了額外的結構。

由於這些div屬於同一類元素，所以可以使用class="news"對這些div進行標識，這麼做不僅為div新增了合適的語義，而且便於進一步使用樣式對div進行格式化，一舉兩得。

<span>元素：是內聯元素，可以作為文字的容器，也沒有特定的含義。用class或id屬性來標識<span>元素，這樣就可以對<span>標識的元素進行處理。

在HTML中：
<p class = "tip"> <span>提示：</span>... ... ...</p>

在CSS中：
p.tip span {
    font-weight: bold;
    color:#ff9955;
}

六. HTML類

對HTML進行分類，使我們能夠為元素的類定義CSS樣式，為相同的類設定相同的樣式，或者為不同的類設定不同的樣式。

<div>使用類：

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:10px;
}
</style>
</head>

<body>

<div class = "cities">
<h2>London</h2>
<p>About London</p>
<p>Description</p>
</div>

<div class = "cities">
<h2>Paris</h2>
<p>About Paris</p>
<p>Description</p>
</div>

</body>
</html>

<span>使用類：

<!DOCTYPE html>
<html>
<head>
<style>
span.red {
    color:red;
}
</style>
</head>

<body>
<h1>我的<span class = "red">重要</span>標題</h1>
</body>

</html>

七. HTML佈局

用CSS控制位置、顏色等佈局，其他標籤使用CSS填寫內容：

<!DOCTYPE html>
<html>
<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>
</head>

<body>

<div id = "header">
<h2>
City Gallery
</h2>
</div>

<div id = "nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id = "section">
<h1>London</h1>
<p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>

<div id = "footer">
<p> Copyright ? W3Schools.com</p>
</div>

</body>

</html>

八. 表格

每個表格由<table>開始
每個表格行由<tr>開始
每個表格資料由<td>開始
表格的表頭由<th>定義，顯示為粗體居中的文字
空單元格 <td>   </td>
標題<caption>
跨行：<th rowspan="2"></th>
控制padding：<table cellpadding = "10">
控制spacing：<table cellspacing = "10">
對齊：<td align = "left">

<h4>兩行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>

<tr>
<td>400</td>
<td>500</td>
<td>600</td>

</table>

九. 列表

無序列表：

<!--- 可以通過改變<ul type = "disc/square/circle">來改變顯示 --->
<ul>
<li>a</li>
<li>b</li>
</ul>

有序列表：

<!--- 可以通過改變<ol type = "A/a/I/i">來改變顯示 --->
<ol>
<li>a</li>
<li>b</li>
</ol>

十. 響應式設計

以可變尺寸傳遞網頁
對於平板和移動裝置是必需的
可以使用現成的CSS框架（如Bootstrap）

十一. HTML指令碼

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

十二. 頭部元素

<head>：是所有頭部元素的容器，可以包含指令碼，指示瀏覽器在何處可以找到樣式表，提供元資訊等：<title>、<base>、<link>、<meta>、<script>、<style>
<title>：定義文件的標題，如瀏覽器工具欄中的標題、頁面被新增到收藏夾時顯示的標題、在搜尋引擎結果中的頁面標題。
<base>：為頁面上的所有連結規定預設地址或者預設目標
<link>：定義文件與外部資源之間的關係，最常用於連線樣式表：

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

<style>\：為HTML文件定義樣式資訊，可以在style元素內規定HTML元素在瀏覽器中呈現的樣式。
<meta>：是關於資料的資訊，提供關於HTML文件的後設資料（不會顯示在頁面上，但對於機器是可讀的），典型情況下，用於規定頁面的描述、關鍵詞、文件的作者、最後修改時間以及其他後設資料。
<script>：用於定義客戶端指令碼，如JavaScript

十三. HTML統一資源定位器

URL：用於定位全球資訊網上面的文件

scheme://host.domain:port/path/filename

scheme：定義因特網服務的型別，最常見的型別是http
host：定義域主機（http的預設主機是www）
domain：定義因特網域名，如baidu.com
:port ：定義主機上的埠號，http預設埠是80
path：定義伺服器的路徑（如果省略，則文件必須位於網站的根目錄中）
filename：定義文件/資源的名稱

十四. 表單

<form>元素：HTML表單用於收集使用者輸入。包含不同型別的input元素、核取方塊、單選按鈕、提交按鈕等待。
<input>：最重要的表單元素，有很多形態，根據不同的type屬性。如text(定義常規文字輸入，預設寬度20字元)，radio（定義單選按鈕），submit（定義提交按鈕）

<html>
<body>

<form>
First name: <br/>
<input type = "text" name = "firstname"/>
</br>
Last name: <br/>
<input type = "text" name = "lastname"/>
</form>

</body>
</html>

<html>
<body>

<form>
<input type = "radio" name = "sex" value = "male" checked> Male
<br/>
<input type = "radio" name = "sex" value = "female"> Female
</form>

</body>
</html>

<html>
<body>

<form action = "/demo/demo_form.asp">
First name: </br>
<input type = "text" name = "firstname" value = "Mickey"/>
<br/>
Last name: </br>
<input type = "text" name = "lastname" value  = "Mouse"/>
<br/><br/>
<input type = "submit" value = "Submit"/>
</form>

<!--- 如果您點選提交，表單資料會被髮送到名為 demo_form.asp 的頁面。--->

</body>
</html>

Action屬性定義在提交表單時執行的動作，通常，表單會被提交到web伺服器上的網頁。

<form action = "action_page.php">

method屬性規定在提交表單時所用的HTTP方法（GET或者POST）

<form action = "action_page.php" method = "GET">

name屬性：每個輸入欄位必須設定一個name屬性。
組合表單：<fieldset>元素組合表單中的相關資料，<legend>元素為<fieldset>元素定義標題。

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

</body>
</html>

加了<fieldset>之後，整個表單組合成了一個整體。

<select>：下拉選單

<!DOCTYPE html>
<html>
<body>

<form action = "/demo/demo_form.asp">
<select name = "cars">
<option value = "volvo"> Volvo </option>
<option value = "saab"> Saab </option>
<option value = "audi"> Audi </option>
</select>
<br/><br/>
<input type = "submit">
</form>

</body>
</html>

<button>：可點選的按鈕

<button type = "button" onclick = "alert('Hello World!')"> Click Me! </button>

HTML學習筆記1
2020-11-14
HTML筆記
【學習筆記】HTML篇
2020-10-05
筆記HTML
HTML5學習筆記
2019-01-31
HTML筆記
HTML&CSS學習筆記
2021-09-05
HTMLCSS筆記
HTML入門學習筆記（二）
2019-02-16
HTML筆記
HTML5學習筆記拖放
2015-06-04
HTML筆記
Html 語法學習筆記一
2015-07-06
HTML筆記
Html 語法學習筆記二
2015-07-12
HTML筆記
Html 語法學習筆記三
2015-10-23
HTML筆記
HTML5學習筆記音訊
2015-06-03
HTML筆記音訊
HTML5學習筆記視訊
2015-06-02
HTML筆記
HTML5，CSS3，學習筆記
2020-11-14
HTMLCSSS3筆記
學習筆記~1.4 HTML5新特性
2020-09-28
筆記HTML
Html標籤知識點學習筆記
2018-02-17
HTML筆記
2018.3.28html學習筆記
2018-03-28
HTML筆記
HTML5學習筆記 - 第06天
2017-01-16
HTML筆記
html學習筆記(1)——基礎標籤
2014-04-24
HTML筆記
HTML5學習筆記 Web儲存
2015-06-11
HTML筆記Web
HTML5學習筆記1 HTML5 新元素
2015-05-27
HTML筆記
（交作業啦！！！）html5學習筆記?
2022-03-15
HTML筆記
HTML 學習筆記 April 27，2017
2017-05-20
HTML筆記
HTML5學習筆記 Geolocation（地理定位）
2015-06-04
HTML筆記
HTML5 學習筆記表單屬性
2015-06-06
HTML筆記
HTML5學習筆記3 內聯SVG
2015-06-02
HTML筆記SVG
numpy的學習筆記\pandas學習筆記
2018-03-18
筆記
Pytest學習筆記10-生成html報告
2021-07-05
筆記HTML
前端入門學習筆記01：HTML標籤（上）
2020-09-27
前端筆記HTML
HTML5 學習筆記應用程式快取
2015-06-12
HTML筆記快取
html+css複習筆記
2018-06-02
HTMLCSS筆記
IT學習筆記
2009-10-14
筆記
學習筆記
2024-04-14
筆記
2017-02-16 HTML5學習筆記
2017-02-16
HTML筆記
《JAVA學習指南》學習筆記
2019-03-24
Java筆記
HTML學習記錄（2）（HTML常用標籤）
2024-03-19
HTML
web前端教程之HTMLCSS學習筆記HTML5基礎
2020-05-13
Web前端HTMLCSS筆記
Head First HTML 與 CSS（第二版）學習筆記
2018-06-10
HTMLCSS筆記
python之前端HTML/CSS基礎知識學習筆記
2017-06-06
Python前端HTMLCSS筆記
python之前端HTML/CSS基礎知識學習筆記
2017-11-12
Python前端HTMLCSS筆記