Python小案例71- HTML基礎及語法

TML（HyperText Markup Language）是一種用于創建網頁的標記語言。它由一系列的標簽組成，這些標簽用于描述網頁的結構和內容。HTML標簽通常由尖括號包圍，例如<tag>。

HTML標簽可以分為兩類：塊級元素和內聯元素。塊級元素用于組織網頁的結構，例如段落、標題、列表等。內聯元素用于標記文本中的特定部分，例如鏈接、強調文本等。

HTML標簽可以包含屬性，屬性提供了有關標簽的額外信息。例如，<a>標簽用于創建鏈接，可以使用href屬性指定鏈接的目標URL。

除了標簽和屬性，HTML還支持一些特殊字符實體，用于表示特殊字符，例如小于號（<）、大于號（>）等。

HTML可以與CSS（層疊樣式表）和JavaScript一起使用，以增強網頁的外觀和功能。CSS用于控制網頁的樣式，例如顏色、字體、布局等。JavaScript用于實現交互性和動態效果，例如表單驗證、動畫等。

通過使用HTML，開發人員可以創建具有結構良好、易于理解和導航的網頁。它是構建互聯網的基礎之一，被廣泛應用于網站開發和內容管理系統。

HTML的語法由標簽、屬性和內容組成。下面是HTML的基本語法規則：

標簽：HTML標簽用于定義網頁的結構和內容。標簽通常由尖括號包圍，例如<tag>。標簽可以是成對出現的，其中包含一個開標簽和一個閉標簽，例如<tag>content</tag>。也可以是自閉合標簽，即只有一個標簽，沒有內容，例如<tag />。
屬性：HTML標簽可以包含屬性，屬性提供了有關標簽的額外信息。屬性通常以鍵值對的形式出現，例如<tag attribute="value">。屬性的值可以是字符串或布爾值。常見的屬性包括class、id、src、href等。
內容：HTML標簽可以包含文本內容或其他標簽。文本內容直接放置在標簽的開閉標簽之間，例如這是一個段落。。標簽可以嵌套在其他標簽中，形成標簽的層次結構。
注釋：HTML注釋用于在代碼中添加注釋，不會在網頁中顯示。注釋以結尾，例如。

下面是一個簡單的HTML示例：

<!DOCTYPE html>
<html>
<head>
  <title>我的網頁</title>
</head>
<body>
  <h1>歡迎來到我的網頁</h1>
  <p>這是一個段落。</p>
  <a href="https://www.example.com">點擊這里</a>訪問示例網站。
</body>
</html>

在這個示例中，<!DOCTYPE html>聲明了文檔類型為HTML5。<html>標簽是HTML文檔的根元素。<head>標簽用于定義文檔的頭部信息，例如標題和樣式表。<title>標簽定義了網頁的標題，將顯示在瀏覽器的標題欄中。<body>標簽用于定義文檔的主體內容。<h1>標簽定義了一個一級標題，標簽定義了一個段落，<a>標簽定義了一個鏈接。

TML:超文本標記語言(超文本的意思就是我們可以給文本使用超鏈接實現頁面的跳轉，標記語言就是<>里面寫的)

標記語言不是編程語言(編程語言有一定的邏輯性)

語法：

1.html文檔后綴名: .html 或者.htm都可以沒有區別

2.標簽分為：

1.圍堵標簽：有開始標簽和結束標簽。如<html></html>

2.自閉和標簽：開始標簽和結束標簽在一起。如

3.標簽可以嵌套：

需要正確嵌套，不能你中有我，我中有你

錯誤示范：<a></a>

正確示范:<a></a>

4.在開始標簽中可以定義屬性。屬性是由鍵值對構成的，值需要用引號(單雙都可以)引起來。

5.html的標簽不區分大小寫，但是建議使用小寫。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一個HTML頁面</title>
</head>
<body>
	<h1>武漢加油</h1><br/>
	<h1>中國加油</h1><br/>
	<font color='red'>隨緣</font><br/>
	<font color='green'>何日暴富</font>
	
</body>
</html>

字的傳統字體有楷書、隸書、草書等等，現在的自制字體數量更多。如果還用著系統默認的微軟雅黑，那不妨試著用用新字體。擺脫網頁單調的第一步，從字開始！

目標

指定字體系列
設置字體大小、粗細和正斜
設置字體顏色

設置字體--font-family

在日常工作、生活里，我們常常接觸到宋體、黑體等傳統字體

傳統字體

隨著人們的審美越來越高，就出現了各種各樣新的字體，例如：

火星字體

上面的不算，下面的才算，有很Q的字體，有帶有圖標的字體等等。

新字體

在CSS中，使用font-family屬性來定義字體類型。可指定多種字體，多個字體將按優先順序排列，以逗號隔開，注意逗號一定要是英文逗號。如果電腦沒有第一個字體，則向后選擇，以此類推。

語法：font-family：字體1,字體2,字體3;

定義字體

字體大小--font-size

在CSS中，使用font-size屬性來定義字體大小。常用的單位是長度值（px）

語法：font-family：像素值;

在css文檔里，還有其他的單位，例如絕對單位和相對單位，但是使用的頻率遠不如長度值單位。

注意：瀏覽器默認字體大小是16px

定義字體大小

效果

字體粗細--font-weight

在CSS中，使用font-weight屬性來定義字體粗細。

語法：font-weight：值;

這個屬性就總共3個狀態：正常（normal）、較細（lighter）、較粗（bold）

在css文檔里，還有數值的選擇，其實沒多大作用，一般都不會使用。

注意：bold和bolder效果是一樣

定義字體粗細

字體正斜--font-style

在CSS中，使用font-style屬性來定義字體傾斜效果

語法：font-style：值;

這個屬性就總共2個狀態：正常（normal）、斜體（italic、oblique）

注意：italic、oblique這兩個效果是一樣的，只不過有些字體無法通過italic來設置斜體

，只能通過oblique來強制傾斜。

定義字體粗細

效果

字體顏色--color

在CSS中，使用color屬性來定義字體顏色。

語法：font-color：顏色值;

顏色值是一個關鍵字或一個16進制的RGB值

關鍵字指的就是顏色的英文名稱，如red、blue、green等。

16進制RGB值指的就是類似"#FBF9D0"這種形式的值。

定義字體顏色

效果

總結

思維導圖

在線咨詢

上一篇：HTML 文本格式化
下一篇：中共甘肅省委統戰部所屬事業單位 2022年度公開招聘工作人員公告

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商