1. 程式人生 > 其它 >HTML標籤、屬性和事件

HTML標籤、屬性和事件

學習H5,就需要知道什麼是HTML的標籤、屬性和事件。

標籤是機器的一種語言,只有相應的瀏覽器能讀懂,所以在html裡制定了網頁展現所需要的基本標籤,用於顯示錶格、圖片、文字等。

事件是類似於:點選時觸發、滑鼠懸停觸發、按鍵按下觸發等能夠觸發方法的叫事件。
方法就是事件發生後觸發的邏輯。
屬性是:長度、寬度、樣式、名稱、id等這些定義html標籤的叫做屬性。

<HTML>檔案宣告 讓瀏覽器知道這是HTML檔案
<head>開頭 提供檔案整體資訊
<TITLE>標題 定義檔案標題將顯示於瀏覽器頂端
<body>主體 設計檔案格式及內容所在
排版標記
<!--註解-->說明標記 為檔案加上說明但不被顯示
<p>段落標記 為字、圖、表格等之間留下一空白行
<br>換行標記 令字、圖、表格顯示於下一行
<hr>水平線 插入一水平線
<center>居中 令字、圖、表格等顯示於中間
<pre>預設格式 令檔案按原始碼的排列方式顯示
<div>定位標記 設定字、圖、表格等的擺放位置
<nobr>不換行 令文字不因太長而換行

字型標記
<strong>加重語氣 產生字型加粗Bold的效果
<b>粗體標記 產生字型加粗的效果
<em>強調標記 字型出現斜體效果
<l>斜體標記 字型出現斜體效果
<u>加下劃線 加下劃線
<H1>一級標題標記 將字型變大,級數越高越小
<H2>二級標題標記 將字型變大
<H3>三級標題標記 將字型變大
<H4>四級標題標記 將字型變大
<H5>五級標題標記 將字型變大
<H6>六級標題標記 將字型變大
<font>字型標記 設定字型、大小、顏色
<small>字型縮小 令字型稍微縮小
<code>程式碼 字型稍微加寬
<var>變數 斜體效果
<address>地址標記 斜體效果
清單標記
<ol>順序清單 將以數字、字母順序排列
<ul>無序清單 將以圓點作為符號排列
<li>清單專案 清單中的專案,一個標記一行
<menu>選項清單
表格標記
<table> 表格標記 設定該表格的各項引數
<tr>表格行 設定該表格的行
<td>表格單元格 設定該表格的單元格
<th>表格標題 相等於<td>,但其內文字字型會變粗
表單標記
<form>表單標記 決定該表單的運作模式
<textrea>文字框 提供文字輸入欄
<input>輸入標記 決定輸入形式
<select>選擇標記 建立彈出捲動清單
<option>選項 每一個清單選項
連結標記
<a>連結標記 加入連結
其他標記
<meta>開頭說明 提供關於此頁的資訊給瀏覽器
<link>關係定義 定義該檔案與其他URL的關係
StyleSheet
<style>式樣表 控制網頁版面
<span>自訂標記 獨立使用或與樣式表一起用

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>hello,world!</title>
<style></style>
</head> <body> <div>無實意標籤</div> <
p>段落標籤</p> <span>無實意標籤</span> <img src=http://img.doutula.com/production/uploads/image/2021/09/15/20210915691303_XWNVtf.gif> <ul type="square"> <!-- circle --> <!-- 無序列表 --> <li>qqqqq</li> </
ul> <ol > <li>qqqqq</li> </ol> <input type="text" name=""> <input type="number" name=""> <input type="passwrod" name=""> 性別: <input type="radio" name="gender"><input type="radio" name="gender"><br> <!-- 複選框 --> <input type="checkbox" name=""> <a href="https://www.baidu.com">百度一下</a> <h1>1</h1> <h2>2</h2> <h3>3</h3> </body> </html>