HTML与CSS基础详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43644020/article/details/118960700

本文介绍了HTML的基础，包括HTML的简介、标签以及Web标准。接着，深入探讨了CSS，包括CSS的简介、选择器和常见声明。此外，还提到了Emmet语法在编辑器中的应用和Chrome浏览器的开发者工具用于查看和调试网页代码的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML基础

1.1、简介

网页

构成网站的基本元素
HTML是超文本标记语言（Hyper Text Markup Language）
由图片，链接，文字，声音，视频等标签元素组成

常用浏览器

IE、Edge、Firefox、Chrome、Safari、Opera…

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
Firefox	Gecko	火狐浏览器
Safari	Webkit	苹果浏览器
Chrome/Opera/Edge	Blink	谷歌浏览器，Blink其实是Webkit的分支

国内浏览器一般会采用Webkit/Blink内核，360、UC、QQ、搜狗…

Web标准

W3C（万维网联盟）我国际最著名的标准化组织

标准	说明
结构（Structure）	结结构用于对网页元素进行整理和分类，HTML
表现（Presentation）	用于设置网页元素的版式，颜色，大小等外观样式，CSS
行为（Behavior）	网页模型的定义及交互的编写，JavaScript

1.2、标签

双标：<开始属性1=xxx 属性2=xxx></结束>，单标：<开始 />
文档类型声明标签：html_（lang）、<meta />_{（charset、name、content、http-equiv）}
基础标签：head、title、body、h1-6、p、br、hr、b^[strong]、i^[em]、s^[del]、u^[ins]
常用标签：div、span、img_{（src、alt、title）}、a（href、target）
列表标签：ul、ol、li、dl、dt、dd
表单标签：form_{（action、method、name）}、input_{（type<checkbox\password\radio\reset\submit\text…>、name、value、checked、maxlength…）}、label_（for）、select、option_{（selected）}、textarea_{（rows、cols）}
表格标签：table_{（alain、cellpadding、cellspacing）}、tr、td_{（colspan、rowspan）}、th、thead、tbody

注释：，特殊字符：

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
&ensp;		半个空白位
&emsp;		一个空白位
		不断行的空白

注意：
1、文件夹分类好管理
2、相对路径：../xxx/xxx、绝对路径：盘符\xxx\xxx\xxx http://baidu.com
3、标签也可分为块级元素和行内元素

二、CSS基础

2.1、简介

CSS（Cascading Style Sheets）

标记语言，主要用于设置HTML中的文本内容，图片外形，版面布局等外观显示
语法规则：选择器，以及一条或多条声明，选择器 {属性:值;…}

特性：层叠（覆盖）性、继承性、优先级

选择器	权重	权级
继承或者 *	0,0,0,0	0
元素选择器	0,0,0,1	1
类选择器、伪类选择器	0,0,1,0	2
ID选择器	0,1,0,0	3
行内样式 style=“ ”	1,0,0,0	4
!important	$\infty$	5

注意：复合选择器具有权重叠加，但不会进位

核心：盒模型、浮动、定位

引入方式：

<!-- 行内式 -->
<div style="background: green;"></div>

<!-- 嵌入式 -->
<head>
    <style>
        .center {text-align:center;}
    </style>
</head>


<!-- 链接式 -->
<head>
	<link rel="stylesheet" href="test.css">
</head>

风格：

/* 紧凑 */
a,b {
    text-decoration: none; color: #000;
}

/* 展开 */
a,
b {
    text-decoration: none;
    color: #000;
}

2.2、选择器

基本选择器：

名称	介绍	语法	例子
通用选择器（Universal selector）	选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。	`` `ns\|` `\|`	`*` 将匹配文档的所有元素
元素选择器（Type selector）	按照给定的节点名称，选择所有匹配的元素。	`elementname`	`input` 匹配任何< input>元素。
类选择器（Class selector）	按照给定的 `class` 属性的值，选择所有匹配的元素。	`.classname`	`.index` 匹配任何 `class` 属性中含有 “index” 类的元素。
ID 选择器（ID selector）	按照 `id` 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。	`#idname`	`#toc` 匹配 ID 为 “toc” 的元素。
属性选择器（Attribute selector）	按照给定的属性，选择所有匹配的元素。	`[attr]` `[attr=value]` `[attr~=value]` `[attr\|=value]` `[attr^=value]` `[attr$=value]` `[attr*=value]`	`[autoplay]` 选择所有具有 `autoplay` 属性的元素（不论这个属性的值是什么）。

