返回文章列表

HTML+CSS概念学习

45 min read
Frontend前端

HTML入门

什么是HTML?

HTML，全称为超文本标记语言（HyperText Markup Language），是一种用于创建网页结构的标记语言。它由一系列标签（tag）组成，这些标签描述了网页中的各种元素，如标题、段落、链接、图像等。HTML被用于结构化文档并定义文档的各个部分，以便网页浏览器能够正确地解释和呈现它们。

什么是标记语言？

其实HTML就是一种标记语言，不想Java一样是一种编程语言，而是由一系列的标签组成的，没有常量，变量，流程控制等
  • 双标签：<p></p>
  • 单标签：<input type="test" name="username"/>
  • 属性：<a href="http://ww.xxx.com">show detail</a>

什么是HTML文档声明

HTML 文档声明（Document Type Declaration，简称为 DOCTYPE 声明）是 HTML 文档中的一个特殊标签，用于指定文档的类型和版本。它告诉浏览器或解析器要如何解释文档中的内容。
  • HTML5的文档声明
<!DOCTYPE html>
  • HTML4D的文档声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

标签

  • 标签是根标签，其他标签都必须放在html标签下面
  • 标签是头标签，其他头部元素都必须放在head标签里面。头部元素包括
  • <body>标签是用来定义网页的主体内容，包含<h1>标题标签，<p>段落标签等
实例网页
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>示例网页</title>
</head>
<body>

    <h1>欢迎来到示例网页</h1>
    
    <p>这是一个包含简单内容的段落。</p>
    
    <p>你也可以访问 <a href="https://www.example.com">示例网站</a> 获取更多信息。</p>

</body>
</html>
总结一下，标签中存放的是字符集，css引入，js引入等等。而标签中存放的是，定义要展示到页面主体的标签

HTML的语法规则

专业词汇
  • 标签：tag指的是页面中的<>
  • 属性：attribute对标签设置的一种方式，属性一般在开始标签中进行定义
  • 文本：text，例如定义一个属性为type值为text的文本输入框，可以改属性值，为password，显示变成一个密码框
  • 元素：element开始标签+属性+文本+结束 称为一个元素
注意：属性必须有值，值必须加引号，H5中属性名和值相同时可以忽略属性值

vscode中常用的一些插件

  • Auto Rename Tag 自动修改标签对插件
  • Chinese Language Pack 汉化包
  • HTML CSS Support HTML CSS支持
  • Intellij IDEA Keybindings IDEA快捷键支持
  • Live Server实时加载功能的小型服务器
  • open in browser 通过浏览器打开当前文件的插件
  • Prettier-Code formatter 代码美化格式化插件
  • Vetur Vscode中的Vue工具插件
  • Vscode-icons 文件显示图标插件
  • Vue3 snipptes 生成VUE模板插件
  • Vue language Feature Vue3语言特征插件（改名Vue official）

标题段落和换行

注意：标签只有

~

没有
<!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>
    <h1>段落标题换行</h1>
    <h2>段落标题换行</h2>
    <h3>段落标题换行</h3>
    <h4>段落标题换行</h4>
    <h5>段落标题换行</h5>
    <h6>段落标题换行</h6>
    <h7>段落标题换行</h7>
</body>
</html>
点击Go Live运行微服务查看运行效果
可以看出来并没有比
小，因为是未定义行为
  • 标签的作用：打印分割线+换行

  • ：换行

列表标签

  • 有序列表标签：
    1. 列表项标签：
<ol>
  <li>Java</li>
  <li>前端</li>
  <li>大数据</li>
</ol>
效果展示
无序列表标签：
    <ul>
  <li>Java</li>
  <li>前端</li>
  <li>大数据</li>
</ul>
    效果展示：
    列表嵌套：
    <ol>
    <li>Java
        <ul>
            <li>数据变量</li>
            <li>数据类型</li>
            <li>函数</li>
            <li>面向对象</li>
        </ul>
    </li>
    <li>前端</li>
    <li>大数据</li>
