广龙宇

web前端基础（一）——HTML+CSS

系列文章目录

web前端基础（一）——HTML+CSS

系列文章目录

前言

HTML

HTML的介绍

1. html的定义

2. html的作用

HTML的基本结构

1. 结构代码

2. 浏览网页文件

vscode的下载与使用

1. vscode 的基本介绍

2. vscode 的安装

3. vscode 的插件安装

4. vscode 的插件卸载

5. 设置字体大小

6. 设置颜色主题

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

初识常用的HTML标签

1. 常用的 html 标签

资源路径

1. 相对路径

2. 绝对路径

列表标签

1. 列表标签的种类

2. 无序列表

3. 有序列表

表格标签

1. 表格的结构

2. 表格标签

表单标签

1. 表单的介绍

2. 表单相关标签的使用

表单提交

1. 表单属性设置

2. 表单元素属性设置

3. 示例代码

CSS

css的介绍

1. css 的定义

2. css 的作用

3. css 的基本语法

css的引入方式

1. 行内式

2. 内嵌式（内部样式）

3. 外链式

4. css引入方式选择

css的选择器

1. css 选择器的定义

2. css 选择器的种类

3. 标签选择器

4. 类选择器

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

6. id选择器

7. 组选择器

8. 伪类选择器

css的属性

1. 布局常用样式属性

2. 文本常用样式属性

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

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

css的元素溢出

1. 什么是 css 元素溢出

2. 示例代码

css的显示特性

1. display 属性的使用

2. 示例代码

盒子模型

1. 盒子模型的介绍

2. 盒子模型相关样式属性

总结

前言

HTML+CSS是学习前端技术的基础，万丈高楼平地起，总得有基础的材料才行，巧妇难为无米之炊，而本节内容就是盖楼的基础。

HTML

HTML的介绍

1. html的定义

HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。标记：就是标签, <标签名称> , 比如: 、

等，标签大多数都是成对出现的。

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

因为网页中还可以图片、视频、音频等内容(超越文本限制)
它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)

2. html的作用

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

HTML的基本结构

1. 结构代码

第一行是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
...标签是开发人员在告诉浏览器，整个网页是从这里开始的，到结束,也就是html文档的开始和结束标签。
...标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
...标签是编写网页上显示的内容。

2. 浏览网页文件

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

vscode的下载与使用

1. vscode 的基本介绍

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

2. vscode 的安装

下载网址: https://code.visualstudio.com/Download
选择对应的安装包进行下载:

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

3. vscode 的插件安装

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

汉化插件安装

4. vscode 的插件卸载

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

5. 设置字体大小

6. 设置颜色主题

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

初识常用的HTML标签

1. 常用的 html 标签



h1标题
这是一个div标签
这个一个段落标签










百度网



    
    百度网

提示:

标签不区分大小写，但是推荐使用小写。
根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)
2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签
2.2 单标签是一个标签组成，没有标签内容，比如: img标签

资源路径

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

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

1. 相对路径

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

示例代码:

2. 绝对路径

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

示例代码:

提示:

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

列表标签

1. 列表标签的种类

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

2. 无序列表



    
    列表标题一
    列表标题二
    列表标题三

3. 有序列表



    
    列表标题一
    列表标题二
    列表标题三

表格标签

1. 表格的结构

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

2. 表格标签

标签：表示一个表格

标签：表示表格中的一行

标签：表示表格中的列

标签：表示表格中的表头

示例代码:

表格边线合并:

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

表单标签

1. 表单的介绍

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

2. 表单相关标签的使用

标签表示表单标签，定义整体的表单区域
标签表示表单元素的文字标注标签，定义文字标注
标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
- type属性
  - type="text" 定义单行文本输入框
  - type="password" 定义密码输入框
  - type="radio" 定义单选框
  - type="checkbox" 定义复选框
  - type="file" 定义上传文件
  - type="submit" 定义提交按钮
  - type="reset" 定义重置按钮
  - type="button" 定义一个普通按钮
</code>标签表示表单元素的多行文本输入框标签定义多行文本输入框</p> </li> <li> <p><code><select></code>标签表示表单元素的下拉列表标签定义下拉列表</p> <ul> <li><code><option></code>标签与<code><select></code>标签配合，定义下拉列表中的选项</li> </ul></li> </ol> <p><strong>示例代码:</strong></p> <pre><code class="language-html"><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>
籍贯：
表单提交

1. 表单属性设置
标签表示表单标签，定义整体的表单区域
- action属性设置表单数据提交地址
- method属性设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写
2. 表单元素属性设置
- name属性设置表单元素的名称，该名称是提交数据时的参数名
- value属性设置表单元素的值，该值是提交数据时参数名所对应的值
3. 示例代码
```
    
        姓名：
    
    
        密码：
    
    
        性别：
         男
         女
    
    
        爱好：
         唱歌
         跑步
         游泳
    
    
        照片：
        
    
    
        个人描述：
        
    
    
        籍贯：
        
    
    
        
        
    
```
CSS

css的介绍

1. css 的定义

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

2. css 的作用
1. 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。
2. 控制页面布局, 比如: 设置浮动、定位等样式。
3. css 的基本语法

选择器{

样式规则

}

样式规则：

属性名1：属性值1;

属性名2：属性值2;

属性名3：属性值3;

...

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

代码示例:
```
div{ 
    width:100px; 
    height:100px; 
    background:gold; 
}
```
说明

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

css的引入方式

css的三种引入方式
1. 行内式
2. 内嵌式（内部样式）
3. 外链式
1. 行内式

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

示例代码:
```
hello
```
优点：方便、直观。

缺点：缺乏可重用性。

2. 内嵌式（内部样式）
在标签内加入
优点：在同一个页面内部便于复用和维护。

缺点：在多个页面之间的可重用性不够高。

3. 外链式

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

示例代码:
优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。

缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。

4. css引入方式选择
1. 行内式几乎不用
2. 内嵌式在学习css样式的阶段使用
3. 外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。
css的选择器

1. css 选择器的定义

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

2. css 选择器的种类
1. 标签选择器
2. 类选择器
3. 层级选择器(后代选择器)
4. id选择器
5. 组选择器
6. 伪类选择器
3. 标签选择器

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

示例代码
```
hello
hello
```
4. 类选择器

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

示例代码
```
这是一个div
这是一个标题
这是一个段落
```
5. 层级选择器(后代选择器)

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

示例代码
```
    hello



    哈哈
    百度
    谷歌

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

6. id选择器

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

示例代码
```
这是一个段落标签
   
这是第二个段落标签
 
这是第三个段落标签
 
```
注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。

7. 组选择器

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

示例代码
```
这是第一个div
这是第二个div
这是第三个div
```
8. 伪类选择器

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

示例代码
```
这是第一个div
```
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;
- padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
- margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
- float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;
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 设置文字水平居中
- text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
3. 布局常用样式属性示例代码
```
    
        padding 设置元素包含的内容和元素边框的距离
    
    
    
```
4. 文本常用样式属性示例
```
连接标签

    你好，世界!
```
css的元素溢出

1. 什么是 css 元素溢出

当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。

overflow的设置项：
1. visible 默认值, 显示子标签溢出部分。
2. hidden 隐藏子标签溢出部分。
3. auto 如果子标签溢出，则可以滚动查看其余的内容。
2. 示例代码
```
    hello
```
css的显示特性

1. display 属性的使用

display 属性是用来设置元素的类型及隐藏的，常用的属性有：
- none 元素隐藏且不占位置
- inline 元素以行内元素显示
- block 元素以块元素显示
2. 示例代码
```
这是第一个div
这是第二个div
这是第一个链接
这是第二个链接
```
说明:

行内元素不能设置宽高，块元素或者行内块元素可以设置宽高。

盒子模型

1. 盒子模型的介绍

所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。

盒子模型示意图如下：

2. 盒子模型相关样式属性
- 盒子的内容宽度(width)，注意：不是盒子的宽度
- 盒子的内容高度(height)，注意：不是盒子的高度
- 盒子的边框(border)
- 盒子内的内容和边框之间的间距(padding)
- 盒子与盒子之间的间距(margin)
设置宽高：

设置盒子的宽高，此宽高是指盒子内容的宽高，不是盒子整体宽高
```
width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
```
设置边框:

设置一边的边框，比如顶部边框，可以按如下设置：
```
border-top:10px solid red;
```
说明:

其中10px表示线框的粗细；solid表示线性；red表示边框的颜色

设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：
```
border:10px solid red;
```
设置内间距padding

设置盒子四边的内间距，可设置如下：
```
padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */
```
上面的设置可以简写如下：
```
padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
四个方向的内边距值。 */
```
padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
```
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */
```
设置外间距margin

外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。

盒子的真实尺寸

盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：
- 盒子宽度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
总结

以上就是本次的所有内容了，HTML+css虽然比较简单，但是还应多加练习才能掌握，学编程一定要动手。
你可能感兴趣的:(web前端技术,html5,html,前端,css3)
GS-SLAM论文阅读笔记-MGSO zenpluck GS论文阅读论文阅读笔记
前言MGSO首字母缩略词是直接稀疏里程计(DSO)，我们建立的光度SLAM系统和高斯飞溅(GS)的混合。这应该是第一个前端用DSO的高斯SLAM，不知道这个系统的组合能不能打得过ORB-SLAM3，以及对DSO会做出怎么样的改进以适应高斯地图，接下来就看一下吧！GishelloG^s_ihelloGishello我是红色文章目录前言1.背景介绍2.关键内容2.1SLAMmodule2.2Dense

HTML5响应式使用css媒体查询前段技术人 html5 css 媒体
HTML负责搭建页面结构，CSS负责样式设计，并且通过媒体查询实现了较好的响应式效果，能够适应不同屏幕尺寸下面就是写了一个详细的实例。CSS部分*{margin:0;padding:0;box-sizing:border-box;}*是通配选择器，会选中页面上的所有元素。margin:0;将所有元素的外边距设置为0。padding:0;将所有元素的内边距设置为0。box-sizing:border

前端面试：[React] Recoil 里面 selector 支持哪些参数？ returnShitBoy 前端面试 react.js
在Recoil中，selector用于派生状态并可以通过传递不同的参数来实现更强大的功能。创建selector时，可以传入以下参数：1.key类型:string描述:是selector的唯一标识符。每个selector和atom都必须有一个唯一的key，否则会抛出错误。这个key用于在Recoil状态树中进行识别。示例：javascriptconstmySelector=selector({key

Python Textract库：文本提取程序员喵哥 python 开发语言
更多Python学习内容：ipengtao.comTextract是一个强大的Python库，用于从各种文件格式中提取文本。无论是PDF、Word文档、Excel电子表格、HTML页面还是图像，Textract都能有效地提取其中的文本内容。Textract通过集成多种开源工具和库，实现了对多种文件格式的支持，使得文本提取变得简单而高效。本文将详细介绍Textract库的安装、主要功能、基本操作、高

一个比Fiddler/Charles更好用的免费抓包神器金丝猴也是猿 http udp https websocket 网络安全网络协议 tcp/ip
Proxyman与Sniffmaster：抓包工具的双剑合璧在当今的网络开发与调试中，抓包工具是不可或缺的利器。无论是前端开发者、后端工程师，还是安全研究人员，都需要通过抓包工具来分析网络请求、调试接口、排查问题。今天，我们将介绍两款强大的抓包工具：Proxyman和Sniffmaster，它们各自拥有独特的功能，能够帮助你在不同的场景下高效完成工作。Proxyman简介Slogan：只是简单地点

在网页跑3D多人互动之渲染效能瓶颈微网兔子後端技術前端网络服务器 c++unity 架构 3d
累积到目前测试回馈给我们的心得，主要问题还是在前端显示的部分。所以就来聊聊在网页跑3D多人互动之渲染效能瓶颈!!!数万个3D角色与场景物件需即时渲染，导致GPU/CPU过载，低端设备卡顿。已经使用的解决方案：LOD（LevelofDetail）技术：根据距离动态调整模型细节，远距离使用低多边形模型。InstancedRendering：批次渲染相同模型（如重复的树木、建筑物）。Culling（剔除

html 5中哪个标签用于定义标题列表项,No.5 HTML常用标签李诗旸 html 5中哪个标签用于定义标题列表项
一、标题标签为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，即至。我是一级标题我是二级标题我是三级标题我是四级标题我是五级标题我是六级标题单词head的缩写，意为头部、标题。标签语义：作为标题使用，并且依据重要性递减。特点：加了标题的文字会变的加粗，字号也会依次变大。一个标题独占一行。二、段落标签在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示

什么是 HTML 实体和转义西门吹雪在编程前端开发 html 前端
在网页前端的源代码中，你可能会看到"这种字符串。这种字符串实际上是HTML实体之一，用于表示双引号字符（"）。HTML实体是一种用于在HTML文档中表示某些特殊字符的方法，因为这些字符在HTML中有特定的用途或可能会与HTML标签语法冲突。HTML实体的背景和用途在HTML中，一些字符有特定的意义。例如，用于标记HTML标签的开始和结束。如果你想在网页中显示这些字符而不是把它们解释为HT

HTML中的零宽字符 Jinuss 前端 html 前端
概述零宽字符是一组在文本中没有可见宽度的字符，它们通常用于处理文本的布局、分隔和合成。下面是一些常见的零宽字符及其详细介绍：详细介绍零宽空格(ZeroWidthSpace,ZWSP)Unicode码位:U+200BHTML实体:或用途:用于防止文字自动换行。用于在文本中插入不可见的间隔，以控制排版或进行文本分析。零宽非连字符(ZeroWidthNon-Joiner,ZWNJ)Unicode码位:U

html实体字符 Qhumaing HTML学习 html 前端
HTML实体字符HTML实体字符（HTMLEntities）是在HTML中用来表示那些在HTML文档中直接使用可能会引起问题的特殊字符的一种方法。这些特殊字符包括但不限于尖括号、与号、引号等，它们在HTML中有特定的用途（如标签界定符、属性值分隔符等），如果直接使用，浏览器可能会误解它们。以下是常见的HTML实体字符及其用途：<-小于号（）&-与号（&）"-双引号（"）&a

如何在 HTML 中创建一个有序列表和无序列表，它们的语义有何不同？前端大白话大白话前端八股前端 html
大白话如何在HTML中创建一个有序列表和无序列表，它们的语义有何不同？1.HTML中有序列表和无序列表的基本概念在HTML里，列表是一种用来组织信息的方式。有序列表就是带有编号的列表，它可以让内容按照一定的顺序呈现；无序列表则是用符号（像圆点、方块等）来标记每一项内容，重点在于展示并列的信息，不强调顺序。2.创建无序列表无序列表使用标签来创建，每一项内容用标签包裹。下面是具体的代码示例，代码里有详

怎样修改下面HTML中存在的错误？ 2301_79698214 html javascript 前端
functiongetTime(){vardate=newDate();vartime=date.toLocaleDateString();vartime1=date.toLocaleTimeString();vartime2=time+''+time1span.innerHTML=time2;}window.setInterval("getTime()",1000)window.alert("这

linux自律第 40 天嵌入式大大白数据库
在学习了sqlite3数据库的增删改查之后，我开始做了一个基于web服务端的商品查询系统，将商品的图片，名称，id，详细描述和关键词等都放入了该数据库中，利用该数据库和html构建的网页来完成该项目。该项目首先需要设计出登录系统，登录需要密码和账号，所以需要注册，我打算在注册的时候使用数据库，将注册的信息放在数据库中。然后使用账号密码登录的时候，输入的账号密码在请求报文中，以post的形式发出来，

k8s往secret里导入证书_Kubernetes K8S之存储Secret详解 weixin_39604598 k8s往secret里导入证书
K8S之存储Secret概述与类型说明，并详解经常使用Secret示例html主机配置规划服务器名称(hostname)系统版本配置内网IP外网IP(模拟)k8s-masterCentOS7.72C/4G/20G172.16.1.11010.0.0.110k8s-node01CentOS7.72C/4G/20G172.16.1.11110.0.0.111k8s-node02CentOS7.72C/

【lua】面向对象岚花落_ lua
建议提前学习https://www.runoob.com/lua/lua-metatables.html面向对象特征1）封装：指能够把一个实体的信息、功能、响应都装入一个单独的对象中的特性。2）继承：继承的方法允许在不改动原程序的基础上对其进行扩充，这样使得原功能得以保存，而新功能也得以扩展。这有利于减少重复编码，提高软件的开发效率。3）多态：同一操作作用于不同的对象，可以有不同的解释，产生不同的

Python异步编程 - asyncio库孤寒者 Python全栈系列教程 python 异步编程 asyncio yield 协程
目录：每篇前言：异步IOPython中的异步编程实现方式：协程Python传统协程示例：实现生产者-消费者模型消费者：生产者：运行流程：整体流程：传统协程——>现代协程：asyncio库async/await每篇前言：作者介绍：【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者本文已收录于爬虫必备前端技术栈专栏：《爬虫必备前端技术栈

Docker 存储 Psycho_MrZhang Docker docker java 容器
目录挂载在执行run时设置参数-v即可实现目录映射,实现原理会在宿主机器创建一个空文件夹#挂载宿主机的/data目录到容器的/app目录dockerrun-d-v/data:/app--namemy-appmy-image#挂载docker内的/usr/share/nginx/html目录到本地机的/app/nghtmldockerrun-d-v/app/nghtml:/usr/share/ngi

C语言：setjmp和longjmp函数使用详解 houxiaoni01 C语言 setjmp longjmp
转载自：https://www.runoob.com/cprogramming/c-standard-library-setjmp-h.htmlhttps://blog.csdn.net/chenyiming_1990/article/details/86834131、C标准库-简介setjmp.h头文件定义了宏setjmp()、函数longjmp()和变量类型jmp_buf，该变量类型会绕过正常

python中的类方法，静态方法，对象方法 a174817529
原文地址：http://blog.chinaunix.net/uid-26602509-id-3087296.htmlclassA:count=100def__init__(self,instancedata):self.instancedata=instancedata@staticmethod#静态方法不能访问类参数和实例参数defsm():print"sm"@classmethod#类方法不

Claude 3.7 Sonnet 根据UI设计稿生成前端html页面徐同保前端 ui html
UI设计稿：提示词：你是一个前端代码工程师，根据UI设计稿，编写对应html页面，样式写在标签里，类名都以"m-"开头AI回答的结果：根据提供的UI设计稿，我将编写对应的HTML页面，所有类名都以"m-"开头，样式写在标签里。```html账单明细/*重置样式*/*{margin:0;padding:0;box-sizing:border-box;}body{font-family:-apple-

前端解决跨域的几种方案爱分享的程序员前端前端
以下是前端解决跨域问题的7种主流方案，根据应用场景和实现难度排序，附详细实现示例：一、开发环境解决方案1.WebpackDevServer代理（推荐）//vue.config.js/webpack.config.jsmodule.exports={devServer:{proxy:{'/api':{target:'http://backend-domain.com',//后端地址changeOri

webpack的SplitChunksPlugin和在路由或组件级别进行拆分混血哲谈 webpack 前端 node.js
请问下面内容中提到的SplitChunksPlugin和“在路由或组件级别进行拆分是一种更简单的方法，可用于延迟加载应用的不同部分”在前端项目中如何应用？“”“在大型应用中，延迟加载第三方依赖项并不是常见的模式。通常，第三方依赖项会拆分为单独的供应商软件包，因为它们的更新频率较低，因此可以缓存。您可以详细了解SplitChunksPlugin如何帮助您实现这一点。使用客户端框架时，在路由或组件级别

【typescript进阶篇】(第四章) webpack编译ts及第三方库声明文件蒜香拿铁 typescript系列 typescript webpack javascript
使用webpack打包TS文件安装依赖安装webpack环境npmiwebpackwebpack-cliwebpack-dev-server-D安装TypeScriptnpminstalltypescript-D编译TSnpminstallts-loader-D热更新服务npminstallwebpack-dev-server-DHTML模板npminstallhtml-webpack-plugi

JavaScript 中的性能优化：从基础到高级技巧 lina_mua 深入 javascript 性能优化开发语言
1.引言1.1性能优化的重要性在现代前端开发中，性能优化是提升用户体验的关键。无论是页面加载速度、交互响应时间，还是内存占用，性能优化都能显著提升应用的流畅度和用户满意度。1.2本文的目标本文旨在深入探讨JavaScript中的性能优化，从基础到高级技巧，帮助开发者理解性能优化的核心概念，并掌握其在实际开发中的应用。2.性能优化的基础2.1什么是性能优化？性能优化是指通过改进代码、减少资源消耗、优

Webpack4从入门到精通以及和webpack5对比_webpack现在用的是哪个版本 2501_90253044 webpack 前端 node.js
'css-loader',//less-loader：将less文件编译成css文件，需要下载less-loader和less'less-loader'],},{test:/\.css$/,//使用多个loader用use,使用一个loader用loaderuse:['style-loader','css-loader'],},{//url-loader：处理图片资源，问题：默认处理不了html中

论云原生架构及其应用桃花键神云原生架构
摘要：2021年7月，我所在的公司承担了广东省某医院的网上预约挂号项目的开发工作，我有幸作为系统架构师参与整个系统的开发过程，并负责了系统架构设计工作。该系统以预约挂号为主线，其中包括管理平台审核、确认挂号、订单支付、更新预约状态等业务模块。本文以网上预约挂号项目为例，详细论述了云原生架构在该项目中的具体应用。系统以SpringCloud微服务框架开发，分为前端Web服务、平台保障服务、业务服务三

Pollinations AI文生图html源码酷爱码 html HTML
源码介绍用deepseek辅助制作了一个电脑端文生图小程序，html语言的，接口使用的是Pollinations，上传服务器访问首页即可一次生成4张，提示词最好用英文，点击小图可以预览大图，也可以点击下载按钮直接下载截图预览源码免费获取PollinationsAI文生图html源码

springboot整合Thymeleaf详解 weiha666 spring boot
Thymeleaf介绍简单说，Thymeleaf是一个跟Velocity、FreeMarker类似的模板引擎，它可以完全替代JSP。相较与其他的模板引擎，它有如下三个极吸引人的特点：Thymeleaf在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持html原型，然后在html标签里增加额外的属性来达到模板+数

useSyncExternalStore 的应用前端
我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。本文作者：修能学而不思则罔，思而不学则殆。---《论语·为政》WhatuseSyncExternalStoreisaReactHookthatletsyousubscribetoanexternalstore.useSyncExternalStore是一个支持让用户订阅外部

从 0 到 1 搭建一个 Web 应用项目：详细步骤与踩坑记录算法探索者前端
一、引言在当今数字化时代，Web应用无处不在。对于开发者而言，掌握从0到1搭建Web应用项目的技能至关重要。本指南将带你逐步完成一个简单Web应用项目的搭建，分享技术选型思路以及在过程中遇到的问题和解决方案，助力你开启Web开发之旅。二、技术选型（一）前端框架：选择React.js。它具有高效的虚拟DOM机制，能够快速更新页面，提升用户体验。同时，React生态系统丰富，有大量现成的组件库和工具可

web报表工具FineReport常见的数据集报错错误代码和解释老A不折腾 web报表 finereport 代码可视化工具
在使用finereport制作报表，若预览发生错误，很多朋友便手忙脚乱不知所措了，其实没什么，只要看懂报错代码和含义，可以很快的排除错误，这里我就分享一下finereport的数据集报错错误代码和解释，如果有说的不准确的地方，也请各位小伙伴纠正一下。 NS-war-remote=错误代码\:1117 压缩部署不支持远程设计 NS_LayerReport_MultiDs=错误代码

Java的WeakReference与WeakHashMap bylijinnan java 弱引用
首先看看 WeakReference wiki 上 Weak reference 的一个例子： public class ReferenceTest { public static void main(String[] args) throws InterruptedException { WeakReference r = new Wea

Linux——（hostname）主机名与ip的映射 eksliang linux hostname
一、什么是主机名无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。但IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。域名类型 linuxsir.org 这样的；主机名是用于什么的呢？答：在一个局域网中，每台机器都有一个主

oracle 常用技巧 18289753290
oracle常用技巧 ①复制表结构和数据 create table temp_clientloginUser as select distinct userid from tbusrtloginlog ②仅复制数据如果表结构一样 insert into mytable select * &nb

使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException 酷的飞上天空 exception
有一个线上环境使用的是c3p0数据库，为外部提供接口服务。最近访问压力增大后台tomcat的日志里面频繁出现 com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResou

IT系统分析师如何学习大数据蓝儿唯美大数据
我是一名从事大数据项目的IT系统分析师。在深入这个项目前需要了解些什么呢？学习大数据的最佳方法就是先从了解信息系统是如何工作着手，尤其是数据库和基础设施。同样在开始前还需要了解大数据工具，如Cloudera、Hadoop、Spark、Hive、Pig、Flume、Sqoop与Mesos。系统分析师需要明白如何组织、管理和保护数据。在市面上有几十款数据管理产品可以用于管理数据。你的大数据数据库可能

spring学习——简介 a-john spring
Spring是一个开源框架，是为了解决企业应用开发的复杂性而创建的。Spring使用基本的JavaBean来完成以前只能由EJB完成的事情。然而Spring的用途不仅限于服务器端的开发，从简单性，可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。其主要特征是依赖注入、AOP、持久化、事务、SpringMVC以及Acegi Security 为了降低Java开发的复杂性，

自定义颜色的xml文件 aijuans xml
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="white">#FFFFFF</color> <color name="black">#000000</color> &

运营到底是做什么的？ aoyouzi 运营到底是做什么的？
文章来源：夏叔叔（微信号：woshixiashushu），欢迎大家关注！很久没有动笔写点东西，近些日子，由于爱狗团产品上线，不断面试，经常会被问道一个问题。问：爱狗团的运营主要做什么？答：带着用户一起嗨。为什么是带着用户玩起来呢？究竟什么是运营？运营到底是做什么的？那么，我们先来回答一个更简单的问题——互联网公司对运营考核什么？以爱狗团为例，绝大部分的移动互联网公司，对运营部门的考核分为三块——用

js面向对象类和对象百合不是茶 js 面向对象函数创建类和对象
接触js已经有几个月了,但是对js的面向对象的一些概念根本就是模糊的,js是一种面向对象的语言但又不像java一样有class,js不是严格的面向对象语言 ,js在java web开发的地位和java不相上下 ,其中web的数据的反馈现在主流的使用json,json的语法和js的类和属性的创建相似下面介绍一些js的类和对象的创建的技术一:类和对

web.xml之资源管理对象配置 resource-env-ref bijian1013 java web.xml servlet
resource-env-ref元素来指定对管理对象的servlet引用的声明，该对象与servlet环境中的资源相关联 <resource-env-ref> <resource-env-ref-name>资源名</resource-env-ref-name> <resource-env-ref-type>查找资源时返回的资源类

Create a composite component with a custom namespace sunjing
https://weblogs.java.net/blog/mriem/archive/2013/11/22/jsf-tip-45-create-composite-component-custom-namespace When you developed a composite component the namespace you would be seeing would

【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter bit1129 mongodb
一、复本集为什么要加入Arbiter这个角色回答这个问题，要从复本集的存活条件和Aribter服务器的特性两方面来说。什么是Artiber？ An arbiter does not have a copy of data set and cannot become a primary. Replica sets may have arbiters to add a

Javascript开发笔记白糖_ JavaScript
获取iframe内的元素通常我们使用window.frames["frameId"].document.getElementById("divId").innerHTML这样的形式来获取iframe内的元素，这种写法在IE、safari、chrome下都是通过的，唯独在fireforx下不通过。其实jquery的contents方法提供了对if

Web浏览器Chrome打开一段时间后，运行alert无效 bozch Web chorme alert 无效
今天在开发的时候，突然间发现alert在chrome浏览器就没法弹出了，很是怪异。试了试其他浏览器，发现都是没有问题的。开始想以为是chorme浏览器有啥机制导致的，就开始尝试各种代码让alert出来。尝试结果是仍然没有显示出来。这样开发的结果，如果客户在使用的时候没有提示，那会带来致命的体验。哎，没啥办法了就关闭浏览器重启。结果就好了，这也太怪异了。难道是cho

编程之美-高效地安排会议图着色问题贪心算法 bylijinnan 编程之美
import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.Random; public class GraphColoringProblem { /**编程之美高效地安排会议图着色问题贪心算法 * 假设要用很多个教室对一组

机器学习相关概念和开发工具 chenbowen00 算法 matlab 机器学习
基本概念：机器学习(Machine Learning, ML)是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。它是人工智能的核心，是使计算机具有智能的根本途径，其应用遍及人工智能的各个领域，它主要使用归纳、综合而不是演绎。开发工具 M

[宇宙经济学]关于在太空建立永久定居点的可能性 comsci 经济
       大家都知道,地球上的房地产都比较昂贵,而且土地证经常会因为新的政府的意志而变幻文本格式........        所以,在地球议会尚不具有在太空行使法律和权力的力量之前,我们外太阳系统的友好联盟可以考虑在地月系的某些引力平衡点上面,修建规模较大的定居点

oracle 11g database control 证书错误 daizj oracle 证书错误 oracle 11G 安装
oracle 11g database control 证书错误 win7 安装完oracle11后打开 Database control 后，会打开em管理页面，提示证书错误，点“继续浏览此网站”，还是会继续停留在证书错误页面解决办法：是 KB2661254 这个更新补丁引起的，它限制了 RSA 密钥位长度少于 1024 位的证书的使用。具体可以看微软官方公告：

Java I/O之用FilenameFilter实现根据文件扩展名删除文件游其是你 FilenameFilter
在Java中，你可以通过实现FilenameFilter类并重写accept(File dir, String name) 方法实现文件过滤功能。在这个例子中，我们向你展示在“c:\\folder”路径下列出所有“.txt”格式的文件并删除。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

C语言数组的简单以及一维数组的简单排序算法示例，二维数组简单示例 dcj3sjt126com c array
# include <stdio.h> int main(void) { int a[5] = {1, 2, 3, 4, 5}; //a 是数组的名字 5是表示数组元素的个数，并且这五个元素分别用a[0], a[1]...a[4] int i; for (i=0; i<5; ++i) printf("%d\n",

PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。就是唯一且不能为空。 INDEX 索引，普通的 UNIQUE 唯一索引 dcj3sjt126com primary
PRIMARY, INDEX, UNIQUE 这3种是一类PRIMARY 主键。就是唯一且不能为空。INDEX 索引，普通的UNIQUE 唯一索引。不允许有重复。FULLTEXT 是全文索引，用于在一篇文章中，检索文本信息的。举个例子来说，比如你在为某商场做一个会员卡的系统。这个系统有一个会员表有下列字段：会员编号   INT会员姓名

java集合辅助类 Collections、Arrays shuizhaosi888 Collections Arrays HashCode
Arrays、Collections 1 ）数组集合之间转换 public static <T> List<T> asList(T... a) { return new ArrayList<>(a); }      a）Arrays.asL

Spring Security（10）——退出登录logout 234390216 logout Spring Security 退出登录 logout-url LogoutFilter
要实现退出登录的功能我们需要在http元素下定义logout元素，这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain。当我们指定了http元素的auto-config属性为true时logout定义是会自动配置的，此时我们默认退出登录的URL为“/j_spring_secu

透过源码学前端之 Backbone 三 Model 逐行分析JS源代码 backbone 源码分析 js学习
Backbone 分析第三部分  Model 概述： Model 提供了数据存储，将数据以JSON的形式保存在 Model的 attributes里，但重点功能在于其提供了一套功能强大，使用简单的存、取、删、改数据方法，并在不同的操作里加了相应的监听事件，如每次修改添加里都会触发 change，这在据模型变动来修改视图时很常用，并且与collection建立了关联。

SpringMVC源码总结（七）mvc:annotation-driven中的HttpMessageConverter 乒乓狂魔 springMVC
这一篇文章主要介绍下HttpMessageConverter整个注册过程包含自定义的HttpMessageConverter，然后对一些HttpMessageConverter进行具体介绍。 HttpMessageConverter接口介绍： public interface HttpMessageConverter<T> { /** * Indicate

分布式基础知识和算法理论 bluky999 算法 zookeeper 分布式一致性哈希 paxos
分布式基础知识和算法理论 BY [email protected] 本文永久链接：http://nodex.iteye.com/blog/2103218 在大数据的背景下，不管是做存储，做搜索，做数据分析，或者做产品或服务本身，面向互联网和移动互联网用户，已经不可避免地要面对分布式环境。笔者在此收录一些分布式相关的基础知识和算法理论介绍，在完善自我知识体系的同

Android Studio的.gitignore以及gitignore无效的解决 bell0901 android gitignore
　　github上.gitignore模板合集，里面有各种.gitignore ： https://github.com/github/gitignore 　　自己用的Android Studio下项目的.gitignore文件，对github上的android.gitignore添加了　　　　　　# OSX files　　　　　　//mac os下　　　　　　.DS_Store

成为高级程序员的10个步骤 tomcat_oracle 编程
What 软件工程师的职业生涯要历经以下几个阶段：初级、中级，最后才是高级。这篇文章主要是讲如何通过 10 个步骤助你成为一名高级软件工程师。 Why 得到更多的报酬！因为你的薪水会随着你水平的提高而增加提升你的职业生涯。成为了高级软件工程师之后，就可以朝着架构师、团队负责人、CTO 等职位前进历经更大的挑战。随着你的成长，各种影响力也会提高。

mongdb在linux下的安装 xtuhcy mongodb linux
一、查询linux版本号： lsb_release -a LSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-noarch:printing-4.0-amd64:printing-4.0-noa
按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

web前端基础（一）——HTML+CSS

系列文章目录

前言

HTML

HTML的介绍

1. html的定义

2. html的作用

HTML的基本结构

1. 结构代码

2. 浏览网页文件

vscode的下载与使用

1. vscode 的基本介绍

2. vscode 的安装

3. vscode 的插件安装

4. vscode 的插件卸载

5. 设置字体大小

6. 设置颜色主题

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

初识常用的HTML标签

1. 常用的 html 标签

h1标题

资源路径

1. 相对路径

2. 绝对路径

列表标签

1. 列表标签的种类

2. 无序列表

3. 有序列表

表格标签

1. 表格的结构

2. 表格标签

表单标签

1. 表单的介绍

2. 表单相关标签的使用

表单提交

1. 表单属性设置

2. 表单元素属性设置

3. 示例代码

CSS

css的介绍

1. css 的定义

2. css 的作用

3. css 的基本语法

css的引入方式

1. 行内式

2. 内嵌式（内部样式）

3. 外链式

4. css引入方式选择

css的选择器

1. css 选择器的定义

2. css 选择器的种类

3. 标签选择器

4. 类选择器

这是一个标题

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

6. id选择器

7. 组选择器

8. 伪类选择器

css的属性

1. 布局常用样式属性

2. 文本常用样式属性

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

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

css的元素溢出

1. 什么是 css 元素溢出

2. 示例代码

css的显示特性

1. display 属性的使用

2. 示例代码

盒子模型

1. 盒子模型的介绍

2. 盒子模型相关样式属性

总结

你可能感兴趣的:(web前端技术,html5,html,前端,css3)