HTML+CSS+JS_html css js-CSDN博客

<body>
    <!--h是标题标签-->
    <h1>一级标题标签</h1>
    <h2>二级标题标签</h2>
    <h3>三级标题标签</h3>
    <h4>四级标题标签</h4>
    <h5>五级标题标签</h5>
    <h6>六级标题标签</h6>
</body>

网页效果：

<2>.段落标签

段落标签是<p>,用法与标题标签一致，除了是、显示的字体大小不同。

 <!--p是段落标签-->
 <p>这是一个段落标签</p>

网页效果：

此外还可以改变文本样式，如字体加粗，斜体，增加下划线，删除线等等（改变字体大小需要用到CSS）。

<!--p是段落标签-->
<p>这是一个段落标签</p>
<p>更改文本样式：<b>字体加粗</b> 、<i>斜体</i>、<u>下划线</u>、<s>删除线</s> </p>
<p>更改文本样式：<b>字体加粗</b> </p>
<p>更改文本样式：<strong>字体加粗</strong> </p>
<p>更改文本样式：<i>斜体</i> </p>
<p>更改文本样式：<u>下划线</u> </p>
<p>更改文本样式：<s>删除线</s> </p>

网页效果：

<3>.列表标签

无序列表：使用<ul></ul>标签

  <ul>
      <li>无序列表元素1</li>
      <li>无序列表元素2</li>
      <li>无序列表元素3</li>
  </ul>

有序列表：使用<ol></ol>标签

 <ol>
     <li>有序列表元素1</li>
     <li>有序列表元素2</li>
     <li>有序列表元素3</li>
 </ol>

网页效果：

<4>.表格标签

最外层使用 <table></table>标签作为表格的一个根元素

行标签用 <tr></tr>表示，即table row

在 <tr>中列表元素用<td>表示,即table data,

在 <tr>中列标题用<th>表示,即table header

   <table border="1">
        <!--列标题-->
        <tr>
            <th>列标题1</th>
            <th>列标题1</th>
            <th>列标题1</th>
        </tr>
        <!--列表元素-->
        <tr>
            <td>元素1</td>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
        <tr>
            <td>元素1-1</td>
            <td>元素2-1</td>
            <td>元素3-1</td>
        </tr>

    </table>

网页效果：

2.HTML标签属性

属性在HTML中用于定义元素的行为和外观，以及其他元素的关系。

每个HTML元素可以具有不同的属性。

属性名称不区分大小写，属性值对大小写敏感。

基本语法：<开始标签属性名=“属性值”>

适用于大多数HTML元素的属性
属性	描述
class	为HTML元素定义一个或多个类名（类名从样式文件引入）
id	定义元素唯一的id
style	规定元素的行内样式

<a></a>：a标签常用于创建链接到其他的网页或者位置，其中的herf属性定义了这个链接到的目标，可以是其他网页的URL文件的路径，电子邮箱地址，手机号等等。点击链接后就可以自动跳转到这个网站。

_target属性可以定义链接的打开方式:

_self：默认值，表示链接在当前窗口或者标签页打开

_blank：表示链接将会在新的窗口或者标签页打开

_parent：表示链接会在父窗口或者父框架中打开

_top：表示链接会在顶层窗口或者顶层框架中打开

    <a href="https://www.bilibili.com/">这是一个超链接</a>
    <a href="https://yz.chsi.com.cn/" target="_blank">这是第二个超链接</a>

网页效果：

使用/<br>换行标签可以让两个a标签出现在不同行，使用<hr>可以创建一条水平分割线

   <a href="https://www.bilibili.com/">这是一个超链接</a>
   <br />
   <a href="https://yz.chsi.com.cn/" target="_blank">这是第二个超链接</a>
   <hr />

网页效果：

<img>标签用于在网页中嵌入图像，从而实现图像的显示和呈现，是构建复媒体内容网页的关键元素。

图片标签img自带src属性和alt属性，src属性定义了要显示图像文件的路径或者url，它可以是这个文件的相对路径、绝对路径。alt属性是用于定义图像的替代文本，若图像无法加载，浏览器会显示alt属性中指定的文本。

    <img src="two.jfif" alt="" />
    <hr />
    <img src="two.jif" alt="该图片无法显示" />
    <hr />
    <img src="two.jfif" alt="" width="200" height="100" />
    <hr />

网页效果：

3.HTML区块

HTML区块也就是HTML中的块元素与行内元素，此外这也是学习CSS的前置内容。

块元素（block）

通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。

块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。
可以包含其他块级元素和行内元素。
常见的块级元素包括<div>，<p>，<h1>到<h6>，<ul>，<ol>，<li>，<table>，<form>等。

行内元素（inline）

行内元素通常用于添加文本样式或成为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。

行内元素通常在同一行内呈现，不会独占一行。
它们只占据其内容所需的宽度，而不是整行的宽度。
行内元素不能包含块级元素，都可以包含其他行内样式。
常见的行内元素包括<span>，<a>，<strong>，<em>，<img>，<br>，<input>等。

<div></div>块级标签，通常用于创建一个可以包含其他HTML元素的容器块，通常没有任何语义，仅用于组织内容。经常用于创建页面的布局结构

    <div class="nav">
        <!--创建导航栏-->
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
        <a href="#">链接5</a>
    </div>
    <div class="content">
        <!--创建主要内容-->
        <h1>文章标题</h1>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
    </div>

网页效果：

<span></span>标签相当于没有特殊元素的a标签和img标签，主要作用是把一小部分文本包装起来以便于对它们使用样式、CSS或者JS行为。

    <span>这是第1个span标签</span>
    <span>这是第2个span标签</span>
    <span>这是第3个span标签</span>
    <span>这是第4个span标签</span>
    <hr />
    <span>链接点击这里<a href="#">链接</a></span>

网页效果：

总之，div标签通常用于创建块级容器，以便于组织页面的结构和布局，而span标签用于内联样式化文本，给文本的一部分应用样式或者标记，使用这两个标签时，通常是与CSS和JS一起使用的，这样能够实现更加复杂的页面布局和样式化。

4.HTML表单

<form>标签是表单的容器，他有很多的属性，创建一个表单就和创建一个表格类似，若需要制作表单需要把表单中的所有元素必须包含在form标签内部。

<form>标签最常用的标签就是input。

  <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" placeholder="请输入内容" />   <br /> <br />

      <label for="pwd">密码：</label>
      <input type="password" id="pwd" placeholder="请输入密码" />   <br /> <br />

      <label>性别：</label>
      <!--单选-->
      <input type="radio" name="gender" />男
      <input type="radio" name="gender" />女
      <input type="radio" name="gender" />其他    <br /> <br />

      <label>爱好：</label>
      <!--多选-->
      <input type="checkbox" name="hobby" />唱歌
      <input type="checkbox" name="hobby" />画画
      <input type="checkbox" name="hobby" />动漫
      <input type="checkbox" name="hobby" />小说    <br /> <br />

      <input type="submit" />

  </form>

网页效果：

创建form标签时会自带一个action属性，表示提交的标签时侯也就是点击提交按钮时向何处发送填写的数据，所有action的属性值也就是一个URL，但是URL需要服务器即后端提供给我们的API。

二.CSS

CSS,即Cascading Style Sheets，中文名“层叠样式表”。用于定义网页样式和布局的样式表语言，通过CSS可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。

一般情况下，CSS与HTML一起用于构建web页面，HTML负责定义页面的结构和内容，而CSS负责控制页面的样式和外观。

1.CSS语法

CSS通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式

选择器{

属性1：属性值1；

属性2：属性值2；

}

1.选择器的声明中可以写无数条属性

2.声明的每一条属性，都需要以英文分号结尾；

3.声明中的所有属性和值都是以键值对这种形式出现的

2.CSS导入方式

下面是三种常见的CSS导入方式：

1.内联样式（Inline Styles）

2.内部样式表（Internal Stylesheet）

3.外部样式表（External Stylesheet）

三种导入方式的优先级：内联样式>内部样式表>外部样式表

内联样式：把CSS样式直接放到HTML元素的标签中，在HTML标签中都有一个style属性，我们可以在其中直接定义样式

 <h1 style="color:red;">这是一个一级标题标签，使用内联样式</h1>

内部样式表：把CSS样式放在HTML文档的头部head标签中定义

<head>
    <style>
        h2{
            color:green;
        }
    </style>
</head>

<body>
   <h2>这是一个二级标题标签，使用内部样式表</h2>
</body>

外部样式表：把CSS样式单独放在一个CSS文件中，然后在head标签里面使用另一个标签将它链接到HTML文档中，这种方式允许在多个页面上重复使用相同的样式。

新建style.css文件，添加样式

h3{
    color:pink;
}

在原文件添加代码

<head>
    <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
   <h3>这是一个三级标题标签，使用外部样式表</h3>
</body>

网页效果：

3.CSS选择器

选择器是CSS中的关键部分，它允许你针对特定元素或一组元素定义样式。

常用选择器
元素选择器
类选择器
ID选择器
通用选择器
子元素选择器
后代选择器（包含选择器）
并集选择器（兄弟选择器）
伪类选择器

<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>CSS选择器</title>
    <style>
    /*元素选择器*/
        h2{
            color:aqua;
        }
    /*类选择器*/
        .highlight{
            background-color:yellow;
        }
    /*ID选择器*/
        #header{
            font-size:35px;
        }
     /*通用选择器*/
        *{
            font-family:KaiTi;
            font-weight:bolder;
        }
     /*子元素选择器*/
     .father>.son{
         color:yellowgreen;
     }
     /*后代选择器*/
     .father p{
         color:brown;
         font-size:larger;
     }
     /*相邻元素选择器*/
     h3+p{
         background-color:red;
     }
     /*伪类选择器*/
     #element:hover{
         background-color:blueviolet;
     }
    </style>
</head>

<body>
    <h1>不同类型的CSS选择器</h1>
    <h2>这是一个元素选择器</h2>
    <h3 class="highlight">这是一个类选择器</h3>
    <h4 id="header">这是一个ID选择器示例</h4>

    <div class="father">
        <p class="son">这是一个子元素选择器示例</p>
        <div>
            <p class="grandson">这是一个后代选择器示例</p>
        </div>

        <p>这是一个普通p标签</p>
        <h3>这是一个相邻兄弟选择器示例</h3>
        <p>这是另一个p标签</p>

        <h3 id="element">这是一个伪类选择器示例</h3>
    </div>

</body>
</html>

网页效果：

4.盒子模型

盒子模型是CSS中一种常用于布局的基本概念，理解盒子模型是构建网页布局的基础，能让你更精确的控制元素在页面中的位置和大小。

盒子模型相关属性
属性名	说明
内容（content）	盒子包含的实际内容，比如文本、图片等。
内边距(padding)	围绕在内容的内部，是内容与边框之间的空间。可以使用padding属性来设置。
边框(border)	围绕在内边距的外部，是盒子的边界。可以使用border属性来设置
外边框(margin)	围绕在边框的外部，是盒子与其他元素之间的空间。可以使用margin属性来设置。

<head>
    <style>
        .demo{
            background-color:deeppink;
            display:inline-block;
            border:3px solid yellow;
            padding:50px;
            margin:40px;
        }
        .border-demo{
            background-color:blanchedalmond;
            width:300px;
            height:200px;
            border-style:solid dashed dotted double;
            border-width:10px;
            background-color:brown
        }
    </style>
</head>

<body>
    <div class="demo">B站搜索</div>
    <div class="border-demo">这是一个边框示例</div>
</body>

网页效果：

5.浮动

传统网页布局方式

标准流（普通流、文档流）：网页按照元素的书写顺序依次排列
浮动
定位
Flebox和Grid（自适应布局）

标准流是由块级元素和行内元素按照默认规定的方式来排列，块级就是占一行，行内元素一行放好多个元素。

元素脱离文档流，根据开发者的意愿漂浮到网页的任意方向。

浮动属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使得元素进行浮动。

语法：

选择器{
    float: left/right/none;
}

注意：浮动是相对于父元素浮动，只会在父元素的内部移动

浮动的三大特性：

脱标：脱离标准流
一行显示，顶部对齐
具备行内块元素特性

<head>
    <style>
        .father{
            background-color:aquamarine;
            height:150px;
        }
        .left-son{
            width:100px;
            height:100px;
            background-color:cornflowerblue;
            float:left;
        }
        .right-son {
            width: 100px;
            height: 100px;
            background-color: indianred;
            float:right;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
    </div>
</body>

网页效果：

6.定位

定位布局可以精准定位，但缺乏灵活性

定位方式：

相对定位：相对于元素在文档流中的正常位置进行定位。
绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流。
固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而移动。

<1>.相对定位：

<head>
    <style>
        .box1{
            height:350px;
            background-color:aqua;
        }
        .box-normal {
            width: 100px;
            height: 100px;
            background-color: palegoldenrod;
        }
        .box-relative{
            width:100px;
            height:100px;
            background-color:darkorchid;
            position:relative;
            left:120px;
            top:40px;
        }
    </style>
</head>

<body>

    <h1>相对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-relative"></div>
        <div class="box-normal"></div>
    </div>
</body>

网页效果：

<2>.绝对定位：

<head>
    <style>
        .box2 {
            height: 350px;
            background-color: yellow;
            margin-bottom:300px;
        }

        .box-normal {
            width: 100px;
            height: 100px;
            background-color: palegoldenrod;
        }

        .box-absolute {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            position: absolute;
            left:120px;
        }
    </style>
</head>

<body>
    <h1>绝对定位</h1>
    <div class="box2">
        <div class="box-normal"></div>
        <div class="box-absolute"></div>
        <div class="box-normal"></div>
    </div>
</body>

网页效果：

<3>.相对定位：

<head>
    <style>
        .box-fixed {
            width: 100px;
            height: 100px;
            background-color: red;
            position:fixed;
            right:0;
            top:300px;
        }
    </style>
</head>

<body>
    <h1>固定定位</h1>
    <div class="box-fixed"></div>
</body>

网页效果：

三.JavaScript

JavaScript与Java没有任何关系，JavaScript简称JS。

JavaScript是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性。

作为一种客户端脚本语言，JavaScript可以直接嵌入HTML，并在浏览器中执行。

与HTML和CSS不同，JavaScript使得网页不再是静态的，而是可以根据用户的操作动态变化的。

JavaScript的作用

客户端脚本：用于在用户浏览器中执行，实现动态效果和用户交互。
网页开发：与HTML和CSS协同工作，使得网页具有更强的交互性和动态性。
后端开发：使用Node.js，JavaScript也可以在服务器端运行，实现服务器端应用的开发。

1.导入方式

常用的有两种，第一种是内联式，在HTML文件中直接嵌入JS代码。CSS代码放在style标签内，而JS代码放在script标签内，并且script标签可以是在head标签内，也可以是在body部分。

<head>
    <script>
        console.log('hello,head标签的内联样式');
    </script>
</head>

<body>

    <h1>JavaScript导入方式</h1>
    <script>
        console.log('hello,body标签的内联样式');
        alert('你好，内联样式弹窗');
    </script>
</body>

网页效果：

第二种是外部引入，把JS代码保存在单独的外部文件中，通过script标签的src属性引入

<head>
    <meta charset="utf-8" />
    <title>IS导入方式</title>
    <script src="./JS/Script1.js"></script>
</head>

<body>
    <h1>JavaScript导入方式</h1>
</body>

网页效果：

2.JS基本语法

学习基本语法时首先要了解变量和数据类型。首先就是变量，在JS我们使用三个关键字来声明变量，var，全名variable，也就是变量的简称，声明一个正常的变量具有函数作用域。let，声明的变量具有块级作用域，更安全灵活。const，声明一个常量，一般不会轻易改变。

<body>
    <script>
        var x;
        let y = 5;
        const PI = 3.14
        console.log(x, y, PI);
        let name = '如花';
        console.log(name);
        let empty_value = null;
        console.log(empty_value);
    </script>
</body>

网页效果：

3.JS控制语句

控制语句包括条件语句和循环语句。

<1>.条件语句

条件语句使用if，else if，else三个关键字

条件语句是编程中常用的结构，用于基于不同的条件执行不同的代码块。

if语句：用于执行一个代码块，当指定的条件为真（true）时执行。语法如下：

if（condition）{

//如果条件为真，执行这里的代码

}

else语句：用于在上一个if和所有else if都为假时执行的代码块。语法如下：

if（condition）{

//如果条件为真，执行这里的代码

}else{

//如果条件为假，执行这里的代码

}

else if语句：用于在上一个if语句和条件为假时，检查另一个条件。可以有多个else if语句。语法如下：

if（condition1）{

//如果条件1为真，执行这里的代码

}else if（condition2）{

//如果条件2为真，执行这里的代码

}else{

//如果以上条件都为假，执行这里的代码

}

<body>
    <script>
        var x;
        let y = 5;
        const PI = 3.14
        console.log(x, y, PI);
        let name = '如花';
        console.log(name);
        let empty_value = null;
        console.log(empty_value);

        let age = 18;
        if (age > 18) {
            console.log('你已经成年了');
        } else {
            console.log('未成年');
        }

        let time = 9;
        if (time < 12) {
            alert('上午好');
        } else if (time < 18) {
            alert('上午好');
        } else {
            alert(晚上好);
        }
    </script>
</body>

网页效果：

<2>.循环语句

循环语句用于重复执行一段代码，直到指定的条件不再满足为止。

for循环：是一种常见的循环结构，用于按照指定的条件重复执行代码块。语法如下：

for（初始化表达式；循环条件；迭代器）{

//循环体，执行这里的代码

}

<body>
    <script>
        console.log('FOR循环');
        for (let i = 1; i <= 10; i++) {
            console.log(i);
        }
    </script>
</body>

网页效果：

while循环会在指定的条件为真时执行代码块。语法如下：

while（循环条件）{

//循环体，执行这里的代码

}

<body>
    <script>    
        console.log('while循环');
        let count = 1
        while (count <= 10) {
            console.log(count);
            count++;
        }
    </script>
</body>

网页效果：

<3>.break与continue

循环关键字

break用于跳出循环，结束循环的执行。
continue用于跳出当前循环中的剩余代码，继续下一次循环。

<body>  
     <script>
            console.log('循环关键字');
            for (var i = 0; i < 5; i++) {
            if (i == 2) {
                continue;
            }
            if (i == 4) {
                break;
            }
            console.log(i);
        }
    </script>
</body>

网页效果：

4.JS函数

函数是一段可重复使用的代码块，它接受输入（参数）、执行特定任务，并返回输出。

function function_name(参数1，参数2，参数3，……){

//参数可以不写，表示不传参

//函数体，执行这里的代码

return 返回值； //可选，返回值

}

<body>
    <script>
        function hello() {
            console.log('hello,world');
        }
        hello();

        function hello_with_return() {
            return "hello,world - 返回值"
        }
        let a = hello_with_return();
        console.log(a);
        console.log(hello_with_return());

        function hello_with_params(name) {
            console.log('hello,' + name);
        }
        hello_with_params('美女');
        hello_with_params('帅哥');

    </script>
</body>

网页效果：

作用域分为全局作用域和局部作用域，在函数内部声明的变量具有局部作用域，也就是函数作用域，而在函数外部声明的变量具有全局作用域。

 <body>     
   <script>  
        //作用域
        let global_var = '全局变量';
        function local_var_function(params) {
            let local_var = '局部变量';
            console.log('函数内打印全局变量：' + global_var);
            console.log('函数内打印局部变量：' + local_var);
        }
        local_var_function();

        console.log('函数内打印全局变量：' + global_var);
        console.log('函数内打印局部变量：' + local_var);

    </script>
</body>

网页效果：

5.JS事件

事件是文档或浏览器窗口中发生的特定瞬间，例如用户的点击、键盘的按下、页面的加载。常见的事件如下：

事件	描述
onClick	点击事件
onMouseOver	鼠标经过
onMouseOut	鼠标移出
onChange	文本内容改变事件
onSelect	文本框选中
onFocus	光标聚集
onBlur	移开光标

事件绑定

JavaScript绑定事件的方法有三种

HTML属性
DOM属性
addEventListener方法

<body>
    <button onclick="click_event()">这是一个点击事件按钮</button>
    <input type="text" onfocus="focus_event()" onblur="blur_event()" />
    <script>
        //点击事件
        function click_event() {
            alert('点击事件触发了')
        }
        //聚焦事件
        function focus_event() {
            console.log('获取焦点')
        }
        //失焦事件
        function blur_event() {
            console.log('失去焦点')
        }
    </script>
</body>

网页效果：

6.JS DOM

在Web开发中，DOM通常与JavaScript一起使用。

当网页被加载时，浏览器会创建页面的文档对象模型，也就是DOM（Document Object Model）。

每个HTML或XML文档都可以被视为一个文档树，文档树是整个文档的层次结构表示。

文档节点是整个文档树的根节点。

DOM为这个文档树提供了一个编程接口，开发者可以使用JavaScript来操作这个树状结构。

7.Flex弹性盒子

采用Flex布局的元素，称为Flex容器。它的所有子元素自动成为容器成员，称为Flex项目。

Flex容器属性

flex-direction；
flex-wrap；
flex-flow：flex-direction属性和flex-wrap属性的简写方式；
justify-content；
align-items；
align-content：多轴线对齐方式

flex-direction：决定主轴的方向（即项目的排列方向）

属性值	作用
row（默认值）	主轴为水平方向，起点在左端（项目从左往右排列）
row-reverse	主轴为水平方向，起点在右端（项目从右往左排列）
column	主轴为垂直方向，起点在上沿（项目从上往下排列）
column-reverse	主轴为垂直方向，起点在下沿（项目从下往上排列）

flex-wrap：默认情况下，项目都排列在一条轴线上，如果一条轴线排不下的换行方式

属性值	作用
nowrap（默认）	不换行（列）
wrap	主轴为横向时：从上到下换行；主轴为纵向时：从左到右换列
wrap-reverse	主轴为横向时：从下到上换行；主轴为纵向时：从右到左换列

justify-content：定义了项目在主轴上的对齐方式

属性值	作用
flex-start（默认）	与主轴的起点对齐
flex-end	与主轴的终点对齐
center	与主轴的中点对齐
space-between	两端对齐主轴的起点和终点，项目之间的间隔都相等
space-around	每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍

align-items：定义项目在交叉轴上如何对齐

属性值	作用
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐
stretch（默认值）	如果项目未设置高度auto，项目将占满整个容器的高度

align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

属性值	作用
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）	主轴线占满整个交叉轴

ORZ