</ol>
    可以在java标签下继续添加列表项，效果如下：

    超链接标签

    点击后具有链接跳转的功能的标签，也叫a标签
    a标签中包含的属性：
    • href属性：用于定义跳转资源目标的地址
    • target属性：用于定义目标资源的打开方式，_self在当前标签页打开目标资源，_blank在新的标签打开目标资源
    <a href = "https://www.baidu.com" target = "_blank">百度</a>
    在新标签打开目标资源

    以相对路径访问目标资源

    1. ./表示当前资源的所在路径，可以省略不写
    2. ../表示当前资源的上一层目录，需要时必须显式写出

    以绝对路径访问目标资源

    <a href = "/demo1-html/02标题段落换行">点击</a>

    图片标签

    标签包含src,title,alt标签
    • src属性用于定义图片的路径
    • title属性用于定义鼠标悬停时提示的文字
    • alt属性用于定义图片加载失败时的信息
    • width属性用于条件图片的宽度，调节宽度的同时也会同比例条件高度
    参考代码：
    <body>
    <img src="img/logo.png" width="300" title="美女" alt="加载失败">
</body>

    表格标签

    标签包含`thead`表头，`tbody`表体，`tfoot`表尾
    其中tbody中可以包含表体的一行即tr,td表示行中的一个单元格，th表示自带加粗效果的td
    在
    中快捷创建和
    的方法
    tr>td*3
<!--在tr标签中放3个td标签，效果如下-->
<tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>
    代码演示：
    <!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={{textAlign: 'center'}}>员工技能竞赛评分表</h3>
    <table border="1px" style={{margin: '0px auto', width: '600px'}}>
        <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>
                <td></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
    如下图所示：
    其实，也可以将标签中的<thead>、<tbody>和tfoot删除这样也不会影响代码的运行，代码在解析的时候浏览器会自动解析到内存上自动增加，而不修改我们的代码

    表格的跨行和跨列

    使用方法:td rowspan="3"这里的数字表示向下侵占几格
    效果如下图所示：
    代码如下：
    <body>
    <h3 style={{textAlign: 'center'}}>员工技能竞赛评分表</h3>
    <table border="1px" style={{margin: '0px auto', width: '600px'}}>
        <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>
    练习：创建一个如下的表：
    注意：这里的跨列使用的是colspan表示跨列，值表示跨的列数
    参考代码：
    <body>
    <h3 style={{textAlign: 'center'}}>员工技能竞赛评分表</h3>
    <table border="1px" style={{margin: '0px auto', width: '600px'}}>
        <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">96</td>
        </tr>
        <tr>
            <td>及格率</td>
            <td colspan="2">80%</td>
        </tr>
    </table>
</body>

    表单标签

    表单标签的作用：可以实现用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据的主要方式之一

    form标签

    什么是form标签？
    form标签是用来定义用户输入信息的表单标签
    form标签的属性
    • action属性，用于定义信息提交的服务器地址
    • method属性，用于定义消息的提交方式
      • get方式：数据会缀到url后，以？作为参数开始的标识，多个参数用&隔开，注意参数会以键值对放到url之后提交，如url?key=value&key=value相比于post效率高一些
      • post方式：数据会通过请求的方式进行发送，不会缀到url后，数据不会直接暴露在地址栏，相对安全。数据是单独打包通过请求体发送，提交的数量比较大。在请求体中可以是字符，也可以是字节数据，可以提交文件

    input标签

    什么是input标签？
    input标签可以用于定义表单项
    input标签的属性
    • name属性：input标签的属性之一，用于定义提交的参数名
    • type属性：用于定于单项类型
      • text单行普通文本框
      • password密码框
      • submit提交按钮
      • reset重置按钮
      • radio单选框 多个选项选择其一
      • checkbox复选框，多个选项可以选择多个
      • hidden隐藏域，不显示在页面上，提交时会携带
      • file文件上传框
      • button按钮
    • value属性：可以不写，表示当前表单默认值
    注意：表单项标签必须定义那么属性，该属性用于明确提交时的参数名，表单项还需要定义value属性，该属性用于明确提交时的实参
    代码如下：
    <body>
    <form action="06welcome.html" method="get">
        用户名：<input type="text" name="username" value="张三"><br>
        密码：  <input type="password" name="password"><br>
        <input type="submit" value="登录"/>
        <input type="reset" value="清空"/>
    </form>
