当前位置：首页 > news >正文

Html5+Css3学习笔记

news 2025/7/9 6:50:32

Html5 + CSS3

一、概念

1.什么是html5

html: Hyper Text Markup Language ( 超文本标记语言)

文本：记事本

超文本：文字、图片、音频、视频、动画等等（网页）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

html语言经过浏览器的编译显示成超文本

开发者使用5种浏览器（拥有不同的内核）

edge，谷歌，firefox，safari, 欧朋浏览器

国内目前的浏览器用的还是google的内核

谷歌性能最好，v8引擎，解析速度高

2.什么是css3

css: Cascading Style Sheet ( 级联样式表)

作用：美化网页

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.w3c标准

w3c： World Wide Web Consortium （万维网联盟）

成立于1994 年，web技术领域最权威最具有影响力的国际中立性技术标准机构

官网：https://www.w3.org/

W3C标准包括：

结构化标准化语言（HTML、XML）
表现标准语言（css）
行为标准（javaScript — DOM、ECMAScript）

4.前端学什么？

结构化标准化语言（HTML、XML）骨架
表现标准语言（css）皮囊
行为标准（javaScript — DOM、ECMAScript）动画交互

二、开发工具

VSCode官网

三、html和css的语法

1.基本语法

1.1html的语法

在vscode 直接打html就会自动给出基本格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

1.2html的标签

1. 标签的基本结构

HTML标签通常由尖括号<和>包围的关键词构成，如<html>。
大多数HTML标签是成对出现的，称为双标签。例如，<html>和</html>分别作为HTML文档的开始和结束标签。第一个标签是开始标签，第二个标签是结束标签，它们之间的内容构成了标签的主体。
有些特殊的标签是单个标签，称为单标签或自闭合标签，例如<br />用于换行，它不需要结束标签。

2. 标签的分类

HTML标签可以根据其功能分为不同的类型，包括但不限于以下几种：

结构标签：用于定义HTML文档的整体结构，如<html>、<head>、<body>等。
文本格式化标签：用于改变文本的显示方式，如<h1>到<h6>用于定义六级标题，<p>用于定义段落，<br />用于换行等。
链接标签：用于创建超链接，如<a href="URL">链接文本</a>。
图像标签：用于在HTML页面中嵌入图像，如<img src="图像URL" alt="图像描述" />。
列表标签：用于创建列表，包括无序列表<ul>和有序列表<ol>，以及列表项<li>。
表格标签：用于创建表格，包括<table>、<tr>（表格行）、<th>（表头单元格）、<td>（表格单元格）等。
表单标签：用于创建表单，收集用户输入，包括<form>、<input>、<textarea>、<select>等。
布局标签：如<div>和<span>，用于布局和样式控制。<div>是块级元素，通常用于布局；<span>是行内元素，用于对文本的某部分进行样式控制。

1.3css的语法

选择器 {声明1;声明2;
}
如：
h1 {font-size: 50px;color: 'red'
}

1.4 入门代码

