詳細(xì)解析html字體屬性

、設(shè)置字體樣式的基本標(biāo)簽是，被其包含的文本為樣式作用區(qū)。在初學(xué)者的HTML代碼編寫中，容易被多重嵌套，如文本。還有一種情況是標(biāo)簽嵌套錯(cuò)位，如文本。為了規(guī)范代碼的編寫，避免不必要的錯(cuò)誤，讀者在初學(xué)時(shí)一定要謹(jǐn)慎。

2、設(shè)置文字的顏色 color 是標(biāo)簽的屬性之一，用于設(shè)置文字顏色。color是標(biāo)簽的屬性之一，用于設(shè)置文字顏色。例子如：淺紅色文字：51UM博客即湯湯個(gè)人博客網(wǎng)站，是一個(gè)和草根站長(zhǎng)們一起學(xué)習(xí)分享網(wǎng)站SEO優(yōu)化技術(shù)、web前端開發(fā)為主的個(gè)人博客網(wǎng)站。

3、設(shè)置文字的尺寸 size 也是標(biāo)簽的屬性，用于設(shè)置文字大小。size 的值為1-7，默認(rèn)為3。我們可以 size 屬性值之前加上“+”“-”字符，來(lái)指定相對(duì)于字、號(hào)初始值的增量或減量。例子如： size為1：HTML學(xué)習(xí)

4、使文字傾斜，用雙標(biāo)簽可使被作用文字傾斜，達(dá)到特殊的效果，例如文章的日期。被稱為強(qiáng)調(diào)標(biāo)簽，也是斜體，目前使用比標(biāo)簽更頻繁，其編寫方法如下：

這是斜體文字

這也是斜體文字

5、使文字加粗，用雙標(biāo)簽可使被作用文字加粗，是文字更加醒目，例如文章的標(biāo)題部分。被稱為特別強(qiáng)調(diào)標(biāo)簽，也是文字加粗，目前使用比標(biāo)簽更頻繁，其編寫方法如下：

這是粗體文字

這也是粗體文字

除注明外的文章,均為來(lái)源：湯久生博客(QQ:1917843637),轉(zhuǎn)載請(qǐng)保留本文地址，謝謝！

實(shí)際開發(fā)中經(jīng)常會(huì)遇到動(dòng)態(tài)操作元素樣式的需求。因此，vue 允許開發(fā)者通過(guò) v-bind 屬性綁定指令，為元素動(dòng)態(tài)綁定 class 屬性的值和行內(nèi)的 style 樣式。

1. 動(dòng)態(tài)綁定 HTML 的 class

可以通過(guò)三元表達(dá)式，動(dòng)態(tài)的為元素綁定 class 的類名。示例代碼如下：

<h3 class="thin" :class="isItalic?'italic'： ">MyDeep組件</h3>
<button @click="isItalic=!isItalic">Toggle Italic</button>

data() {
  return { isItalic: true }
}

.thin{ // 字體變細(xì)
  font-weight:200;
}
.italic{ // 傾斜字體
  font-style: italic;
}

2. 以數(shù)組語(yǔ)法綁定 HTML 的 class

如果元素需要?jiǎng)討B(tài)綁定多個(gè) class 的類名，此時(shí)可以使用數(shù)組的語(yǔ)法格式：

<h3 class="thin" :class="[isItalic ? 'italic' : '", isDelete ? 'delete' : '"]">
  MyDeep 組件
</h3>

<button @click="isItalic=!isItalic">Toggle Italic</button>
<button @click="isDelete=!isDelete">Toggle Delete</button>

data(){
  return {
    isItalic: true,
    isDelete: false,
  }
}

3. 以對(duì)象語(yǔ)法綁定 HTML 的 class

使用數(shù)組語(yǔ)法動(dòng)態(tài)綁定 class 會(huì)導(dǎo)致模板結(jié)構(gòu)臃腫的問題。此時(shí)可以使用對(duì)象語(yǔ)法進(jìn)行簡(jiǎn)化：

