【HTML—前端快速入門】HTML 基礎

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述


準備工作


vscode下載


百度網盤 Subline Text 下載


Sublime Text下載


百度網盤 vscode 下載

Sublime Text 是一款輕量好用的文本編輯器,我們在寫前端代碼時,使用 Sublime Text 打開比使用記事本打開,得到的代碼體驗更好,比 vscode 更輕量;

在這里插入圖片描述


Sublime Text使用


創建一個HTML文件


在這里插入圖片描述


使用subline text 打開HTML文件,并用瀏覽器運行


在這里插入圖片描述


HTML基礎


概念


HTML(Hyper Text Markup Language),超文本標記語言

超文本

比文本要強大,通過鏈接和交互式方式來組織和呈現信息的文本形式,不僅僅有文本,還可能包含圖片,音頻,或者自已經審閱過它的學者所加的評注、補充或腳注等等;

標記語言

由標簽構成的語言;


認識 HTML 標簽


HTML代碼是由"標簽"構成的,形如:

<h3>我是三級標題</h3>
  • 標簽名(body) 放到<>中
  • 大部分標簽成對出現:<h3>為開始標簽,</h3>為結束標簽.
  • 少數標簽只有開始標簽,稱為"單標簽".
  • 開始標簽和結束標簽之間,寫的是標簽的內容;
<h3 id="myId">我是三級標題</h3>
  • 開始標簽中可能會帶有"屬性",id屬性相當于給這個標簽設置了一個唯一的標識符(身份證號碼).

HTML 文件基本結構


<html><head><title>我是一個標簽</title></head><body><h1>我是一級標題</h1></body>
</html>
  • html 標簽是整個html文件的根標簽 (最頂層標簽)
  • head 標簽中寫頁面的屬性
  • body 標簽中寫的是頁面上顯示的內容
  • title 標簽中寫的是頁面的標題

標簽之間的結構關系,構成了一個 DOM 樹,Document Object Mode(文檔對象模型)

在這里插入圖片描述


在這里插入圖片描述

雙擊打開 test.html 文件

在這里插入圖片描述

剛開始我們沒寫 <head><body> 等標簽,在瀏覽器中依舊可以運行,因為瀏覽器有良好的“魯棒性”,哪怕代碼不規范,瀏覽器也能解析代碼。


使用 chrome 的開發者工具查看頁面的結構


F12 或者右鍵審查元素,開啟開發者工具,切換到Elements標簽,就可以看到頁面結構細節.

在這里插入圖片描述


快速入門開發


開發工具:vscode

在 VS Code中創建文件 xxx.html

在這里插入圖片描述


直接輸入! ,按 Enter或tab鍵,此時能自動生成代碼的主體框架.

在這里插入圖片描述


在這里插入圖片描述


點擊 ctrl+s保存代碼,然后在剛剛的文件夾中打開該文件

在這里插入圖片描述


在這里插入圖片描述

在這里插入圖片描述

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

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

相關文章

基于單片機的GPS定位系統設計

1 系統硬件 1.1單片機模塊 單片機的種類和型號可以說是有成百上千種&#xff0c;很多大的公司和企業都生產開發自己的單片機芯片&#xff0c;并且廣泛應用于各種產品。Intel、 philips、 摩托羅拉、凌陽、宏晶等等種類繁多。大體上可以分為51系列單片機和非51系列單片機。 其…

對大模型輸出的 logits 進行處理,從而控制文本的生成

對大模型輸出的 logits 進行處理&#xff0c;從而控制文本的生成 flyfish 在文本生成任務中&#xff0c;模型輸出的 logits 代表了每個詞被選為下一個生成詞的未歸一化概率得分。通過對 logits 進行處理&#xff0c;可以精確地控制文本的生成 基本原理 在每一步生成過程中&…

Reids緩存穿透、緩存雪崩和緩存擊穿

Redis緩存中常見的三個問題&#xff1a;緩存穿透、緩存雪崩和緩存擊穿。這些問題在使用Redis作為緩存時經常遇到&#xff0c;但通過合理的策略可以有效解決。我會用簡單易懂的方式來講解&#xff0c;幫助你理解這些問題的原理和解決方案。 1. 緩存穿透 1.1 什么是緩存穿透&…

附錄-Python — 包下載緩慢,配置下載鏡像

1??命令行配置 pip config set global.index-url http://mirrors.aliyun.com/pypi/simple/ pip config set install.trusted-host mirrors.aliyun.com 2??配置文件配置 1、打開文件夾&#xff0c;輸入 %APPDATA% 回車 2、打開 %APPDATA% 路徑&#xff0c;并在此路徑下新建…

VS 2019 免費版 下載與安裝 教程說明

推薦大家直接轉到第13步&#xff0c;點擊鏈接即可下載VS2019版本 1.VS官網 2.登錄賬號 3.在搜索欄輸入“2019” 4.點擊2019這個標題 5.點擊“下載” 6.選擇合適的版本下載 7.打開下載文件&#xff08;若下載過程總是轉圈圈&#xff0c;則換個網絡下載即可&#xff09; 8.安…

介紹 torch-mlir 從 pytorch 生態到 mlir 生態

一、引言 The Torch-MLIR project provides core infrastructure for bridging the PyTorch ecosystem and the MLIR ecosystem. For example, Torch-MLIR enables PyTorch models to be lowered to a few different MLIR dialects. Torch-MLIR does not attempt to provide a…