</body>
    我们在使用get进行数据提交时，可以发现，我们提交的数据是以明文的方式出现在地址栏，这会导致数据泄露的风险，相对不安全。而且浏览器地址栏输入是有限制的。在地址栏上只能是字符，不能是文件。

    表单中其他的表单项

    单选框radio

    单选框：<input type="radio">男，<input type="radio">女
    实现效果：
    如果我们运行会发现，当我们进行选择时，可以同时选择男和女。这是因为，多个单选框要使用相同的那么属性值，则会有互斥的效果。如下：
    <input type="radio" name="gender">男，<input type="radio" name="gender">女
    同时我们要添加值，用来区分表单项<input type="radio" name="gender" value="1">男，<input type="radio" name="gender" value="0">女
    • checked属性，用于表示表单中默认的值，为了防止用户不勾选
    <input type="radio" name="gender" value="1" checked="true">男
    当然我们也可不写属性值，默认是当下的标签值，如下所示：
    <input type="radio" name="gender" value="1" checked>男
    参考代码如下：
    <body>
    <form action="06welcome.html" method="get">
        用户名：<input type="text" name="username" value="张三"><br>
        密码：  <input type="password" name="password"><br>
        性别：
            <input type="radio" name="gender" value="1" checked>男
            <input type="radio" name="gender" value="0">女
        <input type="submit" value="登录"/>
        <input type="reset" value="清空"/>
    </form>
</body>

    复选框checkbox

    使用方法如下：
    <body>
    <form action="06welcome.html" method="get">
        用户名：<input type="text" name="username" value="张三"><br>
        密码：  <input type="password" name="password"><br>
        性别：
            <input type="radio" name="gender" value="1" checked>男
            <input type="radio" name="gender" value="0">女
            <br>
            爱好：
                <input type="checkbox" name="hobby" value="1">篮球
                <input type="checkbox" name="hobby" value="2">足球
                <input type="checkbox" name="hobby" value="3">羽毛球
                <input type="checkbox" name="hobby" value="4">排球
                <input type="checkbox" name="hobby" value="5">乒乓球
        <input type="submit" value="登录"/>
        <input type="reset" value="清空"/>
    </form>
</body>
    我们使用相同的name不会有互斥的效果，如果我们希望某些爱好默认被选中，我们可以通过添加checked属性

    隐藏域hidden

    hidden隐藏域默认是不显示在页面上，提交时会携带
    <!-- 添加表单标签 用户输入信息标签 -->
<input type="hidden" name="id" value="123">
    hidden：希望提交一些特定的信息，但是考虑到安全问题或者是用户的操作问题，不希望数据发生改变。

    提交只读readonly

    当我们想要提交一些特定的数据，但是不希望用户去更改，我们可以通过添加readonly属性
    代码如下：
    <input type="text" name="pid" value="123" readonly>

    不提交只读disabled

    代码如下：
    <input type="text" name="tid" value="456" disabled><br>
    演示效果如下：

    多行文本框

    作用：我们在一个单行文本框中需要输入大量信息时，可能要查看前面已经输入过的信息，这会造成一个问题，我们想要查看前面已经输入过的信息时，需要拖动光标，会带来不便，这时，我们可以使用多行文本框来解决这个问题。
    标签：<textarea></textarea>
    展示效果：
    如果我们想要调整这个多行文本框的大小，可以使用css来调整样式
    把宽调整为300px，高调整为100px
    <textarea name="intro" style={{width: '300px', height: '100px'}}></textarea>
    注意：我们的textarea多行文本框是没有value属性的，如果我在><中添加内容，默认会显示在多行文本框中。

    下拉列表

    使用select标签的option属性，其中option用于定义选项
    籍贯：