<h3 class="thin" :class="class0bj">MyDeep 組件</h3>
<button @click="class0bj.italic = !class0bj.italic">Toggle Italic</button>
<button @click="class0bj.delete = !class0bj.delete">Toggle Delete</button>

data(){
  return {
    classobj：{ //對(duì)象中，屬性名是class 類名，值是布爾值
      italic: true,
      delete: false,
    }
   }
}

4. 以對(duì)象語(yǔ)法綁定內(nèi)聯(lián)的 style

:style 的對(duì)象語(yǔ)法十分直觀——看著非常像 CSS，但其實(shí)是一個(gè) JavaScript 對(duì)象。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號(hào)括起來(lái)) 來(lái)命名：

了解相關(guān)html的概念及編程工具，運(yùn)行工具，語(yǔ)法之后，我們需要進(jìn)一步詳細(xì)了解，html中可以寫那些標(biāo)簽代碼，因?yàn)閔tml是一門超文本標(biāo)記語(yǔ)言。在html標(biāo)簽中，有上百種的標(biāo)簽，但是對(duì)于一個(gè)初步學(xué)習(xí)者，會(huì)感到頭痛，其實(shí)在真正的編程時(shí)，用到html中的標(biāo)簽不會(huì)超過(guò)20-30個(gè)。所以我就叫這些常用的標(biāo)簽，也就是今后編程中，會(huì)一定遇到的標(biāo)簽，首先看看有哪些常用的標(biāo)簽。

html常用標(biāo)簽：

標(biāo)題標(biāo)簽： <h1></h1> 在我們頁(yè)面中，會(huì)寫很多文字，文字也會(huì)有標(biāo)簽，當(dāng)有標(biāo)題之時(shí)就需要用到標(biāo)題標(biāo)簽，除了h1之外，有h2,h3 。。。一直到h6.他們的區(qū)別在于對(duì)字體的大小有區(qū)分，h1字體最大，以此類推，并且，此標(biāo)簽還可以對(duì)文字進(jìn)行加粗。注意：一個(gè)html頁(yè)面中，只能只有一個(gè)h1標(biāo)簽，其他的可以出現(xiàn)多次。

段落標(biāo)簽：，當(dāng)文字之間需要段落空行，可以用到此標(biāo)簽

例子：

段落標(biāo)簽代碼

段落標(biāo)簽顯示效果

加粗標(biāo)簽：

或者,對(duì)文字進(jìn)行加粗處理；它們的作用是一樣的，但是它們語(yǔ)義不一樣，strong代表的是強(qiáng)調(diào)

文字傾斜標(biāo)簽：

<i> 或者 對(duì)文字進(jìn)行切斜處理；它們的作用是一樣的，但是它們語(yǔ)義不一樣，em代表的是強(qiáng)調(diào)

超鏈接標(biāo)簽：

寫在標(biāo)簽里面的單詞，例如href 、target 都叫標(biāo)簽的屬性。屬性后面會(huì)有該屬性的值；

href屬性非常重要，用來(lái)設(shè)置超鏈接的目標(biāo)地址或錨標(biāo)記地址

target屬性設(shè)置打開頁(yè)面的方式(_self(默認(rèn)) | _blank)

_self：在當(dāng)前頁(yè)面打開新的地址

_blank：新打開一個(gè)頁(yè)面

超鏈接標(biāo)簽代碼

顯示效果

圖片標(biāo)簽：

*img標(biāo)簽是一個(gè)單標(biāo)簽，也就是說(shuō)不需要寫成<img></img> 寫成<img src="123.jpg" />即可

*width和height屬性可以設(shè)置百分比或者像素例如：20px 或者20%

*src寫路徑的時(shí)候一定要用“/”，最好不要用“\”

圖片標(biāo)簽代碼

在線咨詢

上一篇：CSS bottom 屬性
下一篇：初識(shí)CSS-字體圖標(biāo)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

詳細(xì)解析html字體屬性

1. 動(dòng)態(tài)綁定 HTML 的 class

2. 以數(shù)組語(yǔ)法綁定 HTML 的 class

3. 以對(duì)象語(yǔ)法綁定 HTML 的 class

您的項(xiàng)目需求