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空格空行无效 |