分组选择器：

名称	介绍	语法	示例
选择器列表（Selector list）	`,` 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。	`A, B`	`div, span` 会同时匹配<span>元素和<div>元素和元素。

组合选择器

名称	介绍	语法	例子
后代组合器（Descendant combinator）	（空格）组合器选择前一个元素的后代节点。	`A B`	`div span` 匹配所有位于任意 <div>元素之内的 <span>元素。
直接子代组合器（Child combinator）	`>` 组合器选择前一个元素的直接子代的节点。	`A > B \|`ul > li` 匹配直接嵌套在<ul>元素内的所有<li>元素。
一般兄弟组合器（General sibling combinator）	`~` 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。	`A ~ B`	`p ~ span` 匹配同一父元素下，<p>元素后的所有 <span>元素。
紧邻兄弟组合器（Adjacent sibling combinator）	`+` 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。	`A + B`	`h2 + p` 会匹配所有紧邻在 `h2` 元素后的 `<p>` 元素。
列组合器（Column combinator）	`\|\|` 组合器选择属于某个表格行的节点。	`A \|\| B`	例子： `col \|\| td` 会匹配所有<col>作用域内的`<td>` 元素。

伪类选择器

名称	介绍	例子
伪类	`:` 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。	`a:visited` 匹配所有曾被访问过的 `<a>` 元素。
伪元素	`::` 伪选择器用于表示无法用 HTML 语义表达的实体。	`p::first-line` 匹配所有 `<p>` 元素的第一行。

link、visited、hover、active、focus
需要注意先后顺序

2.3、常见声明

属性：width、height、border^{（border-width、border-style、border-color）}、border-collapse、padding、margin、font^{（font-style、font-weight、font-size/line-height、font-family）}、color、text-alain、text-indent、text-decoration、line-height、display^{（inline、block、inline-block）}、background^{（background-color、background-image、background-repeat、background-attachment、background-position）}、
单位：px、em、 %
颜色：颜色的名称（green）、十六进制（#547efe）、RGB（84, 126, 254）、RGBA（84, 126, 254,0.5）、HSL、HSLA

三、补充

3.1、Emmet语法(编辑器)

Emmet语法的前身是Zen coding，它使用缩写来提高html/css的编写速度

html语法：

<!-- div + tab -->
<div></div>

<!-- div * 2 -->
<div></div>
<div></div>

<!-- ul>li -->
<ul>
    <li></li>
</ul>

<!-- div + p -->
<div></div>
<p></p>

<!-- div.demo -->
<div class="demo"></div>

<!-- div#item -->
<div id="item"></div>

<!-- .item$*3 -->
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

<!-- div{填充内容} -->
<div>填充内容</div>

<!-- 综合：div>span.spot{$}*3 -->
<div>
    <span class="spot">1</span>
    <span class="spot">2</span>
    <span class="spot">3</span>
</div>

css语法：

/* 自动补全 */

/* 简写：好耶 */
/* w100 */
width: 100px;
/* ti2em */
text-indent: 2em;
/* lh26px */
line-height: 26px;
/* tdn */
text-decoration: none;

编辑器基本上都支持格式化代码，大部分编辑器都有很多不错的插件，例如vscode，webstorm等

3.2、chrome浏览器

点击页面查看对应代码，PC/移动端切换
Elements：渲染后的网页代码
- Styles：CSS样式、Event Listeners：事件监听、DOM Breakpoints：DOM断点、Properties：属性、Accessibility：
Console：
Sources：
Network：
Perfomance：
Memory：
Application：
Security：
Audits：