初级篇 2 - HTML（HyperText Markup Language）超文本标记语言 - 标签属性注意要点 - CSS 样式引用 - 单位 px - 笔记_web中采用html ( hypertext markup language,超文本标记语言)通信协-CSDN博客

本文链接：https://blog.csdn.net/qq_42701659/article/details/124859891

一、属性决定了标签的一切

大多数 HTML 元素可拥有属性；
属性决定了 HTML 元素的样式、位置、大小(长与宽)、颜色、字体、背景、边框、超链接等等；

1、HTML 属性注意要点

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签 < >
属性总是以名称/值对的形式出现，比如：name=“value”。

1.1、HTML 提示：推荐使用小写属性

属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。

1.2、单引号 ’ ’ 与双引号 " " 的作用区分

双引号是最常用的，不过使用单引号也没有问题。

但是，但是！！！

提示:
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

二、HTML 元素属性与外部样式引用 - CSS

1、选择器优先级选择问题

外联样式优先级低于内联样式，内联样式优先级低于行间样式

1.1、总体的选择器优先级

行间样式（行内样式优先级）> 内联样式优先级 > 外联样式优先级

1.2、行内样式

指的是 HTML 标签内的属性如 style、id、class 等指定了某种样式，因为一个标签代表了一行，所以叫行内样式或行间样式。

1.3、内联样式

指的是使用 <style> </style> 标签定义的样式，但是仍在同一张 HTML 文件内，所以被称为内联样式。
eg：

<head>
<style type="text/css">
* { color:red;}
body { color:green;}
#id { color:yellow;}
.class { color:blue;}
</style>
</head>

定义内联样式必须必须要让每一个 <style> 标签必须位于 head 头部区域
指定 type 属性，type 属性指示 <style> </style> 标签之间的内容。
值"text/css" 指示内容是标准的 CSS。
HTML 4.01 与 HTML5之间的差异，在 HTML5 中, type 属性不再是必须的。默认值为 "text/css"。

1.3.1、理解 style 标签的 media 属性

在 CSS 2 中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式),也是最常见的三种媒体类型。
因为其他的都差不多被废弃掉了，如下所示：

值	描述
all	用于所有设备
screen	用于电脑屏幕，平板电脑，智能手机等
print	用于打印机和打印预览
`speech`	应用于屏幕阅读器等发声设备
aural	已废弃。用于语音和声音合成器
braille	已废弃。应用于盲文触摸式反馈设备
embossed	已废弃。用于打印的盲人印刷设备
handheld	已废弃。用于掌上设备或更小的装置，如PDA和小型电话
projection	已废弃。用于投影设备
tty	已废弃。用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。用于电视和网络电视

1.3.2、media 属性关于窗口大小的自调整

CSS 3 之后，媒体查询功能得到了增强，不但可以查询媒体类型，而且还可以查询媒体的相关属性。

比如可以根据当前浏览器视口的尺寸的大小，来应用不同的 CSS 代码或者CSS 文件。

参考链接：

css 媒体（Media）类型是什么？有什么作用？

1.4、外联样式 link 标签

提示：如需链接外部样式表，请使用 <link> 标签。

<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
link 元素是空元素，它仅包含属性。
此元素只能存在于 head 部分，不过它可出现无数次。

属性	值	描述
type	MIME_type	规定被链接文档的 MIME 类型。
href	URL	定义被链接文档的位置。即 CSS 文件的位置
rel	`alternate` `archives` `author` `bookmark` `external` `first` `help` `icon` `last` `license` `next` `nofollow` `noreferrer` `pingback` `prefetch` `prev` `search` `sidebar` `stylesheet` `tag` `up`	必需。定义当前文档与被链接文档之间的关系。rel 是 `relationship`的英文缩写。
hreflang	language_code	定义被链接文档中文本的语言。
media	media_query	规定被链接文档将显示在什么设备上。
rev	reversed relationship	HTML5 不支持该属性。定义被链接文档与当前文档之间的关系。
sizes	`HeightxWidth` `any`	定义了链接属性大小，只对属性 rel=“icon” 起作用。HTML5 新增了 “`sizes`” 属性。
target	`_blank` `_self` `_top` `_parent` `frame_name`	HTML5 不支持该属性。定义在何处加载被链接文档。
charset	char_encoding	HTML5 不支持该属性。定义被链接文档的字符编码方式。

2、让 HTML 元素应用行内样式的三种方法 - style - id - class

style > id > class

我们可以知道，id，class，style的优先级别顺序为style高于id高于class，与顺序没有关系的

3、继承状态下的样式选择器优先级

如果是不同元素,还需要看元素父层级的样式:

1.子元素自身有样式,以自身的为准.
2.子元素未设定样式,此时如果父元素有定义的话套用父元素的样式否则以默认显示

参考链接：

css样式中的class，style与id的优先级问题

css样式优先级style＞id＞class＞标签

和 CSS 有着极其特殊关系的 div、id、class 标签

class 属性可以多用 class=" " （引号里面可以填入多个class属性），如 class="a b c" 以空格分开类
id 属性只能单独设置 id=" "（只能填写一个，多个无效）
div 是分割的作用，而 id 和 class 都是样式指定的标签，指定某种样式，还可以组合应用样式

链接标签的“爱恨原则” LoVe HaTe

我们知道a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active，并且这四个伪类如果对同一个元素设置同一个属性，那它们的声明顺序还有一定要求，一般大家都遵循“爱恨原则LVHA”（LoVeHAte），为什么是这个顺序？不能是其它顺序吗？

根据css优先级计算规则，伪类的特殊性值是0,0,1,0，4个伪类的特殊性值相同，那么后面声明的规则优先级高。当鼠标滑过a链接时，满足:link和:hover两个伪类，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；同理，当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。