04 - 前端開發-格式化標籤

2021-02-13 老邪帶你學編程

格式化標籤

無序列表 - <ul>...</ul>

程序源碼:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>格式化標籤</title></head><body>    <ul>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>    </ul></body></html>

運行效果:

有序列表 - <ol>...</ol>

程序源碼:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>格式化標籤</title></head><body>    <ol>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>    </ol>    <ol type="A" start="2">        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>    </ol>    <ol type="a" start="3">        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>    </ol>    <ol type="I" start="4">        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>    </ol>    <ol type="i" start="5">        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>        <li>Mr.邪-帶你學編程</li>    </ol></body></html>

運行效果:

自定義列表 - <dl>...</dl>

程序源碼:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>格式化標籤</title></head><body>    <dl>        <dt>五絕綽號</dt>        <dd>東邪</dd>        <dd>西毒</dd>        <dd>南帝</dd>        <dd>北丐</dd>        <dd>中神通</dd>    </dl>    <dl>        <dt>五絕本名</dt>        <dd>黃固</dd>        <dd>歐陽鋒</dd>        <dd>段智興</dd>        <dd>洪七公</dd>        <dd>王重陽</dd>    </dl></body></html>

運行效果:

原格式文本 - <pre>...</pre>

程序源碼:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>格式化標籤</title></head><body>    <pre>        《登鸛雀樓》        白 如 依 山 盡,        黃 河 入 海 流。        欲 窮 千 裡 目,        更 上 一 層 樓。    </pre>    <hr>    <pre>        Class Hello{            public static void main(String[] args){                System.out.println("Hello Java !~");            }        }    </pre>    <hr>    <pre>        #include &lt;stdio.h&gt;        #include &lt;stdlib.h&gt;
int main(int argc, char *argv[]) { printf("Hello C !~"); return EXIT_SUCCESS; } </pre></body></html>

運行效果:

容器 - <div>...</div>

程序源碼:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>格式化標籤</title></head><body>    <div style="border: 1px solid red; width: 100px; height: 100px;">        Mr.邪帶你學編程    </div>    <div style="border: 1px solid blue; width: 200px; height: 200px;">        Mr.邪帶你學編程    </div></body></html>

運行效果:


非塊狀 - <span>...</span>

程序源碼:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>格式化標籤</title></head><body>    <span style="color: red">Mr</span> . 邪帶你學編程 <br>    Mr<span style="color: red"> . </span>邪帶你學編程 <br>    Mr . <span style="color: red">邪</span>帶你學編程 <br>    Mr . 邪<span style="color: red">帶</span>你學編程 <br>    Mr . 邪帶<span style="color: red">你</span>學編程 <br>    Mr . 邪帶你<span style="color: red">學</span>編程 <br>    Mr . 邪帶你學<span style="color: red">編</span>程 <br>    Mr . 邪帶你學編<span style="color: red">程</span> <br></body></html>

運行效果:


附近文章  上一期 - 筆記 點擊下方    

第03期 - 《前端開發-HTML文本標籤》↓↓↓↓

PS:關注視頻號「Mr.邪-帶你學編程」,配套短視頻課程講義公眾號程同步更新 ...

持續關注,獲取更多課程,不斷更新中 ...


