编程技术

Document

JavaWeb：HTML&CSS

一、HTML入门

1.1HTML&CSS&JavaScript的作用

  1. HTML主要用于网页主体结构的搭建
  2. CSS主要用于页面元素的美化
  3. JavaScript主要用于页面元素的动态处理 

1.2什么是HTML

  1. HTML是Hyper Text Markup Language的缩写，意思是超文本（最终效果超越文本）标记语言。它的作用是搭建网页结构，在网上展示内容 

1.3什么是超文本

  1. HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式

1.4什么是标记语言 

  1. HTML不是像Java这样的编程语言，它是由一系列的标签组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果
  2. 标签：标签是通过一对尖括号+标签名的方式来定义的
  3. 双标签：<p>标签体</p>。<p>是开始标签，</p>是结束标签，开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分称为文本标签体，也简称标签体
  4. 单标签：<input type="text" name="username" />
  5. 属性：<a href="http://www.xxx.com">show detail</a>。href="网址"就是属性，href是属性名，"网址"是属性值

1.5HTML基础结构

（1）文档声明

  1. 画图理解html文件：
  2. 注意：
    1. html文件是浏览器负责解析和展示的
    2. html文件是纯文本文件，普通编辑工具都可以编辑
    3. Windows会根据文件的扩展名自动匹配默认的打开工具
  3. HTML5版本的文档类型声明是：<!DOCTYPE html>

（2）根标签

  1. html文件的根标签是<html></html>，所有的其他标签都要在这个标签中间
  2. html根标签下有两个一级子标签：<head></head>和<body></body>

（3）头部元素

  1. <head></head>是头标签，定义那些不直接展示在页面主体上，但是又很重要的内容（字符集、css引入、js引入......）
  2. <titile></title>标签：
  3. <meta />标签（如下图，它的作用是告诉浏览器，用什么字符集对文件解码）：因为该文件我们使用utf-8编码的，所以浏览器用utf-8解码不会出错
  4. 头部元素还包括script标签，style标签，link标签等等......

（4）主体元素 

  1. <body></body>是体标签，在浏览器窗口内显示的内容都定义到body标签内

（5）注释

  1. HTML注释的写法是<!--注释内容-->

1.6HTML概念词汇解释

  1. 标签：代码中的一对尖括号<>就叫作一个标签，有些标签成对出现，称之为双标签，有些标签单独出现，称之为单标签 

  2. 属性：写在开始标签中，用于定义标签的一些特征

    1. 例如，<input type="text" />

    2. 例如，<input type="password"/>

  3. 文本：开始标签和结束标签中间的文字，包含换行空格等结构。单标签里是没有文本的，只有双标签才可以有文本

  4. 元素：经过浏览器解析后，每一个完整的标签（标签+属性+文本）可以称之为一个元素。例如，<title>aaa</title>是一个元素，<meta charset="utf-8">也是一个元素

1.7HTML更多的语法细节

  1. 根标签有且只能有一个<html></html>

  2. 无论是双标签还是单标签都需要正确关闭

  3. 标签可以嵌套但是不能交叉嵌套。例如：<i><big>张三</big></i>。big的作用是让字体变大，i的作用是让字变成斜体

  4. 注释语法为<!--注释内容-->，注释不能嵌套

  5. 属性必须有值，值必须加引号，HTML5中，属性名和值相同时可以省略属性值

  6. HTML5中不严格区分字符串使用单双引号。如果想在字符串中嵌套字符串，那么我们只能这样写，让单双引号交替使用："asdf'q"we"r'asdf"

  7. HTML5中标签不严格区分大小写，但是不能大小写混用。例如，<html>也可以写成<HTML>，但是不能写成<HTml>

  8. HTML中不允许自定义标签名，强行自定义则无效

