Text in HTML & CSS

语义化标签

HTML的主要工作是编辑文本结构和文本内容（也称为语义semantics）以便浏览器能正确的显示，同时可以让搜索引擎更好的捕捉你网页的内容。

语义是指对一个词或者句子含义的正确解释。
语义化标签强调的是 HTML 的结构和HTML标签的意义，而不是它显示的样式( 表现 )。

标题与段落

HTML有6种级别的标题, h1~h6。
6种级别的标题表示文档的6级目录的层级关系，比如说： <h1> 用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3> ，以此类推
一篇普通的文章，标题级别建议控制在3级，其中 <h1> 作为文章的主标题，一般只有一个。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落<p>前后会自动</p>换行

标题段落

文本格式化

<strong>语气加重</strong>
<b>文字加粗</b>
<hr />
<em>强调文本</em>
<i>斜体文本</i>
<hr />
<del>被删除的文字</del>
<s>删除线</s>
<hr />
<ins>插入的文字</ins>
<u>下划线</u>
<hr />
<mark>被标记的文本</mark>
<br /><br />
<q>这是短引用</q>
<blockquote>这是长引用</blockquote>
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
计算机代码：<code>print("hello world")</code>
<br />
<pre>
锄禾日当午,
汗滴禾下土。
谁吃盘中餐,
粒粒皆辛苦。
</pre>
<address>
Mailbox by <a href="mailto:1838576587@qq.com">1838576587@qq.com</a>.<br>
WebSite：https://www.timeic.xyz<br />
</address>
<p>这段文本包含 <sub>下标</sub></p>
<p>这段文本包含 <sup>上标</sup></p>

语义化

其中<strong>、<em>、<del>、<ins>、<mark> 标签在语义上有突出强调的意义; 一般用在有特殊意义的词或句。

而<b>(bold)、<i>(italic)、<s>(Strikethrough)、<u>(underline) 标签仅代表显示上的效果，没有其他语义。

<hr> 水平线，<br> 换行

<q> 为短引用(两端自动加双引号)，引用一段或一句文本。

<blockquote> 为长引用(起始缩进)，引用一篇或一章文本。

<cite> 作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。

<code> 表示计算机代码(如：C、Java、JavaScript、Python)

<pre> 预格式文本(以文本编辑时的格式显示，可以使用 字符实体 在浏览器中显示HTML代码)。

<address> 表示作者联系信息

<sup>(上标字)和<sub>(下标字)可用于内容表示脚注、化学或数学的 公式符号 等。

列表

<!-- 无序列表 -->
<ul>
  <li>榴莲</li>
  <li>臭豆腐</li>
  <li>鲱鱼罐头</li>
  <li>西红柿</li>
</ul>

<!-- 有序列表 -->
<ol>
  <li>刘德华 10000</li>
  <li>刘若英 1000</li>
  <li>Time Science</li>
</ol>

<!-- 自定义列表 -->
<dl>
  <dt>关注我们</dt>
  <dd>新浪微博</dd>
  <dd>官方微信</dd>
  <dd>电话联系</dd>
</dl>

<ul> 标签为 无序列表 ，<ol> 标签为 有序列表

<li> 标签为列表中的项目

<dl> 标签为自定义列表

<dt> 标签为列表项目( key )

<dd> 标签为列表项的内容( value )

空白

当浏览器运行并解析 HTML 页面时，遇到两个或两个以上的连续空格或换行时，只将其显示为一个空格效果。这种特性叫做白色空间折叠。

<html>
    <head>
        <title>空白</title>
    </head>
    <body>
        <p>多个空格         但只会显示一个空格</p>
    </body>
</html>

字体样式

font-family（字体族）

字体族（如：Times Consolas Arial 微软雅黑…）是指在字体设计上具有相关性的多种字体的集合（如：常规粗体斜体斜粗体…）

描述：font-family 属性指定的是一个优先级从高到低的可选字体列表，该列表由字体名或者字体族名组成。浏览器会选择列表中第一个该计算机上有安装的字体。

默认值：由用户代理决定

继承性：Yes

可选值：

<family-name>（字体族名）

