【无标题】

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>