美文网首页Web前端之路程序员
HTML5基础——文字常用标签(上)

HTML5基础——文字常用标签(上)

作者: 微学派 | 来源:发表于2016-12-23 21:07 被阅读272次

一、微文概览

  1. 标题
  2. 字体与字号
  3. 颜色

二、详细介绍

  • 1. 标题

我们在HTML文件中写一篇文字时,总会希望将标题的文字设置的大一些,黑一些,粗一些,那么怎样在HTML中设置标题呢?
在HTML中,标题文字共计6种,每个标题逐级依次变小。
语法:

1级标题:<h1>...</h1>
2级标题:<h2>...</h2>
...
6级标题:<h6>...</h6>

案例代码:

<html>
    <head>
        <title>文字的标题</title>
    </head>
    <body>
        <h1>微学派</h1>
        <h2>微学派</h2>
        <h3>微学派</h3>
        <h4>微学派</h4>
        <h5>微学派</h5>
        <h6>微学派</h6>
    </body>
</html>

运行效果:


文字的标题.png
  • 2. 字体与字号

在介绍完标题后,我们还要处理正文的文字,
2.1 设置字体——face
语法:

<font face="宋体">文字</font>

其中,font为设置文字的标签,face为该标签的属性,表示文字的字体,<font></font>之间的文字,就是应用字体的文字。
案例代码:

<html>
    <head>
        <title>文字的字体</title>
    </head>
    <body>
        <font face="宋体">微学派</font>
        <font face="黑体">微学派</font>
        <font face="隶书">微学派</font>
    </body>
</html>

运行效果:


文字的字体.png

2.2 文字的字号
我们在设置完文字的字体后,还需要给文字设置大小,设置字号的范围是1~7。
语法:

<font size="文字字号">文字</font>

案例代码:

<html>
    <head>
        <title>文字的字号</title>
    </head>
    <body>
        <font face="宋体" size="1">1号字体</font><br/>
        <font face="宋体" size="2">2号字体</font><br/>
        <font face="宋体" size="3">3号字体</font><br/>
        <font face="宋体" size="4">4号字体</font><br/>
        <font face="宋体" size="5">5号字体</font><br/>
        <font face="宋体" size="6">6号字体</font><br/>
        <font face="宋体" size="7">7号字体</font><br/>
    </body>
</html>

说明:
为换行标签,加入该标签相当于在文字内容后添加了一个回车。
运行效果:

文字的字号.png
  • 3. 颜色

我们在设置好文字的字号后,发现文字总是黑色的,有时,我们为了页面好看,需要将文字设置成别的颜色,设置文字的颜色的标签属性为color。
语法:

<font color="颜色代码"></font>

说明:颜色代码的格式使用的是16进制(关于什么是16进制,请到度娘上搜索),比如:#0088FF。
案例代码:

<html>
    <head>
        <title>文字的颜色</title>
    </head>
    <body>
        <font face="宋体" size="5" color="#0088FF">5号字体</font><br/>
        <font face="宋体" size="5" color="#FF0088">5号字体</font><br/>
        <font face="宋体" size="5" color="#88FF00">5号字体</font><br/>
    </body>
</html>

运行效果:


文字的颜色.png

以上是关于文字的一些常用格式,下篇文章将为大家介绍文字的粗体与斜体、下划线与删除线以及等宽文字标记。

相关文章

  • HTML5基础——文字常用标签(上)

    一、微文概览 标题字体与字号颜色 二、详细介绍 1. 标题 我们在HTML文件中写一篇文字时,总会希望将标题的文字...

  • HTML5基础——文字常用标签(下)

    一、微文概览 粗体、斜体、下划线、删除线上标与下标 二、详细介绍 1. 粗体、斜体、下划线、删除线 我们在浏览网页...

  • HTML5常用标签(1)--基础

    初学web前端,学习过程中总结了一下html5常用的标签,先做一个系列,介绍下各个标签作用。 先介绍下常用基础标签...

  • 第二章 HTML5基础标签和语法

    第二章 HTML5基础标签和语法 本章将详细讲解HTML的语法,以及常用的HTML标签。经过本...

  • Web前端HTML/CSS

    runoob菜鸟教程 HTML基础 CSS基础 HTML5扩展 CSS3扩展 主要记住常用各标签元素属性即可前端U...

  • HTML5基础知识

    一、HTML5结构以及常用标签 1、HTML5常用标签 (1)、声明文档类型 (2)网页字符集设置 网页相关的信息...

  • 2019-03-19 html常用标签词汇

    html常用标签词汇 html5新增表单类型

  • HTML5基础入门教程(上)

    前言 该文章仅供HTML5的基础入门,主要针对HTML5的常用标签和元素的讲解。 本文章所有的图片素材均来自于Pi...

  • css高级

    HTML4 常用标签 HTML5 常用标签 语义化的好处 如何写出更优的 html 标签嵌套 内联元素:不能包含块...

  • html常用标签

    Html 大纲 html知识目录 什么是网页,网页的注释 网页的结构和标签 常用的标签和标签的属性 html5常用...

网友评论

    本文标题:HTML5基础——文字常用标签(上)

    本文链接:https://www.haomeiwen.com/subject/rwakvttx.html