说明：如果字体名称为不合法的标识符( 与CSS语法冲突，如：@、#、空格等 )，则需要加上单引号或者双引号。

<generic-name>（通用字体族名）

Code	Description
`serif`	衬线字体，笔画结尾有特殊的装饰线或衬线。
`sans-serif`	无衬线字体，即笔画结尾是平滑的字体。
`monospace`	等宽字体，即字体中每个字宽度相同。
`cursive`	草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。
`fantasy`	梦幻字体。主要是那些具有特殊艺术效果的字体。

例：

1
2
3

p {
  font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
}

说明：字体的选定是逐字进行的。也就是说即使某个字符周围都在某个字体中可以显示，但该字符在当前的字体文件中没有适合的图形，那么会继续尝试列表中靠后的字体。

font-size（字体大小）

描述：设置字体大小

继承性：Yes

默认值：medium（标准大小，一般为16px，具体大小由用户代理决定）

可选值：

Name	Value
绝对大小值	`xx-small`、`x-small`、`small`、`medium`、`large`、`x-large`、`xx-large`
相对大小值	`larger`、`smaller`
长度值(单位)	`px`、`em`、`rem`
百分比值(单位)	( % ) 该值是相对于父级元素的字体大小的百分比。

PS：绝对大小值是固定的。相对大小值是相对于父元素的字体大小。
长度值中单位px(像素)属于绝对大小值，其大小由屏幕分辨率决定。
而单位em和rem属于相对大小值，em相对于父元素的字体大小，rem相对于根元素的字体大小。

font-weight（字体加粗）

描述：设置字体的粗细程度。

继承性：Yes

默认值：normal（常规粗细）

可选值：

Name	Value
绝对值	`normal` 和 `bold` 两个值。`normal` 与数字值 `400` 等价，`bold` 与数字值 `700` 等价。
相对值	`lighter` 和 `bolder` 两个值。比从父元素更细（lighter）或更粗（bolder）
数字值	介于 100 ~ 900 之间的值。

font-style（斜体）

描述：从font-family属性设置的字体族中选择italic或oblique样式。

继承性：Yes

默认值：normal（常规字体）

可选值：

Name	Value
常规字体	`normal`
斜体	`italic`
倾斜体	`oblique`

@font-face（自定义字体）

描述：@font-face 是 CSS 的 @规则中的一种，用来为 HTML 页面引入自定义字体(从服务器中下载字体)。通过 @font-face 我们可以自己来准备字体文件，从而可以消除对用户电脑字体的依赖。

@font-face {
  font-family: <family-name>;
  src: <src>;
  unicode-range: <unicode-range>;
  font-weight: <font-weight>;
  font-style: <font-style>;
}

font-family：所指定的字体名字将会被用于 font-family 属性。
src：通过 url() 函数指定远端服务器字体文件的目录位置，或者通过 local() 函数指定用户的本地计算机上的字体。
unicode-range 的作用是为@font-face所设置的字体限定一个应用范围，使用unicode编码来设置范围。汉字字符：U+4E00-9FCB，英文字符：U+00-024F
font-weight：同 font-weight 属性。
font-style：同 font-style 属性。

例：

@font-face {
    font-family: "My Helvetica";
    src: local("Helvetica Neue Bold"),  /* 优先从用户本地计算机中选择字体 */
    local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf)  /* 如果用户计算机中没有该字体则从服务器中下载该字体 */
}

body {
  font-family: "My Helvetica", sans-serif
}

说明：src 属性中的函数可以使用多个，多个之间使用逗号隔开。

字体简写（font）

描述：font 属性可以用来作为 font-style、font-weight、font-size、line-height 和 font-family 属性的简写

1	font: <font-style> <font-weight> <font-size/line-height> <font-family>

例：

1
2
3

body {
	font: bold italic 30px/3.2 微软雅黑, 'Time New Roman', Times, serif;
}

文本样式

text-decoration（文本修饰线）

描述：文本的修饰线外观（下划线、上划线、贯穿线/删除线）

继承性：No

默认值：none

例：

<style>
p{
  text-decoration: line-through red wavy;
}
</style>
<p>I'd far rather be happy than right any day.</p>

text-decoration属性是一种简写属性，普通属性如下：

text-decoration-line（定义修饰线的位置）
- none 默认值，无修饰线。
- underline 定义文本下方的一条线。
- overline 定义文本上方的一条线。
- line-through 定义穿过文本的一条线。
text-decoration-color（定义修饰线的颜色）
- 颜色值
text-decoration-style（定义修饰线的样式）
- solid 实线。
- double 双实线。
- dotted 点划线。
- dashed 虚线。
- wavy 波浪线。

line-height（行高）

描述：控制多行文字之间的垂直距离。

继承性：Yes

默认值：normal（常规行高）

属性值：

值	含义
`normal`	常规值，具体值由用户代理决定
数值	最终的效果值是该数字值乘以该元素的字体大小（font-size）
长度值(`px` `em` `rem`)	如果使用 `em` 单位的可能会产生不确定的效果。
百分比值	最终的效果值是该百分比值乘以该元素的字体大小（font-size）。

