整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML 字体标签

体效果

<h1></h1> 标题字(最大)

<h6></h6> 标题字(最小)

<h1 align="center"></h1>

<strong></strong> 粗体字(突出强调)

<b></b> 粗体字(bold:粗体)

<i></i> 斜体字(italic:斜体)

<u></u> 底线,文本添加下划线:(underline:下划线)

<strike></strike>或<s></s> 横线,相当于加删除线文本 <del></del> HTML5

等宽文字标签:对于等宽文字设置多数情况用在英文文字显示中

<tt></tt> 打字体,类似打字机或者等宽的文本效果。

<code></code> 等宽文字设置内容(定义计算机代码文本)

<samp></samp> 等宽文字设置内容(定义样本文本)

<kbd> 定义键盘文本。

<sup></sup> 文字上标字体标签(super)

<sub></sub> 文字下标字体标签(subscipt)

<address></address> 设置地址文字(可定义一个地址,比如电子邮件地址。您应当使用它来定义地址、签名或者文档的作者身份。)

<font></font> 编辑网页文字样式

<font face="" size="" color=""></font>

face属性可以用于设置文字的名称,可以是宋体、隶书、楷体等;

size属性用于设置字号的大小(单位:字号),从 1 到 7 的数字,或h1-h6。浏览器默认值是3。

color用于设置字体的颜色

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

手册上没有

<ruby></ruby>和<rt></rt> 设置文字标注标记

实例:

<ruby>当代最可爱的人<rt>志愿军</rt></ruby>

、标签的分类:双标签和单标签

双标签:就是成对出现的,类似于这种 <html> </html>

单标签:就是可以单个使用的,类似于 <br> 换行标签 或 <hr>水平线标签。

二、标签属性的作用:

标签的属性是用来定义文字或字符的 颜色、宽高、粗细、大小、等,这个是标签属性的作用。


三、标签属性的特性:

1、每一个标签都有自己的属性,单标签和双标签都有。

2、一个标签可以有多个属性。

3、每个属性都有对应的值,值要用单或双引号引起来。

4、多个属性之间使用空格隔开。

5、属性没有顺序之分。

6、字体属性值,必须是系统可以识别的字体,一般为系统自带字体。

7、HTML5 中 font 属性已经弃用。

源代码:↓

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!--网页抬头-->

<title>中央气象局</title>

</head>

<body>

<!--水平线的宽度是500像素,这个width就是标签属性-->

<hr width="500">

<!--下面这个是多个标签属性,多个属性之间用空格隔开-->

<font color="red" face="黑体" size="7">标签属性</font>

</body>

</html>

、CSS字体样式

定义字体系列,大小,粗细和文字样式

(一)字体系列(font-family)


(二)字体大小(font-size)

(三)字体粗细(font-weight)

(四)字体样式(font-style)

(五)字体复合属性(font)

 p {
    font: font-style font-weight font-size/line-height font-family;
  }

不能更换顺序,必须保留font-size和font-family

二、CSS文本属性

定义文本外观,如:文本颜色,对齐文本,装饰文本,文本缩进,行间距等

(一)文本颜色(color)

(二)对齐文本(text-align)

(三)装饰文本(text-decoration)

(四)文本缩进(text-indent)


(五)行间距(line-height)

三、格式化代码

  1. Emmet语法
    前身为Zen coding,它使用缩写来提高html/css的编写速度,VSCode内部已经集成该语法,快速生成HTML结构语法和CSS样式语法

2. 快速生成HTML结构语法

  • 生成标签,直接输入标签按Tab键即可
  • 生成多个相同的标签,标签加星号*键按Tab键
  • 父子级关系的标签,可以用大于号>和enter键
  • 兄弟关系的标签,可以用加号+和enter键
  • 生成带有类名或id名字,可写成标签加.类名/#名加Tab键(p.one生成
  • 生成.div类名是有顺序的,可用自增符号¥
  • 生成标签的内部写内容,可用{}表示

3.快速生成CSS样式语法

  • CSS基本采取简写形式即可(w 200 加Tab生成width: 200px;)
  • 单词首字母加Tab键

4.快速格式化代码

  • Shift+Alt+F/右键-格式化代码
  • 保存页面时自动格式化代码(在设置中的文本编辑器中找到格式,勾选Format On Save即可,也可把Format On Type勾选上)

5.去掉li前面的项目符号