1.8Vscode相关插件

  1. Auto Rename Tag          自动修改标签对插件

  2. Chinese Language Pack          汉化包

  3. HTML CSS Support          HTML CSS支持

  4. Intellij IDEA Keybindings          IDEA快捷键支持

  5. Live Server          实时加载功能的小型服务器

  6. open in Browser          通过浏览器打开当前文件的插件

  7. Prettier-Code formatter          代码美化格式化插件

  8. Vetur          VSCode中的Vue工具插件

  9. vscode-icons          文件显示图标插件

  10. Vue 3 snipptes          生成VUE模板插件

  11. Vue language Features          Vue3语言特征插件

1.9Vscode的使用

  1. 文件→新建文件...→ 打开文件夹，该步骤就可以指定我们接下来要写的文件放在哪个文件夹中。我的电脑有个Project目录，它的路径是D:\vscode\Project
  2. 如果需要在Project父目录里创建子目录，就点击
  3. 如果需要在子目录里创建文件

1.10LiveServer和Vscode其它常见设置  

  1. 如果我们想在已经创建好的html文件中，快速生成html基础结构，就输入一个！号，并回车
  2. 怎么使用Live Server这个小插件，点击Go Live
  3. 可以看到Live Server自动帮我们在本机的5500端口启动了这个虚拟的服务
  4. 当我们在html文件中更新代码后，我们无需做任何操作，Live Server也会实时更新浏览器页面上的显示。如果没有实时刷新，解决方案如下图：
  5. 直接关闭浏览器，并不能关闭Live Server的小型服务器。如果想关闭这个小型服务器，点击Port：5500
  6. 建议每次测试完html文件后，都点击Port：5500
  7. 除了点击Go Live，我们还可以通过：右键页面→Open with Live Server来开启Live Server提供的小型服务器。Stop Live Server的效果和Port：5500一样
  8. 如果我们想修改Live Server这个小插件的默认打开浏览器，步骤如下图
  9. Vscode其它常见设置：
    1. 设置字体：齿轮>search>搜索        "字体大小"
    2. 设置字体大小可以用滚轮控制：齿轮>search>搜索        "Mouse Wheel Zoom"
    3. 设置左侧树缩进：齿轮>search>搜索        "树缩进"
    4. 设置文件夹折叠：齿轮>search>搜索        "compact"，取消第一个勾选（取消勾选就能把第一张图变成第二张图的形式）
    5. 设置编码自动保存：齿轮>search>搜索        "Auto Save"，选择为"afterDelay"

1.11在线帮助文档

http://www.w3school.com.cn 

二、HTML常见标签

2.1标题标签

  1. 标题标签：一般用于在页面上定义一些标题性的内容，如新闻标题、文章标题等，有h1到h6六级标题
  2. 代码： 
    <body>
    <h1>标题内容</h1>
    <h2>标题内容</h2>
    <h3>标题内容</h3>
    <h4>标题内容</h4>
    <h5>标题内容</h5>
    <h6>标题内容</h6>
</body>
  3. 在浏览器上的展示效果：

2.2段落标签

  1. 以该段文字为例，我们自己在html文件里换行是没有作用的
  2. 为了实现在浏览器中的文字换行，我们在需要换行的地方加<br/>
  3. 如果我们将两段文字放到html文件中，在浏览器里它们会连在一起显示
  4. 为了在浏览器中分段显示，我们将自然段用<p></p>包裹

2.3换行标签

  1. 除了在2.2中提到的<br/>（也可以写成br）换行标签，我们还有<hr/>（也可以写成hr）换行标签。<br/>的作用是：换行，而<hr/>的作用是：换行并输出一条分割线

2.4列表标签

  1. 有序列表：列表的每一项前面都有序号
  2. 有序列表：（1）列表标签ol（2）列表项标签li
  3. 有序列表代码： 
    <body>
    <ol>
        <li>数据类型</li>
        <li>变量</li>
        <li>流程控制</li>
        <li>函数</li>
        <li>面向对象</li>
    </ol>
</body>
  4. 有序列表实现效果：
  5. 无序列表：列表的每一项前面是一个小圆点
  6. 无序列表：（1）列表标签ul（2）列表项标签li
  7. 无序列表代码： 
    <body>
    <ul>
        <li>Java</li>
        <li>C</li>
        <li>C++</li>
        <li>php</li>
        <li>go</li>
        <li>python</li>
    </ul>
