當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

菜鸟学前端之初入江湖

發布時間：2025/3/21 HTML 32 豆豆

生活随笔收集整理的這篇文章主要介紹了菜鸟学前端之初入江湖小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

網頁存儲在服務器端，客戶用著客戶端，網頁通過瀏覽器顯示出來，其中一種標簽語言很重要：HTML（HyperText?Markup?Language），超文本標記語言。

HTML通過標記標簽來顯示網頁，標簽就是<>，通常一個開標簽，一個閉標簽，相當于通知你這個標簽開始了，這個標簽結束了。標簽常常和屬性一起使用。屬性打算在標簽后說。

最常用標簽有哪些：

<html></html>是告訴你使用的HTML

<title></title>:就是你打開的頁面的名字

<h1></h1>~<h6></h6>：heading 標題，用來顯示標題

<body></body>：頁面能顯示的內容都在這對標簽內

<p></p>：paragraph，顯示段落

<a href=" "></a> :這對標簽理顯示鏈接，可以是網址，也可以是頁面的<a name=" "></a>，在這里href 和 name就是標簽a的屬性

<img src=" "/>這是一個標簽，可以理解為自閉標簽，用于顯示圖片，來源可以時絕對地址或相對地址。

<br/>也是一個標簽，用于表示空，可以理解為換行?

標簽可以組合嵌套：<body><p>hello</p></body> ：整個顯示頁面就一個段落：hello

<a href=" "><img src=" "/></a>：顯示一個圖片鏈接

全部的標簽：來自 w3cschool 按功能劃分如下：

基礎

標簽描述

<!DOCTYPE>?	定義文檔類型。
<html>	定義 HTML 文檔。
<title>	定義文檔的標題。
<body>	定義文檔的主體。
<h1> to <h6>	定義 HTML 標題。
<p>	定義段落。
<br>	定義簡單的折行。
<hr>	定義水平線。
<!--...-->	定義注釋。

格式

標簽描述

?	?
<abbr>	定義縮寫。
<address>	定義文檔作者或擁有者的聯系信息。
<b>	定義粗體文本。
<bdi>	定義文本的文本方向，使其脫離其周圍文本的方向設置。
<bdo>	定義文字方向。
<big>	定義大號文本。
<blockquote>	定義長的引用。
<center>	不贊成使用。定義居中文本。
<cite>	定義引用(citation)。
<code>	定義計算機代碼文本。
<del>	定義被刪除文本。
<dfn>	定義定義項目。
<em>	定義強調文本。
<font>	不贊成使用。定義文本的字體、尺寸和顏色
<i>	定義斜體文本。
<ins>	定義被插入文本。
<kbd>	定義鍵盤文本。
<mark>	定義有記號的文本。
<meter>	定義預定義范圍內的度量。
<pre>	定義預格式文本。
<progress>	定義任何類型的任務的進度。
<q>	定義短的引用。
<rp>	定義若瀏覽器不支持 ruby 元素顯示的內容。
<rt>	定義 ruby 注釋的解釋。
<ruby>	定義 ruby 注釋。
<s>	不贊成使用。定義加刪除線的文本。
<samp>	定義計算機代碼樣本。
<small>	定義小號文本。
<strike>	不贊成使用。定義加刪除線文本。
<strong>	定義語氣更為強烈的強調文本。
<sup>	定義上標文本。
<sub>	定義下標文本。
<time>	定義日期/時間。
<tt>	定義打字機文本。
<u>	不贊成使用。定義下劃線文本。
<var>	定義文本的變量部分。
<wbr>	定義視頻。

表單

標簽描述

<form>	定義供用戶輸入的 HTML 表單。
<input>	定義輸入控件。
<textarea>	定義多行的文本輸入控件。
<button>	定義按鈕。
<select>	定義選擇列表（下拉列表）。
<optgroup>	定義選擇列表中相關選項的組合。
<option>	定義選擇列表中的選項。
<label>	定義 input 元素的標注。
<fieldset>	定義圍繞表單中元素的邊框。
<legend>	定義 fieldset 元素的標題。
<isindex>	不贊成使用。定義與文檔相關的可搜索索引。
<datalist>	定義下拉列表。
<keygen>	定義生成密鑰。
<output>	定義輸出的一些類型。

