【HTML入門】第三課 - 標題、段落、空格

這一小節,我們說一些比較零散的知識,HTML課程中呢,其實就是一些標簽,正是這些標簽組成了前端網頁的各種元素,所以你也可以叫他們標簽元素。

像前兩節我們說的,html head body title meta style 。這些都是標簽。

1 段落

段落,很好理解,我們從小就看書,內容一段一段的,這些一段一段的內容,我們就可以放到段落標簽里,段落標簽是 p 。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一個網頁</title><style type="text/css"></style></head><body><p>遠看長城,像一條長龍,在崇山峻嶺之間蜿蜒盤旋。從東頭的山海關到西頭的嘉峪關,有一萬三千多里。</p><p>從北京出發,不過幾十公里就來到長城腳下。這一段長城修筑在八達嶺上,高大堅固,是用巨大的條石和城磚筑成的。城墻頂上鋪著方磚,十分平整,像很寬的馬路,五六匹馬可以并行。城墻外沿有兩米多高的成排的垛子,垛子上有方形的瞭望口和射口,供瞭望和射擊用。城墻頂上,每隔三百多米就有一座方形的城臺,是屯兵的堡壘。打仗的時候,城臺之間可以互相呼應。</p></body>
</html>

2 標題

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

<h1> 定義最大的標題。 <h6> 定義最小的標題。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一個網頁</title><style type="text/css"></style></head><body><h1>長城 標題h1</h1><h2>長城 標題h2</h2><h3>長城 標題h3</h3><h4>長城 標題h4</h4><h5>長城 標題h5</h5><h6>長城 標題h6</h6><p>遠看長城,像一條長龍,在崇山峻嶺之間蜿蜒盤旋。從東頭的山海關到西頭的嘉峪關,有一萬三千多里。</p></body>
</html>

可以看出,從h1標簽到h6標簽,是?從大到小?的標題體現過程。但標題標簽不只是可以讓文字變的大一些,變得粗壯一些,他更符合搜索引擎對于網頁的抓取規范。這個我們后面說,我們現在還只是單純的學習HTML標簽就可以。

3 空格

你是否想過,我們打字的時候,敲一個空格鍵就可以了,那么網頁中呢?我們來試一下。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一個網頁</title><style type="text/css"></style></head><body><p>遠看長城,像一條長龍,在崇山峻嶺之間蜿蜒盤旋。從東頭      的山海關到西頭的嘉峪關,有一萬三千多里。</p></body>
</html>

怎么樣,你是不是看到了很多空格,我們再刷新一下瀏覽器,看一下效果:

這幾乎就是沒有起作用,對吧。那么HTML開發中,該如何開發出空格來呢?看代碼:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一個網頁</title><style type="text/css"></style></head><body><p>遠看長城,像一條長龍,在崇山峻嶺之間蜿蜒盤旋。從東頭&nbsp;&nbsp;&nbsp;&nbsp;的山海關到西頭的嘉峪關,有一萬三千多里。</p></body>
</html>

看效果:

怎么樣,空格是不是挺明顯的了,這里就是添加了 &nbsp;? 這樣的控制。

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

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

相關文章

【考研】南郵歷年復試上機試題目與題解

【考研】南郵歷年復試上機試題目與題解 文章目錄 【考研】南郵歷年復試上機試題目與題解個人題目難度評估歷年上機題目PROB1002 求最值問題PROB1003 新對稱素數問題PROB1004 進制轉換PROB1005 涂色問題 (待補)PROB1006 最大公約數和最小公倍數PROB1007 斐波那契數列PROB1008 回…

解決Spring Boot中的數據庫連接池問題

解決Spring Boot中的數據庫連接池問題 大家好&#xff0c;我是微賺淘客系統3.0的小編&#xff0c;也是冬天不穿秋褲&#xff0c;天冷也要風度的程序猿&#xff01; 1. 理解數據庫連接池的重要性 數據庫連接池在任何使用數據庫的應用程序中都起著至關重要的作用。它們管理和維…

