专栏首页Web前端知识点概要HTML5常用的文本标签
原创

HTML5常用的文本标签

标签

描述

标题标签

HTML中一共有六级标题,标题按字号大小从大到小为H1、H2、H3、H4、H5、H6

<p>

用于定义HTML中的段落

<br>和<wbr>

<br>标签用于插入一个简单换行符,用来输入空行。<wbr>标签规定文本在什么时候适合添加换行符,作用是建议浏览器可以在标记处断行,但只是建议不一定是必定换行,还有根据整行文字的长度来定

<details> 和<summary>

<details> 用于描述文档和文档某个部分的细节,可以与<summary>标签用于定义这个描述文档的标题

<bdi>

<bdi>标签用于设置一段文本,使其脱离其父标签的文本方向设置,在发布用户评论或其他您无法完全控制的内容时很有用

<ruby>和<rt>还有<rp>

<ruby>标签用于定义ruby注释(中文注音或字符),与<rt>标签一同使用<rt>标签用于定义字符(中文注音或字符)的解释或发音。<rp>标签在ruby注释中使用,以定义不支持<ruby>标签的浏览器所显示的内容

<mark>

<mark>标签主要用来在视觉上向用户呈现那些需要突显或高亮显示的文字

<time>

<time>标签用于定义日期或时间,也可以两者同时

<meter>

<meter>标签用于定义度量衡

<progress>

<progress>标签用于定义任何类型任务的运行进度

标题标签

    <h1>~<h6>用处是为了命名标题,<h1> 定义最大的标题。<h6>用来定义最小的标题;标题标签主要目的不是为了设置字体大小,主要作用是对浏览器索引进行优化。 例子:

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

P标签

  段落标签可以只在块(block)内指定段落,也可以把段落和其他段落、列表、表单和预定义格式的文本一起使用。总的来讲,这意味着段落可以在任何有合适的文本流的地方出现,例如文档的主体中、列表的元素里,等等 例子:

<p>这是一个段落</p>

br和wbr标签

  <br>标签的目的是输入空行,不是为了换行; <wbr>标签,软换行符;全称是 Word Break Opportunity(单词换行时机),IE并不支持wbr;在浏览网页中,如果文本太长,浏览器会自动对文本换行,如果担心浏览器会在不恰当的位置换行,那么就可以用标签来添加换行时机 例子:

<p>单词<wbr>可以<wbr>在这些地方<wbr>换行</p>

<details> 和<summary>标签

  details用来对显示在页面的内容做进一解释里面;接着是标题,这里面的内容一般简短,具有总结性,会展示在页面;细节一开始是隐藏的,当点击时便会展现。可以为details标签设置open属性,即打开网页时会默认展开。 例子:

<details>
    <summary>details和summary标签</summary>
    <p>details</p>
    <dl>
        <dd>细节</dd>
        <dd>用于显示页面的内容的解释</dd>
    </dl>
</details>

<bdi>标签

  <bdi>全称是Bi-directional Isolatio(双向隔离); <bdi>标签主要是让文字的方向发生变化,从左向右或者从右向左。它有一个属性dir,用来定义文本的方向,属性值为ltr,文本从左向右正常方向,属性值为rtl,文本从右向左;默认属性值为auto。例子:

<p>This <bdi dir="ltr">is</bdi> an bdi.</p>

<ruby>和<rt>还有<rp>

标签定义 ruby 注释(中文注音或字符)。

与 <ruby> 以及<rt> 标签一同使用:

ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。例如:

<ruby>
  王 <rp>(</rp><rt>wang</rt><rp>)</rp>
</ruby>

<mark>

  标签定义带有记号的文本,在需要突出显示文本时使用;例如:

<p>这段文字的 <mark>我</mark>会突出显示.</p>

<time>

  该元素能够以机器可读的方式对日期和时间进行编码;还有两个属性 datetime 规定日期 / 时间。否则,由元素的内容给定日期 / 时间。 pubdate 指示 元素中的日期 / 时间是文档(或

元素)的发布日期。例子:

<p>我们每天早上 <time>7:00</time> 上课</p>

<p>我在 <time datetime="2020-02-14">情人节</time> 待在家里</p>

