從零開始的python世界的闖蕩第三十一話前端-html

07-15

#本章記錄的是有關前端學習，html部分的內容。 #具體涉及了常用標籤，表格，列表，表單的知識點

首先要明確一點， html/CSS/JavaScript 這是前端三劍客 html 主要負責前端內容，主要學習標籤 CSS 主要負責前端頁面的外觀，主要學習選擇器和屬性 JavaScript 主要負責前端頁面的動作，主要學習基礎語法，以及BOM&DOM

一.html

#1.html的概述

HTML是HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，「超文本」就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。，標記指的是標籤，是一種用來制作網頁的語言，這種語言由一個個的標籤組成，用這種語言製作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。

簡單來說，一個html文件就是一個網頁，而html文件不需要專門的編輯器編輯，通過記事本就可以進行編輯。通過瀏覽器進行打開，可以展現出頁面。

#2.html的基本結構

<!DOCTYPE html> #文檔聲明 <html lang="en"> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> 網頁顯示內容 </body> </html>

1.<html>與</html>標籤結合定義html文檔的整體，lang=en 定義網頁的語言為英文，定義成中文為lang=zh-CN。 2.<head>與</head>標籤是html文檔的第一層子元素,head標籤內主要填寫對網頁的設置內容和定義標題。比如設置網頁的編碼格式，如<meta charset="utf-8">，也可以設置網頁的標題如 <title> 網頁標題 </title>,特別的，在head里填寫的內容不會顯示在頁面里。 3.<body>和</body>標籤內主要填寫的是網頁的內容。也就是網頁的主體。

#3.html 文檔類型

目前常用的兩種文檔類型是xhtml 1.0 和 html5


#1. xhtml 1.0：是html5之前的一個常用的版本。他是可擴展超文本標記語言，

是一種置標語言，表現方式與超文本標記語言（HTML）類似，不過語法上更加嚴格。

文檔舉例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title> xhtml 1.0 文檔類型 </title>

</head>

<body>
</body>

</html>
#2. html5 : 是萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言

的第五次重大修改。具體的內容，可以查閱官方文檔或者百度百科。只能說，html5

目前是使用較廣泛的。他並且向下兼容。

文檔示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title> html5文檔類型 </title>

</head>

<body>
</body>

</html>

#3.兩種文檔的區別： 1.在文檔聲明上和編碼聲明存在差異。 2.html5新增了標籤元素和元素屬性

#4.html文檔的規範

接下來5點，最好都遵守： 1.所有的標籤必須小寫 2.所有的屬性必須用雙引號括起來 3.所有的標籤必須閉合 4.圖片必須加alt屬性 5.不要貿然出現空格，最好少用空格

還有其他具體的規範可以自行看文檔，以上5點是重要的。

#5.html注釋:

在html中注釋是這樣寫：  看起來頗有些麻煩。

#6.html標籤的特點：

1.html大部分標籤都是成對出現，少量是單個出現的 2.標籤之間是可以進行嵌套的，可以是同類型，也可以是不同類型。例如：  <head> ..... </head> <body> ..... </body>  <img ..... /> <input ..... />  <p> <img .... /> </p> <div><div> ..... </div>.....</div>

二.html常用標籤講解

#1.標題<hn>

<hn>標籤是可以在網頁上定義6種級別的標題，n代表的是數字，從1開始一直到6，標題大小依次遞減。例如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標題的顯示</title> </head> <body> <h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6> </body> </html>