</body>
  8. 无序列表实现效果：
  9. 可以互相嵌套使用列表标签，举例 
    <!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>
    <ul>
        <li>Java
            <ol>
                <li>数据类型</li>
                <li>变量</li>
                <li>流程控制</li>
                <li>函数</li>
                <li>面向对象</li>
            </ol>
        </li>
        <li>C</li>
        <li>C++</li>
        <li>php</li>
        <li>go</li>
        <li>python</li>
    </ul>
</body>
</html>

2.5超链接标签

  1. 超链接标签：点击后带有链接跳转的标签，也叫做a标签
  2. href属性用于定义链接
    1. href中可以使用绝对路径，以/开头，始终以一个基准路径作为出发点
    2. href中也可以使用相对路径，不以/开头，以当前文件所在路径为出发点
    3. href中也可以定义完整的url
  3. target属性用于定义打开的方式
    1. _blank在新窗口中打开目标资源
    2. _self在当前窗口中打开目标资源
  4. 相对路径：
  5. 绝对路径：

2.6多媒体标签

  1. img（重点）图片标签（单标签），用于在页面上引入图片
  2. src属性：用于定义图片的路径（绝对路径，相对路径，完整的url）
  3. title属性：用于定义鼠标悬停在图片上的文字
  4. alt属性：用于定义图片加载失败时显示的文字（我们故意写错路径，让它们加载失败试试）
  5. 代码：
  6. 需要注意：当时我是按上图这么写的代码，一开始两张图片在浏览器上都是加载成功的。因为05图片.html所在的路径是http://本地环回地址:5500/demo1-html/。所以按上图这么写相对路径和绝对路径丢失成功的！！！但是第二天我在Vscode里重新打开了文件夹，05图片.html的所在路径已经变成了http://本地环回地址:5500/。所以只能按下图方式来写，才可以成功加载图片：

2.7表格标签（重点）

  1. table标签：代表表格
  2. thead标签：代表表头，可以省略不写
  3. tbody标签：代表表体，可以省略不写
  4. tfoot标签：代表表尾，可以省略不写
  5. tr标签：代表一行
  6. td标签：代表行中的一个单元格
  7. th标签：自带加粗和居中效果（把单元格中的文字加粗居中）的td
  8. 如果想在tr里面放td，输入tr>td按回车；如果想在tr里面放三个td，输入tr>td*3
  9. 代码： 
    <!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>
<!--
style="text-align:center;"  是css样式
border="1px" style="margin:0px auto;width:300px;"  是css样式 
-->
<body>
    <h3 style="text-align:center;">员工技能竞赛评分表</h3>
    <table border="1px" style="margin:0px auto;width:300px;">
        <thead>
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张小明</td>
                <td>100</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李小黑</td>
                <td>99</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王小东</td>
                <td>98</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均分</td>
                <td>99</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
  10.  如果我们在表尾tfoot只写了两个单元格，那么呈现形式如下（表头表体表尾只用于自己写代码时进行区分，在页面上展示时，它们没有任何区别）：
  11. 如果我们不写thead、tbody、tfoot，那么浏览器在解析时，会自动帮我们给table标签里这个整体，补上tbody标签。如图，当我们把这三个标签删掉，然后在浏览器F12→元素
  12. 单元格跨行：如果我们希望实现如下效果，那么代码（让某个单元格再向下多占用两行，也就是它一共要占用三行rowspan="3"）
    <!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>
    <h3 style="text-align:center;">员工技能竞赛评分表</h3>
    <table border="1px" style="margin:0px auto;width:300px;">    
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>分数</th>
                <th>备注</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张小明</td>
                <td>100</td>
                <td rowspan="3">前三名升职加薪</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李小黑</td>
                <td>99</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王小东</td>
                <td>98</td>
            </tr>
    </table>
</body>
</html>
  13. 单元格跨列：如果我们希望实现如下效果，那么代码（让某个单元格再横向多占一列，也就是该单元格一共要占用两列colspan="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>
