一起學前端之HTML------(1)HTML 介紹

HTML 介紹

HTML 即超文本標記語言(HyperText Markup Language),它是構成網頁的基礎技術之一。HTML 借助各種標簽(Tag)對網頁的結構與內容加以描述。下面為你介紹其核心要點:

關鍵特性

  1. 標簽結構:HTML 運用尖括號包裹關鍵詞來形成標簽,像<html><body><h1>等。標簽一般是成對出現的,分別為開始標簽和結束標簽,例如<p>這是段落</p>
  2. 網頁結構:一個完整的 HTML 頁面包含頭部(<head>)和主體(<body>)兩部分。頭部用于存放頁面的元數據,像標題、編碼方式等;主體則是網頁實際顯示的內容。
  3. 元素嵌套:HTML 元素可以相互嵌套,從而構建出復雜的頁面結構。比如,<div>元素常常被用來對頁面進行分區。
  4. 超鏈接:借助<a>標簽能夠創建指向其他網頁或者資源的鏈接,例如<a href="https://example.com">鏈接</a>
  5. 圖片與多媒體:通過<img>標簽可以在頁面中插入圖片,使用<video>標簽能嵌入視頻。
  6. 表單:利用<form>標簽可以創建用戶輸入表單,其中包含文本框、按鈕等各種輸入元素。

示例

下面是一個html的示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Raigor(raigor.com)</title>
</head>
<body><h1>我的第一個標題</h1><p>我的第一個段落。</p></body>
</html>

預覽方式

方式一 瀏覽器

可以通過Chrome等瀏覽器直接打開預覽html文件

在這里插入圖片描述

方式二 VSCode的HTML Preview插件

在VSCode插件中心下載HTML Preview插件

在這里插入圖片描述

使用ctrl+shift+v即可實現html預覽

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

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

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

相關文章

整體遷移法遷移 Docker 鏡像

docker添加了新的鏡像數據盤&#xff0c;數據盤遷移步驟 使用整體遷移法遷移 Docker 鏡像后&#xff0c;可以在確認遷移成功且新數據盤正常使用后&#xff0c;刪除舊數據目錄來釋放空間1。 # 停止 Docker 服務 sudo systemctl stop docker # 停止 socket 監聽器 sudo systemct…

智能IDE+高效數據采集,讓數據獲取接近0門檻

亮數據也有了自己的官方賬號&#xff0c;大家可以關注&#xff1a;https://brightdata.blog.csdn.net/ 現在正有福利&#xff0c;有興趣的伙伴可以訪問鏈接&#xff1a; https://www.bright.cn/products/web-scraper/?utm_sourcebrand&utm_campaignbrnd-mkt_cn_csdn_jhx…

GNSS位移監測站在大壩安全中的用處

一、實時監測大壩變形 整體位移監測 GNSS&#xff08;全球導航衛星系統&#xff09;位移監測站能夠實時、連續地獲取大壩在三維空間中的位置信息&#xff0c;包括水平位移和垂直位移。大壩在長期運行過程中&#xff0c;受到水壓力、溫度變化、地基沉降等多種因素的影響&#x…

數字圖像處理(一):從LED冬奧會、奧運會及春晚等等大屏,到手機小屏,快來挖一挖里面都有什么

數字圖像處理&#xff08;一&#xff09; 一、什么是圖像&#xff1a;圖像就是多維數組圖像的存儲每一個格子有自己的顏色、深淺如何訪問圖像&#xff1a;1.對于RGB圖像&#xff0c;共有R/G/B三個通道&#xff0c;通過代碼來看。圖像有單通道和多通道之分&#xff0c;訪問時只需…

關于漢語和英語哪個更先進、歷史更久的爭論

引言&#xff1a;熱議背后的思考? ? 在全球化浪潮的推動下&#xff0c;英語作為國際通用語言&#xff0c;在世界范圍內廣泛傳播&#xff0c;其在國際商務、科技交流、學術研究等領域占據著重要地位。而漢語&#xff0c;作為世界上使用人口最多的語言之一&#xff0c;承載著…

在不聯網的情況下,從可以聯網的計算機上拷貝過來的程序報錯:nu1301 無法加載源,https://api.nuget.org/v3/index.json

解決方法&#xff1a; 在聯網的計算機上&#xff0c;找到nuget文件&#xff0c;拷貝到&#xff0c;不能聯網的計算機的相應位置 設置加載這個nuget包&#xff0c;把nuget.org取消。 注意如果出現好多包都不能加載&#xff0c;可能是框架版本的問題&#xff0c;修改框架版本&am…

TCP 狀態流程及原理詳解:從連接建立到性能優化

一、TCP 協議概述與核心價值 TCP&#xff08;Transmission Control Protocol&#xff0c;傳輸控制協議&#xff09;是互聯網協議棧中的核心協議之一&#xff0c;為網絡通信提供可靠的、面向連接的數據傳輸服務。在當今復雜多變的網絡環境中&#xff0c;深入理解 TCP 協議的狀態…

【STM32 學習筆記】PWR電源控制

在電子設備中&#xff0c;待機&#xff08;Standby&#xff09;和睡眠&#xff08;Sleep&#xff09;是兩種不同的省電模式。 1. 待機模式&#xff08;Standby Mode&#xff09;&#xff1a;在待機模式下&#xff0c;設備仍然保持一定程度的活動&#xff0c;但大部分功能處于暫…