<meter>

  标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。例如磁盘用量、查询结果的相关性即可使用 常用属性是:

属性

描述

max

规定范围的最大值。

min

规定范围的最小值

value

必需值规定度量的当前值

代码例如:

<meter value="1" min="1" max="10">1 out of 10</meter><br>
<meter value="0.5">50%</meter>

<progress>标签

用来表示现在的进度 ;常用属性有

属性

描述

max

规定任务一共需要多少工作。

value

规定已经完成多少任务。

例如:

<progress value="22" max="100"></progress> 

css字体样式属性

  • color 定义元素内文字颜色。 语法:color:颜色名|十六进制|RGB
  • font-size 定义元素内文字大小。 语法:font-size:绝对单位(px)|相对单位(em)。
  • font-family 定义元素内的字体。 语法:font-family:字体,字体集
  • font-weight 字体粗细 定义字体的粗细, 属性值为:normal(默认值,等于400)、bold、bolder、lighter、100~900(100的整数倍)。
  • font-style 定义元素的字体风格,如设置斜体、倾斜或正常字体 常用属性为normal(默认值),italic(斜体),oblique(倾斜)
  • word-wrap 允许长单词或 URL 地址换行到下一行。 常用属性:   normal 只在允许的断字点换行(浏览器保持默认处理)。   break-word 在长单词或 URL 地址内部进行换行

@font-face

   允许你输入自己的字体出现在网站上,即使在特定的字体在访问者的计算机上没有安装。 语法规则:@font-face { font-family: <FontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }(属性可以自查font-face百度百科)

例如:

@font-face {
  font-family: 'ET';   /*声明一个名为ET的字体变量*/
  src: url('YourWebFontName.eot'),local('YourFontName.eot');
}

CSS外观属性

属性

效果

color

文本颜色

letter-spacing

字体间距 属性为normal 或px em 允许负值

word-spacing

单词间距 中文字体无效

line-height

行间距 px em %

text-transform

文本转换 none 默认值 capitalize 首字母大写 uppercase 全部字符转换为大写 lowercase 全部字符转换为小写

text-decoration

文本装饰 none underline overline line-through删除线

text-align

水平对齐方式 left right center

text-indent

首行缩进 建议使用em

white-space

空白符处理 normal pre 预格式化 nowrap空格空行无效

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 初识HTML5和CSS3

    HTML5不仅仅是HTML规范的最新版本,它也代表了一系列Web相关技术的总称,其中最重要的三项技术就是HTML5核心规范、CSS3(Cascading Sty...

    王凡汎
  • CSS选择器

    标签选择器 : 元素名称 |div{...}|使用标签选择元素,优先级最低,使用最广泛|

    王凡汎
  • 过渡与变形的综合运用

    王凡汎
  • 学术资讯|腾讯优图提出半监督对抗单目深度估计,被人工智能顶级期刊TPAMI接收

    作为国内计算机视觉领域的领先者,腾讯优图实验室在单目深度估计上取得了全新的研究进展。

    优图实验室
  • BeautifulSoup库整理

    注意:如果是html的父标签就是他自己,soup本身也是种特殊的标签的他的父标签是空

    小小咸鱼YwY
  • 美女老师带你做爬虫:BeautifuSoup库详解及实战!

    模块:urllib、urllib2、BeautifuSoup4模块(解析器lxml、html)

    云飞
  • React Native顶|底部导航使用小技巧

    导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能...

    Java中文社群_老王
  • 前端入门2-HTML标签声明正文-HTML标签

    作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

    请叫我大苏
  • 前端-HTML-web服务本质-HTTP协议-请求-标签-01(待完善)

    我们的浏览器端(B/S架构)本质上也是一个客户端,通过socket与服务端通信,发送请求,获得返回数据,再有浏览器将服务器返回的数据渲染成页面上看到的一个一个标...

    suwanbin
  • 标签打印软件如何实现不同标签打印不同份数

    前两天有人咨询小编标签打印软件中不同标签打印不同份数是如何实现的,大家都知道标签重复打印的份数如果一样,直接在标签打印软件中设置就行,但是,如果要实现不同标签批...

    中琅软件

扫码关注云+社区

领取腾讯云代金券