web前端学习第一周（1~20）

Shelter_____

已于 2022-10-28 15:37:21 修改

阅读量1.8k

点赞数

文章标签：前端学习

于 2022-10-18 19:37:28 首次发布

本文链接：https://blog.csdn.net/Shelter_____/article/details/127394753

版权

一、导学大纲

拨云见日

入门html及css；学习传统的和智能的切图；进入时间阶段：PC企业和PC游戏布局。

溯本求源

学习html，css的扩展，html5新语法，css3新语法及兼容于hark。

风生水起

讲弹性布局，网格布局，移动端布局和响应式布局；其中介绍的一个bootstrap框架是基于响应式布局的。

巧夺天工

预编译css，postcss，css架构的操作与使用；高级功能的讲解和css与js的交互。

二、html与css是什么

1、定义

二者是两种不同的编程语言，作用于网站开发的基础语言，需要配合使用。

2、html是什么

html

3、css是什么

css

三、宇宙第一编辑器VS Code

1、是什么

全称Visual Studio Code ,是微软的一个开源的，基于Electron的轻量代码编辑器。

2、基本使用

安装插件：语言包，open in browser等
设置：文件→首选项→设置
创建文件、文件夹、重命名和删除

四、Chrome浏览器

定义：这是一款更快速、轻松、安全的浏览器。

1、市面上常见的浏览器

常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。IE最新版为Edge。

五、网站开发

1、前提

大型网站的开发需要团队的配合，每个岗位都至关重要。

2、岗位介绍

UI设计师：设计网页稿提供给web前端开发工程师；
web前端开发工程师（H5开发）：把设计稿转换成代码；
web后端开发工程师：把数据库里的数据显示到页面上。

3、JavaScript与HTML和css之间的关系

JavaScript

4、web前端的三大核心技术

HTML(结构)
CSS(行为)
JavaScript(交互)

六、HTML的基本结构与属性

超文本标记语言，是网页制作必备的编程语言。

1、基本结构

超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>；可以上下排列，组合嵌套。
语言：编程语言
标记or标签: 单标签：<header>
双标签：<header></header>

2、属性

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

七、HTML初始代码

每个.html文件都有的代码，符合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>
    
</body>
</html>

1、拆分解析

<!DOCTYPE html>

告诉浏览器这是一个html文件。

<html lang="en">

html文件的最外层标签：包裹着所有html标签代码
lang="en"表示是一个英文网站，lang="zh-CN"表示中文网站。

<meta `charset="UTF-8"`>

元信息：是编写网页中的一些赋值信息

charset="UTF-8

国际编码，让网页不出现乱码的情况。

<title>Document</title>

设置网页的标题

<body>
    
</body>

显示网页内容的区域。

八、HTML注释

1、写法

<!-- 注释 -->

在浏览器中看不到，只能在代码中看到注释的内容。

2、意义

1、把暂时不用的代码注释起来，方便以后使用。
2、对开发人员进行提示。

九、HTML语义化

所谓的HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。

好处

1.在没有CSS的情况下了，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析（屏幕阅读器等）。
4.便于团队开发与维护。

十、标题与段落

1、标题

双标签：

<h1></h1>...<h6></h6>

在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。
h5和h6标签在网页中不经常使用。

段落

双标签：<p></p>

十一、文本修饰标签

1、强调

双标签：<strong></strong> <em></em>
区别：1.写法和展示效果是有区别的，一个加粗、一个斜体。

2、上下标

上标：<sup></sup>
下标：<sub></sub>

3、文本

删除：<del></del> 插入: <ins></ins>

十二、图片标签与图片属性

1、单标签

<img src="" alt="">

2、属性

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="https://img.zcool.cn/community/01f6dc5a74149ba80120a12366a277.jpg@1280w_1l_2o_100sh.jpg" alt="这是一张风景图" title="山水" width="1318" height="741">   
</body>
</html>

十三、引入文件的地址路径

1、相对路径

1、在路径中表示路径
2、在路径中表示上一级路径

<!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="../1.jpg" alt=""> -->
    
</body>
</html>

2、绝对路径

网络地址必须用斜线
windows盘符尽量用斜线

<!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="D:\img\fengjing\1.jpg" alt="">
</body>
</html>

十四、跳转链接

1、链接标签

<a href=""></a>

2、属性

href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开self 新窗口打开_blank
base：可以改变链接的默认行为（单标签），通常嵌套于head标签中

<a href="目标网址">访问网址</a>
插入图片
<a href="目标网址" target="_blank">
    <img src="图片地址" alt="">
</a>

<!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>
    
</body>
</html>

十五、跳转锚点

1、id

<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JS</a>

