心智圖資源庫 HTML標籤種類
這是一篇關於HTML標籤種類的心智圖,主要內容包括:三、Body內部常用的標籤,二、HTML文檔基本結構,一、HTML是什麼又不是什麼? 。
編輯於2024-04-26 15:22:04This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
html標籤
script標籤
一、放置在<head>標籤中
由於HTML 文件是由瀏覽器從上到下依序載入的,如果你將JavaScript程式碼放置在<head>標籤裡時,JavaScript無法從<body>標籤中取得所需的元素,就會出現DOM還未以頁面渲染,JavaScript無法執行的情況。所以將JavaScript程式碼放置在<head>標籤中,一般用於提前載入以回應使用者的動作,不影響HTML 文件的瀏覽器顯示內容,可以保證腳本在任何呼叫之前被載入。
二、放置在<body>標籤中
位於<body>標籤內的<script>標籤,可以放函數也可以放立即執行的語句,但是如果需要和網頁元素互動的(例如取得某個標籤的值或給某個標籤賦值),需要將< script>標籤放在該網頁元素之後。
三、放置在<body>標籤後
當準備解釋這裡的JavaScript程式碼時,整個網頁已經載入完畢了,所以這裡最適合放需要立即執行的命令,而自訂函數之類的則不適合。
rel=nofollow
nofollow標籤是禁止蜘蛛爬行追蹤本鏈接
meta robots標籤是禁止蜘蛛爬行跟踪或索引整個頁面鏈接
https://jingyan.baidu.com/article/75ab0bcba6c61fd6874db279.html
常用標籤
https://blog.csdn.net/qq_46137324/article/details/131971697
標準化的 HTML5 元素
根元素
Element Description <html> 代表 HTML 或 XHTML 文件的根。其他所有元素必須是這個元素的子節點。
文件元數據
Element Description <head> 代表關於文檔元資料的一個集合,包括腳本或樣式表的連結或內容。 <title> 定義文件的標題,將顯示在瀏覽器的標題列或標籤頁上。該元素只能包含文本,包含的標籤不會被解釋。 <base> 定義頁面上相對 URL 的基準 URL。 <link> 用於連結外部的 JavaScript 或 CSS 到該文件。 <meta> 定義其他 HTML 元素無法描述的元資料。 <style> 用於內聯 CSS。
腳本
Element Description <script> 定義一個內聯腳本或連結到外部腳本。腳本語言是 JavaScript。 <noscript> 定義當瀏覽器不支援腳本時顯示的替代文字。 透過 JavaScript 在執行時期實例化內容的容器。
章節
Element Description <body> 代表 HTML 文檔的內容。在文件中只能有一個 <body> 元素。 定義文檔中的一個章節。 定義只包含導航連結的章節。 定義可以獨立於內容其餘部分的完整獨立內容區塊。 定義和頁面內容關聯度較低的內容-如果被刪除,剩下的內容仍然很合理。 <h1>,<h2>,<h3>,<h4>,<h5>,<h6> 標題元素實現了六層文件標題,<h1> 是最大的標題,<h6> 是最小的標題。標題元素簡要地描述章節的主題。 定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。 定義頁面或章節的尾部。它經常包含版權資訊、法律資訊連結和回饋建議用的地址。 <address> 定義包含聯絡資訊的一個章節。 定義文件中主要或重要的內容。
組織內容
Element Description <p> 定義一個段落。 <hr> 代表章節、文章或其他長內容中段落之間的分隔符號。 <pre> 代表其內容已預先排版過,格式應保留 。 <blockquote> 代表引用自其他來源的內容。 <ol> 定義一個有序列表。 <ul> 定義一個無序列表。 <li> 定義清單中的一個清單項目。 <dl> 定義一個定義清單(一系列術語和其定義)。 <dt> 代表一個由下一個 <dd> 定義的術語。 <dd> 代表出現在它之前術語的定義。 代表一個和文檔有關的圖例。 代表一個圖例的說明。 <div> 代表一個通用的容器,沒有特殊意義。
文字形式
Element Description <a> 代表一個連結到其他資源的超連結 。 <em> 代表強調 文字。 <strong> 代表特別重要 文字。 <small> 代表註釋 ,如免責聲明、版權聲明等,對理解文檔不重要。 <s> 代表不準確或不相關 的內容。 <cite> 代表作品標題 。 <q> 代表內聯的引用 。 <dfn> 代表一個術語包含在其最近祖先內容中的定義 。 <abbr> 代表省略 或縮寫 ,其完整內容在 title 屬性中。 關聯一個內容的機器可讀的等價形式 (該元素只在 WHATWG 版本的 HTML 標準中,不在 W3C 版本的 HTML5 標準中)。 代表日期 和時間 值;機器可讀的等價形式透過 datetime 屬性指定。 <code> 代表計算機代碼 。 <var> 代表程式碼中的變數 。 <samp> 代表程式或電腦的輸出 。 <kbd> 代表使用者輸入 ,一般從鍵盤輸出,但也可以代表其他輸入,如語音輸入。 <sub>,<sup> 分別代表下標 和上標 。 <i> 代表一段不同性質 的文字,如技術術語、外文短語等。 <b> 代表一段需要被關注 的文字。 <u> 代表一段需要底線呈現的文字註釋,如標記出拼字錯誤的文字等。 代表一段需要被高亮的引用 文字。 代表被ruby 註釋 標記的文本,如中文漢字和它的拼音。 代表ruby 註釋 ,如中文拼音。 代表 ruby 註釋兩邊的額外插入文字 ,用於在不支援 ruby 註釋顯示的瀏覽器中提供友善的註釋顯示。 代表需要脫離 父元素文字方向的一段文字。它允許嵌入一段不同或未知文字方向格式的文字。 <bdo> 指定子元素的文字方向 ,明確地覆蓋預設的文字方向。 <span> 代表一段沒有特殊意義的文本,當其他語意元素都不適合文本時可以使用該元素。 <br> 代表換行 。 代表建議換行 (Word Break Opportunity) ,當文字太長需要換行時將會在此處新增換行符。
編輯
Element Description <ins> 定義增加 到文件的內容。 <del> 定義從文件移除 的內容。
嵌入內容
Element Description <img> 代表一張圖片 。 <iframe> 代表一個內聯的框架 。 代表一個嵌入 的外部資源,如應用程式或互動內容。 <object> 代表一個外部資源 ,如圖片、HTML 子文件、外掛程式等。 <param> 代表 <object> 元素所指定的插件的參數 。 代表一段影片 及其影片檔案和字幕,並提供了播放影片的使用者介面。 代表一段聲音 ,或稱音頻流 。 為 <video> 或 <audio> 這類媒體元素指定媒體來源 。 為 <video> 或 <audio> 這類媒體元素指定文字軌道(字幕) 。 代表點陣圖區域 ,可以透過腳本在它上面即時呈現圖形,如圖表、遊戲繪圖等。 <map> 與 <area> 元素共同定義影像映射 區域。 <area> 與 <map> 元素共同定義影像映射 區域。 定義一個嵌入式向量圖 。 定義一段數學公式 。
表格
Element Description <table> 定義多維資料 。 <caption> 代表表格的標題 。 <colgroup> 代表表格中一組單列或多列 。 <col> 代表表格中的列 。 <tbody> 代表表格中一塊具體資料 (表格主體)。 <thead> 代表表格中一塊列標籤 (表頭)。 <tfoot> 代表表格中一塊列摘要 (表尾)。 <tr> 代表表格中的行 。 <td> 代表表格中的儲存格 。 <th> 代表表格中的頭部單元格 。
表單
Element Description <form> 代表一個表單 ,由控制項組成。 <fieldset> 代表控制組 。 <legend> 代表 <fieldset> 控制項組的標題 。 <label> 代表表單控制項的標題 。 <input> 代表允許使用者編輯資料的資料區 (文字方塊、單選框、複選框等)。 <button> 代表按鈕 。 <select> 代表下拉框 。 代表提供給其他控制項的一組預先定義選項 。 <optgroup> 代表一個選項分組 。 <option> 代表一個 <select> 元素或 <datalist> 元素中的一個選項 <textarea> 代表多行文字方塊 。 代表一個密鑰對產生器 控制項。 代表計算值 。 代表進度條 。 代表滑動條 。
互動元素
Element Description 代表一個使用者可以(點選)取得額外資訊或控制項的小工具 。 代表 <details> 元素的綜述 或標題 。 代表一個使用者可以點擊的選單項目。 代表菜單。
HTML標籤種類
1. 一、HTML是什麼又不是什麼?
1.1、HTML是什麼
超文本標記語言(Hypertext Markup Language, HTML)是一種用於建立網頁的標記語言。
網頁檔案的副檔名:.html或.htm
本質上是瀏覽器可識別的規則,我們按照規則寫網頁,瀏覽器根據規則渲染我們的網頁。對於不同的瀏覽器,對同一個標籤可能會有不同的解釋。 (相容性問題)
1.2、HTML不是什麼
HTML是一種標記語言(markup language),它不是一種程式語言。 HTML使用標籤來描述網頁。
2. 二、HTML文檔基本結構
基本結構範例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css樣式優先權</title> </head> <body> </body> </html>
對HTML基本格式的說明
注意:對於中文網頁需要使用 <meta charset="utf-8"> 宣告編碼,否則會出現亂碼。有些瀏覽器會設定 GBK 為預設編碼,則你需要設定為 <meta charset="gbk">。
2.1.head內部常用標籤
<!--標籤的分類<h1></h1>--> <!DOCTYPE html> <!--lang="en" 表示網頁的主要語言是英文--> <html lang="zh-CN"> <head> <!--定義網頁原資訊--> <meta charset="UTF-8"> <!--方便搜尋引擎找的,一個是keywords搜尋關鍵字可以引導到該網頁,description相當於摘要--> <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳到"> <meta name="description" content="老男孩教育Python學院"> <!--標籤頁上顯示的內容--> <title>My First HTML</title> <!--定義a標籤的樣式--> <style> a{ color:darkred; } </style> <!-- 定義JS代碼或引入外部JS文件 <script>alert("Hello World")</script> --> <!--引入外部樣式表檔案text.css將a標籤的顏色變為綠色--> <link rel="stylesheet" href="text.css"> <!-- 2秒後跳到對應的網址,注意引號 <meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/zaixiazhouzhou/default.html?page=1"> --> <!--告訴IE以最高級模式渲染文件--> <meta http-equiv="x-ua-compatible" content="IE=edge"> </head>
2.1.1、對Meta標籤的再補充
• <meta>元素可提供有關頁面的元資訊(mata-information),針對搜尋引擎和更新頻度的描述和關鍵字。 • <meta>標籤位於文件的頭部,不包含任何內容。 • <meta>提供的資訊是使用者不可見的。 meta標籤的組成:meta標籤共有兩個屬性,它們分別是http-equiv屬性和name 屬性,不同的屬性又有不同的參數值,這些不同的參數值就實現了不同的網頁功能。
1.http-equiv屬性:
相當於http的文件頭作用,它可以傳回瀏覽器給瀏覽器一些有用的信息,以幫助正確地顯示網頁內容,與之對應的屬性值為content,content中的內容其實就是各個參數的變數值。
<!--2秒後跳到對應的網址,注意引號--> <meta http-equiv="refresh" content="2;URL=https://baidu.com"> <!--指定文檔的編碼類型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告訴IE以最高級模式渲染文件--> <meta http-equiv="x-ua-compatible" content="IE=edge">
2.name屬性:
主要用於描述網頁,與之對應的屬性值為content,content中的內容主要是方便搜尋引擎機器人尋找資訊和分類資訊用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳到"> <meta name="description" content="老男孩教育Python學院">
3. 三、Body內部常用的標籤
3.1、基本標籤
<b>加粗</b> <i>斜體</i> <u>底線</u> <s>刪除</s> <p>段落標籤</p> <h1>標題1</h1> <h2>標題2</h2> <h3>標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6>標題6</h6> <!--換行--> <br> <!--水平線--> <hr>
3.2、img標籤
<img src="圖片的路徑" alt="圖片未載入成功時的提示" title="滑鼠懸浮時提示訊息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">
img標籤中除了自帶的屬性,我們還可以為它添加一些自訂的屬性
<img format="jpg" sx="自訂的屬性" src="圖片的路徑" >
3.3、a標籤
3.3.1、a標籤的介紹
a標籤也就是我們常見的超連結標籤,所謂的超連結是指從一個網頁指向一個目標的連結關係,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置, 還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程式。 預設情況下,連結將以以下形式出現在瀏覽器中:
一個未訪問過的連結顯示為藍色字體並帶有下劃線。
訪問過的連結顯示為紫色並帶有下劃線。 點擊連結時,連結顯示為紅色並帶有下劃線。
注意:如果為這些超連結設定了 CSS 樣式,則展示樣式會根據 CSS 的設定而顯示。
3.3.2、a標籤的語法格式
<a href="http://www.oldboyedu.com" target="_blank" id="自訂的ID值">點我</a>
href屬性指定目標網頁位址。該位址可以有幾種類型: • 絕對URL - 指向另一個網站(如 href="http://www.jd.com) • 相對URL - 指目前網站中確切的路徑(href="index.htm") • 錨URL - 指向頁面中的錨(href="#top")
target 屬性: • _blank表示在新分頁中開啟目標網頁 • _self表示在目前標籤頁中開啟目標網頁
id 屬性: id 屬性可用來建立一個 HTML 文件書籤。提示: 書籤不會以任何特殊方式顯示,即在 HTML 頁面中是不顯示的,所以對於讀者來說是隱藏的。
在HTML文件中插入ID: <a id="ID為1">現在是ID為1的位置</a>
3.4、HTML中特殊字符
雖然 html 不區分大小寫,但實體字元對大小寫敏感。
3.5、div和span標籤
span和div差別在於,div是一個區塊級元素,它包含的元素會自動換行。而span是行內元素,在它的前後不會換行。
span沒有結構上的意義,只是單純的應用樣式,其他元素不適合時,就可以使用span元素。 span可以作為div的子元素,但div不能是span的子元素,如果出現span中出現div不符合ws3c的頁面標準。
3.6、重點:標籤的分類
3.6.1、第一種:區塊級標籤
特點:標籤獨佔一行,可指定寬、高。
特性: • 能夠辨識寬高 • margin和padding的上下左右均對其有效 • 可自動換行 • 多個塊狀元素標籤寫在一起,預設排列方式為從上到下 • 可以使用margin:0 auto居中對齊
常用的塊狀元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
3.6.2、第二種: 內斂標籤(行內標籤)
特點:標籤在一行內,寬度與高度由內容決定,只有在內容超過HTML的寬度時,才會換行。
特性: • 無法設定寬高 • margin上下無效,只有左右有效果,padding都有效果,會撐大空間;box-sizing:border-box;無效,因為該屬性針對盒子模型。 • 不會自動換行
常用的內聯元素有: <a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
3.7、列表標籤
列表標籤的屬性大概有以下幾種
3.7.1、無序列表 ul 的相關屬性
type屬性: • disc(實心圓點,預設值) • circle(空心圓圈) • square(實心方塊) • none(無樣式)
<ul type="disc"> <li>實心圓點-預設值</li> </ul> <ul type="circle"> <li>實心圓</li> </ul> <ul type="square"> <li>實心方塊</li> </ul> <ul type="none"> <li>無樣式</li> </ul>
輸出範例:
3.7.2、有序列表 ol 的相關屬性
有序列表type屬性值 並不是有序列表只能用1、2、3 …來表示序列。也可以使用下面的方式:
有序列表的其他屬性
3.7.3、標題清單的相關屬性
<dl> <dt>標題一</dt> <dd>標題一下的內容1</dd> <dt>標題二</dt> <dd>標題二下的內容1</dd> <dd>標題二下的內容2</dd> </dl>
輸出範例
3.8、文字格式化標籤
https://blog.csdn.net/qq_44891434/article/details/113371490
https://blog.csdn.net/qq_46137324/article/details/131971697