<select name="pro">
  <option value="1">京</option>
  <option value="2">津</option>
  <option value="3">冀</option>
</select>
    如果我们想要在打开时默认展示请选择的下拉框选项，我们应该怎么做呢？
    我们可以添加一个selected属性表示，这个是默认属性
    籍贯：
    <select name="pro">
        <option value="1">京</option>
        <option value="2">津</option>
        <option value="3">冀</option>
        <option value="0" selected>---请选择---</option>
    </select>

    文件上传框

    我们可以使用input中type属性的file实现文件的提交
    选择头像：
    <input type="file">
    实现效果：

    页面布局相关标签

    div标签

    页面的布局通常使用div标签，那么什么是div标签，应该怎么使用？
    div是一个通用的块级元素，用于将更大的网页块关联和组合在一起--通常是一个部分，如页眉、页脚、页面主体等。
    <body style={{backgroundColor: 'cadetblue'}}>
    <!-- 
        css 设置样式的
        通过元素的style属性进行设置
        style = "样式名:样式值;样式名:样式值;... ..."

        块元素：自己独占一行的元素 块元素的css样式的宽 高等等 很多都是生效的
            div
        行元素：不会自己独占一行的元素 块元素的css样式的宽 高等等 很多都是不生效的
            span
     -->
    <div style={{border: '1px solid red', width: '500px', height: '200px', margin: '10px auto', backgroundColor: 'green'}}>123</div>
    <div style={{border: '1px solid red', width: '500px', height: '200px', margin: '10px auto', backgroundColor: 'gainsboro'}}>456</div>
    <div style={{border: '1px solid red', width: '500px', height: '200px', margin: '10px auto', backgroundColor: 'yellowgreen'}}>789</div>
</body>
    效果如下：

    span标签

    什么是span标签，和div标签有什么不同的吗？
    span标签是一个内联元素，你可以使用它来使一小部分内容子在css或JavaScript中突出显示。除非你完全了解自己在做什么，否则不应该嵌套span--但你可以子啊块级元素中放置多个span标签。
    以下是示例：
    <!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={{backgroundColor: 'cadetblue'}}>
    <!-- 
        css 设置样式的
        通过元素的style属性进行设置
        style = "样式名:样式值;样式名:样式值;... ..."

        块元素：自己独占一行的元素 块元素的css样式的宽 高等等 很多都是生效的
            div
        行元素：不会自己独占一行的元素 块元素的css样式的宽 高等等 很多都是不生效的
            span
     -->
    <div style={{border: '1px solid red', width: '500px', height: '200px', margin: '10px auto', backgroundColor: 'green'}}>123</div>
    <div style={{border: '1px solid red', width: '500px', height: '200px', margin: '10px auto', backgroundColor: 'gainsboro'}}>456</div>
    <div style={{border: '1px solid red', width: '500px', height: '200px', margin: '10px auto', backgroundColor: 'yellowgreen'}}>
        <span style={{fontSize: '30px', color: 'aqua', fontWeight: 'bold'}}>hello</span>world
    </div>
</body>
</html>
    效果如下：
    • 块元素：div h1~h6
    • 行内元素：span img a

    特殊字符

    查询网站：https://www.w3school.com.cn/
    常用的字符实体：
    如果我们想在页面中显示<h1>一级标题</h1>这个内容应该怎么显示呢？这时，我们就需要用到我们的字符实体了
    &lt;h1&gt;一级标题&lt;/h1&gt;<h1>一级标题</h1>
    这样我们就可以在页面中显示正常的内容了，如下：
    但是还存在一个问题，就是如果想要在页面中显示&gt;我们应该怎么做呢？
    其实可以在&后面加上amp;来表示这是一个&，而不是一个特殊实体
    <!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>
    <!-- 
        有特殊含义的符号称为字符实体
        对于HTML代码来说，某些符号是有特殊含义的，如果想显示这些特殊符号需要转义

     -->
     &lt;h1&gt;一级标题&lt;/h1&gt;
     <hr>
     &amp;gt;