<h2 id="html">html语言</h2>
<p>段落</p>
<h2 id="css">css语言</h2>
<p>段落</p>
<h2 id="js">js语言</h2>
<p>段落</p>

2、name

<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JS</a>

<a name="html"></a>
<h2>html语言</h2>
<p>段落</p>
<a name="css"></a>
<h2>css语言</h2>
<p>段落</p>
<a name="js"></a>
<h2>js语言</h2>
<p>段落</p>

十六、特殊字符

1、&+字符
2、作用：解决冲突，比如添加多个空格
3、常用的：<>

十七、列表

1、无序列表

<ul>
    <li></li>
    <li></li>
</ul>

列表的最外层容器、列表项
它们必须是组合出现的，之间不能有其他标签的，符合嵌套的规范
li之间可以加入其他标签
type属性：改变前面标记的样式

<!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>
<ul type="circle">
    <li><a href="#id">第一项</a></li>
    <li><a href="#id">第二项</a></li>
</ul>
    
</body>
</html>

2、有序列表

<ol>
    <li></li>
    <li></li>
</ol>

一般用的比较少，可以用无序列表来实现

十八、定义列表

<dl></dl>：定义列表
<dt></dt>：定义专业术语或名词
<dd></dd>：对名词进行解释和描述

<!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>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
    </dl>  
</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></title>
</head>

<body>
    <header style="font-size:xx-large;">
        <strong>好美味小吃</strong>
    </header>
    <ul>
        <li>小吃类
            <ul>
                <li>煮粉干</li>
                <li>拌青菜</li>
                <li>蛋炒饭</li>
                <li>煎蛋</li>
                <li>米饭</li>
            </ul>
        </li>
    </ul>
    <footer>
        <em>亲，20元以上可送哦！！</em>
    </footer>
</body>
</html>

二十、表格

1、主要标签

    <table>：表格的最外层容器
    <tr>：定义表格行
    <th>：定义表头
    <td>：定义单元格
    <caption>:定义表格标题

注：之间是有嵌套关系的，要符合嵌套规范。

2、语义化标签

<thead>
<tbody>
<tfoot>

注：tBody是可以出现多次的，但是tHead、tFood只能出现一次。

<!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>
    <table>
        <caption>天气预报</caption>
        <thead>
            <tr>
                <th>日期</th>
            </tr>
        </thead>
         <tbody>
            <tr>
                <td>2022年10月22号</td>
            </tr>
         </tbody>
         <tfoot>
            
         </tfoot>  
    </table>
</body>
</html>
<thead>
    <tbody>
        <tfoot></tfoot>
    </tbody>
</thead>

3、表格属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐方式

<!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>
    <table border="1" cellpadding="30" cellspacing="0">
        <caption>课程安排</caption>
        <thead>
            <tr>
                <th>班次名称</th>
                <th>科目</th>
                <th>授课内容</th>
                <th>增值服务</th>
                <th>课时</th>
            </tr>
        </thead>
         <tbody>
            <tr>
                <td rowspan="3">真题精解班</td>
                <td>行测申论</td>
                <td>金科万年真题解析</td>
                <td rowspan="3">课后赠2套模拟卷24小时以内答疑</td>
                <td>48</td>
            </tr>
            <tr>
                <td>行测</td>
                <td>行测历年真题解析</td>
                <td>32</td>
            </tr>
            <tr>
                <td>申论</td>
                <td>申论历年真题解析</td>
                <td>16</td>
            </tr>
         </tbody>
         <tfoot>

         </tfoot>  
    </table>
</body>
</html>

二十一、表单

1、表单标签

form：表单的最外层容器
input：标签用于搜索用户信息，根据不同的type属性值，展示不同的控件。在这里插入图片描述

<!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>
    <form action="https://www.csdn.net/">
        <h2>输入框</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框</h2>
        <input type="password" placeholder="请输入密码">
        <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <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>
</body>
</html>

2、表单相关标签

textarea：多行文本框
select、option：下拉菜单
label：辅助表单

<!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>电子邮件：<input type="text"></p>
    <p>
        性别：<input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>
    </p>
    <p>生日：
        <select>
            <option selected disabled>请选择</option>
            <option>1998</option>
            <option>1999</option>
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>
            <option>2004</option>
            <option>2005</option>
        </select>年
    </p>
</body>
</html>

3、表格表单组合实例

注：表格有嵌套规范，表单没有，所以在表格表单时先写表单的最外层容器form

<!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>
    <form action="">
        <table border="1" cellpadding="30">
            <tbody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户信息</td>
                </tr>
                <tr align="center">
                    <td>用户名</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="center">
                    <td>密码</td>
                    <td><input type="text" placeholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

二十二、div和span

1、定义