Java并發編程之ConcurrentHashMap的原理和使用

ConcurrentHashMap(CHM)是Java為解決高并發場景下哈希表性能瓶頸而設計的線程安全容器,其核心目標在于: 線程安全?:避免多線程操作導致的數據不一致問題?;高吞吐量?:通過細粒度鎖和無鎖化設計降低線程競爭?;動態擴展?:支持自動擴容與數據結構優化(如鏈表轉紅黑樹…

AbMole揭秘傷口愈合:IGF-1-SP1-CD248信號通路的新發現

科學家們揭示了一條新的信號通路——IGF-1-SP1-CD248&#xff0c;這一發現為理解傷口愈合障礙提供了新的視角&#xff0c;并為未來的研究開辟了新方向。 研究背景 糖尿病患者的傷口愈合是一個長期存在的挑戰。據統計&#xff0c;約15%的糖尿病患者會遭受慢性傷口的困擾&#…

Go入門之文件

以只讀方式打開文件 package mainimport ("fmt""io""os" )func main() {file, err : os.Open("./main.go")defer file.Close()if err ! nil {fmt.Println(err)return}fmt.Println(file)var tempSlice make([]byte, 128)var strSlice…

python量化交易——金融數據管理最佳實踐——使用qteasy管理本地數據源

文章目錄 統一定義的金融歷史數據表最重要的數據表數據表的定義交易日歷表的定義&#xff1a;交易日歷表: trade_calendar qteasy是一個功能全面且易用的量化交易策略框架&#xff0c; Github地址在這里。使用它&#xff0c;能輕松地獲取歷史數據&#xff0c;創建交易策略并完…

通過 PromptTemplate 生成干凈的 SQL 查詢語句并執行SQL查詢語句

問題描述 在使用 LangChain 和 Llama 模型生成 SQL 查詢時&#xff0c;遇到了 sqlite3.OperationalError 錯誤。錯誤信息如下&#xff1a; OperationalError: (sqlite3.OperationalError) near "sql SELECT Name FROM MediaType LIMIT 5; ": syntax error [SQL: …

STaR(Self-Taught Reasoner)方法:讓語言模型自學推理能力(代碼實現)

STaR&#xff08;Self-Taught Reasoner&#xff09;方法&#xff1a;讓語言模型自學推理能力 在大型語言模型&#xff08;LLM&#xff09;的推理能力優化中&#xff0c;STaR&#xff08;Self-Taught Reasoner&#xff09; 是一種引人注目的技術&#xff0c;屬于“修改提議分布…

Asp.Net Web API| React.js| EF框架 | SQLite|

asp.net web api EF SQLiteReact前端框架 設計一個首頁面&#xff0c;包含三個按鈕分別對應三類用戶&#xff08;數據查看&#xff0c;設計人員&#xff0c;管理員&#xff09;&#xff0c;當點擊管理員的時候彈出一個前端頁面可以輸入信息&#xff08;以學生數據為例&#…

[SWPUCTF 2022 新生賽]1z_unserialize

題目描述&#xff1a;是很簡單的反序列化噢 代碼審計看注釋 <?phpclass lyh{ //定義一個類為lyhpublic $url NSSCTF.com;//公共屬性&#xff0c;初始值為NSSCTF.compublic $lt; //公共屬性&#xff0c;沒有初始值public $lly; //公共屬性&…

【數據庫】Update兩階段提交

為什么要兩階段提交 事務提交之后&#xff0c;redo log和bin log 都是需要1持久化到磁盤中&#xff0c;但是這兩個是獨立的邏輯&#xff0c;可能出現半成功的狀態&#xff0c;這樣就造成兩份日志之間的邏輯不一致。如&#xff1a; 以id1&#xff0c;name ‘小明’執行 updat…

【藍橋】排序

1、sort簡介 sort函數包含在頭文件<algorithm>中sort函數使用之前&#xff0c;需要通過#include <algorithm>引入sort函數使用的是快速排列或類似快速排列的改進算法&#xff0c;時間復雜度一般為O(nlog(n)) 2、sort用法 2.1 基礎用法 #include <iostream>…

2024年中國城市統計年鑒(PDF+excel)

2024年中國城市統計年鑒&#xff08;PDFexcel&#xff09; 說明&#xff1a;包括地級縣級市 格式&#xff1a;PDFEXCEL 《中國城市統計年鑒》是一部全面反映中國城市發展狀況的官方統計出版物&#xff0c;包括各級城市的詳細統計數據。這部年鑒自1985年開始出版&#xff0c;…

android 資源selector寫法注意

1、res文件夾下面color文件夾,放的xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/color_brand1" android:s…

藍橋杯 燈籠大亂斗【算法賽】

問題描述 元宵佳節&#xff0c;一場別開生面的燈籠大賽熱鬧非凡。NN 位技藝精湛的燈籠師依次落座&#xff0c;每位師傅都有相應的資歷值&#xff0c;其中第 ii 位師傅的資歷值為 AiAi?。從左到右&#xff0c;師傅們的資歷值逐級遞增&#xff08;即 A1<A2<?<ANA1?&l…

商城源碼的框架

商城源碼的框架通常是基于某種Web開發框架或者電子商務平臺來構建的。以下是一些常見的商城源碼框架&#xff1a; WooCommerce&#xff1a;基于WordPress的電子商務插件&#xff0c;適用于小型到中型的在線商店。 Magento&#xff1a;一個功能強大和靈活的開源電子商務平臺&am…