如上图所示，红色线是顶线(top-line)、紫色线是中线(middle-line)、绿色线是基线(base line)、黄色线是底线(bottom-line)
行距指的是上一行的底线到下一行的顶线之间的距离，即上一行的黄色线到下一行的红色线之间的距离。
字体大小(font-size)指的是顶线到底线的距离，即红色线到黄色线之间的距离。
CSS中 字体大小 + 行距必须等于行高。

letter-spacing（字母间距）

letter-spacing

描述：控制文本字符的间距。

继承性：Yes

默认值：normal（常规间距）

属性值：

值	含义
`normal`	常规间距
长度值(`px` `em` `rem`)	指定文字间的间距以替代默认间距，可以是负值。

word-spacing（单词间距）

描述：控制单词之间的距离(单词以空格为分割)。

继承性：Yes

默认值：normal（常规间距）

属性值：

值	含义
`normal`	常规值，具体值由浏览器决定
长度值(`px` `em` `rem`)	指定单词间的间距以替代默认间距。

text-align（文本对齐方式）

描述：设置行内盒子(如：行内元素、文本)相对于其所在的块元素中的水平对齐方式。

继承性：Yes

默认值：start

属性值：

值	含义
`start`	如果内容方向是左至右的话则等于 left，反之则为 right。
`end`	如果内容方向是左至右的话则等于 right，反之则为 left。
`left`	行内内容向左侧边对齐。
`right`	行内内容向右侧边对齐。
`center`	行内内容居中。
`justify`	文字向两侧对齐，对最后一行无效。
`justify-all`	和 justify 一致，但是强制使最后一行两端对齐。

text-align

vertical-align（垂直对齐方式）

描述：设置行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

继承性：No

默认值：baseline

属性值：

vertical-align 属性可以被应用于 2 种环境：

1.设置某个行内元素的盒子模型与其父级容器的垂直对齐方式。

2.设置表格中某个单元格中内容的垂直对齐方式。

应用于行内元素的值
- 相对于父级元素的值
  - baseline：使元素的基线与父元素的基线对齐。
  - sub：使元素的基线与父元素的下标基线对齐。
  - super：使元素的基线与父元素的上标基线对齐。
  - text-top：使元素的顶部与父元素的字体顶部对齐。
  - text-bottom：使元素的底部与父元素的字体底部对齐。
  - middle：使元素的中部与父元素的基线加上父元素 line-height 的一半对齐。
  - 长度值(px em rem)：使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
- 相对于行的值
  - top：使元素及其后代元素的顶部与整行的顶部对齐。
  - bottom：使元素及其后代元素的底部与整行的底部对齐。
应用于表单单元格元素的值
- baseline：使单元格的基线，与该行中所有以基线对齐的其它单元格的基线对齐。
- top：使单元格内边距的上边缘与该行顶部对齐。
- middle：使单元格内边距盒模型在该行内居中对齐。
- bottom：使单元格内边距的下边缘与该行底部对齐。

text-indent（文本缩进）

描述：设置块元素首行文本内容之前的缩进量。

继承性：Yes

默认值：0

属性值：

值	含义
`长度值(px em rem)`	允许使用负值
`百分比(%)`	使用所在块级元素宽度的百分比作为缩进量
`each-line`	文本缩进会影响第一行，以及使用 `<br>` 元素强制断行后的第一行。
`hanging`	该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。

overflow-wrap（文本断行）

描述：设置当文本超过指定容器的边界时是否断行。

继承性：Yes

默认值：normal

属性值：

normal：表示在正常的单词结束处换行。

对于西方文本，浏览器默认会在半角空格( )或连字符(-)的地方自动换行。
对于中文文本，可以在任何文字后面换行。

break-word：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

例：

<style>
.example {
    width: 13em;
    background: gold;
}

.break {
    overflow-wrap: break-word;
}
</style>
<p class="example">
FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher
Vorschriften)
</p>
<p class="example break">
FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher
Vorschriften)
</p>

overflow-wrap

white-space（空白处理）

描述：设置如何处理 HTML 元素中的空白。

继承性：Yes

默认值：normal

属性值：

－	换行符	空格和制表符	文字转行
`normal`	合并	合并	转行
`nowrap`	合并	合并	不转行
`pre`	保留	保留	不转行
`pre-wrap`	保留	保留	转行
`pre-line`	保留	合并	转行
`break-spaces`	保留	保留	转行

例：