相關焦點

  • Web前端學習第九課,使用文本格式化標籤
    通過前面的學習大家知道,在web前端中,元素所顯示出來樣子稱為表現,專業處理元素長什麼樣子的技術主要是CSS(層疊樣式表)。不過在HTML語言中,你可以用以下兩種方式先進行簡單處理。第一個就是我們在元素的開始標記中利用元素的屬性來設置,即在元素的開始標籤中添加一個或多個「屬性名=屬性值」的形式,這在前面的課程中已經講過。例如,你可以為段落添加字體、字號、大小、顏色等屬性。你可以為圖片添加圖片地址、寬度、高度等屬性。這種方式適用於所有的HTML元素。第二個就是為所要處理的文本添加格式化標籤。
  • JavaScript/HTML格式化
    JavaScript/HTML格式化 - 站長工具 可以對JS,HTML進行格式化排版,整齊的進行顯示。...HTML相關類: HTML/JS互轉 - HTML/UBB代碼轉換 - HTML標籤檢測 - HTML代碼轉換器 - JS/HTML格式化 - HTML... tool.chinaz.com/Tools/JsForm...aspx 2013-6-29 - 百度快照 JS/HTML格式化工具_懶人工具箱 JS代碼美化、加密壓縮。...
  • web前端開發工程師面試題大全
    最近看到web群裡的人,特別關心面試web前端開發工程師時,面試官都會問那些問題,今天我整理了一份,web前端開發工程師崗位面試題的大全,大家可看看
  • Web前端初學必經之路,根基必須要穩固 否則後面開發階段狀況百出
    WEB前端開發學習,學習前端的路上誰都避免不了要學的肯定是前端三大版啦,前端三大版分為,HTML、CSS、JavaScript,他們分別是網頁的頭、身體、腳;缺一不可的三個部分,下面分別介紹這前端的三大板塊。
  • 6個高效的前端開發工具
    打開APP 6個高效的前端開發工具 小月兒 發表於 2021-01-05 16:00:33 高效的前端開發工具有哪些?
  • 2020Web前端開發常見面試題及答案全解析-開課吧Web前端
    Web前端開發問題一:前端如何進行seo優化,以下說法錯誤的是:A.爬蟲依賴於標籤來確定上下文和各個關鍵字的權重;A、語義化的HTML有利於機器的閱讀,如PDA手持設備、搜尋引擎爬蟲;但不利於人的閱讀B、Table 屬於過時的標籤,遇到數據列表時,需儘量使用 div 來模擬表格C、語義化是HTML5帶來的新概念,此前版本的HTML無法做到語義化D、header
  • Web前端學習第19課,簡單了解CSS層疊樣式表
    (2) 通過使用格式化標籤來設置,例如,將文字設置為粗體樣式。<p><b>要設為粗體的文字</b></p>(3) 使用樣式表來設置如果你需要更多了解和學習web前端基礎知識,請參考下面的書籍。
  • Web前端開發技術的教與學(教學大綱)
    1.2 Web前端開發職業需求了解Web前端開發職業需求1.3 Web前端開發技術1.3.1△理解HTML概念及在網頁中的作用,理解HTML文檔定義。必開實驗項目序號項 目 名 稱實驗內容提要學時1實訓1  Web前端開發環境配置與HTML基礎配置Web前端開發環境、HTML組成與標籤使用、NotePad、EeditPlus編輯器使用、HTML+CSS+JavaScript混合編程初步。
  • 前端開發新手入門:Web開發工具有哪些?
    好的開發工具不僅可以節約時間,更能節約開發成本。作為Web時代最常用的前端開發語言,Web前端受到各大企業的重視,很多零基礎的人都想學習Web前端開發,下面千鋒廣州小編就來給大家介紹一下常見的Web開發工具。
  • 6個前端開發必備工具
    因此,網上出現了許多社區開發工具,打著「減輕前端開發人員生活壓力」的口號。這次小芯為大家整理一些自己特別青睞的~前方必備工具,注意「白嫖」~1.StackBlitz據Chidume Nnamdi所說,這是所有用戶最喜歡的在線集成開發環境工具(IDE)。
  • 前端開發才是你的舞臺HTML文本
    HTML文本本文詳細出自實驗樓http://www.shiyanlou.com/courses/19,轉載請註明出處寫在前面:如果你想製作自己的網頁,做網頁設計,網站開發,那麼你首先要學習的就是HTML,並能熟練掌握HTML文件的編寫
  • 前端開發是幹什麼的
    前端對於網站來說,通常都是指網站的前臺部分,包括網站的表現層面和結構層面。因此前端技術一般又分為前端設計和前端開發,前端設計一般可以理解為網站的視覺、美感的設計,前端開發則是網站的前臺用代碼實現,包括基本的HTML和CSS以及JavaScript/ajax,以及比較高級的CSS3、HTML5和SVG等。
  • 旖美信息技術前端開發經理陳國興:抽象語法樹與Javascript
    在「前端工程實踐」分會場,旖美信息技術前端開發經理陳國興帶來了《抽象語法樹與JavaScript》的主題分享。會後,51CTO記者根據陳國興在WOT2018全球軟體與運維技術峰會的演講內容進行了整理。何為抽象語法樹抽象語法樹是程序代碼語法的抽象表示,以樹狀的形式表現程式語言的語法結構。
  • Jackson: 編寫自己的欄位格式化方法
    假設某 API 返回的 JSON 結構如下:{  "a": 10000,  "b": 12345}前端拿到該數據後,要做如下渲染:關於數值格式化,通常的做法是以下 2 種:後端返回原始數值,前端拿到數值後,先格式化再顯示。缺點:前端需要寫格式化邏輯;當前端有多端時(web / ios / android),每一端都要寫自己的格式化函數。後端直接返回格式化後的欄位,前端拿到數據後直接顯示。
  • 廣州web前端開發前景怎麼樣?前端開發薪資有多少?
    廣州web前端開發前景怎麼樣?前端開發薪資有多少?下面和千鋒廣州小編一起來看看吧!Web前端開發前景怎麼樣?Web前端火了那麼久,現在學習還來的及嗎?網際網路行業的快速發展,帶動了更多的網際網路企業的崛起,更多的企業當然需要更多有些的人才,而前端開發近幾年一直是很熱門的職位之一,而且人才稀缺,更多的企業高薪招聘優秀的前端人才,所以,現在想要學習web前端是一個不錯的選擇。現在網際網路的大環境的發展如日中天,網絡已經深入到每個人生活的的各個方面。
  • 能夠大幅提高開發效率的WEB前端開發工具,你知道幾個?
    對於開發人員而言,時間始終是稀缺資源。從嚴格的最後期限到多個項目——到出乎意料的需求——我們的時間總是有需求的。因此,我們一直在尋找有助於提高生產率的工具和流程。 接下來小編就將介紹4種WEB前端開發工具,希望它們能夠給身為程式設計師的你帶來一定的額外生產力。
  • 一名合格的前端開發工程師應該掌握的8個技能
    1、HTMLHTML頁面固定,標籤不多,學起來比較容易,這也是很多零基礎轉行IT首選前端的主要原因。HTML是頁面結構的基礎組成部分,是網站的基礎,編寫HTML代碼需遵循HTML代碼規範,臃腫混亂的HTML代碼不但會影響其本身的表現,而且與其對應的CSS和Javascript代碼也會變得難以編寫和維護。
  • 前端設計-JavaScript簡單數字時鐘開發實例
    簡單數字時鐘開發實例藉助於JavaScript window對象所提供的計時觸發函數setInterval可以實現前端動畫效果的設計與製作。本例主要以setInterval方法為基礎介紹簡單數字時鐘的開發實例。
  • 前端開發大盤點:2015最流行前端框架TOP20
    2015年已經過去了,作為一個親歷前端開發多年的開發者,目睹和見證了前端開發從最初的Javascript 語言類庫到HTML5標準定稿後帶來的Web Components 跨終端組件的快速發展。
  • 使用前端框架Foundation 4來幫助簡化響應式設計開發
    使用前端框架Foundation 4來幫助簡化響應式設計開發 Foundation是一套使用廣泛的前端開發套件,可以幫助你快速的網站。