HTML基礎——基礎標簽

来源:https://www.cnblogs.com/dfif/archive/2019/12/05/11963326.html
-Advertisement-
Play Games

一、HTML概述 htyper text markup language 即超文本標記語言。 超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。 標記語言: 標記（標簽）構成的語言。 1、網頁的組成 一個網頁一般由兩部分組成即： HTML（Hypertext Markup Lan ...


一、HTML概述

  • htyper text markup language  即超文本標記語言。
  • 超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。
  • 標記語言: 標記（標簽）構成的語言。

1、網頁的組成

一個網頁一般由兩部分組成即：

  • HTML（Hypertext Markup Language）
  • 和CSS（Cascade Style Sheets）

HTML負責描述網頁的結構和內容（如標題，導航欄等） CSS則負責網頁的表現（外觀）（如背景顏色，字體樣式等）。

2、HTML文檔的基本格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5的基本格式</title>
</head>
<body>

</body>
</html>

（1）.<!doctype>標記

位於文檔最前面，用於向瀏覽器說明當前文檔使用的HTML標準。

（2）.<html>標記

也稱為根標記，用於告知瀏覽器其自身是一個HTML文檔，<html>標記標志著HTML文檔的開始，</html>標記著HTML文檔的結束。

（3）.<head>標記

用於定義HTML文檔的頭部信息，稱為頭部標記。主要用來封裝其他位於文檔頭部的標記。

①.<title>：設置頁面標題標記

用於定義HTML頁面的標題，即給網頁取一個名字。

 

<title>個人簡介網</title>

 

②.<meta/>：定義頁面元信息標記

用於定義頁面的元信息,可重覆出現在<head>頭部標記中，是一個單標記。

常見的幾種設置，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞

#1.<meta charset="UTF-8"/>   

定義編碼格式為utf-8

 

#2.<meta name="名稱" content="值"/>

可以為搜索引擎提供信息。

  • name="keywords":設置網頁關鍵字，如個人簡介網頁關鍵字的設置。

 

<meta name="keywords" content="個人簡介，日記，秀出自我"/>

 

  • name="description":設置網頁描述，如個人簡介網頁描述信息的設置。

 

<meta name="description" content="這是一個個人簡介網站，你可以通過本網站來秀出真正的自己。"/>

 

  • name="author":設置網頁作者。

 

<meat name="author" content="劉瑛奇"/>

 

#3.<meta http-equiv="名稱" content="值"/>

設置伺服器發送給瀏覽器的http頭部信息，為劉安琪顯示頁面提供相關的參數。

  • 設置字元集。
<meta http-equiv="Content-Type" content-"text/html"; charset="utf-8"/>
  • 設置頁面自動刷新與跳轉。
<meta http-equaiv="refresh" content="10;url=http://www.baidu.com"/>

③.<link>：引用外部文件標記

常用屬性：

屬性名   常用屬性值 　　　　　　　　　　　　　　　　描述
 href    　 URL 指定引用外部文檔的地址
  rel 　stylesheet 指定當前文檔與引用外部文檔的關係，該屬性值通常為stylesheet，表示定義一個外部樣式表
 type 　 text/css 引用外部文檔的類型為CSS樣式表
text/javascript 引用外部文檔的類型為JavaScript腳本

 

 

 

 

 

 

例如：使用<link>標記引用外部CSS樣式表：

 

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

 

④.<style>:內嵌樣式標記

用於為HTML文檔定義樣式信息，在HTML中使用style標記時，常常定義其屬性為type,相應屬性值為text/css。

例如：

<!doctype html>
<html>
    <head>
          <meta charset="utf-8"/>
          <title>style標記的使用</title>
          <style type="text/css">
          h2{color:blue;}
          p{color:yellow;}     
          </style>
    </head>

    <body>
    <h2>我的個人簡介</h2>
    <p>我是一名來自河南洛陽的男孩，今年20歲！</p>
    </body>
</html>

（4）.<body>標記

用於定義HTML文檔索要顯示的內容,也稱為主體標記。<body>標記中的信息才是最終要顯示在網頁上的。

body裡面分為兩類標簽：塊級標簽和內聯標簽。

　　塊級標簽：<p><h1><table><ol><ul><form><div>

　　內聯標簽：<a><input><img><sub><sup><textarea><span>

塊級標簽元素的特點
　　① 總是在新行上開始；
　　② 高度，行高以及外邊距和內邊距都可控制；
　　③ 寬度預設是它的容器的100%，除非設定一個寬度。
　　④ 它可以容納內聯元素和其他塊元素

內聯標簽元素的特點
　　① 和其他元素都在一行上；
　　② 高，行高及外邊距和內邊距不可改變；
　　③ 寬度就是它的文字或圖片的寬度，不可改變
　　④ 內聯元素只能容納文本或者其他內聯元素