</head>
<body>
    <h3 style="text-align:center;">员工技能竞赛评分表</h3>
    <table border="1px" style="margin:0px auto;width:300px;">    
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>分数</th>
                <th>备注</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张小明</td>
                <td>100</td>
                <td rowspan="6">前三名升职加薪</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李小黑</td>
                <td>99</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王小东</td>
                <td>98</td>
            </tr>
            <tr>
                <td>总人数</td>
                <td colspan="2">2000</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td colspan="2">90</td>
            </tr>
            <tr>
                <td>及格率</td>
                <td colspan="2">80%</td>
            </tr>
    </table>
</body>
</html>

2.8表单标签（重点）

  1. 表单标签：可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据的主要方式之一
  2. form标签，表单标签，其内部用于定义可以让用户输入信息的表单项标签
    1. action，form标签的属性之一，用于定义信息提交的服务器的地址（绝对路径，相对路径，完整的url）
    2. method（默认值是get），form标签的属性之一，用于定义信息的提交方式（1）get方式，数据会缀到url后，以？作为参数开始的标识，多个参数用&隔开（2）post方式，数据会通过请求体发送，不会缀到url后
  3. input标签，主要的表单项标签，用户输入信息的标签
    1. name（针对于text、password），input标签的属性之一，用于定义提交的参数名（一定要定义该属性）
    2. value（针对于text、password），input标签的属性之一，该属性用于明确提交时的实参（不定义该属性也行，如果定义了，就可以给输入框设置默认值）
    3. type，input标签的属性之一，用于定义表单项类型（1）text文本框（2）password密码框（3）submit提交按钮，如果想把该按钮上显示的“提交”改成别的，还有一个value属性（4）reset重置按钮，如果想把该按钮上显示的“重置”改成别的，还有一个value属性
  4.  测试代码： 
    <!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>
    <form action="08welcome.html" method="get">
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="userPwd"><br>
        <input type="submit" value="登录">
        <input type="reset" value="清空">
    </form>
</body>
</html>
  5. 展示效果：
  6. get方式：
    1. 参数会以键值对形式放在url后提交    url?key=value&key=value&key=value
    2. 数据直接暴露在地址栏上，相对不安全
    3. 地址栏长度有限制，所以提交的数据量不大
    4. 地址栏上，只能是字符，如果我们想提交文件就不行
    5. 总结：get方式提交的数据是放在url后发送的，因为地址栏提交的数据量比较小，而且只能提交字符，所以get方式不能用来提交文件
    6. 相比于post，效率更高一些些
  7. Live Server不支持我们用post方式：
  8. 负载就是我们当前请求中提交的数据：
  9. post方式：
    1. 参数默认不放到url后
    2. 数据不会直接暴露在地址栏上，相对安全
    3. post方式提交的数据是单独打包通过请求体发送的，请求体可以提交的数据量比较大
    4. 请求体中可以是字符，也可以是字节，因此可以提交文件
    5. 总结：post方式提交的数据是放在请求体里发送的，因为请求体可以装的数据量比较大，而且还支持字节，因此post方式可以用来提交文件
    6. 相比于get，效率更低一些些

2.9常见表单项标签

  1. 单选框：（1）将input标签的type属性设置为radio（2）要实现互斥效果，即多个选项只能选一个，我们还要让这多个选项使用相同的name值（3）为了让后端区分不同选项，还要给这多个选项设置不同的value值（4）如果希望某个选项被默认勾选，就给它设置checked属性，并将checked属性的值置为true。或者直接只写一个checked 
    <!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>
    <form action="08welcome.html" method="get">
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="userPwd"><br>
        性别：
            <input type="radio" name="gender" value="1" checked="true">男
            <input type="radio" name="gender" value="2">女
            <br>
        <input type="submit" value="登录">
        <input type="reset" value="清空">
    </form>