TCP 重傳機制詳解:原理、變體與故障排查應用

一、TCP 重傳機制基礎原理 1.1 可靠傳輸的核心保障 TCP&#xff08;Transmission Control Protocol&#xff0c;傳輸控制協議&#xff09;作為互聯網中最常用的傳輸層協議&#xff0c;其核心特性之一是提供可靠的數據傳輸服務。在不可靠的網絡環境中&#xff0c;數據包可能會…

Linux-HTTP服務和APACHE-學習筆記

序 欠10年前自己的一份筆記&#xff0c;獻給今后的自己。 Internet Internet與中國 Internet最早來源于美國國防部高級研究計劃局ARPA建立的ARPANet&#xff0c;1969年投入運行。1983年&#xff0c;ARPAnet分裂為兩部分&#xff1a;ARPAnet和純軍事用的MILNET。當年1月&…

GitHub 趨勢日報 (2025年06月26日)

&#x1f4ca; 由 TrendForge 系統生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日報中的項目描述已自動翻譯為中文 &#x1f4c8; 今日獲星趨勢圖 今日獲星趨勢圖 716 free-for-dev 677 Self-Hosting-Guide 618 Best-websites-a-programmer-shoul…

利用TACCO將單細胞注釋transfer至空間組

目錄 環境導入 關鍵函數定義 運行前設定 數據準備 正式運行與保存 可視化與概率調整 偶然發現的一個好用的transfer方法&#xff0c;計算效率相當高&#xff0c;解了我的燃眉之急hh 原方法來自由以色列耶路撒冷希伯來大學的Mor Nitzan、美國麻省理工學院-哈佛大學博德研…

在反向代理環境下精準獲取客戶端真實 IP 的最佳實踐

目錄 1 背景 2 常見誤區 3 X-Forwarded-For 解析規則 4 real_ip() 函數 —— 一行代碼落地 5 與框架方法的協同 6 Nginx 端最小配置 7 生產落地 checklist 8 常見 Q&A 9 總結 在反向代理環境下精準獲取客戶端真實 IP 的最佳實踐 — 基于自定義 real_ip() 函數的完…

華為云Flexus+DeepSeek征文|基于Dify構建抓取金融新聞并發送郵箱工作流

華為云FlexusDeepSeek征文&#xff5c;基于Dify構建抓取金融新聞并發送郵箱工作流 一、構建抓取金融新聞并發送郵箱工作流前言二、構建抓取金融新聞并發送郵箱工作流環境2.1 基于FlexusX實例的Dify平臺2.2 基于MaaS的模型API商用服務 三、構建抓取金融新聞并發送郵箱工作流實戰…

疲勞檢測與行為分析:工廠智能化實踐

視覺分析算法賦能工廠疲勞與安全管理 一、背景與需求 在制造業中&#xff0c;疲勞作業是導致安全事故和效率下降的核心因素之一。傳統人工巡檢存在覆蓋面不足、響應滯后等問題&#xff0c;而基于視覺分析的智能監控系統通過多算法協同&#xff0c;可實現全天候、高精度的疲勞…

醫院信息化建設的要點

隨著醫療技術的不斷發展和患者需求的日益多樣化&#xff0c;醫院信息化建設已經成為提高醫療質量和效率的必要手段。醫院信息化建設是指通過信息技術手段對醫院日常運營、管理和服務進行數字化、智能化和網絡化的改造&#xff0c;以提高醫療服務水平和管理效率。在實施醫院信息…

Sql Server常用命令整理篇:根據某個字段刪除重復數據

通過比較同一表中的兩行數據&#xff0c;刪除那些在Text_data或Title字段上有重復值的行&#xff0c;同時保留id較小的行&#xff1a; DELETE t1 FROM data_zq t1 JOIN data_zq t2 WHERE t1.id > t2.id AND (t1.Text_data t2.Text_data OR t1.Title t2.Title);注意事項 備…

Spring AI 入門到實戰:我如何用它讓系統具備“理解能力”

我向來對“整合大模型進 Java 應用”這件事持謹慎態度。在 GPT 火了之后&#xff0c;我們團隊最初是用 HTTP 手動調 OpenAI 接口&#xff0c;把它當成一個 JSON API 用。但隨著業務交互變復雜&#xff0c;我意識到&#xff1a;我們需要的是一個語義系統&#xff0c;而不是一個封…

C++鏈表的虛擬頭節點

C鏈表虛擬頭節點&#xff08;Dummy Head&#xff09; 虛擬頭節點是鏈表操作中極為實用的設計技巧&#xff0c;它通過在鏈表真實頭部前添加一個特殊節點&#xff0c;有效簡化邊界條件處理。 一、虛擬頭節點的本質與核心作用 1. 定義 虛擬頭節點是一個不存儲真實數據的特殊節…

使用vllm部署 Nanonets-OCR-s

使用vLLM部署Nanonets-OCR-s模型的完整指南 Nanonets-OCR-s作為基于Qwen2.5-VL-3B的多模態OCR模型,結合vLLM的高效推理引擎可顯著提升部署性能。 一、環境準備與依賴安裝 1. 安裝vLLM與多模態依賴 # 安裝vLLM(含CUDA加速) pip install vllm==0.3.21 # 建議使用穩定版本…