HTML基礎知識

来源:https://www.cnblogs.com/liweichao-you/archive/2019/09/28/html.html
-Advertisement-
Play Games

一.基本知識 HTML 指的是超文本標記語言: HyperText Markup Language HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag) <標簽>內容</標簽> HTML 元素包含了開始標簽與結束標簽,元素的內容是開始標簽與結束標簽之間的內容,元素屬性是 HTML 元素 ...


一.基本知識

HTML 指的是超文本標記語言: HyperText Markup Language

HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)    <標簽>內容</標簽>

HTML 元素包含了開始標簽與結束標簽,元素的內容是開始標簽與結束標簽之間的內容,元素屬性是 HTML 元素提供的附加信息。

基本HTML 網頁結構如下,body標簽內的才是我們在瀏覽器上所視內容

複製代碼
<!DOCTYPE html>
<html>
<body>
<h1>我是第一個標題</h1>
<p>我是第一個段落。</p>
</body>
</html>
複製代碼

<!DOCTYPE html> 聲明為 HTML5 文檔

<html> 元素是 HTML 頁面的根元素

<head> 元素包含了文檔的元(meta)數據,如 <meta charset="utf-8"> 定義網頁編碼格式為 utf-8

<title> 元素描述了文檔的標題,瀏覽器標簽名

<body> 元素包含了可見的頁面內容

<h1> 元素定義一個大標題

<p> 元素定義一個段落

<!-- 內容 -->註釋內容

 

二.元素屬性

HTML元素屬性一般在開始標簽中,以鍵值對錶示

<a href="http://www.baidu.com">表示鏈接</a>

常見屬性

其它標準屬性參考這裡

 

三.頭部

<head> 元素包含了所有的頭部標簽元素。

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

 

<title> 元素定義文檔的標題。瀏覽器會以特殊的方式來使用標題,並且通常把它放置在瀏覽器視窗的標題欄或狀態欄上。同樣,當把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時,標題將成為該文檔鏈接的預設名稱。

<title>文檔標題</title>

<style> 標簽用於為 HTML 文檔定義樣式信息。在 style 中,可以規定在瀏覽器中如何呈現 HTML 文檔。具體這裡

<meta> 元素可提供有關頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述和關鍵詞。<meta> 標簽沒有結束標簽。詳細這裡

<link> 標簽定義了文檔與外部資源之間的關係。最常見的用途是鏈接樣式表

<link rel="stylesheet" type="text/css" href="theme.css" />

<script>標簽用於載入腳本文件,如: JavaScript。詳細這裡

<noscript> 元素用來定義在腳本未被執行時的替代內容(文本)。

<base> 標簽為頁面上的所有鏈接規定預設地址或預設目標。詳細這裡

 

四.主體

body 元素定義文檔的主體。

body 元素包含文檔的所有內容(比如文本、超鏈接、圖像、表格和列表等等)

最為常見的有:

1.<h1> 定義最大的標題。 <h6> 定義最小的標題。標題(Heading)是通過 <h1> - <h6> 標簽進行定義的.

<h1>這是一個標題。</h1>
<h2>這是一個標題。</h2>
<h3>這是一個標題。</h3>

 

2.<hr> 標簽在 HTML 頁面中創建水平線

<p>這是一個段落。</p>
<hr>
<p>這是一個段落。</p>

 

3.<p> 標簽定義段落。

如果在不產生一個新段落的情況下進行換行(新行),請使用 <br> 標簽

<p>這個<br>段落<br>演示了分行的效果</p>

 

4.<a> 標簽定義超鏈接,用於從一張頁面鏈接到另一張頁面。<a> 元素最重要的屬性是 href 屬性,它指示鏈接的目標。

<a href="URL">鏈接</a>

 

5.<img> 元素向網頁中嵌入一幅圖像,<img> 標簽有兩個必需的屬性:src 屬性 和 alt 屬性。src 指 "source"。源屬性的值是圖像的 URL 地址。alt 屬性用來為圖像定義一串預備的可替換的文本。