</body>
</html>

  2. 多选框：（1）将input标签的type属性设置为checkbox（2）给多个选项设置相同的name属性值（3）给多个选项设置不同的value属性值（4）如果我们希望某些选项默认被选中，就给它设置checked属性，规则和单选框一样 
    <!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>
    <form action="08welcome.html" method="get">
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="userPwd"><br>
        性别：
            <input type="radio" name="gender" value="1" checked="true">男
            <input type="radio" name="gender" value="2">女
            <br>
        爱好：
            <input type="checkbox" name="hobby" value="1" checked>篮球
            <input type="checkbox" name="hobby" value="2" checked>足球
            <input type="checkbox" name="hobby" value="3">羽毛球
            <input type="checkbox" name="hobby" value="4">乒乓球
            <br>
        <input type="submit" value="登录">
        <input type="reset" value="清空">
    </form>
</body>
</html>

  3. 隐藏域：不显示在页面上，提交时会携带。（1）将input标签的type属性设置为hidden（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>
</head>
<body>
    <form action="08welcome.html" method="get">
        <input type="hidden" name="id" value="123">
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="userPwd"><br>
        性别：
            <input type="radio" name="gender" value="1" checked="true">男
            <input type="radio" name="gender" value="2">女
            <br>
        爱好：
            <input type="checkbox" name="hobby" value="1" checked>篮球
            <input type="checkbox" name="hobby" value="2" checked>足球
            <input type="checkbox" name="hobby" value="3">羽毛球
            <input type="checkbox" name="hobby" value="4">乒乓球
            <br>
        <input type="submit" value="登录">
        <input type="reset" value="清空">
    </form>
</body>
</html>

  4. 如果我们希望达到和隐藏域一样的效果，但是又不使用隐藏域。我们可以把<input type="hidden" name="id" value="123">写成<input type="text" name="id" value="123" readonly="readonly">。注意：属性名和属性值一样，readonly="readonly"就可以简写成readonly
  5. 但是，如果我们又希望它不被提交。那么
  6.  多行文本框（用户输入大段文字），就要用textarea标签。textarea没有value属性，它要提交的内容就是<textarea></textarea>这两个标签中间的内容
  7.  下拉框，就要用select标签。它还有一个子标签option，是用于定义选项的。这两个都是双标签。（1）一般情况下，name属性写在select标签，value属性写在option标签。如果我们没有写value属性，那么提交的就是<option></option>中间的内容（2）如果希望某个option被默认选择，那么我们就在该option标签里写selected属性，规则和checked、readonly、disabled一样
  8. 文件上传框，还是使用input标签，并把input标签里的type属性值设置为file（目前，单标签里的/写不写都可以）

2.10布局相关标签

  1. div标签：俗称“块”，它是块元素。块元素是自己独占一行的元素。主要用于划分页面结构，做页面布局
  2. span标签：俗称“层”，它是行内元素。行内元素是自己不会独占一行的元素，常与块元素配合使用。主要作用是：让CSS样式专门作用到某些范围
  3. 块元素的CSS样式的宽、高等等，往往都是生效的。行内元素的CSS样式的宽、高，往往都是不生效的
  4. 如果在<div></div>中间输入大段文字，那么这段文字会根据块的宽度自动换行
  5. 测试代码： 
    <!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 style="background-color: cadetblue;">
    <!--
    css         设置样式的
                通过元素的style属性进行设置
                style="样式名:样式值;样式名:样式值;样式名:样式值;"
    -->
    <div style="border:1px solid red;width: 500px;height: 200px;margin:10px auto;background-color: antiquewhite;">123</div>
    <div style="border:1px solid red;width: 500px;height: 200px;margin:10px auto;background-color: bisque;">456</div>
    <div style="border:1px solid red;width: 500px;height: 200px;margin:10px auto;background-color: chocolate;">
        <span style="font-size: 30px;color: greenyellow;font-weight: bold;">NBA新赛季</span>常规赛继续进行，克利夫兰骑士队（19胜3负）继续连胜。
    </div>
    <span style="border:1px solid greenyellow;width: 500px;height: 100px;">555</span>
</body>
</html>

2.11特殊字符

  1. 对于有特殊含义的字符，如果我们希望将它展示在浏览器页面上，那么我们在代码中就只能写它对应的转义字符
  2. 演示：
  3. 查询转义字符的地址：HTML 字符实体 (w3school.com.cn)

