HTML笔记（HTML样式简介，字体基于内容的样式与物理样式、字符实体）

最新推荐文章于 2023-08-10 10:10:55 发布

缩缩北行鸟

最新推荐文章于 2023-08-10 10:10:55 发布

阅读量1k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_38801354/article/details/74058244

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML元素可以内嵌HTML元素。

1 HTML样式简介

通过HTML4.0，所有格式化代码都可以移出HTML文档，移入一个独立的样式表中

当浏览器读到一个样式表时，将会按照这个样式表对文档进行格式化。以下有三种插入样式表方式：

1.1 外部样式表

当样式要被应用到许多页面时，外部样式表是一个很好的选择，透过它可以只修改一个文件，就可以改变整个站点的外观。
这里常使用到<link>元素，<link>元素属于空元素，且只能出现在<head>部分，作用是：定义文档与外部文件的关系（最常用于连接样式表）。
必须属性有：rel –> 用于定义当前文档与被连接文档的关系（如告诉当前文档，被连接的文档是个CSS文件），short icon用于表示网站浏览器logo
href –> 用于定义连接文档的位置
type –> 用于定义连接文档的 MIME 类型（在HTML5版本中，这个属性可加可不加）
media –>属于可选属性，用于定义使用该样式的适用媒体类型，默认值为all，常用的还有screen 和print 。（媒体查询）
eg:

<head>
    <link rel="stylesheet" href="/html/csstest1.css" type="text/css" />
</head>

1.2 内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。在<head>部分通过<style>元素定义内部样式表。其中type="text/css" 是必须的。

<head>
    <style type="text/css">
    body {backgroundcolor:yellow}
    p {margin-left:20px}
    </font>
</head>

在内部样式表中可以使用@import指令，@import指令与<link> 元素作用类似，都是指示浏览器加载外部样式表。唯一区别在于具体语法和位置，@import指令要内嵌在<style> 元素中，而且得放在其它CSS规则之前。

<style type="text/css">
    @import url(url);
    h1 {
    color:gray;
    }
</style>

1.3 内联样式

当特殊的样式要应用到某个个别的元素时，就可以使用内联样式。
eg：

<body>
    <p style="backgroundcolor:yellow;margin-left:20px;">This is a paragraph</p>
</body>

2 字体基于内容的样式与物理样式

很多标签都可以用来改变文本的外观，并为文本关联其隐藏的含义。总地来说，这些标签可以分成两类：基于内容的样式（content-based style）和物理样式（physical style）。
而我们应该避免使用物理样式标签，应当尽可能地向浏览器提供上下文信息，并使用基于内容的样式。尽管现在浏览器不过是以斜体或者粗体字来显示这些文本，但是将来的浏览器和各种文档生成工具可能会以非常有创建的方式来利用这些基于内容的样式(盲人或残疾人浏览器)。[具体的延伸阅读]

2.1 文本格式化标签

以下元素都是短语元素。这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。如果只是为了达到某种视觉效果而使用这些标签的话，建议使用样式表，那么做会达到更加丰富的效果。这些标签不只是让用户更容易理解和浏览你的文档，而且将来某些自动系统还可以利用这些恰当的标签，从文档中提取信息以及文档中提到的有用参数。再一次强调，提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。

标签	用处
`<b>`	加粗，属于表现化标签
`<i>`	定义斜体字，属于表现化标签
`<big>`	定义大号字
`<small>`	定义小号字
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字(下划符)
`<del>`	定义删除字
`<tt>`	用于呈现类似打字机或者等宽的文本效果 (对于那些已经使用了等宽字体的浏览器来说，这个标签在文本的显示上就没有什么特殊效果了)
`<strong>`	定义加重语气，显示效果与加粗一致，属于结构化标签
`<em>`	定义着重文字，显示效果与斜体一致，属于结构化标签

2.2 “引用和术语定义”标签

以下元素都是短语元素。这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。如果只是为了达到某种视觉效果而使用这些标签的话，建议使用样式表，那么做会达到更加丰富的效果。这些标签不只是让用户更容易理解和浏览你的文档，而且将来某些自动系统还可以利用这些恰当的标签，从文档中提取信息以及文档中提到的有用参数。再一次强调，提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。

标签	用处
`<q>`	用于定义引入短语，显示的效果是双引号
`<blockquote>`	用于定义引入长句，显示效果是缩进
`<abbr>`	用于定义缩写，其中含有必要属性`title`,用于鼠标指向时说明
`<dfn>`	用于定义项目（如WHO组织），最好使用`<abbr>`替代
`<address>`	用于定义联系信息（作者/拥有者），显示效果为斜体
`<cite>`	用于定义著作的标题，显示效果为斜体
`<bdo>`	用于文本方向，要含有`dir`属性，否则默认为从左向右

2.3 “计算机输出”标签

以下元素都是短语元素。这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。如果只是为了达到某种视觉效果而使用这些标签的话，建议使用样式表，那么做会达到更加丰富的效果。这些标签不只是让用户更容易理解和浏览你的文档，而且将来某些自动系统还可以利用这些恰当的标签，从文档中提取信息以及文档中提到的有用参数。再一次强调，提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。

在显示计算机代码示例时, <kbd>,<samp>, 以及<code>元素全都支持固定的字母尺寸和间距。

标签	用处
`<kbd>`	用于表示该元素文本是从键盘输入的，显示效果为字体不同
`<code>`	用于定义编程代码，不保留多余的空格及折行
`<pre>`	用于定义预格式化的文本，多余的空格及折行都会得以保存。可以导致段落断开的标签如`<p>`都不能放进`<pre>`中, `<pre>`元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如`<a>`标签）放到`<pre>`块中时，就像放在`HTML/XHTML`文档的其他部分中一样即可。通常的页面源代码实例都是通过`<pre>`标签定义的,结合`<code>`标签,能得到更准确的语义大多数空白符（制表符、回车、空格）都会被浏览器忽略，不过利用这些空白符可以让你的HTML更有可读性
`<var>`	用于定义变量的名称，或者由用户提供的值。常与`<code>`和`<pre>`标签一起使用
`<samp>`	用于表示该文本为计算机代码样本，计算机输出示例，通常要结合上下文，显示效果为字体不同

3 字符实体

在HTML中，有些字符是预留的，比如在HTML不能使用大于或小于号，这是因为会与标签符号混绕，而且类如在段落中想多留几个空格，直接使用空格键是无法将效果显示出来的，所以就必须引入HTML 源代码中使用字符实体（character entities）。
字符实体有两种表达方式：&entity-name;或&#entity-number;，实体名字虽然容易记住，但有些浏览器不支持。具体的字符实体表可以看这里。