<!DOCTYPE html>
<html lang="en"> <!-- 设置语言为英语 -->
<head><meta charset="UTF-8"> <!-- 设置网页编码格式 UTF-8是国际编码，支持各种语言 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 使页面在手机上自适应 --> <title>02css基本语法</title><style>h1 {font-size: 50px;  /*font：字体， font-size：字体大小， px为像素*/font-family: '宋体'; /*字体类型*/font-weight:bold;   /*字体粗细  bold:就是600*/font-style:normal;  /*italic:斜体*/color: #00f;  /*颜色可以三种表示方式：英文 red、pink   rgb(250,0,0)    十六进制: #000000两位表示，但是两位相同可以用一位简写 如#00f */}</style>
</head>
<body><h1>我爱中国</h1><h2>我爱中国</h2><h3>我爱中国</h3><h4>我爱中国</h4><h5>我爱中国</h5><h6>我爱中国</h6>我爱世界
</body>
</html>

经验：css的最后一条声明的“；”是可以不写的，但是W3C规范建议最后一条声明的结束也要把“；”写上

h1为标题标签

数字越大，字号越小,占据了一整行

html中的注释格式为

css中的注释格式为/* */

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.html种引入CSS样式

三种引入方式

行内样式
内部样式表
外部样式表

2.1 行内样式

样式写在标签里面

示例代码：

<h1 style="color: red;font-size: 50px;">行内样式</h1>
<h1 style="color: red;">行内样式</h1>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.2 内部样式表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {color: red;}</style>
</head>
<body><h1>标题1</h1><h1>标题1</h1>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

css语言写在style标签里，但还是在代码内部

优点
- 方便在同一个页面种修改样式
缺点
- 不利于多页面之间共享复用代码及维护，对内容于样式的分离不够彻底

2.3 外部样式表

css代码全部保存在扩展名为.css的样式中

HTML文件引用扩展名为.css样式表，有两种方式:

链接式

语法：
<head><link href="css/style.css" rel="stylesheet" type="text/css" />
</head>href:文件路径
rel:使用外部样式表，固定写法stylesheet
type:文件类型 (不是必须的)

案例：
common.css存放以下css代码h1 {font-size: 200px;color: red;
}---------------------------------------------------------------------------------------------<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05外部样式表-链接式</title><!-- 相对路径/绝对路径,推荐使用相对路径./ 表示当前文件夹 ../表示上一级文件夹 --><link rel="stylesheet" href="./css/common.css" />
</head>
<body><h1>Hello  外部样式-链接式</h1>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

导入式

# 语法：
<head><style><!--@import url('css的地址')--></style>
</head>

案例：<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06外部样式表-导入式</title><style type="text/css"><!-- @import url('./css/common.css');    --></style>
</head>
<body><h1>坤坤爱篮球</h1>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

链接式和导入式的区别：

标签是属于XHTML，@import是属于css2.1（版本落后）
使用链接的css文件先加载到网页种，再进行编译显示。而@import导入的css文件，客户端先显示HTML结构，再把css文件加载到网页中。link不会因为网速慢，先加载出未经美化的超文本
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

现在基本不使用导入式

3.CSS样式优先级

遵从如下原则：

行内样式 > 内部样式表 > 外部样式表
就近原则

代码示例：

h1 {font-size: 50px;color: red;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07css样式优先级</title><link rel="stylesheet" href="./css/style.css"> 外部演示表的样式<style> 内部样式表的样式h1 {color: blue;}h2 {color: red;}h2 {color: blue;}</style>
</head>
<body><h1 style="color: green;">北京欢迎你</h1>  行内样式表的样式<h2>武汉欢迎你</h2>
</body>
</html>

如果有多个相同的样式，最后一个会覆盖前面的，不相同的样式会叠加

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.CSS基本选择器

4.1 标签选择器

语法：

标签名 {属性：值;
}如：
h1 {font-size: 20px;
}

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-size: 16px;color: red;}</style>
</head>
<body><p>2024年6月份，全国居民消费价格同比上涨0.2%。其中，城市上涨0.2%，农村上涨0.4%；食品价格下降2.1%，非食品价格上涨0.8%；消费品价格下降0.1%，服务价格上涨0.7%。1—6月平均，全国居民消费价格比上年同期上涨0.1%。</p>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.2 类选择器

语法：

<style>.类名 {属性:值;}
</style><标签名 class="类名"></标签名>

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>09类选择器</title><style>.mycolor{color: blue;}.mysize {font-size: 50px;}</style>
</head>
<body><!-- 语法：如果有多个类选择器，可以在后面空格继续加 --><p class="mycolor mysize">我爱编程</p><font class="mycolor">Hello</font>
</body>
</html>

作用：可以多次使用

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.3 ID选择器

语法：

<style>#id选择器名称 {属性:值;}
</style><标签名 id="id选择器名称"></标签名>

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 不要以数字开头 */#first {font-size: 50px;}</style>
</head>
<body><p id="first">北京欢迎你</p>
</body>
</html>

标签选择器直接应用于html标签
类选择器，可以在页面中多次使用
id选择器，在同一个页面中只能使用一次。（实际上可以用多次，但是为了确保唯一性制定出来的规范）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.4 优先级

ID选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>11选择器的优先级</title><style>/* 类选择器 */.blueColor {color: blue;}/* 标签选择器 */p {color: green;}/* id选择器 */#colorPink{color: pink;}</style>
</head>
<body><p class="blueColor" id="colorPink">我爱编程</p>
</body>
</html>

5. CSS的高级选择器

层次选择器
结构伪类选择器
属性选择器

5.1 层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

前两个可能有用

后代选择器案例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p font {color: red;}</style>
</head>
<body><!-- 儿孙后代 --><p>我爱中国,<font>我<span>爱</span>世界</font></p><font>我爱编程</font>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

子选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 子选择器 */p>span {color: red;}</style>
</head>
<body><!-- 儿孙后代 --><p>我爱中国,<font>我<span>爱</span>世界</font></p><p>我爱编程,<span>我爱html</span></p>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传、

相邻兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div+p{color: blue;}</style>
</head>
<body><div>我爱编程<p>我爱世界</p><span>我爱湖北</span></div><p>我爱世界</p><p>我爱世界22</p>
</body>
</html>

通用兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div~p {color: red;}</style>
</head>
<body><div>我爱中国 <p>我爱世界</p></div><p>我爱编程</p><p>我爱学习</p>
</body>
</html>

5.2 结构伪类选择器

E:first-child	作为E的第一个子元素
E:last-child	作为最后一个子元素
E:nth-child(n)	第n个子元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

前三个够了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>16结构伪类选择器</title><style>/*给第一个li设置颜色为红色*/ul li:first-child {color: red;}/*给li中的最后一个设置颜色为蓝色*/ul li:last-child {color: blue;}/*给中间第二个孩子设置颜色为绿色*/ul li:nth-child(2){color: green;}/*给第2个p设置字体大小为50px*/p:nth-child(2) {font-size: 50px;}</style>
</head>
<body><p>p1</p><p>p2</p><p>p3</p><ul><li>li1</li><li>li2</li><li>li3</li></ul>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.3 属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素，且属性为val
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值以val结尾的任意字符串
E[attr*=val]	只要包含了val的任意字符串

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>17属性选择器</title><style>.demo a {width: 50px;height: 50px;}a[id] {background-color: yellow;}a[id=green] {background-color: green;}a[id=blue] {background-color: blue;}a[id=yellow] {background-color: yellow;}a[href^=http] {background-color: pink;}a[href$=cn] {background-color: black;}a[href*=ba] {font-size:  50px;}</style>
</head>
<body><p class="demo"><a href="http://www.baidu.com" target="_self" id="green">百度</a><a href="#">京东</a><a href="http://www.alibaba.cn">阿里</a><a href="https://www.thepaper.cn">澎湃</a></p></body>
</html>