解析Java中的動態代理與靜態代理的區別

解析Java中的動態代理與靜態代理的區別 大家好&#xff0c;我是微賺淘客系統3.0的小編&#xff0c;也是冬天不穿秋褲&#xff0c;天冷也要風度的程序猿&#xff01; 1. 引言 代理模式是軟件開發中常用的一種設計模式&#xff0c;用于控制對其它對象的訪問。在Java中&#xf…

C#中的Task.Delay(2000).Wait() 與await Task.Delay(2000)

Task.Delay(2000).Wait() 和 await Task.Delay(2000) 在功能上看似相似&#xff0c;都用于等待一段時間&#xff08;在這個例子中是2000毫秒&#xff09;&#xff0c;但它們在使用方式和背后的行為上存在一些關鍵差異。 .Result 是 Task 類的一個屬性&#xff0c;它用于獲取任務…

算法刷題筆記 滑動窗口(C++實現,非常詳細)

文章目錄 題目描述基本思路實現代碼 題目描述 給定一個大小為n ≤ 10^6的數組。有一個大小為k的滑動窗口&#xff0c;它從數組的最左邊移動到最右邊。你只能在窗口中看到k個數字。每次滑動窗口向右移動一個位置。以下是一個例子&#xff1a; 該數組為 [1 3 -1 -3 5 3 6 7]&…

用HttpURLConnection復現http響應碼405

目錄 使用GET方法&#xff0c;訪問GET接口&#xff0c;服務端返回405使用GET方法&#xff0c;訪問POST接口&#xff0c;服務端返回405使用POST方法&#xff0c;訪問GET接口&#xff0c;服務端返回405 使用GET方法&#xff0c;訪問GET接口&#xff0c;服務端返回405 發生場景&a…

Linux shell編程學習筆記63:free命令 獲取內存使用信息

0 前言 在系統安全檢查中&#xff0c;內存使用情況也是一塊可以關注的內容。Linux提供了多個獲取內存信息的命令很多。今天我們先研究free命令。 1 free命令的功能、用法和選項說明 1.1 free命令的功能 free 命令可以顯示系統內存的使用情況&#xff0c;包括物理內存、交換…

Java多語言跨境電商外貿商城源碼 tiktok商城系統源碼 跨境電商源碼

Java多語言跨境電商外貿商城源碼 tiktok商城系統源碼 跨境電商源碼 技術棧 PC端使用&#xff1a;vueelementui 用戶端使用&#xff1a;uniapp 管理端使用&#xff1a;vueelementui 后臺服務使用&#xff1a;springbootmybatisplusmysql 功能描述&#xff1a; 對接PayPal…

【面試題】字節一面面試題

自我介紹&#xff0c;項目介紹MQ的使用場景&#xff0c;不同的MQ之前的區別&#xff0c;為什么使用公司的MQ數據庫怎么部署的&#xff08;應該是問節點&#xff0c;庫表&#xff09;事務隔離級別innodb為什么選可重復讀作為隔離級別數據庫三大日志&#xff0c;保存先后順序undo…

vue3+electron項目搭建,遇到的坑

我主要是寫后端,所以對前端的vue啊vue-cli只是知其然,不知其所以然 這樣也導致了我在開發前端時候遇到了很多的坑 第一個坑, vue2升級vue3始終升級不成功 第二個坑, vue add electron-builder一直卡進度,進度條走完就是不出提示succes 第一個坑的解決辦法: 按照網上說的升級v…

使用Java實現高性能的文件上傳下載服務

使用Java實現高性能的文件上傳下載服務 大家好&#xff0c;我是微賺淘客系統3.0的小編&#xff0c;也是冬天不穿秋褲&#xff0c;天冷也要風度的程序猿&#xff01; 1. 引言 在現代Web應用中&#xff0c;文件上傳和下載服務是非常常見的功能需求。如何實現高性能、可靠且安全…

