广龙宇

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)
零基础程序员如何快速学会python Java进阶营菌程序员职场 Python python 开发语言后端 pycharm 程序人生
学会Python能做的事情也很多，常见的就有网络爬虫，数据分析，前端开发，机器学习，都能很好地提高工作效率，往任何一个领域发展，工作前景是非常不错的。接下来我从基本的软件安装开始，仔细的给大家分析新手入门应该怎样学习Python吧，如果有讲得不到位的地方也欢迎大家指正，我会及时进行修改。一、软件的安装和选择1、配置环境关系到实操，所以在选择资料的同时，你还需要安装好Python需要的软件，软件版本

spring mvc面试笔记表面矿工面试题 spring mvc 面试
简述SpringMVC工作原理?SpringMVC工作原理：1：用户发送请求至前端控制器DispatcherServlet。2：DispatcherServlet收到请求调用HandlerMapping处理器映射器。3：处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)，生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。4：Dispatcher

前端架构 —— 脚手架的开发流程 mask-li 前端
一、脚手架开发流程详解开发流程创建npm项目创建脚手架入口文件，最上方添加：#!/usr/bin/envnode配置package.json，添加bin属性编写脚手架代码将脚手架发布到npm使用流程安装脚手架npminstall-gyour-own-cli使用脚手架your-own-cli二、脚手架开发难点解析分包：将复杂的系统拆分成若干个模块命令注册：vuecreatevueaddvueinvo

前端架构设计 weixin_34266504 前端测试 javascript ViewUI
最近在拜读一本《前端架构设计》的书，该书讲到前端架构师的用户是开发人员。所选择的工具、编写的代码、创建的流程，都是为了让开发人员能够构建出最高效的、不出错的、可扩展的和可持续优化的系统。一、HTML1）标签规范化div乱炖是指嵌套多层div元素。为了保持简洁，语义化的标签是首选，应用样式所依靠的是HTML5元素名称和它们的层级关系，在标记中没有类名，往往写出层级的后代选择器。2）模块化方法前端开发

深入理解 JSP：从基础知识到实战技巧的全面解析 CarlowZJ java 开发语言
JSP（JavaServerPages）是一种基于Java的服务器端技术，用于开发动态Web应用。它通过将Java代码嵌入到HTML页面中，简化了Web开发的复杂性。JSP是JavaWeb开发的重要组成部分，与Servlet、JavaBean等技术紧密集成，广泛应用于企业级Web应用开发。本文将从基础知识、核心特性、生命周期、与Servlet的关系、框架支持、最佳实践等方面对JSP进行详细解析，帮

HTML学习笔记誓死守护发际线 html 学习笔记
文章目录(一)HTML简介一、网页1.什么是网页2.什么是HTML二、常用的浏览器1.常用的浏览器2.浏览器内核（渲染引擎）3.web标准(二)HTML标签一、HTML语法规范1.基本语法概述2.标签的关系二、HTML基本结构标签三、网页开发工具1.VSCode的使用：2.vsCode工具生成骨架标签新增代码1）标签2）lang语言3）charset字符集四、HTML常用标签1.语义化标签：2.标

XSL是指可扩展样式表语言 (EXtensible Stylesheet Language) 万事俱备，就差一个程序员了
XSLXSL是指可扩展样式表语言(EXtensibleStylesheetLanguage)，是一种用于以可读格式呈现XML数据的语言。目录简介语法XSL是否与XML相同用途应用简介XSL之于XML,就像CSS之于HTML。它是指可扩展样式表语言(EXtensibleStylesheetLanguage)。这是一种用于以可读格式呈现XML数据的语言。xsl是一种标记语言，表示如何将xml文档的内容

前端控制器模式 wjs2024 开发语言
前端控制器模式引言在软件设计模式中，前端控制器模式（FrontControllerPattern）是一种行为型设计模式。它提供了一种集中处理请求的机制，将请求分发到相应的处理者，从而简化了请求的处理流程。本文将详细介绍前端控制器模式的概念、原理、实现方法以及在实际开发中的应用。概念前端控制器模式的核心思想是将所有请求统一由一个控制器处理，控制器根据请求类型将请求分发到相应的处理者。这种模式适用于以

HTML AI 编程助手 wjs2024 开发语言
HTMLAI编程助手引言随着人工智能技术的飞速发展，编程领域也迎来了新的变革。HTML，作为网页制作的基础语言，与AI技术的结合，为开发者带来了前所未有的便利。本文将探讨HTMLAI编程助手的功能、应用场景以及如何利用它提高编程效率。HTMLAI编程助手概述HTMLAI编程助手是一种基于人工智能技术的辅助工具，旨在帮助开发者快速、高效地完成HTML代码编写。通过学习大量的HTML代码，AI编程助手

javaScript-系统知识点【常见问题及其解决办法】大麦大麦 2025 前端面经 javascript 开发语言 ecmascript 前端面试
会造成内存泄漏的情况（中级）setTimeout的第⼀个参数使⽤字符串⽽非函数的话，会引发内存泄漏。//setTimeout的错误使用setTimeout('666',100)//setTimeout的正确用法setTimeout(()=>{console.log('666')},1000)前端常见内存泄漏及解决方案如何捕获JS程序的异常？两种方式trycatchwindow.onerror//手

2025前端最新面试题-网络篇大麦大麦前端网络面试网络安全网络协议
1.现代浏览器为何要禁用第三方cookie为了用户的安全(安全和隐私是浏览器永恒的话题)第三方cookie会记录用户的行为和数据,方便做广告有些浏览器默认禁止,Chrome增加了SameSite(谷歌有广告)cookie可以实现不同域共享吗同一主域名下的子域名，cookie可以共享2.实现心跳检验-用于断线重连functionHeartbeaet(){lettimer=0functionfn(){

JavaScript 系列八：同步与异步 XHSRookies JavaScript javascript
快来加入我们吧！"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们(https://xhs-rookies.com/)进行学习，及时获取最新文章。"Codetailor"，如果您对我们文章感兴趣、或是想提一些建议，微信关注“小和山的菜鸟们”公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

第三百七十二节 JavaFX教程 - JavaFX HTMLEditor 程序猿小D java 前端服务器
JavaFX教程-JavaFXHTMLEditorHTMLEditor控件是一个富文本编辑器，具有以下功能。粗体斜体下划线删除线字体系列字体大小前景色背景颜色缩进项目符号列表编号列表对齐水平线复制文本片段粘贴文本片段HTMLEditor类返回HTML字符串中的编辑内容。创建HTML编辑器importjavafx.application.Application;importjavafx.scene.

解析Spring:架构与组件党和人民技术理论 spring
DispatcherServletDispatcherServlet是SpringMVC的前端控制器，它负责接收所有的HTTP请求，并将请求分发到相应的处理器。它是整个SpringMVC框架的核心组件。初始化：DispatcherServlet在启动时会初始化一系列的组件，如HandlerMapping、HandlerAdapter、ViewResolver等。请求处理：接收到请求后，Dispat

LeetCode - #219 存在重复元素 II 网罗开发 Swift vue.js leetcode 算法
网罗开发（小红书、快手、视频号同名）大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO

AI 驱动的智慧大脑：打造企业动态知识库，开启高效管理新时代网罗开发人工智能 AI 大模型深度学习人工智能
网罗开发（小红书、快手、视频号同名）大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO

前后端分离项目的验证码实现（前端Vue，后端TP）今天练肩感觉爆炸 vue thinkphp
1.TP安装依赖composerrequiretopthink/think-captcha=2.0.*2.生成验证码返回给前端//生成验证码publicfunctiongetCaptcha(){$config=[//验证码字符集合'codeSet'=>'0123456789',//验证码字体大小'fontSize'=>30,//字体'fontttf'=>'5.ttf',//验证码位数'length

html data-src和src的区别,img 的data-src 属性实现懒加载薄辉 html data-src和src的区别
一、什么是图片懒加载？当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次)，当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。通俗一点：1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1*1px的图片路径。2、当页面滚动直至此图片出现在可

浅谈流媒体技术在无线网络中的应用 chenjie19891104 流媒体技术网络流媒体服务器服务器 internet h.264 路由器
原文地址：http://info.broadcast.hc360.com/2009/10/100913135646.shtml流媒体即媒体内容通过数据网络传送到客户端的同时，在客户端播放的一种机制。流媒体技术首先出现在固定网络通信中，在网络上传送音视频等多媒体信息的方法主要采用下载和流式两种传送方式。对于下载方式而言，由于大文件往往需要大量的存储容量，同时受到网络带宽的限制，下载常常会花数分钟甚至

2024年全新WebGIS开发学习方法 GIS好难学学习方法 GIS
现在每天都有越来越多的企业依靠与地理信息位置相关的数据来改善运营和增加利润，包括：客户位置、货物位置等，这些数据信息现在已经成为许多业务逻辑中不可或缺的一部分。但是，很少有人同时会GIS和编程，程序员分为很多种，但是GIS开发通常是指前端+GIS开发，大部分做前端的程序员，不会GIS框架，这也是GIS开发人才或缺的重要原因之一。如果想往GIS开发方向发展，但在学习的时候感到困惑，可以看下本篇文章，

zswap 数据结构维护解析仙度瑞拉快点跑数据结构
zswap数据结构维护解析zswap是Linux内核中的一个前端压缩交换（swap）机制，它在内存中维护一个zpool来存储被压缩的页面，以减少磁盘I/O并提高性能。以下是zswap维护加解压相关数据结构的核心解析。1.zswap的核心数据结构1.1structzswap_entryzswap_entry结构体表示zswap维护的每个压缩页面的元数据。structzswap_entry{struc

字节跳动后端开发一面面经我喝AD钙面经 java 后端面试
2023-08-07字节跳动后端开发一面1自我介绍：学历背景-实习/项目-校园经历-获奖2介绍一下java全栈实习：业务-解决方案-工作-成果-反思3xx功能怎么做的：业务-表设计-前端原型-功能-前后端接口-后端实现4订单管理货物管理怎么做的：xxx5数据存储用的啥：mysql给主键常用字段加索引6货物限量怎么处理：java加锁（锁的比较与选择）/数据库事务（考虑了吗，为什么没用）7单体应用，某

前端面试100问！！一只松 javascript es6
面试造火箭，工作拧螺丝！在技术圈毕竟只有百分之一的人能进入BAT，百分之九九的小伙伴只能在普通公司做这普通的事情，厌烦哪些标题党，我们抛开那些高大上的台词，回归到面试的本质。本课程帮助小伙伴们快速梳理知识，不会涉及到具体的很细节的知识点，关注面试本身。公司一般会从以下5个方面考察一个人的能力，本课程的100问是总结了最近2-3年常问的面试题，适合初中级前端工程师。1、HTML(5)和CSS3方面1

nuxt常用组件库html-validator应用解析垣宇 vue.js
html-validator主要用于自动验证nuxt服务器呈现的HTML(SSR和SSG)，以检测可能导致水合错误的HTML常见问题，有助于减少水合错误，检测常见的可访问性错误。安装npxnuxi@latestmoduleaddhtml-validator配置若自动更新nuxt.config.ts配置文件失败，可手动添加下面代码:nuxt3defineNuxtConfig({modules:['@

前端面试题---2022 每日一小知识前端 html npm vscode node.js
*集大成之面试题，我们不做面试题的创作者，只做面试题的搬运工（侵必删）〇理论一个完整的URL解析过程1用户输入URL地址。2对URL地址进行DNS域名解获得IP地址。3建立TCP连接（三次握手）。4浏览器向web服务器发送一个HTTP请求报文。5服务器返回HTTP响应报文给客户端。6关闭TCP连接（四次挥手）。7浏览器解析文档资源并渲染页面。解析过程：浏览器解析的资源（html，svg,Xhtml

大白话html第五章HTML5 新增表单元素和属性 IT木昜大白话html html html5 前端
大白话html第五章HTML5新增表单元素和属性HTML5给表单带来了很多新的小伙伴，让我们收集用户信息变得更方便、更智能。新增表单元素：这个就像一个自带日历的小框框，用户可以直接在里面选择日期，不用手动输入。你的生日：：专门用来收集用户邮箱地址的，浏览器会自动检查用户输入的是不是一个合法的邮箱格式。你的邮箱：：当你需要用户输入网址的时候，用这个标签。浏览器会检查输入的是不是一个合法的网址。你的网

深入探索CSS：从基础到高级，解锁网页设计的无限可能斯~内克 css css 前端
CSS（层叠样式表）是现代网页设计中不可或缺的一部分，它不仅决定了网页的外观和风格，还极大地影响了用户体验和交互效果。从简单的文本样式到复杂的布局设计，CSS的灵活性和强大功能使其成为前端开发的核心技术之一。本文将从CSS的基础概念出发，逐步深入到高级应用，带你全面了解CSS的魅力和实用性。一、CSS简介：网页设计的基石CSS是一种用于描述HTML或XML文档外观和格式的样式表语言。它的主要作用是

前后端数据传输加密：Python 与 Vue 的实践风清扬【coder】 Web应用 vue.js python 前端
Python与Vue实现接口数据加密传输在当今互联网应用开发中，数据安全是重中之重。尤其是在前后端进行数据交互时，确保传输数据的保密性、完整性和可用性，是每一位开发者不可忽视的关键环节。本文将深入探讨如何运用Python后端和Vue前端技术，实现接口数据传输过程中的加密处理，为大家揭开数据安全保护的神秘面纱。加密基石：AES算法我们选用的加密算法是AES（AdvancedEncryptionSta

Vue实战指南获取DOM、操作组件 DTcode7 Vue实战指南 VUE HTML web vue框架前端
Vue实战指南获取DOM、操作组件引言获取DOM元素示例一：使用`ref`获取DOM元素示例二：使用`$el`访问根元素操作组件实例示例三：使用`methods`和`computed`属性示例四：使用`watch`属性监控变化示例五：使用`$emit`触发自定义事件实际开发中的使用技巧引言Vue.js是一个轻量级的前端框架，它允许开发者高效地构建交互式用户界面。在Vue应用中，有时我们需要直接操作

前端：HTML 00&00 前端前端 html
HTML（超文本标记语言，HyperTextMarkupLanguage）是构建网页的标准标记语言。它被广泛用于创建和设计网页内容，使得文本、图像、链接、表格等元素能够在浏览器中以结构化的形式展示。以下是HTML的详细介绍：1.HTML的基本结构HTML文档通常由一系列嵌套的元素和标签构成，具有以下基本结构：      文档标题  欢迎使用HTML！  这是一个段落。``：声明文档类型，告知浏览器

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)