div
标签定义 HTML 文档中的分隔（DIVision）或部分（section）。
div属于web前端的学习内容，其中div 标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。
div 可定义文档中的分区或节（division/section）。
div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。
span
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。

2、案例

<!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>
        <h2><a href="https://bbs.csdn.net"><span>CSDN</span>社区—开发者学习和交流的平台</a></h2>
        <a href="https://bbs.csdn.net">https://bbs.csdn.net</a>
        <p>
            CSDN社区在原论坛的基础上孵化，为中国软件开发者打造学习和成长的家园 hello， 大家好！ 我已申请成为今年“1024 程序员节｜用代码，改变世界” 主题征文活动的领航员， 可以提供创作 …
        </p>
    </div>
</body>
</html>

二十三、CSS基础语法

选择器 {属性1：值1；属性2：值2}

1、常用属性

width：宽
height：高
background-color：背景色
长度单位：
1、px→像素
2、%→百分比

<!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: 100px;height: 100px; background-color: red;}
        span{ width: 50px;height: 50px;background-color: blue;}
    </style>
</head>
<body>
    <div>HTML</div>
    <span>CSS</span>
</body>
</html>

二十四、样式

1、内部和内联

内联：行内、行间，在html标签上添加style属性来实现的。
内部：在style标签内添加的样式
注：内部样式的优点，可以复用代码。

内联<!-- <div style="width:100px;height: 100px;background-color: red;">这是一个块</div> -->

内部

<!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: 100px;height: 100px;background-color: blue;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3、外部

引入一个单独的CSS文件，name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。
通过@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">
    <link rel="stylesheet" href="./common.css">
    <title>Document</title>
</head>
<body>
    <div>这是一个快</div>
</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>
    <style>
        @import url('./common.css');
    </style>
</head>
<body>
    <div>这是一个快</div>
</body>
</html>

二十五、CSS颜色表示法

1、单词表示法：red、blue…
2、十六进制表示法：#000000~#ffffff
3、rgb三原色表示法：rgb（255,255,255）
取值范围 0~255

二十六、背景

1、背景样式

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: 1980px;height: 1080px;background-color: aqua;
        background-image: url(./1.jpg);
        background-position: 50% 50%;
        background-attachment: fixed;
        background-repeat:  no-repeat;
            }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2、背景视觉差

<!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{width: 1980px;height: 1080px;}
#div1{ width: 50%;height: 50%;background-image: url(./1.jpg); background-attachment: fixed;}
#div2{ width: 50%;height: 50%;background-image: url(./R-C.jpg); background-attachment: fixed;}
#div3{ width: 50%;height: 50%;background-image: url(./OIP-C.jpg); background-attachment: fixed;}
    </style>
<body>
    <div id="div1"> </div>
    <div id="div2"> </div>
    <div id="div3"> </div>
</body>
</html>

二十七、边框

1、边框样式

border-style：边框样式
solid：实线
dashed：虚线
dotted：点线
border-width：边框大小
px…
border-color：边框颜色
red、#ffffff…
边框也可以针对某一条边进行单独设置：
border-left-style 中间是方向left、right、top

<!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{width: 300px;height: 300px;border-style: solid;border-color: red;border-width: 1px;}
        #div2{width: 300px;height: 300px;border-right-style: dashed;border-right-color: black;border-right-width: 10px;}
        #div3{width: 300px;height: 300px;border-left-style: dotted;border-left-color: blue;border-left-width: 10px;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

2、三角形

<!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: 0px;height: 0px;
        border-top-style: solid;
        border-top-color: transparent;
        border-top-width: 30px;
        border-bottom-style: solid;
        border-bottom-color: red;
        border-bottom-width: 30px;
        border-right-style: solid;
        border-right-color: transparent;
        border-right-width: 30px;
        border-left-style: solid;
        border-left-color: transparent;
        border-left-width: 30px;
           }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二十八、字体

1、font-family：字体类型

英文字体：Arial，‘Times New Roman’
中文字体：微软雅黑，宋体
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：SimSun
注：当字体名称中有空格时，需要加上引号
设置多个字体的目的是为了适配更多的设备

<!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: 楷体;}
    </style>
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

2、font-size：字体大小

默认：16px
写法：（number）px、单词（small、large…不推荐使用）
注：字体大小一般为偶数

3、font-weight：字体粗细

模式：正常（normal）加粗（bold）
写法：单词（normal、bold）
number（100 200 … 900）
100-500都是正常的，600-900都是加粗的

4、font-style：字体样式

模式：正常（normal）斜体（italic）
写法：单词
注：oblique也是表示斜体，用的比较少，一般了解即可。
区别:1、italic带有倾斜属性的字体才可以设置倾斜操作
2、oblique没有倾斜属性的字体也可以设置倾斜操作

