整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          第4天 - 16天搞定前端,html文本格式,奇葩說?

          本正經(jīng)久了,我們都差點忘記自己也曾經(jīng)是一只小鬼,HTML一本正經(jīng)多了,我們就會忘記該看哪些內(nèi)容,才是重點的。標(biāo)注HTML文本內(nèi)容的重點之處,可用顏色,也可用文本格式標(biāo)簽。

          HTML專用于文本格式的標(biāo)簽有用于加粗的<b>,有用于傾斜的<i>,還有用于劃線的<u>等等。

          4.1 重點的強(qiáng)調(diào)

          強(qiáng)調(diào)文本的標(biāo)簽,沒有特別的屬性,放大文本用<big>,縮小則用<small>標(biāo)簽。加粗用<strong>或<b>,傾斜用<em>或<i>標(biāo)簽。

          其中strong和em是web標(biāo)準(zhǔn)中xhtml的標(biāo)簽,strong和em的意思是“強(qiáng)調(diào)”;b是html的,b的意思是bold(粗體),i是html的,i的意思是Italic(斜體)。

          對于搜索引擎來說<strong>和<em>比<b>和<i>要重視的多。為了符合現(xiàn)在W3C的標(biāo)準(zhǔn),還是推薦使用strong和em標(biāo)簽。

          <!DOCTYPE html>
          <html>
          <head>
              <meta charset="UTF-8">
              <title>第4個HTML-文本格式</title>
          </head>
          <body>
          老陳說編程,建議你從<strong>基礎(chǔ)</strong>學(xué)起<br/>
          有了<b>基礎(chǔ)</b>,學(xué)起來才能輕輕松松,否則就出出現(xiàn)<br/>
          <em>頭重腳輕</em>,有了<i>頭重腳輕</i>的毛病,就容易放棄。<br/>
          為了讓你有所體悟,我特意加大<big>基礎(chǔ)</big>二字,<br/>
          縮小了<small>頭重腳輕</small>四個字。
          </body>
          </html>

          輸出結(jié)果

          4.2 畫出個道來

          在寫一篇文章時,難免會對其內(nèi)容進(jìn)行修修改改,有時會刪除線刪掉一部分不要的內(nèi)容,有時會都重點內(nèi)容畫下劃線,在HTML文件中,刪除線用<s>,下劃線用<u>標(biāo)簽。還有一種刪除線和下劃線的效果,是用<del>和<ins>標(biāo)簽。

          如果要說<s>和<del>,<u>和<ins>的區(qū)別的話,那就是<s>和<u>常常是單獨出現(xiàn)的單身狗,而<del>和<ins>則是經(jīng)常成雙成對出現(xiàn)的,是好基友。

          如果你是一個愛<u>琴</u>之人,你就不會隨意掐斷<s>琴弦</s>(改為:情弦)。<br/>
          若情弦一斷,人便失去了牽絆,便會活得<del>好</del><ins>更加</ins>灑脫。

          輸出結(jié)果

          4.3 上標(biāo)和下標(biāo)

          在偏向角單位,如℃時,如平方時,就要用上標(biāo)實現(xiàn);在偏向右下角,如底數(shù)時,就要用到下標(biāo)來實現(xiàn)。html用<sup>和<sub>標(biāo)簽實現(xiàn)上標(biāo)和下標(biāo)效果。它們也沒什么特別的屬性需要講解的。

          你若要問愛情的溫度是多少℃?<br/>
          我會告訴你,開心時是39<sup>℃</sup>,不開心是零下1<sup>℃</sup>。<br/>
          如果你想問我是什么道理,我就會告訴你:<br/>
          這個跟計算log<sub>2</sub>90°是一樣的。

          輸出結(jié)果


          好了,有關(guān)html文本格式的內(nèi)容,老陳講完了,如果覺得對你有所幫助,希望老鐵能轉(zhuǎn)發(fā)點贊,讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點贊,就是對老陳繼續(xù)創(chuàng)作和分享最大的鼓勵。

          一個當(dāng)了10年技術(shù)總監(jiān)的老家伙,分享多年的編程經(jīng)驗。想學(xué)編程的朋友,可關(guān)注:老陳說編程。分享Python,前端(小程序)、App和嵌入式方面的干貨。關(guān)注我,沒錯的。

          #前端##HTML5##CSS##程序員##奇葩說#

          些初學(xué)web前端的小伙伴會比較迷惑,HTML到底是什么呢?

          這里解釋一下,HTML稱為超文本標(biāo)記語言,是一種標(biāo)識性的語言。

          它包括一系列標(biāo)簽,通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。

          HTML的學(xué)習(xí)也是要由淺到深一步一步學(xué)習(xí),對于很多小伙伴來說,HTML的學(xué)習(xí)路線一直是一個問題,下邊我列出HTML需要學(xué)習(xí)的幾個知識點,大家可以作為參考。

          HTML學(xué)習(xí)路線:

          ⒈ html概述

          html基本標(biāo)簽

          ⒊ 圖片標(biāo)簽

          ⒋ 超鏈接標(biāo)簽

          ⒌ 表格標(biāo)簽

          ⒍ 無序列表標(biāo)簽

          ⒎ 有序列表標(biāo)簽

          ⒏ 定義列表標(biāo)簽

          ⒐ div標(biāo)簽

          ⒑ 語義化標(biāo)簽

          ⒒ 表單標(biāo)簽

          ⒓ 語義化表單元素

          ⒔ 框架標(biāo)簽

          ⒕ 特殊字符

          ⒖ 綜合案例

          針對以上的html知識點,動力節(jié)點也有非常適合初學(xué)者的HTML學(xué)習(xí)教程,相信大家通過HTML視頻課程的學(xué)習(xí)以后,會對HTML有一個深入的了解。

          HTML教程內(nèi)容涵蓋:

          • HTML基礎(chǔ)語法
          • HTML概述
          • W3C概述
          • B/S架構(gòu)系統(tǒng)原理
          • table
          • 背景色與背景圖片
          • 超鏈接
          • 列表
          • 表單
          • 框架等知識點

          通過該視頻的學(xué)習(xí)之后,可以開發(fā)基本的網(wǎng)頁,并且可以看懂別人編寫的HTML頁面。

          HTML學(xué)習(xí)資料:http://www.bjpowernode.com/?toutiaohtml.chai

          網(wǎng)頁中文字作為信息的主要載體,非常重要,之前學(xué)習(xí)過HTML中關(guān)于文本、段落等格式的知識,這些只是簡單排版,如果想制作更好看的文本樣式,就的使用css 字體和文本樣式了。

          css字體

          css 字體屬性主要包括字體系列、字體大小、字體風(fēng)格等其它樣式。

          1、設(shè)置字體系列 —— font-family

          這個屬性用來設(shè)置網(wǎng)頁使用哪種類型的字體顯示文本,語法如下:

          font-family: "字體1","字體2","字體3"...

          font-family 屬性可以定義多個字體,瀏覽器會從前到后優(yōu)先選擇使用字體,當(dāng)瀏覽器不支持第一個字體,則會嘗試使用第二個字體,以此類推。如果瀏覽器不支持所有字體,則使用默認(rèn)字體。

          如下示例:

          2、字體樣式—— font-style

          字體樣式有三種:

          • 正常 - 正常顯示文本
          • 斜體 - 以斜體字顯示的文字
          • 傾斜的文字 - 文字向一邊傾斜(不管是斜體字還是正常的字體)

          如下示例:

          這里有2種斜體,它們有什么區(qū)別?

          italic 和 oblique 都是向右傾斜的文字, 但區(qū)別在于 italic 是指斜體字,而 oblique 是傾斜的文字,對于沒有斜體的字體應(yīng)該使用 oblique 屬性值來實現(xiàn)傾斜的文字效果。

          3、字體大小 —— font-size

          “font-size”屬性來設(shè)置字體大小,它的值可以使用預(yù)定義關(guān)鍵字、絕對大小、相對大小

          預(yù)定義關(guān)鍵字

          預(yù)定義關(guān)鍵字有 xx-small、x-small、small、medium、large、x-large、xx-large,尺寸按順序依次增大。它的可選范圍只有這幾種,且不同瀏覽器廠商定義的預(yù)定義關(guān)鍵字對應(yīng)的字體大小不一致,所以相同的屬性值,在不同瀏覽器看到的大小不一樣,建議不要使用這種方式。

          絕對大小

          絕對大小使用比如:px(像素)、pt(點,1pt 相當(dāng)于 1/72in)、in(英寸)、cm(厘米)、mm(毫米)等單位設(shè)置字體大小。

          如下示例:

          絕對大小不會隨著頁面大小改變而改變,如果要想使文字大小自適應(yīng)不同的屏幕或設(shè)備就需要使用相對大小。

          相對大小:

          相對大小使用 em、%、rem等來設(shè)置大小,它們都是相對于某個參考基準(zhǔn)的字體大小,來計算當(dāng)前字體的大小,只是參考基準(zhǔn)不同而已。

          如果你不指定一個字體的大小,默認(rèn)大小和普通文本段落一樣,是16像素(1em = 16px,100%=16px)。

          em和%都是相對于父級元素的字體大小,其子級元素會在其父級元素的計算結(jié)果上繼續(xù)計算大小,如下示例:

          如上p元素的字體大小是36px,而不是12px * 200%等于24px,它是在其父級div元素的計算結(jié)果上繼續(xù)計算的值。

          使用em 或 %雖然可以方便修改文字大小,但是當(dāng)元素嵌套很深的時候,就變得比較復(fù)雜,深層的元素文字大小就變得不可控,所以css3 新增加了rem 來設(shè)置字體大小。

          rem 是相對于根元素 (html 元素) font-size屬性的值,每一層級都會參考html根元素的字體大小來計算,這樣一來,無論嵌套多少層,字體大小的計算就變得統(tǒng)一了。

          rem 是CSS3新增的一個相對單位,IE9 以下版本的老瀏覽器卻不支持它,這也是很多編程人員尚未使用 rem 的原因。

          在定義字體大小時,建議在 html 元素中定義絕大多數(shù)元素所需要的字體大小,并讓所有子元素繼承 html 的字體大小。如果某個子元素要改變字體大小,則使用相對尺寸 em 或 % 或 rem 重新定義。

          4、復(fù)合屬性—— font

          font 屬性可以看成是字體的簡寫,它可以定義字體系列、大小、風(fēng)格、粗細(xì)、等樣式,語法如下:

           font:"font-style font-variant font-weight font-size/line-height font-family"

          其中font-size和font-family的值是必需的。如果缺少了其他值,將使用瀏覽器的默認(rèn)值。

          如下示例:

          除了以上設(shè)置,font還有其它的屬性值,如下:

          這些屬性,只有部分瀏覽器支持,具體使用時請查看瀏覽器是否支持。

          5、其它字體屬性

          字體還有 font-weight(設(shè)置粗細(xì)的屬性)、font-variant(設(shè)置小型大寫字母的字體顯示文本)如下示例:

          font-weight 字體粗細(xì):有normal、lighter、bold、數(shù)值三種,數(shù)值范圍從 100 ~ 900 依次變粗,900 相當(dāng)于 bold。

          font-variant值有normal(標(biāo)準(zhǔn)字體顯示)、small-caps(瀏覽器會顯示小型大寫字母的字體)、inherit(繼承父元素的設(shè)置)

          如下示例:

          font-variant 屬性設(shè)置小型大寫字母的字體顯示文本,這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫,但是所有使用小型大寫字體的字母與其余文本相比,其字體尺寸更小。

          css 文本樣式

          css 文本屬性主要設(shè)置比如字符間隔,文本顏色、單詞間隔、行高、文字修飾、對齊方式等效果。

          1、文字顏色 —— color

          color 使用以“#”開頭16進(jìn)制的顏色代碼或顏色關(guān)鍵詞(如red、blue),如下示例:

          2、字符間隔 —— letter-spacing

          設(shè)置字符水平間距,如下示例:

          3、單詞間隔 —— word-spacing

          設(shè)置單詞之間的間距,如下示例:

          這里注意中文比較特殊,一個中文字不等同于英文的一個單詞。

          4、行高 —— line-height

          設(shè)置字體行之間垂直間距,如下示例:

          5、文字修飾 —— text-decoration

          可以設(shè)置文字下劃線、刪除線等樣式,如下示例:

          還可以定義波浪線效果,如下示例:

          6、水平對齊 —— text-align

          有三種水平方向的對齊方式,居左,居中、居右,如下示例:

          7、垂直對齊—— vertical-align

          vertical-align 屬性設(shè)置一個元素的垂直對齊方式。

          該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負(fù)長度值和百分比值。這會使元素降低而不是升高。在表單元格中,這個屬性會設(shè)置單元格框中的單元格內(nèi)容的對齊方式。

          如下示例,對齊圖片:

          還有很多其它屬性,在此不每個都介紹了,可參考如下:

          8、文字大小寫轉(zhuǎn)換—— text-transform

          可用于所有字句變成大寫或小寫字母,或每個單詞的首字母大寫。如下示例:

          9、文本縮進(jìn) —— text-indent

          文本縮進(jìn)屬性是用來指定文本的第一行的縮進(jìn)。如下示例:

          文本縮進(jìn)可以使用絕對值如:px、pt、cm等,也可以是相對單位 %。且可以是負(fù)值,如果是負(fù)值,就相當(dāng)于變成向左縮進(jìn)了。

          10、空白處理 —— white-space

          white-space屬性指定元素內(nèi)的空白怎樣處理。如下示例:

          11、文字陰影 —— text-shadow

          text-shadow 可以設(shè)置文字陰影效果,比如內(nèi)陰影或外陰影,語法:

          text-shadow: x坐標(biāo) y坐標(biāo) 模糊大小 顏色;

          其中x/y 坐標(biāo)相對于文本左上角的偏移量,如下示例:

          12、文本溢出 —— text-overflow

          text-overflow 屬性指定當(dāng)文本溢出時包含它的元素應(yīng)該如何顯示。可以設(shè)置文本被剪切、顯示省略號 (...) 或顯示自定義字符串(不是所有瀏覽器都支持)。

          text-overflow 需要配合以下兩個屬性使用:

          • overflow: hidden;

          如下示例:

          總結(jié)

          本篇講述了文字和文本的大部分樣式設(shè)置,掌握這些css用法非常重要,網(wǎng)頁大部分都是文本,要想制作一個漂亮的頁面,這些是必須要學(xué)會的,且要學(xué)會融會貫通。

          本篇主要講了以下內(nèi)容:

          1. 字體系列、大小、樣式、粗細(xì)等樣式的設(shè)置。
          2. 字體font簡寫屬性的使用。
          3. 文本顏色、字符間隔、單詞間隔、行高等設(shè)置。
          4. 文本修飾、大小寫轉(zhuǎn)換、文本縮進(jìn)、空白處理等。
          5. 文本水平對齊、垂直對齊。
          6. 文本陰影及文本溢出。

          以上都是最基本的,要多加練習(xí),才能夠理解學(xué)會使用。感謝關(guān)注,祝學(xué)習(xí)愉快!

          上篇:前端入門——css 盒子模型


          主站蜘蛛池模板: 日本精品一区二区三区视频| 国产麻豆剧果冻传媒一区 | 久久婷婷久久一区二区三区| 99精品国产一区二区三区2021 | 伊人激情AV一区二区三区| 成人无号精品一区二区三区| 韩国一区二区视频| 日韩AV无码久久一区二区| 午夜福利一区二区三区高清视频 | 91久久精一区二区三区大全| 国产精品一区二区电影| 精品免费国产一区二区三区| 大香伊人久久精品一区二区| 熟妇人妻AV无码一区二区三区| 成人精品视频一区二区三区不卡| 国产天堂一区二区综合| 国产精品主播一区二区| 国产福利电影一区二区三区,日韩伦理电影在线福| 亚洲一区二区三区91| 亚洲欧洲日韩国产一区二区三区| 亚洲国产精品一区二区久| 中文字幕精品一区二区日本| 蜜桃无码一区二区三区| 激情亚洲一区国产精品| 亚洲日本乱码一区二区在线二产线| 国产午夜福利精品一区二区三区| 中日av乱码一区二区三区乱码 | 亚洲爆乳无码一区二区三区| 内射女校花一区二区三区| 一夲道无码人妻精品一区二区| 日韩在线视频一区二区三区| 日韩精品免费一区二区三区| 怡红院AV一区二区三区| 亚洲一区二区三区写真 | 日韩国产免费一区二区三区 | 精品无码一区二区三区电影 | 亚洲高清美女一区二区三区| 国产在线精品一区免费香蕉| a级午夜毛片免费一区二区| 日韩美一区二区三区| 日韩精品人妻一区二区中文八零|