详细解析html字体属性

、设置字体样式的基本标签是，被其包含的文本为样式作用区。在初学者的HTML代码编写中，容易被多重嵌套，如文本。还有一种情况是标签嵌套错位，如文本。为了规范代码的编写，避免不必要的错误，读者在初学时一定要谨慎。

2、设置文字的颜色 color 是标签的属性之一，用于设置文字颜色。color是标签的属性之一，用于设置文字颜色。例子如：浅红色文字：51UM博客即汤汤个人博客网站，是一个和草根站长们一起学习分享网站SEO优化技术、web前端开发为主的个人博客网站。

3、设置文字的尺寸 size 也是标签的属性，用于设置文字大小。size 的值为1-7，默认为3。我们可以 size 属性值之前加上“+”“-”字符，来指定相对于字、号初始值的增量或减量。例子如： size为1：HTML学习

4、使文字倾斜，用双标签可使被作用文字倾斜，达到特殊的效果，例如文章的日期。被称为强调标签，也是斜体，目前使用比标签更频繁，其编写方法如下：

这是斜体文字

这也是斜体文字

5、使文字加粗，用双标签可使被作用文字加粗，是文字更加醒目，例如文章的标题部分。被称为特别强调标签，也是文字加粗，目前使用比标签更频繁，其编写方法如下：

这是粗体文字

这也是粗体文字

除注明外的文章,均为来源：汤久生博客(QQ:1917843637),转载请保留本文地址，谢谢！

实际开发中经常会遇到动态操作元素样式的需求。因此，vue 允许开发者通过 v-bind 属性绑定指令，为元素动态绑定 class 属性的值和行内的 style 样式。

1. 动态绑定 HTML 的 class

可以通过三元表达式，动态的为元素绑定 class 的类名。示例代码如下：

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

data() {
  return { isItalic: true }
}

.thin{ // 字体变细
  font-weight:200;
}
.italic{ // 倾斜字体
  font-style: italic;
}

2. 以数组语法绑定 HTML 的 class

如果元素需要动态绑定多个 class 的类名，此时可以使用数组的语法格式：

<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. 以对象语法绑定 HTML 的 class

使用数组语法动态绑定 class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化：

<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：{ //对象中，属性名是class 类名，值是布尔值
      italic: true,
      delete: false,
    }
   }
}

4. 以对象语法绑定内联的 style

:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

了解相关html的概念及编程工具，运行工具，语法之后，我们需要进一步详细了解，html中可以写那些标签代码，因为html是一门超文本标记语言。在html标签中，有上百种的标签，但是对于一个初步学习者，会感到头痛，其实在真正的编程时，用到html中的标签不会超过20-30个。所以我就叫这些常用的标签，也就是今后编程中，会一定遇到的标签，首先看看有哪些常用的标签。

html常用标签：

标题标签： <h1></h1> 在我们页面中，会写很多文字，文字也会有标签，当有标题之时就需要用到标题标签，除了h1之外，有h2,h3 。。。一直到h6.他们的区别在于对字体的大小有区分，h1字体最大，以此类推，并且，此标签还可以对文字进行加粗。注意：一个html页面中，只能只有一个h1标签，其他的可以出现多次。

段落标签：，当文字之间需要段落空行，可以用到此标签

例子：

段落标签代码

段落标签显示效果

加粗标签：

或者,对文字进行加粗处理；它们的作用是一样的，但是它们语义不一样，strong代表的是强调

文字倾斜标签：

<i> 或者 对文字进行切斜处理；它们的作用是一样的，但是它们语义不一样，em代表的是强调

超链接标签：

写在标签里面的单词，例如href 、target 都叫标签的属性。属性后面会有该属性的值；

href属性非常重要，用来设置超链接的目标地址或锚标记地址

target属性设置打开页面的方式(_self(默认) | _blank)

_self：在当前页面打开新的地址

_blank：新打开一个页面

超链接标签代码

显示效果

图片标签：

*img标签是一个单标签，也就是说不需要写成<img></img> 写成<img src="123.jpg" />即可

*width和height属性可以设置百分比或者像素例如：20px 或者20%

*src写路径的时候一定要用“/”，最好不要用“\”

图片标签代码

在线咨询

上一篇：CSS bottom 属性
下一篇：初识CSS-字体图标

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

详细解析html字体属性

1. 动态绑定 HTML 的 class

2. 以数组语法绑定 HTML 的 class

3. 以对象语法绑定 HTML 的 class

您的项目需求