Python武器庫開發-前端篇之html概述(二十八)

前端篇之html概述(二十八)

html概述

HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認為是互聯網的核心技術之一。HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發。

HTML（Hypertext Markup Language）是一種用于創建和發布Web頁面的標記語言。它使用標記標識文本、圖像和其他內容的結構和呈現形式。HTML文檔包含一系列嵌套的標記和元素，這些元素可以通過瀏覽器解析和渲染為Web頁面。HTML是Web開發的基礎，它具有簡單易于學習的語法，使得它成為了Web開發者的標準語言之一。HTML也支持各種交互和媒體元素，例如鏈接、表格、圖像、音頻和視頻等。最新版本是HTML5，提供了新的語義元素和API，可以更好地滿足Web應用程序的需求。

HTML5 <!DOCTYPE>

<!doctype> 聲明必須位于 HTML5 文檔中的第一行,使用非常簡單:

<!DOCTYPE html>

這樣做會讓目前還不支持的HTML5的瀏覽器采用標準模式解析，這意味著他們會解析那些HTML5中兼容的舊的HTML的標簽的部分，而忽略他們不支持HTML5的新特性。
這個doctype比以前更短，更簡單，使的它更容易被記住并且減少必須下載的字節數。

用`<meta charset>`聲明字符集

在一個頁面上做的第一件事通常是聲明使用的字符集。在以前版本的HTML，它是一個非常復雜的元素，現在它變得非常簡單：

<meta charset="UTF-8">

把這個放到你的<head>頭中，因為在一些瀏覽器中如果聲明的字符集和他們的預期的不同，他們會重新解析一遍HTML文檔。另外，如果你目前沒有使用UTF-8，建議您把您的網頁改為這個編碼，因為它簡化了不同腳本對文件中字符的處理。

值得注意的是HTML5限制了可用的字符集，他們需要兼容8位的ASCII。這樣做是為了加強安全，防止某些類型的攻擊。

HTML 常用編輯器

工欲善其事,必先利其器；一個好用的html編輯器，可以讓您在制作html網頁效率更高，事半功倍的效果。下面給您介紹幾款常用的編輯器。

以使用專業的 HTML 編輯器來編輯 HTML，基礎教程為大家推薦幾款常用的編輯器：

Notepad++ https://notepad-plus.en.softonic.com/
Editplus https://www.editplus.com/
VS Code：https://code.visualstudio.com/
Sublime Text：http://www.sublimetext.com/

你可以從以上軟件的官網中下載對應的軟件，按步驟安裝即可。

HTML 頭部元素

<head> 元素是所有頭部元素的容器。 <head> 內的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息等。

HTML <head> 元素

<head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。

可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

Html注釋

HTML注釋是在HTML代碼中添加注釋的一種方法。這些注釋不會在網頁上顯示，只是用于在HTML代碼中記錄注釋和說明。在HTML中，使用“”結束注釋。

例如，以下HTML代碼中添加了一個注釋：

<!DOCTYPE html>
<html>
<head><title>我的網站</title>
</head>
<body><!-- 這是我的首頁 --><h1>歡迎來到我的網站！</h1><p>這是一個示例段落。</p>
</body>
</html>

HTML `<title>` 元素

<title> 標簽定義了不同文檔的標題。

<title> 在 HTML/XHTML 文檔中是必須的。

<title> 元素:

定義了瀏覽器工具欄的標題
當網頁添加到收藏夾時，顯示在收藏夾中的標題
顯示在搜索引擎結果頁面的標題

一個簡單的 HTML 文檔:

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>HTML文檔標題</title></head><body>HTML文檔內容......</body></html>

運行顯示結果類似如下:

在這里插入圖片描述

第一個Html網頁

接下來我們來制作第一個html的網頁

<! DOCTYPE html>
<html lang="en"><head><title>第一個html網頁</title></head><body>網頁顯示的內容</body>
</html>

運行顯示結果類似如下:

在這里插入圖片描述

HTML 標題

HTML 標題由 <h1> 到 <h6> 標簽組成，分別表示六個級別的標題。其中 <h1> 標簽表示最高級別的標題，<h6> 標簽表示最低級別的標題。如下所示：

<h1>這是一級標題</h1><h2>這是二級標題</h2><h3>這是三級標題</h3><h4>這是四級標題</h4><h5>這是五級標題</h5><h6>這是六級標題</h6>

運行顯示結果類似如下:

在這里插入圖片描述

HTML 段落

HTML 段落是通過標簽 <p> 來定義的，HTML段落是指由一些文字組成的單個塊，這些文字通常都有一個相關主題并且被一些空格和換行符隔開以便于閱讀。在HTML中，我們可以使用<p>標簽來定義一個段落。例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>標題</title></head><body><p>這是一個段落。</p><p>這是一個段落。</p><p>這是一個段落。</p></body>
</html>

運行顯示結果類似如下:

在這里插入圖片描述

HTML塊和樣式標簽

HTML塊是一組相關的HTML元素，通常用于組織內容。例如，常見的HTML塊包括段落、標題、列表、表格等。

樣式標簽用于指定HTML元素的樣式。有多種樣式標簽可用，其中包括：

<style>標簽：在HTML文檔中嵌入CSS樣式表。
<link>標簽：將CSS樣式表鏈接到HTML文檔中。
<div>標簽：定義HTML中的一個通用容器，可以在其中應用樣式
<span>標簽：定義HTML中的一個行內元素，可以在其中應用樣式。
<h1>-<h6>標簽：定義HTML中的標題元素，可以應用樣式。
<p>標簽：定義HTML中的段落元素，可以應用樣式。

這些樣式標簽可以幫助開發人員控制HTML元素的外觀和布局。

以下是實列：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>塊</title>
</head>
<body><div>已經可以用<em>雙足</em>行走的、長得像<i>小型恐龍</i>的爬蟲型數碼寶貝。<br />
還在成長中，所以力量較弱，但性格相當兇猛，無所畏懼。雙手雙足都長出堅硬鋒利的爪子，在戰斗中也能發揮威力。<br />
預測其將會進化成強大且偉大的數碼寶貝。奧義技是口吐火焰攻擊敵人的<b>“小型火焰”</b>。 <br />
神經大條、性格直接,雖然還在成長中力量弱小，但是性格卻相當勇猛<strong>無所畏懼</strong>，有時會有些魯莽。<br />
十分貪吃，什么都想吃一口，只要有吃的就會非常開心。 <br /></div><br /><br /><br /><br /><div>已經可以用雙足行走的、長得像小型恐龍的爬蟲型數碼寶貝。
還在成長中，所以力量較弱，但性格相當兇猛，無所畏懼。雙手雙足都長出堅硬鋒利的爪子，在戰斗中也能發揮威力。
預測其將會進化成強大且偉大的數碼寶貝。奧義技是口吐火焰攻擊敵人的“小型火焰”。 
神經大條、性格直接,雖然還在成長中力量弱小，但是性格卻相當勇猛無所畏懼，有時會有些魯莽。
十分貪吃，什么都想吃一口，只要有吃的就會<span>非常開心</span>。 </div>
</body>
</html>

運行顯示結果類似如下:

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/168193.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/168193.shtml
英文地址，請注明出處：http://en.pswp.cn/news/168193.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！