web前端从入门到放弃

apple_73086122

已于 2022-10-28 14:03:49 修改

阅读量943

点赞数 1

文章标签：前端 javascript 开发语言

于 2022-10-19 16:49:57 首次发布

本文链接：https://blog.csdn.net/apple_73086122/article/details/127330250

版权

一、HTML,CSS系列之导学

（一）拨云见日

HTML，CSS入门
切图流程：传统切图，智能切图
实战阶段：pc企业站布局，pc游戏站布局

1.什么是HTML、CSS？

做网站（n个网页形成）的编程语言
通过鼠标右键查看网页源代码，每一个网页就是一个.html文件

2.如何创建.HTML文件？

右键创建文本文档并修改后缀

3.vs code编辑器基本使用？

安装插件如语言包，
下载地址
ctrl + s：保存，ctrl + a：全选，ctrl + x：剪切，ctrl + z：撤销，ctrl + y：前进，shift + end：从头选中一行，shift + home：从尾部选中一行，shift + alt + ↓：快速复制一行，alt + ↑或↓：快速移动一行，tab：向后缩进，tab + shift：向前缩进，ctrl+d：选相同元素的下一个
设置：文件-首选项-设置（大小、是否换行word wrap）

4.chrome浏览器？

了解五大浏览器：Edge浏览器，chrome浏览器，Firefox浏览器，safari浏览器，opera浏览器

5.深入了解网站开发？

ui设计师
web前端开发工程师（H5开发）：设计稿→代码，数据库里的数据→显示到页面，HTML：结构， CSS：样式,JavaScript：行为
web后端开发工程师

6.web三大核心技术