框架

標簽描述

<frame>	定義框架集的窗口或框架。
<frameset>	定義框架集。
<noframes>	定義針對不支持框架的用戶的替代內容。
<iframe>	定義內聯框架。

圖像

標簽描述

<img>	定義圖像。
<map>	定義圖像映射。
<area>	定義圖像地圖內部的區域。
<canvas>	定義圖形。
<figcaption>	定義 figure 元素的標題。
<figure>	定義媒介內容的分組，以及它們的標題。

音頻/視頻

標簽描述

<audio>	定義聲音內容。
<source>	定義媒介源。
<track>	定義用在媒體播放器中的文本軌道。
<video>	定義視頻。

鏈接

標簽描述

<a>	定義錨。
<link>	定義文檔與外部資源的關系。
<nav>	定義導航鏈接。

列表

標簽描述

<ul>	定義無序列表。
<ol>	定義有序列表。
<li>	定義列表的項目。
<dir>	不贊成使用。定義目錄列表。
<dl>	定義定義列表。
<dt>	定義定義列表中的項目。
<dd>	定義定義列表中項目的描述。
<menu>	定義命令的菜單/列表。
<menuitem>	定義用戶可以從彈出菜單調用的命令/菜單項目。
<command>	定義命令按鈕。

表格

標簽描述

<table>	定義表格
<caption>	定義表格標題。
<th>	定義表格中的表頭單元格。
<tr>	定義表格中的行。
<td>	定義表格中的單元。
<thead>	定義表格中的表頭內容。
<tbody>	定義表格中的主體內容。
<tfoot>	定義表格中的表注內容（腳注）。
<col>	定義表格中一個或多個列的屬性值。
<colgroup>	定義表格中供格式化的列組。

樣式/節

標簽描述

<style>	定義文檔的樣式信息。
<div>	定義文檔中的節。
<span>	定義文檔中的節。
<header>	定義 section 或 page 的頁眉。
<footer>	定義 section 或 page 的頁腳。
<section>	定義 section。
<article>	定義文章。
<aside>	定義頁面內容之外的內容。
<details>	定義元素的細節。
<dialog>	定義對話框或窗口。
<summary>	為 <details> 元素定義可見的標題。

元信息

標簽描述

<head>	定義關于文檔的信息。
<meta>	定義關于 HTML 文檔的元信息。
<base>	定義頁面中所有鏈接的默認地址或默認目標。
<basefont>	不贊成使用。定義頁面中文本的默認字體、顏色或尺寸。

編程

標簽描述

<script>	定義客戶端腳本。
<noscript>	定義針對不支持客戶端腳本的用戶的替代內容。
<applet>	不贊成使用。定義嵌入的 applet。
<embed>	為外部應用程序（非 HTML）定義容器。
<object>	定義嵌入的對象。
<param>	定義對象的參數。

全局屬性：可以用作任何一個標簽

accesskey	規定激活元素的快捷鍵。
class	規定元素的一個或多個類名（引用樣式表中的類）。
contenteditable	規定元素內容是否可編輯。
contextmenu	規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。
data-*	用于存儲頁面或應用程序的私有定制數據。
dir	規定元素中內容的文本方向。
draggable	規定元素是否可拖動。
dropzone	規定在拖動被拖動數據時是否進行復制、移動或鏈接。
hidden	規定元素仍未或不再相關。
id	規定元素的唯一 id。
lang	規定元素內容的語言。
spellcheck	規定是否對元素進行拼寫和語法檢查。
style	規定元素的行內 CSS 樣式。
tabindex	規定元素的 tab 鍵次序。
title	規定有關元素的額外信息。
translate	規定是否應該翻譯元素內容。

下一節進行逐個學習

總結

以上是生活随笔為你收集整理的菜鸟学前端之初入江湖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。