我使用 html 反向輸出自己打自己(7)

作者簡介

作者名:1_bit
簡介:CSDN博客專家,2020年博客之星TOP5,藍橋簽約作者。15-16年曾在網上直播,帶領一批程序小白走上程序員之路。歡迎各位小白加我咨詢我相關信息,迷茫的你會找到答案。

目錄

HTML基礎之bit哥的反客為主之道(9)—— <big></big> 放大標簽 h5不支持、 <center></center> 居中h5不支持、<blockquote></blockquote> 引用標簽

趕緊3分鐘學完15分鐘的內容我要出去玩(8)—— <big></big> 放大標簽 h5不支持、 <center></center> 居中h5不支持、<blockquote></blockquote> 引用標簽

我使用 html 反向輸出自己打自己(7)——<a>超鏈接、<bdo>覆蓋

我化身保姆為你提供 html 教學服務(6)——<b>加粗、<br>換行、<hr>分隔

我開始一直以為網頁制作好難(5)——<h1></h1> 標題、<p></p> 段落、

你知道出現“亂碼”的原因是什么嗎?(4)——編碼、<title></title> 網頁標題、

一個基礎的 HTML 文檔有哪些標簽?第一節(3)—— <!DOCTYPE html>說明、<head></head> 頭部、<body></body> 主體、

使用 Vscode 編寫 HTML 文檔竟然可以自動寫代碼(2)—— vscode、快捷方式

保姆級的HTML零基礎教程少見吧?這是第一節(1)——介紹、雞湯

👸小媛:bit 哥我來了。

🐶1_bit:昨天不是去教過你來嗎?怎么你今天又來了?

👸小媛:是嘛,昨天教的那一點不夠打牙祭,希望 bit 哥多教一點。

dog:1_bit:emm,你是不是要纏著我不放來。

👸小媛:bit 哥,年齡是有距離的,所以你別自戀了我不會纏著你的。

dog:1_bit:那你還來?

👸小媛:這是對知識的渴望。

dog:1_bit:emm,行吧。

👸小媛:多謝 bit 哥。

dog:1_bit:那我們先講一個超鏈接標簽 <a></a> 標簽吧。

👸小媛:什么是超鏈接?

dog:1_bit:emm,就是內容鏈接,可以跳轉到一個資源或者說一個網址,懂了吧?

👸小媛:原來如此。

dog:1_bit:那我們先看看超鏈接標簽<a></a> 吧。.

👸小媛:好的。

dog:1_bit:完成一個超鏈接的標簽編寫非常簡單,首先我們需要在 <a></a> 之間指定顯示的文本:

<a>這里跳轉到我的博客</a>

👸小媛:接下來怎么設置跳轉的目標呢?

dog:1_bit:我們只需要在這個 <a></a> 標簽的起始標簽 <a> 中指定一個 href 屬性,這個時候就可以跳轉到目標地址了。

<a href="https://blog.csdn.net/A757291228">超鏈接a標簽指定href屬性后就可以跳轉到目標地址</a>

👸小媛:那個 href 后面雙引號中就是跳轉的地址嗎?

dog:1_bit:是的,此時顯示的時候將會是以下的呈現形式。


👸小媛:點擊后就可以跳轉到目標地址呢,明白了。

dog:1_bit:接下來我們再試試 <bdo></bdo> 標簽。

👸小媛:這又是什么鬼,感覺英文逐漸變難。

dog:1_bit:哈哈哈,我們只需要記住他們的作用就可以了。

👸小媛:好像說的也是。

dog:1_bit: <bdo></bdo> 標簽是反向輸出的意思。

👸小媛:哈?自己打自己嗎?

dog:1_bit:emm,其實就是一個文本按照你指定的方式去顯示。

👸小媛:例如呢?

dog:1_bit:例如有一個文本是“小媛今早吃了糯米雞泡飯”,我們想讓這個文本在顯示的時候第一個字變成最后一個字,然后反向從后面顯示,這個時候就可以用到 <bdo></bdo>了。

👸小媛:唔,明白了。但是我聲明一點,我沒有吃糯米雞泡飯,我都不知道這是啥。

dog:1_bit:好了,我們先看看示例吧。

<bdo dir="rtl">小媛今早吃了糯米雞泡飯</bdo>

👸小媛:然后呢?

dog:1_bit:你運行看一遍。

👸小媛:反向輸出了。


dog:1_bit:我們仔細看一下 <bdo></bdo>標簽中的 dir 屬性。dir 屬性為 rtl 時就表示 right to left,意思是從右到左輸出顯示,如果 dir 屬性為 ltr 意思就是 left to right,就是正常的從左到右顯示。

👸小媛:明白了。