三、CSS的使用

3.1CSS引入方式

  1. CSS层叠样式表（Cascading Style Sheets）能够对网页中元素的位置和排版进行像素级别的精确控制，几乎支持所有的字体字号样式。简单来说，它能够美化页面
  2. CSS第一种引入方式：行内式，即通过元素的style属性引入样式。语法：style="样式名:样式值;样式名:样式值;样式名:样式值;......" 
    <!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>
    <input type="button" value="按钮" 
    style="
        width: 60px;
        height: 40px;
        background-color: rgb(166, 232, 66);
        color:white;
        font-size:20px;
        font-family:'微软雅黑';
        border: 2px solid green;
        border-radius: 5px;
    "
    >
</body>
</html>

  3. CSS第一种引入方式的缺点：（1）代码复用度低，影响文件大小和性能，还不利于维护（2）css样式代码和html结构代码交织在一起，影响阅读
  4. CSS第二种引入方式：内嵌式，即通过head标签中的style标签定义本页面的公共样式，还要通过选择器来确定样式的作用元素 
    <!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>
        /*元素选择器，通过标签名确定样式的作用元素*/
        /*该元素选择器，会让当前页面上所有标签名为input的元素，都会受到这个样式的修饰*/
        input{
            width: 60px;
            height: 40px;
            background-color: rgb(166, 232, 66);
            color:white;
            font-size:20px;
            font-family:'微软雅黑';
            border: 2px solid green;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮" >
    <input type="button" value="按钮" >
    <input type="button" value="按钮" >
    <input type="button" value="按钮" >
    <input type="button" value="按钮" >
</body>
</html>

  5. CSS第三种引入方式：外部样式表，即将css代码，单独放入一个.css文件中，哪个html需要这些代码，就在html文件的head中通过link标签（link标签的href属性，是用来指定要引入的文件的路径；link标签的rel属性，是用来指定要引入的文件的类型，如果是.css文件，类型填stylesheet）引入。（只要把选择器写进.css文件就行，不需要带style标签） 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/demo1-css/btn.css">
</head>
<body>
    <input type="button" value="按钮" >
    <input type="button" value="按钮" >
    <input type="button" value="按钮" >
    <input type="button" value="按钮" >
    <input type="button" value="按钮" >
</body>
</html>
    input{
    width: 60px;
    height: 40px;
    background-color: rgb(166, 232, 66);
    color:white;
    font-size:20px;
    font-family:'微软雅黑';
    border: 2px solid green;
    border-radius: 5px;
}
  6. 注意，此时绝对路径是这么写的 ，因为：

3.2CSS选择器

  1. 元素选择器： 
    <!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>
        /*
        1.元素选择器    根据标签的名字确定样式作用的元素
            语法：标签名{}
            缺点：某些同名的元素，不希望使用该样式；某些不同名的元素，想用该样式
        */
        input{
            width: 80px;
            height: 40px;
            background-color: chartreuse;
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮" >
    <input type="button" value="按钮" >
    <input type="button" value="按钮" >
    <input type="button" value="按钮" >
</body>
</html>
  2. 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>
        /*
        1.id选择器      根据标签的id值，确定样式的作用元素
            语法：#id值{}
            缺点：一个id选择器只能作用到一个元素上。因为id值具有唯一性
        */
        #btn4{
            width: 80px;
            height: 40px;
            background-color: chartreuse;
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input id="btn1" type="button" value="按钮" >
    <input id="btn2" type="button" value="按钮" >
    <input id="btn3" type="button" value="按钮" >
    <input id="btn4" type="button" value="按钮" >
</body>
</html>

  3. class选择器： 
    <!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>
        /*
        1.class选择器      根据元素的class属性值确定样式作用的元素
                           元素的class属性值可以重复，而且一个元素的class属性可以有多个值
            语法：.class属性值{}
        */
        .shapeClass{
            width: 80px;
            height: 40px;
            border-radius: 5px;
        }
        .colorClass{
            background-color: rgb(179,241,85);
            color:white;
            border: 3px solid green;
        }
        .fontClass{
            font-size: 24px;
            font-family: '隶书';
            line-height: 30px;
        }
    </style>
</head>
<body>
    <input id="btn1" class="shapeClass colorClass fontClass" type="button" value="按钮" >
    <input id="btn2" type="button" value="按钮" >
    <input id="btn3" type="button" value="按钮" >
    <input id="btn4" type="button" value="按钮" >
</body>
</html>

3.3CSS浮动

  1. div是块元素，它独占一行。我们如果把设置display的值为inline，就可以将块元素转为行内元素显示，而css样式的宽和高对行内元素往往是不起作用的

    <!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>
        .outerDiv{
            width: 500px;
            height: 300px;
            border: 1px solid green;
            background-color: beige;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            display: inline;/*块元素 inline 行内显示*/
        }
        .d1{
            background-color: greenyellow;
        }
        .d2{
            background-color: rgb(210,119,119);
        }
        .d3{
            background-color: rgb(142,236,229);
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv d1">diva</div>
        <div class="innerDiv d2">divb</div>
        <div class="innerDiv d3">divc</div>
    </div>
</body>
</html>

  2. 如果我们设置，让diva向右浮动。图一是浮动前，图二是浮动后，图三是设置代码

  3. 在此基础上，如果我们设置，再让divb也向右浮动

  4. 如果我们还让divc也向右浮动

  5. 把所有浮动操作清除，如果我们先把diva向左浮动（diva浮走，divb和divc顶上来。然后diva又把divb盖住了，divb上的文字“divb”就会被挤出来，和“divc”形成重叠）

  6. 如果三个都向左浮动：

3.4CSS定位

  1. position：（1）static 默认（2）absolute 绝对（3）relative 相对，相对于元素原本的位置（4）fixed 相对，相对于元素原本的位置
  2. left用于设置：距离左边多少个像素。right用于设置：距离右边多少个像素（一般二者选其一）
  3. top用于设置：距离顶端多少个像素。bottom用于设置：距离底端多少个像素（一般二者选其一）
  4. 当我们进行如下代码设置，可以看到从图一变成了图二
    <!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>
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
        .d1{
            background-color: greenyellow;
            position: absolute;
            top: 100px;
            right: 100px;
        }
        .d2{
            background-color: rgb(210,119,119);
        }
        .d3{
            background-color: rgb(142,236,229);
        }
    </style>
</head>
<body>
    <div class="innerDiv d1">diva</div>
    <div class="innerDiv d2">divb</div>
    <div class="innerDiv d3">divc</div>
</body>
</html>
  5.  当我们把position的值改为relative。注意：（1）用relative，不会出现脱离文档流的情况（脱离文档流：下面的元素占用了它原来的位置）（2）当可以上下滑动浏览器页面时，它不会跟着移动
  6. 当我们把position的值改为fixed。注意：（1）用fixed，会出现脱离文档流的情况（2）当可以上下滑动浏览器页面时，它会跟着移动

3.5CSS盒子模型

  1. 所有HTML元素可以看作盒子
  2. CSS盒子模型：
  3. 测试代码： 
    <!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>
        .outerDiv{
            width: 500px;
            height: 300px;
            border: 1px solid green;
            background-color: beige;
            margin:0px auto;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            float: left;
        }
        .d1{
            background-color: greenyellow;
            margin-top: 10px;
            margin-right: 10px;
            margin-left: 10px;
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
        }
        .d2{
            background-color: rgb(210,119,119);
        }
        .d3{
            background-color: rgb(142,236,229);
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv d1">diva</div>
        <div class="innerDiv d2">divb</div>
        <div class="innerDiv d3">divc</div>
    </div>
</body>
</html>
  4. 测试效果：
  5. 怎么看某个元素的盒子模型：
  6. 把鼠标放到代码上还可以看到元素的反色：
  7. 当给margin放两个值时：前面的是上下外边距，后面的是左右外边距。当给margin放四个值时：分别对应上右下左四个边距（顺时针）。当给margin放一个值时：这个值将会成为上下左右四个边距的值。padding的规则和margin一样