對行內元素，需要註意如下 
　　① 設置寬度width 無效。
　　② 設置高度height 無效，可以通過line-height來設置。
　　③ 設置margin 只有左右margin有效，上下無效。
　　④ 設置padding 只有左右padding有效，上下則無效。註意元素範圍是增大了，但是對元素周圍的內容是沒影響的。

#1.基本標記：

①.標題標記：<h1>~<h6>

通常用來設置標題,從<h1>~<h6>重要性遞減。

基本語法格式為：

<hn align="對齊方式">標題文本</hn>

align為可選屬性，用於指定標題的對齊方式。

屬性值有：

　　left:設置標題文字左對齊(預設值)

　　center:設置標題文字居中對齊

　　right:設置標題文字右對齊

註：一個頁面中只能使用一個<h1>標記，通常用於LOGO部分。

代碼示例：

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>標題標記的使用</title>
</head>

<body>
     <h1 align="center">一級標題 居中對齊</h1>
     <h2>二級標題</h2>
     <h3>三級標題</h3>
     <h4>四級標題</h4>
     <h5>五級標題</h5>
     <h6>六級標題</h6>
</body>
</html>

 

②.段落標記：<p>

用於定義一個獨立的段落，每個段落獨占一行，並且段落之間回有一定的間隙。

語法格式為：

<p align="對齊方式">段落文本</p>

代碼示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落標記的用法</title>
</head>

<body>
     <p align="center">這是我的個人簡介</p>
     <p>我叫劉瑛奇，是一個大二學生，學的是電腦專業，是一個開朗熱愛學習的男孩。</p>
     <p align="right">劉瑛奇  2019.12.1</p>
</body>
</html>

③.功能標記

　　<b> <strong>: 加粗標簽.

　　<strike>: 為文字加上一條中線.

　　<i> <em>: 文字變成斜體.

　　<sup>和<sub>: 上角標 和 下角表.

　　<br>:換行.

　　<hr>:水平線

代碼示例：

<html>
<head>
    <meta charset="UTF-8">
    <title>功能標記的使用</title>
</head>

<body>
    <b>使用p標記前加粗文字</b>
    <br>
    <strong>使用strong標記加粗文字</strong>
    <hr>
    <p>原價：<strike>299 </strike> 現價：9.9</p>
    <p><em>這是一段斜體字</em></p>
    <p> 2<sup>n</sup> 2的n次方</p>
    <p>h<sub>2</sub>o 水的分子表達式</p>
　
    <p>&lt; 小於號</p>
    <p>&gt; 大於號</p>
    <p>&copy; </p>
    <p>&reg;</p>
</body>
</html>

 #2.圖像標記：

目前網頁上常用的圖像格式主要有GIF、JPG和PNG三種，具體區別如下。

●GIF格式

特點：

　　支持動畫，是一種無損的圖像格式。

　　支持透明，只能處理256中顏色。

　　常用於LOGO、小圖標及其它色彩相對單一的圖像。

●PNG格式

特點：

　　體積更小，支持alpha透明。

　　不支持動畫。

●JPG格式

 特點：

　　可以保存超過256種顏色的圖像。
　　是一種有損壓縮的圖像格式。

　　常用於較大的圖片的保存。

1、圖像標記<img />

　　src: 要顯示圖片的路徑.

　　alt: 圖片沒有載入成功時的提示.

　　title: 滑鼠懸浮時的提示信息.

　　width: 圖片的寬

　　height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

　　vspace：圖像頂部和底部的空白(垂直邊距)

　　border:圖像邊框的寬度

　　hspace:圖像左側和右側的空白(水平邊距)

　　align:設置對齊方式

　　　　left:將圖像對齊到左邊

　　　　right:將圖像對齊到右邊

　　　　top:將圖像的頂端和文本的第一行文本對齊，其他文字居圖像下方

　　　　middle:將圖像的水平中線和文本的第一行文字對齊，其他文字居圖像下方

　　　　bottom:將圖像的底部和文本的第一行文字對齊，其他文字居圖像下方

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圖像標記的使用</title>
</head>

<body>
    <img src="my.gif" alt="一張我的自拍照" border="2" />
    <img src="my.gif" alt="一張我的自拍照" width="100" height="100" />
    <img src="my.gif" alt="一張我的自拍照" hspace="50" vspace="20" align="left" />
</body>
</html>

註意：

(1)、HTML不贊成圖像標記使用border、vspace、hspace及align屬性。

(2)、網頁製作中、裝飾性的圖像都不要直接插入<img/>標記，而是通過CSS設置背景圖像來實現。

相對路徑和絕對路徑

①.絕對路徑

就是網頁上的文件或目錄咋硬碟上的真正路徑。如："D:\HTML5+CSS3\images\logo.gif"。

註：網頁中不推薦使用絕對路徑。

②.相對路徑

就是相對於當前文件的路徑。

分為三種：

 ●圖像文件和html文件位於同一文件夾:只需輸入圖像文件的名稱即可，如"<img src="logo.gif" />"

 ●圖像文件位於html文件的下一級文件夾:輸入文件夾名和文件名，之間用"/"間隔，如<img src="images/logo.gif" />

 ●圖像文件位於html文件的上一級文件夾:在文件名之前加入"./",如果是上兩級使用"../../"以此類推。如<img src="../logo.gif" />