dog:1_bit:那我們把這個知識點做個筆記記錄到那個 html 文件之中吧。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSDN 博主 1_bit 的 HTML 知識匯總頁面</title>
</head>
<body><h1>這是h1標簽顯示的示例</h1><h2>這是h2標簽顯示的示例</h2><h3>這是h3標簽顯示的示例</h3><h4>這是h4標簽顯示的示例</h4><h5>這是h5標簽顯示的示例</h5><h6>這是h6標簽顯示的示例</h6><hr><h1>p段落標簽內容:</h1><p>這是使用短路 p 標簽的示例,每個 p 元素都會重啟一行進行顯示,并且每一個 p 元素都會間隔較大,相同一個 p 元素內則會間隔較小,你可以理解成這是這個 p 元素段落的特性如此,也可以說是一個標志特性。</p><p>這是第二個 p 標簽,你可以看到跟上面的內容之間間隔還是挺大。</p><hr><h1>b加粗標簽內容:</h1><p>這是使用短路 p 標簽的示例,<b>每個 p 元素都會重啟一行進行顯示,并且每一個 p 元素都會間隔較大</b>,相同一個 p 元素內則會間隔較小,你可以理解成這是這個 p 元素段落的特性如此,也可以說是一個標志特性。</p><hr><h1>br換行標簽內容:</h1><p>這是使用短路 p 標簽的示例,每個 p 元素都會重啟一行進行顯示,(這里后面使用換行標簽)<br>并且每一個 p 元素都會間隔較大,相同一個 p 元素內則會間隔較小,你可以理解成這是這個 p 元素段落的特性如此,也可以說是一個標志特性。</p><hr><h1>a超鏈接標簽內容:</h1><a href="https://blog.csdn.net/A757291228">超鏈接a標簽指定href屬性后就可以跳轉到目標地址</a><hr><h1>bdo 標簽內容:</h1><bdo dir="rtl">小媛今早吃了糯米雞泡飯</bdo> —— 在屬性 dir 中定義 rtl 意思就是從右到左進行輸出,改成 ltr 意思則是從左到右輸出<hr></body>
</html>


👸小媛:感謝bit哥,我知道你想說下次再見了。

dog:1_bit:是的,拜拜。

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

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

相關文章

甘肅省普通高等學校高職(專科)升本科考試英語科考試大綱(試行)

甘肅省普通高等學校高職&#xff08;專科&#xff09;升本科考試英語科考試大綱&#xff08;試行&#xff09; 一、考試目的 全面考核普通高等學校高職&#xff08;專科&#xff09;應屆畢業生英語課程是否達到教學大綱所規定的目標&#xff08;領會式掌握3500單詞&#xff0c…

256種編程語言大薈萃

本文是碼農網原創翻譯&#xff0c;轉載請看清文末的轉載要求&#xff0c;謝謝合作&#xff01; 雙休日常常意味著很多休息時間。與其懶洋洋地坐在那里玩游戲&#xff0c;為何不學點新知識武裝自己&#xff1f;本文中不會特定推薦哪種編程語言&#xff0c;但是會提供基于GitHub上…

java 獲取系統當前時間

Calendar ca Calendar.getInstance(); int year ca.get(Calendar.YEAR);//獲取年份 int monthca.get(Calendar.MONTH);//獲取月份 int dayca.get(Calendar.DATE);//獲取日 int minuteca.get(Calendar.MINUTE);//分 int hourca.get(Calendar.HOUR)…

Android之最簡單的遍歷某個目錄下的所有文件(遞歸)