HTML(超文本标记语言）基本结构和属性

超文本：文本内容 + 非文本内容（图片、视频、音频等）
语言：编程语言
html初始代码(每个.html文件都有的代码，要符合html文件的规范写法）：! + tab键（快速创建.html初始代码）

<!DOCTYPE html> 文档声明 ：告诉浏览器这是一个html文件
<html lang="en"> html最外层标签：包裹着所有html标签代码 lang="en"表示一个英文网站 lang="CN"表示一个中文网站
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 元信息 ：是编写网页中的一些赋值信息 charset="UTF-8"国际编码，让网页不出现乱码的情况
    <title>Document</title> 设置网页的标题
</head>
<body>
    显示网页内容的区域
</body>
</html>

标记(也叫做标签）：<单词>如 <header>
单标签 <header>
双标签 <header></header>
创建标签的快捷键：tab + 单词→<单词>，标签是可以上下排列，也可以组合嵌套

<header>
    hello warld
    <div>
        aaaa
        <div>bbbb</div>
        <div>bbbb</div>
        <div>bbbb</div>
    </div>
    <div>aaaa</div>
    <div>aaaa</div>
    <div>aaaa</div>
</header>

html常见标签含义

标签的属性：来修饰标签，设置当前标签的一些功能<标签属性="值“ 属性2=”值2“>

<header title="hello">hello world</header>
<footer title="hi">hi html</footer>

HTML注释：
写法：在浏览器中看不见，只能在代码中看到注释的内容
意义：把暂时不用的代码注释起来方便以后的使用，对开发人员的提升

<body>
    <！--hello world-->
    
    <！--登录-->
    ....
    <！--列表-->
    ....
    <！--留言信息-->
    ....
</body>

快捷添加注释与删除注释：ctrl + /或shift + alt + a

HTML语义化：根据网页中内容的结构，选择合适的HTML标签进行编写
好处：在没有CSS的情况下，页面也能呈观出很好的内容结构
有利于SEO，让搜索引擎爬虫更好的理解网页
方便其他设备解析（如屏幕阅读器、盲人阅读器等）
便于团队开发与维护

7.标题与段落？

标题→双标签：<h1></h1> ... <h6></h6>
在一个网页中，h1标题最重要，并且一个.HTML文件中只能出现一次h1标签
h5，h6标签在网页中不经常使用
段落→双标签：<p></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
    <p>这是一个段落</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>angelababy</h1>
    <h2>基本信息</h2>
    <p>杨颖......</p>
    <p>......</p>
    <h2>早年经历</h2>
    <p>......</p>
    <h2>个人生活</h2>
    <p>......</p>
    <p>......</p>
</body>
</html>

8.文本修饰标签？

强调→双标签：<strong></strong>(加粗）、<em></em>（斜体）
区别：写法和展示效果是有区别的，一个加粗一个斜体
区别：strong的强调性更强，em强调性稍弱
下标→双标签：<sub></sub>
上标→双标签：<sup></sup>
删除→双标签：<del></del>
插入→双标签：<ins></ins>
注：一般情况下，删除文本都是和插入文本配合使用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
    <strong>这是一段需要强调的文本</strong>
    <em>这是一段需要强调的文本</em>
    </p>
    <p>
        a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup> H<sub>2</sub>O
    </p>
    <p>
        促销：原价<del>300</del>，现价<ins>100</ins>。
    </P>
    <p>北京著名的高档百货店——<em>赛特购物中心</em>即将闭店。昨天，赛特购物中心总台服务人员表示<strong>“如果手里有购物卡请尽快到店消费”。</strong>据这位服务人员介绍，目前賽特购物中心正在进行请仓大用卖。<del>特价电视原价3600元</del>，<ins>现清仓价只需1300元</ins>。

    
    </P>
</body>
</html>

9.图片标签.HTML？

图片标签→单标签：img
src：引入图片的地址
alt：当图片出现问题的时候，可以显示一段友好的提示文字
title：提示信息
width、height：图片的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="引入图片的地址" alt="当图片出现问题的时候，可以显示一段友好的提示文字" title="这是一张图片" width="图片宽度" height="图片高度"> 
</body>
</html>

10.路径？

绝对路径：.在路径中表示当前路径 …在路径中表示上一级路径
相对路径：图片位置(尽量避免反斜线，不规范）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <img src="./图片的地址" alt="">  相对路径
     <img src="../上一级中图片的地址" alt="">  相对路径
    <img src="D:/某盘中某个文件夹中的图片" alt=""> 绝对路径
</body>
</html>

11.链接标签？

跳转链接标签→双标签：<a></a>
href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下在当前页面打开_self，新窗口打开_blank
<base>→单标签：作用就是改变链接的默认行为的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base target="_blank">
</head>
<body>
    <!-- <a href="http://www.baidu.com">访问百度</a>
    <a href="网址"> 
         <img src="D:/被设置链接的图片" alt=""> 
     </a> -->
     <!-- <a href="http://www.baidu.com" target="_blank">访问百度</a> -->
     <a href="http://www.baidu.com" target="_blank">访问百度</a>
     <a href="http://www.baidu.com" target="_blank">访问百度</a>
     <a href="http://www.baidu.com" target="_blank">访问百度</a>
     <a href="http://www.baidu.com" target="_blank">访问百度</a>
     <a href="http://www.baidu.com" target="_blank">访问百度</a>
</body>
</html>

12.跳转锚点？

实现一：#号 id属性

    <a href="#html">HTML</a>
    <a href="#css"> CSS</a>
    <a href="#Javascript">JavaScript</a>
    <h2 id="html">HTML超文本标记语言</h2>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>   
    <h2 id="css">CSS层叠样式表</h2>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <h2 id="Javascript">JS脚本</h2>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>

实现二：#号 name属性（注意name属性加给的是a标签）

    <a href="#html">HTML</a>
    <a href="#css"> CSS</a>
    <a href="#Javascript">JavaScript</a>

    <a name="html"></a>
    <h2>HTML超文本标记语言</h2>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <a name="css"></a>   
    <h2>CSS层叠样式表</h2>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <a name="Javascript"></a>
    <h2>JS脚本</h2>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>

13.特殊字符？

& + 字符
编写一些文本时，经常会遇到输入法无法输入的字符，如 ®️（注册商标）、©️（版权符）等，还有往一段文字中加入多个空格时，页面井不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码
解决冲突，左右尖括号、添加多个空格的实现

14.列表标签？

无序列表→<ul>、<li>符合嵌套的规范
<ul>、<li>（列表的最外层容器、列表项）必须组合出现，他们之间是不能有标签的
type属性:改变前面标记的样式（一般都用css去控制）

正确的写法
<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>
错误的写法
<ul>
    <p>
       <li>第一项</li>
    </p>   
</ul>

有序列表→<ol>、<li>（列表的最外层容器、列表项）一般用的比较少，可以用无序列表来实现
type属性:改变前面标记的样式（一般都用css去控制）

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表→<dl>(定义列表）、<dt>（定义专业术语或名词）、<dd>（对名词进行解释和描述）：列表项需要添加标题和对标题进行描述的内容

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠式样表</dd>
    <dt>JavaScript</dt>
    <dd>网页脚本语言</dd>
</dl>

注：列表之间可以互相嵌套，形成多层级的

<ul>
    <li>
        辽宁省
        <ul>
            <li>沈阳</li>
            <li>大连</li>
            <li>丹东</li>
        </ul>
    </li>
    <li>
        山东省
        <ul>
        <li>济南</li>
        <li>青岛</li>
        <li>烟台</li>
    </ul>    
    </li>
</ul>

在这里插入图片描述

15.表格标签？

table、tr、th、td、caption等（之间是有嵌套关系的，要符合嵌套规范）
语义化标签：thead、tbody、tfood（在一个table中，tbody可以出现多次，但是thead、tfood只能出现一次）

<table>
    <caption>天气预报</caption>
    <thead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2019年1月1日</td>
            <td>晴朗</td>
            <td>天气晴朗，适合出门</td>
        </tr>
        <tr>
            <td>2019年1月2日</td>
            <td>大雨</td>
            <td>有雨，出门请带伞</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述

boder（表格边框）、cellpadding（单元格内的空间）、cellspacing（单元格之间的空间）、rowspan（合并行）、colspan（合并列）
align（水平对齐）：left、center、right
valign（垂直对齐）：top、midddle、bottom

<table border="1" cellpadding="30" cellspacing="30">
    <caption>天气预报</caption>
    <thead>
        <tr align="right">
            <th colspan="2">日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </thead>
    <tbody>
        <tr valign="top">
            <td rowspan="2">2019年1月1日</td>
            <td>白天</td>
            <td>晴朗</td>
            <td>天气晴朗，适合出门</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td>晴朗</td>
            <td>天气晴朗，适合出门</td>
        </tr>
        <tr valign="bottom">
            <td rowspan="2">2019年1月2日</td>
            <td>白天</td>
            <td>大雨</td>
            <td>有雨，出门请带伞</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td>大雨</td>
            <td>有雨，出门请带伞</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述

18.表单标签？

form、input（单标签）、textarea多行文本框、select下拉菜单、option下拉菜单、label辅助表单…常见属性：checked、disabled、name、for…
input标签要有一个type属性，决定是什么控件

<form action="表单提交地址">
    <h2>输入框</h2>
    <input type="text">
    <h2>密码框</h2>
    <input type="password">
    <h2>复选框</h2>
    <input type="checkbox">苹果
    <input type="checkbox">香蕉
    <input type="checkbox">葡萄
    <h2>单选框</h2>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h2>上传文件</h2>
    <input type="file">
    <h2>提交按钮和重置按钮</h2>
    <input type="submit">
    <input type="reset">
</form>

在这里插入图片描述

checked(开始被选中)<input type="checkbox" checked>苹果
disabled(不可被选中)<input type="checkbox" disabled>苹果
placeholder(提示输入什么内容)<input type="text" placeholder="请输入密码">

<select>
    <option selected disabled>请选择</option> 默认初始请选择且不可多选
    <option>北京</option>
    <option>上海</option>
    <option>杭州</option>
</select>
<select size="2"> 多选显示两项
    <option>北京</option>
    <option>上海</option>
    <option>杭州</option>
</select>
<select multiple> 多选
    <option>北京</option>
    <option>上海</option>
    <option>杭州</option>
</select>
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label> 增大单选范围

在这里插入图片描述

19.div和span？

div：做一个区域划分的块
span：对文字进行修饰，内联

20.css基础语法？

选择器{ 属性1：值1；属性2：值2 }
width：宽 height：高 background：背景色
长度单位：px→像素
%→百分比例外容器→600px 当前容器50%→300px

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div{ width:25%;height:100px;background-color:red;}
       style{background-color: blue;}
   </style>
</head>
<body>
   <div>这是一个块</div>
   <span>这是一个内联</span>
</body>
</html>

21.css样式的引入方式？

内联样式：style属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width:25%;height:100px;background-color:red;">这是一个块</div>
    <span style="background-color: blue;">这是一个内联</span>
</body>
</html>

内部样式：style标签注：优点可以复用代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{ width:25%;height:100px;background-color:red;}
        style{background-color: blue;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <span>这是一个内联</span>
</body>
</html>

区别：内部样式代码可以复用、符合w3c的标准规范，进行让结构和样式的分开处理
外部样式
引入一个单独的css文件，name.css，通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性表示资源的地址

div{width: 100px;height: 100px;background-color: red;} css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./引入的css文件">
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

通过@import方式引入外部样式（这种方式有很多问题，不建议使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url("./引入的css文件");
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

link和@import的区别

22.css中的颜色表示法？

单词表示法：red、blue、green、yellow…
十六进制表示法：0123456789abcdef #000000(最小值黑色) #ffffff(最大值白色)
rgb三原色表示法：rgb(255,255,255) 取值范围0—255
提取颜色的工具：提取颜色的下载地址
或Photoshop工具

23.css背景样式？

background-color 背景色
background-image 背景图 url（背景图）默认：会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat（x，y都进行平铺，默认值）
no-repeat 都不平铺
background-position 背景位置
x y：number（px、%）单词
x：left、center、right
y：top、center、bottom
background-attachment 背景图随滚动条移动方式
scroll：默认值（背景位置按照当前元素偏移）
fixed（背景位置按照浏览器进行偏移）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{height:2000px;}
        div{width: 300px;
            height: 300px;
            background-color: red;
            background-image:url(./) ; 背景图路径
            background-repeat: no-repeat; 背景图不延x轴y轴平铺
            background-position: 50% 50%; 背景图居中
            background-attachment: scroll; 背景图随滚动条移动方式
        }
    </style>
</head>
<body>
    
</body>
</html>

24.css边框样式？

border-style：边框样式
solid：实线 dashed：虚线 dotted：点线
border-width：边框大小
px…
border-color：边框颜色
red #f00…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 300px;height: 300px;border-style: solid;border-width: ;border-color: red;border-width: 3px;} 添加边框
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框也可以对某一边进行单独设置：border-left-style：中间是方向 left、right、top、bottom
颜色：透明颜色：transparent

<style>
 div{width: 300px;height: 300px;border-right-style: solid;border-width: ;border-color: red;border-width: 3px;} 一边单独添加边框
</style>

25.css文字样式？

font-family：字体类型
英文、中文
衬线体、非衬线体
注意点：设置多字体按照计算机中已有的字体，字体间出现空格要加引号
font-size：字体大小
默认：16px
写法：number（px）单词（small large…不推荐使用）
font-weight：字体粗细
模式：正常（normal）加粗（bold）
写法：单词（normal、bold）+ number（100 200…px 100到500都是正常的，600到900都是加粗的）
font-style：字体样式（normal）斜体（italic）
写法：单词（normal、italic）
注意：oblique也表示斜体，用的比较少
区别：1.italic带有倾斜字体的才可以设置倾斜操作2.oblique没有倾斜属性的字体也可以设置倾斜操作

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div{font-family: 宋体;} /* simsun可以同时修饰英文和中文 */
    div{font-size: 30px;}
    div{font-weight: 600;}
    div{color: red;}
    div{font-style: oblique;}
    </style>
 </head>
 <body>
    <div>这是一段文字</div>
 </body>
 </html>

26.css段落样式？

文本装饰：text-decoration
下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
注意：添加多个文本修饰→用空格隔开如line-through underline-overline
文本大小写（针对英文段落）：text-transform
大写：uppercase
小写：lowercase
只针对首字母大写：capitalize
文本缩进：text-indent
首行缩进
em单位：相对单位，1em永远与字体大小相同
文本对齐方式：text-align
对齐方式：left、right、center、justify（两端点对齐）
定义行高：line-height（一行文字的高度，上边距和下边距是等价关系）
默认行高：不是固定值，而是变化的，根据当前字体的大小再不断的变化
取值：1.number:px、scale（比例值，跟文字大小成比例的）
字之间的间距：letter-spacing
词之间的间距：word-spacing（只针对英文段落）
英文和数字不自动拆行的问题：
强制拆行（针对英文）：word-break：break-all（非常强烈的拆行），word-wrap：break-word（不是那么强烈的拆行，会产生一些空白区域）

27.css复合样式？

复合的写法：是通过空格的方式实现的，复合写法有的是不需要关心顺序的，例如background、border，有的是需要关心顺序，例如font

background：red url（）repeat 0 0
border：1px red solid
fong
注：最少要有两个值size family（顺序）
weight style size family（正确）
style weight size family（正确）
style weight size/line-height family（正确）
注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 300px;
            height: 300px;
            background: red url(./) no-repeat center center;
            border: 2px black solid;
            font: 30px 宋体;}
    </style>
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

28.css选择器？

id选择器
#elem{} id="elem"
注：1.在一个页面中，id是唯一值，只能出现一次，出现多次不符合规范
2.命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
3.驼峰写法：searchButton(小驼峰)SearchButton(大驼峰) 短线写法：search-small-searchButton 下划线写法：search_small_button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{background: red;}
        #div2{background: blue;}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <div id="div2">这是一个块</div>
</body>
</html>

class选择器
.elem{} class="elem"
注：1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
4.标签+类的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.box{background: red;} p标签带有box
        .content{font-size: 30px;}
    </style>
</head>
<body>
    <div class="box">这是一个块</div>
    <div class="box">这又是一个块</div>
    <p class="box content">这是一个段落</p>
</body>
</html>