<style>
  .example-element {
    width: 16rem;
  }
  .example-element p {
    background-color: #eee;
    padding: .75rem;
    text-align: left;
  }
  #example1 {
    white-space: normal;
  }
  #example2{
      white-space: nowrap;
  }
  #example3{
      white-space: pre;
  }
  #example4{
      white-space: pre-wrap;
  }
  #example5{
      white-space: pre-line;
  }
  #example6{
      white-space: normal;
  }
</style>
<div class="example-element" id="example1">
  <p>But ere she from the church-door stepped
    She smiled and told us why:
    'It was a wicked woman's curse,'
    Quoth she, 'and what care I?'

    She smiled, and smiled, and passed it off
    Ere from the door she stept—</p>
</div>
<div class="example-element" id="example2">
  <p>But ere she from the church-door stepped
    She smiled and told us why:
    'It was a wicked woman's curse,'
    Quoth she, 'and what care I?'

    She smiled, and smiled, and passed it off
    Ere from the door she stept—</p>
</div>
<div class="example-element" id="example3">
  <p>But ere she from the church-door stepped
    She smiled and told us why:
    'It was a wicked woman's curse,'
    Quoth she, 'and what care I?'

    She smiled, and smiled, and passed it off
    Ere from the door she stept—</p>
</div>
<div class="example-element" id="example4">
  <p>But ere she from the church-door stepped
    She smiled and told us why:
    'It was a wicked woman's curse,'
    Quoth she, 'and what care I?'

    She smiled, and smiled, and passed it off
    Ere from the door she stept—</p>
</div>
<div class="example-element" id="example5">
  <p>But ere she from the church-door stepped
    She smiled and told us why:
    'It was a wicked woman's curse,'
    Quoth she, 'and what care I?'

    She smiled, and smiled, and passed it off
    Ere from the door she stept—</p>
</div>
<div class="example-element" id="example6">
  <p>But ere she from the church-door stepped
    She smiled and told us why:
    'It was a wicked woman's curse,'
    Quoth she, 'and what care I?'

    She smiled, and smiled, and passed it off
    Ere from the door she stept—</p>
</div>

white-space

text-shadow（文本阴影）

描述：设置文字的阴影效果

继承性：Yes

默认值：none

属性值：

1	text-shadow: color offset-x offset-y blur-raduis;

color：可选项，设置文本内容的阴影颜色
offset-x：必选项，设置文本阴影在水平方向的偏移量
- 如果值小于 0 的话，则表示向左偏移
- 如果值等于 0 的话，则表示水平方向不发生任何偏移
- 如果值大于 0 的话，则表示向右偏移
offset-y：必选项，设置文本阴影在垂直方向的偏移量。
- 如果值小于 0 的话，则表示向上偏移
- 如果值等于 0 的话，则表示垂直方向不发生任何偏移
- 如果值大于 0 的话，则表示向下偏移
blur-raduis：可选项，设置文本内容的阴影模糊半径
如果没有指定，则默认为 0。值越大，模糊半径越大，阴影也就越大越淡

例：

<style>
.example1 {
    text-shadow: red 0 -10px; /* 阴影垂直偏移-10px(向上移动10px) */
}
.example2 {
    text-shadow: 10px 10px 2px rgb(255, 0, 0), 20px 20px 2px blue, 30px 30px 2px blue; /* 多重阴影，中间用 ,号隔开 */
}
</style>
<p class="example1">这是文本阴影测试</p>
<p class="example2">这是多重文本阴影测试</p>

文本阴影测试

用户代理样式表（user agent stylesheet）

用户代理样式表是浏览器（如：Chrome、Safari、Firfox等）提供的默认样式，以便以满足“一般呈现期望”的方式呈现页面。例如，默认样式表将为字体大小、边框和元素之间的间距等内容提供基本样式

用户代理样式表会被开发者自定义的样式覆盖，因此你可以自己编写CSS将浏览器默认样式覆盖，如：reset.css、normalize.css

继承（inherited）

继承是指我们为某个元素设置的样式会同时应用到其下的后代元素中，比如针对body元素所设置的字体大小会自动应用到body下的后代元素中，继承的样式没有优先级，所以任何方式都可以将继承的样式覆盖（包括浏览器默认样式）。

继承的设计是为了方便我们的开发。利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样我不需要为其下每一个元素设置，即可将其下的所有元素都应用上该样式，但在CSS中，不是所有的样式都会被继承，例如背景和布局相关的样式就不会被继承，如果继承了则会导致内容或布局混乱，哪些属性会继承很大程度上是由常识决定的

控制继承：

CSS 为控制继承提供了几个通用的属性值。每个 css 属性都可以使用这些值