</body>
</html>
    效果如下：

    CSS的使用

    什么是css？
    CSS 层叠样式表，英文全称（Cascading Style Sheets）能够对网页中的元素进行像级的精准控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，简单来说就是美化页面。

    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>
  </head>
  <body>
    <!-- 
    引入方式：
    方式1：行内式 
    通过元素的style属性引入样式
    语法：sytle="样式名：样式值；样式名：样式值... ..."
    缺点：代码复用度低，不利于维护
    -->
    <input type="button" value="按钮" 
      style={{width: '60px', /* 设置按钮的宽度 */
      height: '40px', /* 设置按钮的高度 */
      backgroundColor: 'aliceblue', /* 设置按钮背景颜色 */
      color: 'red', /* 设置字体颜色 */
      fontSize: '20px', /* 设置字体大小 */
      fontFamily: ''隶书'', /*设置字体样式 */
      border: '2px solid green', /* 设置边线的宽度 实线 绿色 */ 
      borderRadius: '5px'}}>
  </body>
</html>
    效果如下：
    这种方式存在一些问题，如果我们添加了好多按钮，不止一个，如果我们想要修改所有按钮的属性，需要一个一个去修改，这会给代码维护造成困难。
    1.代码复用度低，不利于维护
2.css样式代码和html结构代码交织在一起影响阅读，影响文件大小和性能

    内嵌式

    什么是内嵌式？
    通过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{
        width: 60px;  /* 设置按钮的宽度 */
        height: 40px;       /* 设置按钮的高度 */
        background-color: aliceblue;/* 设置按钮背景颜色 */
        color: red;/* 设置字体颜色 */
        font-size: 20px;/* 设置字体大小 */
        font-family: '隶书';/*设置字体样式 */
        border: 2px solid green;/* 设置边线的宽度 实线 绿色 */ 
        border-radius: 5px;
      }

    </style>
  </head>
  <body>
    <!-- 
    引入方式：
    方式1：行内式 
    通过元素的style属性引入样式
    语法：sytle="样式名：样式值；样式名：样式值... ..."
    缺点：1.代码复用度低，不利于维护
    2.css样式代码和html结构代码交织在一起影响阅读，影响文件大小和性能

    方式2：内嵌式
    通过head标签中的style标签定义本页面的公共样式
    需要通过选择器来确定样式的作用元素
    -->
    <input type="button" value="按钮">
  </body>
</html>
    如果我们添加多个input标签按钮，我们的样式都会生效。
    但是这种css样式引入的方式也存在一个问题，就是我们的样式不能作用的别的html文件上，如果我们在另一个文件上也有一个按钮，我们也想设置和这个相同的样式，我们应该怎么做呢？

    外部样式表

    什么是外部样式表？其实就是字面上的意思，css在外部单独存储在一个.css的文件中，如果我们需要用到其中的样式，我们可以在head中引入该css文件？
    那么我们具体应该怎么做呢？这里我用一个具体的案例来解释
    这里我在项目文件夹创建一个名为btn.css的文件用来存放所需的样式
    在02css引入方式.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>
    <!-- 其中href表示引入的css路径 rel表示引入的文件类型 -->
    <link href="btn.css" rel="stylesheet">
</head>
<body>
    <input type="button" value="按钮">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