1、問題 遍歷某個目錄下的所有問題文件 2、代碼實現 fun getRecoverTrashFile(path: String) {if (TextUtils.isEmpty(path))returntry {var file File(path)if (file null || !file.exists()) {return}var files file.listFiles()if (files null || files.size < 0) {…

Castle.DynamicProxy攔截器

在asp.net mvc或asp.net miniapi中&#xff0c;有過濾器&#xff0c;可以在請求前或后增加一層&#xff0c;達到驗證&#xff0c;過濾等作用&#xff0c;如果在Service的方法前后加一層呢&#xff1f;這里介紹一下Castle.DynamicProxy的用法。首先引入Castle.Core實現代碼相對輕…

甘肅省普通高等學校高職(專科)升本科考試計算機科考試大綱(試行)

甘肅省普通高等學校高職&#xff08;專科&#xff09;升本科考試計算機科考試大綱&#xff08;試行&#xff09; 一、考試目的及要求 全面考核普通高等學校高職&#xff08;專科&#xff09;應屆畢業生計算機應用能力是否達到教學大綱所規定的要求。所有考生計算機基礎知識必須…

Android選項切換條SHSegmentControl

&#xfeff;&#xfeff;Android選項切換條SHSegmentControl SHSegmentControl是github上一個開源的選項切換條&#xff0c;其樣式如圖所示&#xff1a; SHSegmentControl在github上的項目主頁地址&#xff1a;https://github.com/7heaven/SHSegmentControl SHSegmentControl…

從零開始編寫自己的C#框架(14)——T4模板在邏輯層中的應用(三)

原本關于T4模板原想分5個章節詳細解說的&#xff0c;不過因為最近比較忙&#xff0c;也不想將整個系列時間拉得太長&#xff0c;所以就將它們整合在一塊了&#xff0c;可能會有很多細節沒有講到&#xff0c;希望大家自己對著代碼與模板去研究。 本章代碼量會比較大&#xff0c;…

趕緊3分鐘學完15分鐘的內容我要出去玩(8)

作者簡介 作者名&#xff1a;1_bit 簡介&#xff1a;CSDN博客專家&#xff0c;2020年博客之星TOP5&#xff0c;藍橋簽約作者。15-16年曾在網上直播&#xff0c;帶領一批程序小白走上程序員之路。歡迎各位小白加我咨詢我相關信息&#xff0c;迷茫的你會找到答案。 目錄 HTML基…

Android之獲取到音視頻的時長后按格式(00:00或者00:00:00)顯示

1 需求 我們獲取到了本地視頻時長(秒為單位),然后需要按照如下格式顯示 沒有到小時的時長如下格式 00:00 有到小時的時長如下格式 00:00:00 2 代碼實現 /*** 可以顯示小時*/fun getDateStr(ms: Long): String? {val ss = 1val mi = ss * 60val hh = mi * 60val dd = …

Hello Playwright:(5)查找元素

操作瀏覽器歸根到底就是和頁面進行交互&#xff0c;那么必不可少的操作就是查找頁面上的元素。因此我們需要熟練掌握Locator 定位器。在上一節我們講過&#xff0c;可以使用Page.Locator(selector, options)方法創建定位器&#xff0c;而如何定位到元素則取決于selector 選擇器…

RxSwift 之官方文檔

RxSwift 官方文檔結構 Introduction:SubjectsTransforming ObservablesFiltering ObservablesCombining ObservablesError Handing OperatorsObservable Utility OperatorsConditional and Boolean OperatorsMathematical and Aggregate OperatorsConnectable Observable Opera…

SQL一鍵備份用戶數據庫

大家都知道&#xff0c;Ms Sql 有自動備份的功能&#xff0c;但如果由于某種原因不能自動備份&#xff0c;或者我們想手動備份的話&#xff0c;就可以用下邊的sql語句來執行備份。 --------------------代碼開始------------- USE [master]------刪除舊數據-------------------…

2019年甘肅省普通高等學校高職(專科)升本科考試招生工作實施辦法

2019年甘肅省普通高等學校高職&#xff08;專科&#xff09;升本科考試招生工作實施辦法 2019年甘肅省普通高等學校高職&#xff08;專科&#xff09;升本科考試招生工作實施辦法 根據教育部有關規定及要求&#xff0c;結合我省實際&#xff0c;為確保普通高等學校高職&#x…

HTML基礎之bit哥的反客為主之道(9)

作者簡介 作者名&#xff1a;1_bit 簡介&#xff1a;CSDN博客專家&#xff0c;2020年博客之星TOP5&#xff0c;藍橋簽約作者。15-16年曾在網上直播&#xff0c;帶領一批程序小白走上程序員之路。歡迎各位小白加我咨詢我相關信息&#xff0c;迷茫的你會找到答案。 目錄 HTML基…

Atom編輯Markdown文件保存后行尾的空格自動消失的問題解決

Markdown文件的行尾增加兩個空格表示一行結束需要換行。 但保存文件后&#xff0c;行尾的空格自動消失&#xff0c;導致不換行。 解決方法&#xff1a; 1、【Edit】->【Preferences】->【Packages】->【whitespace】->【Settings】->【Keep Markdown Line Brea…

將Abp移植進.NET MAUI項目

前言寫在.NET MAUI官宣正式發布之際&#xff0c;熱烈慶祝MAUI正式發布&#xff01;去年12月份做了MAUI混合開發框架的調研&#xff0c;想起來文章里給自己挖了個坑&#xff0c;要教大家如何把Abp移植進Maui項目。熟悉Abp的同學都知道&#xff0c;Abp 是一套強大的應用程序設計時…

Sql數據庫批量清理日志

說明&#xff1a;SQL數據庫日志經常過大&#xff0c;引起很多問題&#xff0c;網上很多清理日志的方法&#xff0c;但都比較麻煩&#xff0c;并且不能一次性清理所有數據庫。如果有幾十個數據庫要清理&#xff0c;一個個手工來&#xff0c;想必非常麻煩。 以下代碼清除 除了指定…

【BZOJ-2299】向量 裴蜀定理 + 最大公約數

2299: [HAOI2011]向量 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1118 Solved: 488[Submit][Status][Discuss]Description 給你一對數a,b&#xff0c;你可以任意使用(a,b), (a,-b), (-a,b), (-a,-b), (b,a), (b,-a), (-b,a), (-b,-a)這些向量&#xff0c;問你能不能拼…

采用ArcGIS 10.6制作漂亮的點陣世界地圖,完美!!!

如下圖所示,怎樣制作完美漂亮的點陣世界地圖呢?今天我就教大家吧! 其實,制作過程相當簡單,主要的思路是通過世界地圖范圍去創建漁網(標注點),再選擇范圍內的標注點,符號化即可,怎么樣,很簡單吧,下面我們一步一步來實現吧。 1. 加載世界地圖 打開ArcGIS軟件,加載軟…