<img src="url"  alt="圖片" />

 

6.HTML表格由 <table> 標簽來定義。每個表格均有若幹行(由 <tr> 標簽定義),每行被分割為若幹單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

複製代碼
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
複製代碼

 

7.無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。

無序列表使用 <ul> 標簽

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

 

8.有序列表也是一列項目,列表項目使用數字進行標記。 有序列表始於 <ol> 標簽。每個列表項始於 <li> 標簽。

列表項使用數字來標記。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

 

9.<div> 可定義文檔中的分區或節(division/section)。

<div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具,並且不使用任何格式與其關聯。

如果用 id 或 class 來標記 <div>,那麼該標簽的作用會變得更加有效。

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

 

10.<form> 標簽用於為用戶輸入創建 HTML 表單。

表單能夠包含 input 元素,比如文本欄位、覆選框、單選框、提交按鈕等等。

表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。

表單用於向伺服器傳輸數據。詳細這裡

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

 

 

摘於https://www.w3cschool.cn/

      https://www.cnblogs.com/fengf233/

 

作者:沉醉學習、無法自拔 出處:https://www.cnblogs.com/fengf233/ 本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。   分類: 前端知識 標簽: HTML CSS
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 最近建了一個 Android 開發交流群,但不限於交流移動端、前端和後端等相關技術。 本群的宗旨:讓所有學習的群友都有進步的機會。 1. 經驗交流 在我們學習時遇到困境,或者開發過程中遇到難題,都可以將你的問題拋出來,也許別人也會遇到過,讓有經驗的人來幫你解答。 2. 文章分享 我會每天分享一篇優質 ...
  • 1. 下載安裝JDK 下載地址: https://www.oracle.com/technetwork/java/javase/downloads/jdk8 downloads 2133151.html 安裝好後,配置 系統環境變數 :控制面板\系統和安全\系統 → 高級系統設置 → 高級 → 環境 ...
  • 因為只有塊元素才會有物理屬性,在css世界裡邊,有三種形態的東西,1. 塊元素。 特性:有物理屬性,width,height寫值起作用,而且要占據一行。2. 內聯元素。 特性:沒有物理屬性。但是margin,padding值有用。不占據一行,後邊可以有兄弟元素。3. 即是塊又是內聯,根據兄弟兄弟元素 ...
  • 在自己的網站上我們如果想把網頁分享出去,只能通過複製鏈接的方式發給好友。這裡將介紹如何使用百度官方提供的分享插件進行分享,在官網裡已經找不到文檔了,但插件還是能用的 ...
  • 還在用 border style: dashed 畫虛線嗎?雖然也是虛線,但是不能控制每一個虛線的寬度 ...
  • 1.問題 首先把問題放出來,昨天看了一個網友發的一個問題,然後跟我同事一起研究了一下,沒找出來是為什麼,然後我回來一直在想為什麼,然後各種找資料研究,從各個方面找為什麼,比如js上下文,作用域,js垃圾回收,堆棧調用情況等等。 2.js斷點調試找答案 首先如果不看上面的圖,以你現在知道的js知識,你 ...
  • 場景 349套HTML5+CSS3各行各業網站模板。 Web前端開發是從網頁製作演變而來的,名稱上有很明顯的時代特征。在互聯網的演化進程中,網頁製作是Web1.0時代產物,那時網站的主要內容是靜態的,用戶使用網站的行為也以瀏覽為主。 部分預覽圖效果: 實現 網頁實際運行效果 關註公眾號: 霸道的程式 ...
  • 項目構建分析和 webpack 優化實踐 最近接手在做一個chrom瀏覽器插件的項目,開發過程中發現項目打包的時間很長,足足有30多秒,這是讓人很難接受的,而且構建的顯示了幾條包體積過大的提示信息: [image:073CB50B 06EB 4779 84FE D11087B12BD7 47140 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...