#3.超鏈接標簽(錨標簽)<a>:

　　href:要連接的資源路徑 格式如下: href="http://www.baidu.com" 

　　target:用於指定鏈接頁面的打開方式。

　　　　_self:預設值，在原視窗中打開。

　　　　_blank:在新視窗中打開。

　　name: 定義一個頁面的書簽.

　　用於跳轉 href : #書簽名稱.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超鏈接標記的使用</title>
</head>

<body>
    <a href="http://www.itcast.cn/" target="_slef">傳智播客</a>
    target="_self"原視窗中打開<br/>
    <a href="http://www.baidu.com/" target="_blank">百度</a>
    taget="_blank"新視窗打開
</body>
</html>

錨點鏈接：

通過創建錨點鏈接，用戶能夠快速定位到目標的內容。

創建步驟：

　　①.使用"<a href="#id名">鏈接文本</a>"創建鏈接文本。

　　②.使用相應的id名稱註跳轉目標的位置。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>錨點鏈接的使用</title>
</head>

<body>
    課程介紹：
    <ul>
        <li><a href="#one">平面廣告設計</a></li>
        <li><a href="#two">網頁設計與製作</a></li>
        <li><a href="#three">Flash互動廣告動畫設計</a></li>
        <li><a href="#four">用戶界面設計</a></li>
    <ul>
    <h3 id="one">平面廣告設計</h3>
    <p>課程涵蓋Photoshop圖像處理、I1lustrator圖形設計、平面廣告創意設計、字體設計與標誌設計。</p>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <h3 id="two">網頁世界與製作</h3>
    <p>課程涵蓋DIV+CSS實現Web標準佈局、Dreamweaver快速網站建設、網頁版式構圖與設計技巧、網頁配色理論與技巧。</p>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <h3 id="three">Flash互動廣告動畫設計</h3>
    <p>課程涵蓋Flash動畫基礎。Flash高級動畫、Flash互動廣告設計、Flash商業網站設計。</p>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <h3 id="four">用戶界面設計</h3>
    <p>課程涵蓋JavaScript編程基礎、JavaScript網頁特效製作、JQuery編程基礎、JQuery網頁特效製作。</p>
</body>
</html>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML連載55-網易註冊界面實戰之input填充
    一、又學一招：想要讓兩個盒子高度對齊，那麼讓他們浮動起來 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D139_FrameworkeOfNeteasyInterface</title> <style> . ...
  • 深入瞭解CSS中盒子模型
    CSS中盒子模型介紹 什麼是盒子？ 盒子是用來存儲物品，我們可以將盒子理解為酒盒，酒盒有什麼組成的呢？ 有酒可以喝、有填充物保護酒防止酒被摔壞、紙盒子。 我們怎麼理解 中的盒子呢， 中盒子有什麼組成的呢？有內容、內邊距、邊框、外邊距。 中盒子的主要屬性有 種如： 寬度、 高度、 內邊距、 邊框、 外 ...
  • Web API---DOM---tab切換案例實現---排他
    tab切換案例實現 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style-type: no ...
  • Bootstrap4 本地編譯運行
    Step1. 獲取Bootstrap源代碼 1 https://github.com/twbs/bootstrap Step2. 進入目錄並切換npm源 1 npm --registry https://registry.npm.taobao.org // 淘寶鏡像 2 npm config get ...
  • Web API---DOM---自定義屬性引入和移除
    總結：在html標簽中添加的自定義屬性, 如果想要獲取這個屬性的值, 需要使用getAttribute("自定義屬性的名字")才能獲取這個屬性的值 html標簽中有沒有什麼自帶的屬性可以存儲成績的 沒有 本身html標簽沒有這個屬性, 自己(程式員)添加的 自定義屬性 為了存儲一些數據 <!DOCT ...
  • vue中計算屬性的get與set方法
    計算屬性get set方法 在vue的計算屬性中，所定義的都是屬性，可以直接調用 正常情況下，計算屬性中的每一個屬性對應的都是一個對象，對象中包括了set方法與get方法 而絕大多數情況下，計算屬性沒有set方法，是一個只讀屬性 此時計算屬性可以簡寫 ...
  • 手寫Promise A+ 規範
    基於ES6語法手寫promise A+ 規範，源碼實現 class Promise { constructor(excutorCallBack) { this.status = 'pending'; this.value = undefined; this.fulfilledAry = []; th ...
  • Web API---DOM---設置和獲取---標簽內容和文本內容
    設置和獲取 標簽內容和文本內容 總結 設置： 使用innerText主要是設置文本的, 設置標簽內容, 是沒有標簽的效果的 innerHTML是可以設置文本內容 innerHTML主要的作用是在標簽中設置新的html標簽內容, 是有標簽效果的 想要設置標簽內容, 使用innerHTML 想要設置文本 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類