5、color：字体颜色

二十九、文本

1、文本修饰和大小写

text-decoration：文本修饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
注：添加多个文本修饰时，文本修饰之间用空格隔开
text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize

<!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>
        #p1{ width: 300px;text-decoration: underline line-through;}
        #p2{ text-transform: capitalize;}
    </style>
</head>
<body>
    <p id="p1">就当下而言，最受观众欢迎的电影题材当然是喜剧，过去的十余年时间里，开心麻花团队靠喜剧电影赚的盆满钵满，沈腾参演的电影累计票房已经突破了200亿，如果有名导可以操刀喜剧电影，再配合好的演员，这件事就成了！</p>
    <p id="p2">shelters for us</p>
</body>
</html>

2、文本缩进和对齐方式

text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同
text-align：文本对齐方式
对齐方式：left，right，center，justify（两端点对齐）

<!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>
        #p1{ width: 300px;text-decoration: underline line-through;text-indent: 2em;}
        #p2{ text-transform: capitalize;text-align: center;}
    </style>
</head>
<body>
    <p id="p1">就当下而言，最受观众欢迎的电影题材当然是喜剧，过去的十余年时间里，开心麻花团队靠喜剧电影赚的盆满钵满，沈腾参演的电影累计票房已经突破了200亿，如果有名导可以操刀喜剧电影，再配合好的演员，这件事就成了！</p>
    <p id="p2">shelters for us</p>
</body>
</html>

3、文本行高

line-height：定义行高
行高是一行文字的高度，上下边距的关系等价
默认行高：不是固定值，而是变化的，根据当前字体的大小在不断的变化
取值：1，number（px）
scale：比例值，跟文字大小成比例关系。直接输入数字

4、文本间距与英文折行

letter-spacing：字之间的间距
word-spacing：词之间的间距（针对英文段落的）
英文和数字不自动折行的问题：
1、word-break：break-all；
2、word-wrap：break-word；（会产生一些空白区域）

<!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>
        #p1{ letter-spacing: 10px;}
        #p2{word-spacing: 30px;}
        #div{width: 300px;height: 300px;border: 1px solid red;word-wrap: break-word;word-spacing: 30px;}
    </style>
</head>
<body>
    <p id="p1">就当下而言，最受观众欢迎的电影题材当然是喜剧，过去的十余年时间里，开心麻花团队靠喜剧电影赚的盆满钵满，沈腾参演的电影累计票房已经突破了200亿，如果有名导可以操刀喜剧电影，再配合好的演员，这件事就成了！</p>
    <p id="p2">shelters for us</p>
    <div id="div">jigjngsajdad jafjoawehngjarnglgioagiorghnrgjrhgurioeng jief jfieogfa iorjgfoaiga </div>
</body>
</html>

三十、CSS复合样式

复合的写法，是通过空格的方式实现的。
有些复合写法不需要关心顺序，如：
background，border
有的需要关心顺序，如：font
注：font最少要有两个值
weight style 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: 400px;height: 300px;
        background: url(./OIP-C.jpg) no-repeat center center blue;
        border: 10px black dotted;
        font: bold italic 32px/100px 楷体;
        }
    </style>
</head>
<body>
    <div id="div">山水美景</div>
</body>
</html>

三十一、CSS选择器

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

三十二、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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{ background: red;}
        .content{ font-size: 32px;background: blue;}
        p.fox{background: yellow;}
    </style>
</head>
<body>
    <div class="box">这是一个块</div>
    <div class="box">这又是一个块</div>
    <div class="box content">这是一个块</div>
    <!-- 第三行的颜色由css的最后一个属性决定的 -->
    <p class="fox">这是一个段落</p>
</body>
</html>

快捷键 - Ctrl+Z 撤销

Ctrl+Y 反撤销
Ctrl+A 全选
Ctrl+C 复制
Ctrl+V 粘帖
Ctrl+S 保存
Ctrl+D 选中当前单词，继续敲可以选中多个
Shift+LEFT/RIGHT 向左/向右选中字符
Ctrl+LEFT/RIGHT 以一个单词为粒度向左/向右移动光标
Alt+LEFT/RIGHT 以一个单词为粒度向左/向右移动光标
Alt + Shift + 下键向下快速复制行
shift+下键向下移动一行
多行光标: 按住Ctrl + Alt,再按键盘上向上或者向下的键,可以使一列上出现多个光标
向后缩进：tab
向前缩进：tab+shift
创建标签：单词+tab
创建初始代码：！+tab
生成注释：ctrl+/ or shift+alt+a
选择当前行
按Home（定位到行首）然后按Shift+Dnd（行尾）
或者
按End(定位到行尾)然后按Shift+Home