</body>
</html>
    优势：css的作用范围更广，可以作用到其他的html文件上。
    缺点：需要切换文件

    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>
        /*
        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="按钮">
</body>
</html>

    id选择器

    id选择器：根据标签id的值来确定样式的作用元素，一般每一个元素都有id属性，但在一个页面中，id的值不应该相同，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>
        /*
        1 元素选择器 根据标签的名字来确定样式的元素
            语法：标签名{}
            缺点：有些同名的元素不希望使用某些样式，某些不同名的元素也使用该样式，无法协调
        2 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="按钮">
    <button id="bnt5">按钮</button>
</body>
</html>
    效果如下：
    我们可以看到，只有第四个按钮的样式生效了。
    缺点：id值有唯一性，样式只能作用到一个元素上
    为了解决这个问题，我们就有了class选择器。

    class选择器

    什么是class选择器，它和上面两个有什么区别吗？
    class选择器：根据元素的class属性值来确定样式的作用元素。元素的class属性可以重复 而且一个元素的class属性可以有多个值
    语法：.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 元素选择器 根据标签的名字来确定样式的元素
            语法：标签名{}
            缺点：有些同名的元素不希望使用某些样式，某些不同名的元素也使用该样式，无法协调
        2 id选择器：根据标签id的值来确定样式的作用元素
            一般每一个元素都有id属性，但在一个页面中，id的值不应该相同，id具有唯一性
        3 class选择器：根据元素的class属性值来确定样式的作用元素
            元素的class属性可以重复 而且一个元素的class属性可以有多个值
            语法：
         */

        .shapeClass{
            width: 80px;
            height: 40px;
            border-radius: 5px;
        }
        .colorClass{
            background-color: rgb(180, 239, 92);
            color: white;
            border: 3px solid green;
        }
        .fontClass{
            font-size: 20px;
            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="按钮">
    <button id="bnt5">按钮</button>
</body>
</html>
    我们可以在syle中添加多个样式，如形状，颜色，字体等，我们想要那个直接在class中引入即可。**注意：**可以引入不止一个class

    CSS浮动

    CSS的Float（浮动）使元素脱离文档流，按照指定的方向（发生左右移动）,直到它的边缘碰到包含框或者另一个浮动框的边框为止
    下面我将用一个例子来演示，为什么需要浮动设置
    <!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;
      }
      .d1{
        background-color: greenyellow;
      }
      .d2{
        background-color: red;
      }
      .d3{
        background-color: blueviolet;
      }
    </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>
    效果如下：
    我们可以看出，这三个元素分别独占一行，这样就存在一个问题，如果我们向让这个三个div都在第一行显示，那么我们应该怎么做呢？
    我们知道div默认是以块（block）的方式，而块的方式是独占一行，这时候我们就想到了我们还有行（line）的方式进行展示
    我们在div的css样式中添加display
    这是我们会发现，虽然我们的div出现在第一行了，但是div的宽度和高等失效了，那么我们应该怎么解决呢？这个时候我们就要用的我们的css浮动了。
    • 浮动设计的初衷是为了解决文字环绕图片的问题，浮动后一定不会文字挡住，这是设计的初衷。
    • 文档流式文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面综合功能不占位置了。
    浮动原理
    我们在d1中添加向右的浮动之后，我们会发现
    这个浮动只是在父级div标签内进行浮动
    同样的，我们可以让块2向右浮动，块3也向右浮动
    效果如下：
    但是这样存在一个问题，就是如果我们想要让着三个div均匀的分在第一层我们应该怎么办呢？这个时候我们就要用到盒子模型了。
    如果我们第一个div向左浮动会发生什么情况呢？
    我们会发现我们的第二个div消失不见了（红色）
    这是为什么呢？其实我们红色消失是因为被第一个绿色div挡住了，并没有消失。但是我们知道浮动设计的初衷是浮动后一定不会文字挡住，那么我们的divb呢？仔细看其实将divc盖住了。
    如果我们三个div都向左浮动会怎么样呢？
    效果如下：

    CSS定位

    如果我们想要让块元素在这个父块元素的任意位置，我们应该怎么做？这个时候我们就用到CSS的定位功能

    position标签

    • static默认属性
    • absolute绝对定位：会根据页面窗口大小的变化而变化，原本的文档流被关闭被新的文档流取代
    • relative相对定位：相对元素原本的位置，当前元素的文档流不会被取代
    • fixed相对定位：相对浏览器窗口的定位，并且原本的文档流被关闭被新的文档流取代
    left距离左边有多少像素，right距离右边有多少像素，top距离顶端有多少像素，bottom距离底端多少个像素

    CSS盒子模型

    什么是盒子模型？
    所有HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局使用的
    • CSS盒子模型的本质是一个盒子，封装周围的HTML元素，它包括边距（margin），边框（border），填充（padding）和实际内容（content）。
    • margin(外边距)：清除边框外的区域，，外边距是透明的。
    • border（边框）：围绕在内边距和内容外的边框
    • padding（内边距）：清除内容周围的区域，内边距是透明的。
    • content（内容）：盒子的内容，显示文本和图像。

    外边距设置

    如果我们想让div1，div2和div3之间有10px的边距我们应该怎么设置
    我们可以让diva的margin右外边距为10px
    如下：
    margin的简写方式：margin: 10px表示上下左右边距都是10px，margin: 10px 20px表示上下边距10px，左右边距20px，margin: 10px 20px 30px 40px表示上右下左四个方向的边距。

    内边距设置

    使用padding-top来设置内边界到边框的间距
    效果如下：
    我们会发现，这个内部的区域变大了，这是因为为了保证内容部分的大小不变，内部区域进行了扩增
    如果我们想让这个大的div置于整个页面的中心我们应该怎么做呢？
    在outerDiv上加上：margin: 0px auto;即可。效果如下：
    同样的padding的边距设置和margin相似

    JavaScript

    什么是JavaScript？
    JS是一种运行于浏览器端上的小型脚本语言，可以实现网页如文本内容，数据动态变化和动画特效等。
    脚本语言
    JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行，JavaScript不会产生编译出来的字节码文件，而是在程序运行过程中对源文件进行解释。
    基于对象
    JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也可以使用现有的对象。但是面向对象的三大特性：【封装】、【继承】、【多态】中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。
    弱类型
    JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且在程序执行过程中会根据上下文自动转换类型
    事件驱动
    JavaScript是一种采用事件驱动的脚本语言，它不需要经过web服务器就可以对用户输入做出响应。
    跨平台性
    JavaScript脚本语言不依赖于操作系统，仅需要浏览器支持。因此一个JavaScript脚本在编写前后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数浏览器所支持。

    JS的引入方式

    内嵌式

    在head中通过一对script标签定义脚本代码
    那么js如声明函数呢？函数如何将行为绑定到一起？
    例如：function suprise(){}
    样例：
    <!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>
        .btn1{
            width: 150px;
            height: 40px;
            font-size: 24px;
            font-family: '隶书';
            background-color: yellow;
            color: red;
            border: 3px solid red;
            border-radius: 5px;
        }
    </style>
    <script>
        function suprise(){
            /* 弹窗提示 */
            alert("helo 惊喜")
        }
    </script>
</head>
<body>
    <!-- onclick单击执行，ondbclick双击执行 -->
    <button class="btn1" onclick="suprise()">点我有惊喜</button>
</body>
</html>
    效果展示：

    引入外部脚本文件

    在head中通过一对script标签引入外部js文件
    例如：<script src="js/button.js" type="text/javascript"></script>
    注意：
    • 在button.js文件中不需要加script标签
    • 一个html中可以有多个script标签
    • 一对script标签不能在引入外部js文件的同时定义内部脚本
    • script标签如果用于引入外部js文件那么中间最好不要有任何字符，包括空格换行

    JS的数据类型和运算符

延伸阅读

基于标签和内容为您推荐

2026/2/211 min read

React 学习笔记

React 是一个用于构建 Web 和原生交互界面的库

阅读文章
2024/12/183 min read

Next.js 学习心得

分享我在学习 Next.js 过程中的经验和踩坑记录。

阅读文章
2024/2/196 min read

一条计算机指令的执行过程

计算机是由运算器、存储器、控制器、输入设备、输出设备五大部分组成。

阅读文章

评论

HTML+CSS概念学习 | Niutr's Blog | Niutr's Blog