PHP快速上手（11）：HTML基礎

飛鳥部落格發表於2020-12-27
PHPHTML

HTML簡介

HTML是用來描述網頁的一種標記語言，全名為超文字標記語言。所謂標記語言，它不是程式語言，它擁有一套標籤符號，用來確定網頁的結構和骨架。

基本結構

HTML最基本的結構，是頭部和身體兩部分組成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>這是頭部標題</title>
</head>
<body>
    這是身體
</body>
</html>

結果：
在這裡插入圖片描述

HTML標籤格式

1.html標籤都是由尖括號包圍的關鍵字。
2.html標籤分為標籤對和單標籤兩種。
3.標籤裡也可以有屬性，也可以沒有。

標籤語法：
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標籤名>
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />

常用標籤

不加標籤的純文字也是可以在body中寫的
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>

<p>段落標籤</p> #獨佔一個段落

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>

<!--換行-->
<br>

<!--水平線--><hr> #就是單獨個一個水平線

img標籤顯示圖片

<img src="圖片的路徑" alt="圖片未載入成功時的提示" title="滑鼠懸浮時提示資訊" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">

程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片展示</title>
</head>
<body>
    <img src="1.jpg" alt="風景圖">
</body>
</html>

結果：
在這裡插入圖片描述

a標籤

a標籤是放超連結的，也就是網址。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳到百度</title>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">點我</a>
</body>
</html>

target:

_blank表示在新標籤頁中開啟目標網頁

_self表示在當前標籤頁中開啟目標網頁

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <thead> <!-- 標題部分 -->
            <tr> <!-- 表示一行 -->
                <th>序號</th> <!-- 一個單元表格 -->
                <th>姓名</th>
                <th>武功</th>
            </tr>
        </thead>
        <tbody> <!-- 內容部分 -->
            <tr>
                <td>1</td> <!-- 一個單元表格 -->
                <td>張無忌</td>
                <td>九陽神功</td>
            </tr>
            <tr>
                <td>2</td>
                <td>謝遜</td>
                <td>七傷拳</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

結果：
在這裡插入圖片描述

標籤還有很多就不一一列舉，具體請看手冊：
https://www.runoob.com/tags/html-reference.html

相關文章