Ubuntu 20.04下多版本CUDA的安裝與切換 超詳細教程

目錄 前言一、安裝 CUDA1.找到所需版本對應命令2.下載 .run 文件3.安裝 CUDA4.配置環境變量4.1 寫入環境變量4.2 軟連接 5.驗證安裝 二、安裝 cudnn1.下載 cudnn2.解壓文件3.替換文件4.驗證安裝 三、切換 CUDA 版本1.切換版本2.檢查版本 前言 當我們復現代碼時&#xff0c;總會…

深入分析SSL/TLS服務器的證書(C/C++代碼實現)

SSL&#xff08;Secure Sockets Layer&#xff09;和TLS&#xff08;Transport Layer Security&#xff09;是網絡安全領域的重要協議&#xff0c;它們在保護網絡通信中發揮著至關重要的作用。這些協議通過加密和身份驗證機制&#xff0c;確保數據在傳輸過程中的機密性和完整性…

建投數據與中再數科簽署戰略合作協議

近日&#xff0c;建投數據科技股份有限公司&#xff08;以下簡稱“建投數據”&#xff09;與中再保數字科技有限責任公司&#xff08;以下簡稱“中再數科”&#xff09;簽署戰略合作協議。雙方通過資源整合共享&#xff0c;實現優勢互補&#xff0c;共同探索產品及服務的跨領域…

初見:AntDB智能運維“三劍客“之ACC

前情回顧 在前兩個章節中&#xff0c;我們介紹了 AntDB 智能運維"三劍客"的 ADC 和 MTK。 初見&#xff1a;AntDB智能運維"三劍客"之ADC 初見&#xff1a;AntDB智能運維"三劍客"之MTK 本文將繼續介紹 AntDB 數據庫智能運維平臺 ACC。 AntDB 介紹…

如何設置PHP wkhtmltopdf

首先參考&#xff1a;Composer三步曲&#xff1a;安裝、使用、發布 在 php 路徑下&#xff0c;應能打開命令行輸入php -v能夠看到php版本信息。 然后執行以下三條&#xff1a; php -r "copy(https://install.phpcomposer.com/installer, composer-setup.php);"php…

minist數據集分類模型的訓練

minist數據集訓練 訓練方法&#xff1a;利用pytorch來實現minist數據集的分類模型訓練 訓練模型如下圖所示 模型代碼&#xff1a; import torch from torch import nn from torch.nn import Flattenclass Net(nn.Module):def __init__(self):super().__init__()self.module …

ChatGPT對話:Scratch編程中一個單詞,如balloon,每個字母行為一致,如何優化編程

【編者按】balloon 7個字母具有相同的行為&#xff0c;根據ChatGPT提供的方法&#xff0c;優化了代碼&#xff0c;方便代碼維護與復用。初學者可以使用7個字母精靈&#xff0c;復制代碼到不同精靈&#xff0c;也能完成這個功能&#xff0c;但不是優化方法&#xff0c;也沒有提高…

__builtin_constant_p 常量檢查函數

__builtin_constant_p 詳細介紹 功能&#xff1a;__builtin_constant_p 是 GCC (GNU Compiler Collection) 提供的一個內置函數&#xff0c;用于在編譯時檢測一個表達式是否是常量。它返回一個整型值&#xff1a; 如果表達式 exp 是編譯時常量&#xff0c;則返回 1。否則&…

【sklearn模型訓練全指南】深入理解機器學習模型的構建過程

標題&#xff1a;【sklearn模型訓練全指南】深入理解機器學習模型的構建過程 在機器學習中&#xff0c;模型訓練是一個核心過程&#xff0c;它涉及到從數據中學習并獲得預測能力。scikit-learn&#xff08;簡稱sklearn&#xff09;作為Python中一個廣泛使用的機器學習庫&#…