小白學Python---web前端-HTML


超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用於創建網頁的標准標記語言。您可以使用 HTML 來建立自己的 WEB 站點,HTML 運行在瀏覽器上,由瀏覽器來解析。

HTML簡介

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

  • HTML 指的是超文本標記語言: HyperText Markup Language
  • HTML 不是一種編程語言,而是一種標記語言
  • 標記語言是一套標記標簽 (markup tag)
  • HTML 使用標記標簽來描述網頁
  • HTML 文檔包含了HTML 標簽及文本內容
  • HTML文檔也叫做 web 頁面

從初期的網絡誕生后,已經出現了許多HTML版本:

HTML元素

HTML文檔由HTML元素定義

HTML元素語法

  • HTML元素以開始標簽起始
  • HTML元素以結束標簽終止
  • 元素的內容是開始標簽與結束標簽之間的內容
  • 某些HTML元素具有空內容(empty content):比如
  • 空元素在開始標簽中進行關閉(以開始標簽的結束而結束)
  • 大多數HTML元素可擁有屬性
    HTML 標簽對大小寫不敏感:<P> 等同於<p>,但推薦使用小寫。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
    <h1>我的第一個標題</h1>
    <p>我的第一個段落。</p>
</body>
</html>

HTML段落標簽

段落是通過<p>標簽來定義的。它是個塊級元素,可通過<br>進行換行

文本格式化標簽

HTML鏈接標簽

HTML使用標簽 <a>來設置超文本鏈接。
超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。當您把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變為一只小手。在標簽<a> 中使用了href屬性來描述鏈接的地址。默認情況下,鏈接將以以下形式出現在瀏覽器中:

  • 一個未訪問過的鏈接顯示為藍色字體並帶有下划線。
  • 訪問過的鏈接顯示為紫色並帶有下划線。
  • 點擊鏈接時,鏈接顯示為紅色並帶有下划線。
    如果為這些超鏈接設置了 CSS 樣式,展示樣式會根據 CSS 的設定而顯示。

HTML圖像標簽

在 HTML 中,圖像由<img> 標簽定義。<img> 是空標簽,意思是說,它只包含屬性,並且沒有閉合標簽。要在頁面上顯示圖像,你需要使用源屬性(src)。src 指 "source"。源屬性的值是圖像的 URL 地址。alt 屬性用來為圖像定義一串預備的可替換的文本。height(高度) 與 width(寬度)屬性用於設置圖像的高度與寬度。

    <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

HTML表格標簽

表格由<table> 標簽來定義。表格的表頭使用<th> 標簽進行定義。每個表格均有若干行(由<tr> 標簽定義),每行被分割為若干單元格(由<td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。border是邊框屬性。

 <table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>      

瀏覽器顯示為:

表格中跨行跨列合並的使用較多,舉個例子如下:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<h4>單元格跨兩格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>單元格跨兩列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

在瀏覽器中顯示為:

HTML列表標簽

列表分為無序列表、有序列表、自定義列表。
1、無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。無序列表使用 <ul> 標簽:

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

瀏覽器顯示為:

2、有序列表項目使用數字進行標記。 有序列表始於 <ol> 標簽。每個列表項始於<li> 標簽。列表項使用數字來標記。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

瀏覽器顯示為:

3、自定義列表不僅僅是一列項目,而是項目及其注釋的組合。自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

瀏覽器顯示為:

HTML表單

表單是一個包含表單元素的區域。表單元素是允許用戶在表單中輸入內容,比如:文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。表單使用表單標簽 <form> 來設置。
多數情況下被用到的表單標簽是輸入標簽(<input>)。輸入類型是由類型屬性(type)定義的。大多數經常被用到的輸入類型如下:
文本域通過<input type="text"> 標簽來設定,當用戶要在表單中鍵入字母、數字等內容時,就會用到文本域。
密碼字段通過標簽<input type="password"> 來定義。
表單單選框選項通過<input type="radio"> 標簽定義。
復選框通過<input type="checkbox"> 定義。用戶需要從若干給定的選擇中選取一個或若干選項。
提交按鈕通過<input type="submit"> 定義了。當用戶單擊確認按鈕時,表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

<head> 
<meta charset="utf-8"> 
<title>)</title> 
</head>
<body>
​
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br>
Password: <input type="password" name="pwd"><br>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<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>
Username: <input type="text" name="user"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

瀏覽器顯示為:

HTML區塊元素

塊級元素

HTML<div> 元素是塊級元素,它可用於組合其他 HTML 元素的容器。<div> 元素沒有特定的含義。除此之外,由於它屬於塊級元素,瀏覽器會在其前后顯示折行。
如果與 CSS 一同使用,<div> 元素可用於對大的內容塊設置樣式屬性。<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。
塊級元素在瀏覽器顯示時,通常會以新行來開始(和結束)。
實例: <h1>, <p>, <ul>, <table>

內聯元素

HTML <span> 元素是內聯元素,可用作文本的容器,<span> 元素也沒有特定的含義。當與 CSS 一同使用時,<span> 元素可用於為部分文本設置樣式屬性。
內聯元素在顯示時通常不會以新行開始。
實例: <b>, <td>, <a>, <img>

本文參考菜鳥教程[HTML教程]: http://www.runoob.com/html/html-tutorial.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM