HTML+CSS基础(了解水平)

news2025/3/16 7:24:34

html 的介绍

学习目标

  • 能够知道html的作用

1. html的定义

2. html的定义

HTML 的全称为:HyperText Mark-up Language, 指的是超文本标记语言。 标记:就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1> 等,标签大多数都是成对出现的。

所谓超文本,有两层含义:

  1. 因为网页中还可以图片、视频、音频等内容(超越文本限制)

  2. 它还可以在网页中跳转到另一个网页,与世界各地主机的网页链接(超链接文本)

3. html的作用

html是用来开发网页的,它是开发网页的语言。

4. 小结

  • html是开发网页的语言

  • html中的标签大多数都是成对出现的, 格式: <标签名></标签名>

html 的基本结构

学习目标

  • 能够写出html的基本结构

1. 结构代码

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>
  1. 第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。

  2. <html>...</html>标签是开发人员在告诉浏览器,整个网页是从<html>这里开始的,到</html>结束,也就是html文档的开始和结束标签。

  3. <head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。

  4. <body>...</body>标签是编写网页上显示的内容。

2. 浏览网页文件

网页文件的后缀是.html或者.htm, 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页。

3. 小结

vscode 的基本使用

学习目标

  • 能够安装和卸载 vscode 的插件

  • 能够设置 vscode 的颜色主题和字体大小


1. vscode 的基本介绍

全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的一款免费、开源的跨平台代码编辑器,目前是前端(网页)开发使用最多的一款软件开发工具。

2. vscode 的安装

  1. 下载网址: Download Visual Studio Code - Mac, Linux, Windows

  2. 选择对应的安装包进行下载:

  1. 根据下载的安装包双击进行安装即可,当然为了更好的使用 vscode 还可以安装对应的插件。

3. vscode 的插件安装

插件名说明
Chinese (Simplified) Language Pack for VS Code中文(简体)汉化包
open in browser右击在浏览器打开html

① 汉化插件安装

② open in browser插件安装

注意: 如果在vscode打开的html文档中右击没有出现 open in browser 类型的选项,需要把当前打开的文件关掉,重新打开这个文件就好了。

4. vscode 的插件卸载

点击对应安装的插件,然后再点击卸载按钮即可。

5. vscode 的使用

① 打开文件夹创建文件

② 快速创建html文档的基本结构

③ 右击在浏览器打开html文档

6. 设置字体大小

7. 设置颜色主题

8. 设置默认浏览器[可选]

可以根据自己的需要设置默认使用的浏览器

9. 小结

  • vscode 是由微软研发的一款免费、开源的跨平台代码编辑器

  • 通过资源管理器打开文件夹创建HTML文件,编写 HTML 代码

  • 可以根据需要安装对应的插件

  • 可以设置字体大小和颜色主题

初始常用的 html 标签

学习目标

  • 能够知道单标签和双标签的区别


1. 常用的 html 标签

<!-- 1、成对出现的标签:-->
​
<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>
​
​
<!-- 2、单个出现的标签: -->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>
​
<!-- 3、带属性的标签,如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>
​
<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>

提示:

  1. 标签不区分大小写,但是推荐使用小写。

  2. 根据标签的书写形式,标签分为双标签(闭合标签)和单标签(空标签) 2.1 双标签是指由开始标签和结束标签组成的一对标签,这种标签允许嵌套和承载内容,比如: div标签 2.2 单标签是一个标签组成,没有标签内容, 比如: img标签

2. 小结

  • 学习 html 语言就是学习标签的用法,常用的标签有20多个。

  • 编写 html 标签建议使用小写

  • 根据书写形式,html 标签分为双标签和单标签

  • 单标签没有标签内容,双标签可以嵌套其它标签和承载文本内容

资源路径

学习目标

  • 能够知道相对路径和绝对路径的区别


当我们使用img标签显示图片的时候,需要指定图片的资源路径,比如:

<img src="images/logo.png">

这里的src属性就是设置图片的资源路径的,资源路径可以分为相对路径和绝对路径

1. 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">

同级关系:直接引用文件名称

Linux => ./images/

Windows => images/

上一级关系:../

下一级关系:文件夹名称/

2. 绝对路径

从根目录算起的路径叫做绝对路径,Windows 的根目录是指定的盘符,mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都会使用相对路径,绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

3. 小结

  • 相对路径和绝对路径是 html 标签使用资源文件的两种方式,一般使用相对路径。

  • 相对路径是从当前操作的 html 文档所在目录算起的路径

  • 绝对 路径是从根目录算起的路径

列表标签

学习目标

  • 能够知道列表标签的种类


1. 列表标签的种类

  • 无序列表标签(ul标签)

  • 有序列表标签(ol标签)

2. 无序列表

<!-- ul标签定义无序列表 -->
<ul>
    <!-- li标签定义列表项目 -->
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>

3. 有序列表

<!-- ol标签定义有序列表 -->
<ol>
    <!-- li标签定义列表项目 -->
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ol>

4. 小结

  • 列表标签有无序列表标签(ul标签)和有序列表标签(ol标签)

  • 列表项目对顺序有要求的时候使用ol标签

  • 列表项目对顺序无要求的时候使用ul标签

表格标签

学习目标

  • 能够知道表格的边线合并


1. 表格的结构

表格是由行和列组成,好比一个excel文件

2. 表格标签

  • ​标签:表示一个表格

示例代码:

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td> 
    </tr>
</table>

表格边线合并:

border-collapse 设置表格的边线合并,如:border-collapse:collapse;

表单标签

学习目标

  • 能够知道表单中常用的表单元素标签


1. 表单的介绍

表单用于搜集不同类型的用户输入(用户输入的数据),然后可以把用户数据提交到web服务器 。

2. 表单相关标签的使用

  1. <form>标签 表示表单标签,定义整体的表单区域

  2. <label>标签 表示表单元素的文字标注标签,定义文字标注

  3. <input>标签 表示表单元素的用户输入标签,定义不同类型的用户输入数据方式

    • type属性

      • type="text" 定义单行文本输入框

      • type="password" 定义密码输入框

      • type="radio" 定义单选框

      • type="checkbox" 定义复选框

      • type="file" 定义上传文件

      • type="submit" 定义提交按钮

      • type="reset" 定义重置按钮

      • type="button" 定义一个普通按钮

  4. <textarea>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框

  5. <select>标签 表示表单元素的下拉列表标签 定义下拉列表

    • <option>标签 与<select>标签配合,定义下拉列表中的选项

示例代码:

<form>
    <p>
        <label>姓名:</label><input type="text">
    </p>
    <p>
        <label>密码:</label><input type="password">
    </p>
    <p>
        <label>性别:</label>
        <input type="radio"> 男
        <input type="radio"> 女
    </p>
    <p>
        <label>爱好:</label>
        <input type="checkbox"> 唱歌
        <input type="checkbox"> 跑步
        <input type="checkbox"> 游泳
    </p>
    <p>
        <label>照片:</label>
        <input type="file">
    </p>
    <p>
        <label>个人描述:</label>
        <textarea></textarea>
    </p>
    <p>
        <label>籍贯:</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

3. 小结

  • 表单标签是<form>标签

  • 常用的表单元素标签有: <label><input><textarea><select> 等标签

表单提交

学习目标

  • 能够知道表单的提交方式

  • 能够知道表单中action属性的作用


1. 表单属性设置

<form>标签 表示表单标签,定义整体的表单区域

  • action属性 设置表单数据提交地址

  • method属性 设置表单提交的方式,一般有“GET”方式和“POST”方式, 不区分大小写

2. 表单元素属性设置

  • name属性 设置表单元素的名称,该名称是提交数据时的参数名

  • value属性 设置表单元素的值,该值是提交数据时参数名所对应的值

3. 示例代码

<form action="https://www.baidu.com" method="GET">
    <p>
        <label>姓名:</label><input type="text" name="username" value="11" />
    </p>
    <p>
        <label>密码:</label><input type="password" name="password" />
    </p>
    <p>
        <label>性别:</label>
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
        <label>爱好:</label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 游泳
    </p>
    <p>
        <label>照片:</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>个人描述:</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍贯:</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>
</form>

小结

  • 表单标签的作用就是可以把用户输入数据一起提交到web服务器。

  • 表单属性设置

    • action: 是设置表单数据提交地址

    • method: 是表单提交方式,提交方式有GET和POST

  • 表单元素属性设置

    • name: 表单元素的名称,用于作为提交表单数据时的参数名

    • value: 表单元素的值,用于作为提交表单数据时参数名所对应的值

css 的介绍

学习目标

  • 能够知道css的作用


1. css 的定义

css(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种语言。

没有使用css的效果图

使用css的效果图

2. css 的作用

  1. 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。

  2. 控制页面布局, 比如: 设置浮动、定位等样式。

3. css 的基本语法

选择器{

样式规则

}

样式规则:

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

...

选择器:是用来选择标签的,选出来以后给标签加样式。

代码示例:

div{ 
    width:100px; 
    height:100px; 
    background:gold; 
}

说明

css 是由两个主要的部分构成:选择器和一条或多条样式规则,注意:样式规则需要放到大括号里面。

4. 小结

  • css 是层叠样式表,它是用来美化网页和控制页面布局的。

  • 定义 css 的语法格式是: 选择器{样式规则}

css 的引入方式

学习目标

  • 能够知道 css 的引入三种方式


css的三种引入方式

  1. 行内式

  2. 内嵌式(内部样式)

  3. 外链式

1. 行内式

直接在标签的 style 属性中添加 css 样式

示例代码:

<div style="width:100px; height:100px; background:red ">hello</div>

优点:方便、直观。 缺点:缺乏可重用性。

2. 内嵌式(内部样式)

<head>标签内加入<style>标签,在<style>标签中编写css代码。

示例代码:

<head>
   <style type="text/css">
      h3{
         color:red;
      }
   </style>
</head>

优点:在同一个页面内部便于复用和维护。 缺点:在多个页面之间的可重用性不够高。

3. 外链式

将css代码写在一个单独的.css文件中,在<head>标签中使用<link>标签直接引入该文件到页面中。

示例代码:

<link rel="stylesheet" type="text/css" href="css/main.css">

优点:使得css样式与html页面分离,便于整个页面系统的规划和维护,可重用性高。 缺点:css代码由于分离到单独的css文件,容易出现css代码过于集中,若维护不当则极容易造成混乱。

4. css引入方式选择

  1. 行内式几乎不用

  2. 内嵌式在学习css样式的阶段使用

  3. 外链式在公司开发的阶段使用,可以对 css 样式和 html 页面分别进行开发。

5. 小结

  • css 的引入有三种方式, 分别是行内式、内嵌式、外链式。

  • 外链式是在公司开发的时候会使用,最能体现 div+css 的标签内容与显示样式分离的思想, 也最易改版维护,代码看起来也是最美观的一种。

css 选择器

学习目标

  • 能够说出 css 选择器的种类


1. css 选择器的定义

css 选择器是用来选择标签的,选出来以后给标签加样式。

2. css 选择器的种类

  1. 标签选择器

  2. 类选择器

  3. 层级选择器(后代选择器)

  4. id选择器

  5. 组选择器

  6. 伪类选择器

3. 标签选择器

根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置。

示例代码

<style type="text/css">
    p{
        color: red;
    }
</style>
​
<div>hello</div>
<p>hello</p>

4. 类选择器

根据类名来选择标签,以 . 开头, 一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用,是css中应用最多的一种选择器。

示例代码

<style type="text/css">
    .blue{color:blue}
    .big{font-size:20px}
    .box{width:100px;height:100px;background:gold} 
</style>
​
<div class="blue">这是一个div</div>
<h3 class="blue big box">这是一个标题</h3>
<p class="blue box">这是一个段落</p>

5. 层级选择器(后代选择器)

根据层级关系选择后代标签,以选择器1 选择器2开头,主要应用在标签嵌套的结构中,减少命名。

示例代码

<style type="text/css">
    div p{
        color: red;
    }
    .con{width:300px;height:80px;background:green}
    .con span{color:red}
    .con .pink{color:pink}
    .con .gold{color:gold}    
</style>
​
<div>
    <p>hello</p>
</div>
​
<div class="con">
    <span>哈哈</span>
    <a href="#" class="pink">百度</a>
    <a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>

注意点: 这个层级关系不一定是父子关系,也有可能是祖孙关系,只要有后代关系都适用于这个层级选择器

6. id选择器

根据id选择标签,以#开头, 元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。

示例代码

<style type="text/css">
    #box{color:red} 
</style>
​
<p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式,其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名  -->

注意点: 虽然给其它标签设置id=“box”也可以设置样式,但是不推荐这样做,因为id是唯一的,以后js通过id只能获取一个唯一的标签对象。

7. 组选择器

根据组合的选择器选择不同的标签,以 , 分割开, 如果有公共的样式设置,可以使用组选择器。

示例代码

<style type="text/css">
    .box1,.box2,.box3{width:100px;height:100px}
    .box1{background:red}
    .box2{background:pink}
    .box2{background:gold}
</style>
​
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>

8. 伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

<style type="text/css">
    .box1{width:100px;height:100px;background:gold;}
    .box1:hover{width:300px;}
</style>
​
<div class="box1">这是第一个div</div>

9. 小结

  • css 选择器就是用来选择标签设置样式的

  • 常用的 css 选择器有六种,分别是:

    1. 标签选择器

    2. 类选择器

    3. 层级选择器(后代选择器)

    4. id选择器

    5. 组选择器

    6. 伪类选择器

css 属性

学习目标

  • 能够知道常用的样式属性


我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。

1. 布局常用样式属性

  • width 设置元素(标签)的宽度,如:width:100px;

  • height 设置元素(标签)的高度,如:height:200px;

  • background 设置元素背景色或者背景图片,如:background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。

  • border 设置元素四周的边框,如:border:1px solid black; 设置元素四周边框是1像素宽的黑色实线

  • 以上也可以拆分成四个边的写法,分别设置四个边的:

  • border-top 设置顶边边框,如:border-top:10px solid red;

  • border-left 设置左边边框,如:border-left:10px solid blue;

  • border-right 设置右边边框,如:border-right:10px solid green;

  • border-bottom 设置底边边框,如:border-bottom:10px solid pink;

2. 文本常用样式属性

  • color 设置文字的颜色,如: color:red;

  • font-size 设置文字的大小,如:font-size:12px;

  • font-family 设置文字的字体,如:font-family:'微软雅黑';为了避免中文字不兼容,一般写成:font-family:'Microsoft Yahei';

  • font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

  • line-height 设置文字的行高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px

  • text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉

  • text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中(left/center/right)

  • text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px

3. 布局常用样式属性示例代码

<style>
​
    .box1{
        width: 200px; 
        height: 200px; 
        background:yellow; 
        border: 1px solid black;
    }
​
    .box2{
        /* 这里是注释内容 */
        /* 设置宽度 */
        width: 100px;
        /* 设置高度 */
        height: 100px;
        /* 设置背景色 */
        background: red;
        /* 设置四边边框 */
        /* border: 10px solid black; */
        border-top: 10px solid black;
        border-left: 10px solid black;
        border-right: 10px solid black;
        border-bottom: 10px solid black;
        /* 设置内边距, 内容到边框的距离,如果设置四边是上右下左 */
        /* padding: 10px;   */
        padding-left: 10px;
        padding-top: 10px;
        /* 设置外边距,设置元素边框到外界元素边框的距离 */
        margin: 10px;
        /* margin-top: 10px;
        margin-left: 10px; */
        float: left;
    }
​
    .box3{
        width: 48px; 
        height: 48px; 
        background:pink; 
        border: 1px solid black;
        float: left;
    }
​
</style>
​
<div class="box1">
    <div class="box2">
        padding 设置元素包含的内容和元素边框的距离
    </div>
    <div class="box3">
    </div>
</div>

4. 文本常用样式属性示例

<style>
    p{
       /* 设置字体大小  浏览器默认是 16px */
       font-size:20px;
       /* 设置字体 */
       font-family: "Microsoft YaHei"; 
       /* 设置字体加粗 */
       font-weight: bold;
       /* 设置字体颜色 */
       color: red;
       /* 增加掉下划线 */
       text-decoration: underline;
       /* 设置行高  */
       line-height: 100px;
       /* 设置背景色 */
       background: green;
       /* 设置文字居中 */
       /* text-align: center; */
       text-indent: 40px;
    }
​
    a{
        /* 去掉下划线 */
        text-decoration: none;
    }
</style>
​
<a href="#">连接标签</a>
<p>
    你好,世界!
</p>

5. 小结

  • 设置不同的样式属性会呈现不同网页的显示效果

  • 样式属性的表现形式是: 属性名:属性值;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2315884.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[设计模式]1_设计模式概览

摘要&#xff1a;设计模式原则、设计模式的划分与简要概括&#xff0c;怎么使用重构获得设计模式并改善代码的坏味道。 本篇作概览与检索用&#xff0c;后续结合源码进行具体模式深入学习。 目录 1、设计模式原理 核心原则&#xff08;语言无关&#xff09; 本质原理图 原…

Elasticsearch集群与日志系统实战部署指南

一、环境规划与初始化配置 1. 服务器资源分配 IP地址部署服务主机名172.25.23.7ES Kafka Zookeeper Kibananode1172.25.23.8ES Kafka Zookeeper Filebeatnode2172.25.23.9Kafka Zookeeper Apache Logstashnode3 系统要求&#xff1a; 配置&#xff1a;4核CPU / 4G…

SFT数据处理部分的思考

SFT数据及处理的业内共识 1&#xff0e;prompt的质量和多样性远重要于数据量级&#xff0c;微调一个 30 b 量级的base model只需要 10 w 量级的数据即可 参考&#xff1a;《LIMA&#xff1a;Less Is More for Alignment》 2&#xff0e;合成数据很重要&#xff01;一般需要通过…

netsh实现TCP端口转发

服务器&#xff1a;192.168.31.9 端口&#xff1a;56000 客户端&#xff1a;192.168.31.2 端口&#xff1a;5600 客户端&#xff08;本地端口5600&#xff09;通过TCP连接服务器的56000端口 PC&#xff1a;192.168.31.5&#xff0c;PC实现客户端和服务器之间56000端口转发 1. …

leetcode 75.颜色分类(荷兰国旗问题)

题目描述 题目分析 本题是经典的「荷兰国旗问题」&#xff0c;由计算机科学家 Edsger W. Dijkstra 首先提出。 要想单独解决这道题本身还是很简单的&#xff0c;统计0、1、2的数量然后按顺序赋值&#xff0c;或者手写一个冒泡排序&#xff0c;whatever。 但是在这一题中我们主…

在windows上通过idea搭建doris fe的开发环境(快速成功版)

一、前置环境准备 1. 准备Linux环境&#xff0c;我起的虚机&#xff0c;使用CentOS8&#xff0c;4核、12G&#xff0c;磁盘50G 1.1.备份yum源 # 系统下载连接&#xff1a;magnet:?xturn:btih:9DB46A612D04763AA7DB02A0FF63EDE2EA555867&dnCentOS-8.1.1911-x86_64-dvd1.…

MyBatis源码分析の配置文件解析

文章目录 前言一、SqlSessionFactoryBuilder1.1、XMLConfigBuilder1.2、parse 二、mappers标签的解析2.1、cacheElement2.1.1、缓存策略 2.2、buildStatementFromContext2.2.1、sql的解析 前言 本篇主要介绍MyBatis源码中的配置文件解析部分。MyBatis是对于传统JDBC的封装&…

python爬虫笔记(一)

文章目录 html基础标签和下划线无序列表和有序列表表格加边框 html的属性a标签&#xff08;网站&#xff09;target属性换行线和水平分割线 图片设置宽高width&#xff0c;height html区块——块元素与行内元素块元素与行内元素块元素举例行内元素举例 表单from标签type属性pla…

DC-6靶机详解

一、主机发现 arp-scan -l靶机ip为192.168.55.159 二、端口扫描、目录枚举、指纹识别、 2.1端口扫描 nmap 192.168.55.159发现没有开放特殊端口 看来信息收集的重点要放在网页中了 2.2目录枚举 dirb http://192.168.55.1592.3指纹识别 nmap 192.168.55.159 -sV -sC -O …

STM32-SPI通信外设

目录 一&#xff1a;SPI外设简介 SPI框图​编辑 SPI逻辑 ​编辑 主模式全双工连续传输 ​编辑 非连续传输 二&#xff1a;硬件SPI读写W25Q64 1.接线&#xff1a; 2. 代码 SPI外设的初始化 生成时序 一&#xff1a;SPI外设简介 STM32内部集成了硬件SPI收发电路&#…

远程控制中的云电脑是什么意思?1分钟学会用

很多常用我们ToDesk远程控制的朋友们或许会注意到无论是在PC端还是移动端中都出现有【云电脑】【来云电脑爽玩-新用户免费1小时】这些词句等信息。那么这究竟是代表什么意思呐&#xff1f;云电脑是什么又怎么用呐&#xff1f;为什么要增加云电脑&#xff1f;以下小编就为大家科…

网络爬虫【简介】

我叫补三补四&#xff0c;很高兴见到大家&#xff0c;欢迎一起学习交流和进步 今天来讲一讲视图 一、网络爬虫的定义 网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;又称为网络蜘蛛、网络机器人等&#xff0c;是一种按照一定规则自动抓取互联网信息的程序或脚本。它…

2024华东师范大学计算机复试上机真题

2024华东师范大学计算机复试机试真题 2023华东师范大学计算机复试机试真题 2022华东师范大学计算机复试机试真题 2024华东师范大学计算机复试上机真题 2023华东师范大学计算机复试上机真题 2022华东师范大学计算机复试上机真题 在线评测&#xff1a;传动门&#xff1a;pgcode…

14.使用各种读写包操作 Excel 文件:辅助模块

一 各种读写包 这些是 pandas 在底层使用的各种读写包。无须安装 pandas&#xff0c;直接使用这些读写包就能够读写 Excel 工作簿。可以尽可能地使用 pandas 来解决这类问题&#xff0c;只在 pandas 没有提供你所需要的功能时才用到读写包。 表中没有 xlwings &#xff0c;因为…

Python数据分析之数据可视化

Python 数据分析重点知识点 本系列不同其他的知识点讲解&#xff0c;力求通过例子让新同学学习用法&#xff0c;帮助老同学快速回忆知识点 可视化系列&#xff1a; Python基础数据分析工具数据处理与分析数据可视化机器学习基础 四、数据可视化 图表类型与选择 根据数据特…

1、操作系统引论

一、操作系统 会使用linux系统 建议大家先学会linux的基础指令&#xff0c;可以看菜鸟教程网站进行学习。 1、各种定义 操作系统定义 管理计算机的 硬件 和软件资源&#xff0c; 能对各类作业进行调度&#xff0c;方便用户使用计算机的程序集合。操作系统运行在内核态&#xf…

HarmonyOS NEXT - 网络请求问题(http)

HTTP&#xff08;HyperText Transfer Protocal&#xff0c;超文本传输协议&#xff09;是一种用于传输超媒体文档&#xff08;如HTML&#xff09;的应用层协议&#xff0c;它是客户端和服务器之间通信的基础&#xff1b;无论是获取数据、提交表单、上传文件&#xff0c;HTTP都扮…

告别旧版本,功能全面升级!

小伙伴们&#xff0c;今天来给大家唠唠一款超经典的软件——格式工厂&#xff01;相信很多人都不陌生吧&#xff1f;它可是早期超多人用的视频格式转换工具呢&#xff01;但随着软件行业的发展&#xff0c;它慢慢被其他工具代替了&#xff0c;像万兴、小丸、AME这些新宠儿一出现…

Obsidian Copilot:打造你的专属 AI 笔记助手

Obsidian Copilot作为一款非常受欢迎的Obsidian插件&#xff0c;不仅极大地提升了用户的笔记管理和信息检索效率&#xff0c;还通过其多样化的AI功能为用户带来了前所未有的便捷体验。本文将详细介绍Obsidian Copilot的核心特点、使用方法及个人体验分享。 核心特点 Obsidian…

VPC4-通达oa-docker逃逸-shiro反序列化-hash传递-CrackMapExec喷射-历史ptt攻击-进程注入

由于本人是菜鸡&#xff0c;不会免杀&#xff0c;所有免杀的部分就直接跳过了 &#xff08;hhh) 靶场地址&#xff1a; 链接: https://pan.baidu.com/s/1Fh1Zg79n1yjCPe6rrQ2apA 提取码: qiag 第一台ubuntu(docker逃逸&#xff0c;shiro反序列化&#xff09; fscan扫到一…