当前位置: 首页 > news >正文

Web前端开发--HTML

HTML快速入门

1.新建文本文件,后缀名改为.html
2.编写 HTML结构标签

3.在<body>中填写内容

HTML结构标签

特点

1.HTML标签中不区分大小写

2.HTML标签属性值中可以使用单引号也可使用双引号

3.HTML语法结构比较松散(但在编写时要严格一点)

VS Code安装使用

VisualStudio Code(简称 VS Code)是 Microsoft 于2015年4月发布的一款代码编辑器

VS Code 对前端代码有非常强大的支持,同时也其他编程语言(例如:C++、Java、Python、PHP、Go等)

VS Code 提供了非常强大的插件库,大大提高了开发效率。

官网:https://code.visualstudio.com

基础标签&样式

新浪新闻-标题

标题排版

图片标签:<img>
   src:指定图像的url(绝对路径/相对路径)

   width:图像的宽度(像素/相对于父元素的百分比)

   height:图像的高度(像素 /相对于父元素的百分比)

标题标签:<h1>-<h6>
水平线标签:<hr>

宽度和高度一般只设置一个

整体效果:

编写完要注意用Ctrl+S保存!

小结:

标题样式

CSS引入方式:
  1.行内样式:写在标签的style属性中(不推荐)


  2.内嵌样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中)

  3.外联样式:写在一个单独的.css文件中(需要通过 link 标签在网页中引入)

设置的CSS样式是对当前页面有效的,只要是当前页面的h1标签都会显示相应颜色

link标签来引用css文件

下面是方式三中定义的css文件:

css选择器:

这里使用的是类选择器:

id选择器:

<span>标签没有意义

选择器优先级:id选择器>类选择器>元素选择器

font-size:设置字体大小

1.<span>标签
  ●<span>是一个在开发网页时大量会用到的没有语义的布局标签

  ●特点:一行可以显示多个(组合行内元素),宽度和高度默认由内容撑开
2.CSS选择器
  ●元素选择器:标签名{… }
  ●id选择器:#id属性值{… }
  ●类选择器: .class属性值{…}
  ●优先级:id选择器 >类选择器 >元素选择器
3.CSS属性
●color:设置文本的颜色
●font-size:字体大小(注意:记得加px)

超链接

标签:
  <a href="..." target="...">央视网</a>
属性:
   href:指定资源访问的url
   target:指定在何处打开资源链接
   _self:默认值,在当前页面打开
   _blank:在空白页面打开

CSS属性

text-decoration:规定添加到文本的修饰,none表示定义标准的文本

color:定义文本的颜色

新浪新闻-正文

正文排版

视频标签:<video>
       src:规定视频的url
       controls:显示播放控件
       width:播放器的宽度
       height:播放器的高度

音频标签:<audio>
      src:规定音频的url
      controls:显示播放控件

段落标签:<p>
文本加粗标签:<b>/<strong>

1.音频、视频标签
   <audio> <video>
2.换行、段落标签
   换行:<br>;段落:<p>
3.文本加粗标签
   <b><strong>
4.CSS样式
   line-height:设置行高
   text-indent:定义第一个行内容的缩进
   text-align:规定元素中的文本的水平对齐方式
5.注意
   在HTML中无论输入多少个空格,只会显示一个。可以使用空格占位符&nbsp;

页面布局

盒子:页面中所有的元素(标签),都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

布局标签:实际开发网页中,会大量频繁的使用 div 和span 这两个没有语义的布局标签
标签:<div><span>
特点:
   div标签:
        ●一行只显示一个(独占一行)
        ●宽度默认是父元素的宽度,高度默认由内容撑开
        ●可以设置宽高(width、height)

span标签:
  ●一行可以显示多个
  ●宽度和高度默认由内容撑开
  ●不可以设置宽高(width、height)

相关文章:

Web前端开发--HTML

HTML快速入门 1.新建文本文件&#xff0c;后缀名改为.html 2.编写 HTML结构标签 3.在<body>中填写内容 HTML结构标签 特点 1.HTML标签中不区分大小写 2.HTML标签属性值中可以使用单引号也可使用双引号 3.HTML语法结构比较松散&#xff08;但在编写时要严格一点&…...

Linux | 系统调用

文章目录 Linux | 系统调用open 系统调用功能头文件和函数原型参数解释返回值示例代码 其他常用系统调用read 系统调用write 系统调用close 系统调用lseek 系统调用stat 系统调用 Linux | 系统调用 前言&#xff1a;在Linux系统中&#xff0c;系统调用是用户空间程序与内核进行…...

用easyExcel如何实现?

要使提供的 ExcelModelListener 类来解析 Excel 文件并实现批量存储数据库的功能&#xff0c;需要结合 EasyExcel 库来读取 Excel 数据。具体来说&#xff0c;可以使用 EasyExcel.read() 方法来读取 Excel 文件&#xff0c;并指定 ExcelModelListener 作为事件监听器。 下面是…...

ASP.NET Core SignalR身份验证

在需要登录才能访问的集线器类上或者方法上添加[Authorize]。也支持角色等设置&#xff0c;可以设置到Hub或者方法上。 配置好User、Role、MyDbContext、JWTSettings、IdentityHelper Program.cs using SignaIR的基本使用; using Scalar.AspNetCore; using Identity框架; us…...

查询语句来提取 detail 字段中包含 xxx 的 URL 里的 commodity/ 后面的数字串

您可以使用以下 SQL 查询语句来提取 detail 字段中包含 oss.kxlist.com 的 URL 里的 commodity/ 后面的数字串&#xff1a; <p><img style"max-width:100%;" src"https://oss.kxlist.com//8a989a0c55e4a7900155e7fd7971000b/commodity/20170925/20170…...

linux本地部署deepseek

目录 安装ollama安装open-webui网页客户端界面本地安装open-webui直接安装在裸机上安装在docker中 外部服务器安装open-webui&#xff0c;并链接本地的ollama服务直接安装在外部服务器裸机上配置systemd启动open-webui 安装在docker中 最后更新时间2024-05-24 安装ollama olla…...

ESP32_H2(IDF)学习系列-蓝牙基础学习(上)

一、简介 参考&#xff1a;[乐鑫-蓝牙] Bluetooth LE 的分层架构 Bluetooth LE 协议定义了三层软件结构&#xff0c;自上而下分别是 应用层 (Application Layer) 应用层&#xff08;Application Layer&#xff09; 主机层 (Host Layer) 控制器层 (Controller Layer) 应用…...

防御综合实验

需求一 配置vlan [SW2]int g 0/0/2 [SW2-GigabitEthernet0/0/2]port link-type access [SW2-GigabitEthernet0/0/2]port default vlan 10 [SW2-GigabitEthernet0/0/2]int g0/0/3 [SW2-GigabitEthernet0/0/3]port link-type access [SW2-GigabitEthernet0/0/3]port default vl…...

Blazor-<select>

今天我们来说说<select>标签的用法&#xff0c;我们还是从一个示例代码开始 page "/demoPage" rendermode InteractiveAuto inject ILogger<InjectPage> logger; <h3>demoPage</h3> <select multiple>foreach (var item in list){<…...

zy.21

PHP(续) PHP代码执行漏洞 1.PHP中代码漏洞的概念 代码执行漏洞就是在代码中若存在eval、assert等能将所接收的参数作为代码去执行,并且拼接的内容可被访问者控制,也就是把传入的参数给拼接进去了,造成了额外的代码执行,也就造成了代码执行漏洞。&#xff08;大概原理&#x…...

【c++】四种类型转换形式

【c】四种类型转换形式 编译时: static_cast&#xff08;静态转换&#xff09; const_cast&#xff08;去常性转换&#xff09; reinterpret_cast&#xff08;重新解释转换&#xff0c;直接转换地址&#xff09; 运行时: dynamic_cast&#xff08;动态转换&#xff0c;运行时类…...

在npm上传属于自己的包

最近在整理代码&#xff0c;上传到npm方便使用&#xff0c;所以学习了如何在npm发布一个包&#xff0c;整理写成一篇文章和大家一起交流。 1、注册npm账号 npm | Home 2、确保是登录状态 &#xff08;在包目录下&#xff0c;终端执行 npm login) 按enter键自动打开页面&…...

关系型数据库主备高可用方案对比笔记

目录标题 数据库高可用性解决方案对比Oracle Data GuardMySQL 主从复制SQL Server AlwaysOnPG Patroni 流复制达梦 DMDataWatch人大金仓 repmgr 备库故障是否影响主库&#xff1f;表格关系型数据库主备高可用方案对比笔记 数据库高可用性解决方案对比 Oracle Data Guard Orac…...

怎么查看电脑显存大小(查看电脑配置)

这里提供一个简单的方法查看 winr打开cmd 终端输入dxdiag进入DirectX 点击显示查看设备的显示内存&#xff08;VRAM&#xff09; 用这个方法查看电脑配置和显存是比较方便的 dxdiag功能 Dxdiag是Windows的DirectX诊断工具&#xff0c;其主要作用包括但不限于以下几点&#…...

深入理解指针(二)

深入理解指针&#xff08;二&#xff09; 前言&#xff1a;一、const修饰指针1.const修饰变量2.const修饰的指针变量 二、野指针1.野指针的成因(1).指针的未初始化(2).指针的越界访问(3).指针的空间释放 2.如何规避野指针(1).指针初始化(2).小心访问越界(3)指针不再使用的时候&…...

非华为电脑制作一碰传NFC贴纸

前提&#xff1a; 在笔记本上安装好华为电脑管家&#xff0c;可以在 github 上下载&#xff0c;并测试可以正常和手机或平板连接步骤&#xff1a; 1、打开电脑华为电脑管家&#xff0c;点【快捷服务】&#xff0c;记录下序列号&#xff0c;一般安装后会生成16位的序列号 2、…...

Wpf美化按钮,输入框,下拉框,dataGrid

Wpf美化按钮&#xff0c;输入框&#xff0c;下拉框&#xff0c;dataGrid 引用代码后 引用资源 <ControlTemplate x:Key"CustomProgressBarTemplate" TargetType"ProgressBar"><Grid><Border x:Name"PART_Track" CornerRadius&q…...

Office/WPS接入DeepSeek等多个AI工具,开启办公新模式!

在现代职场中&#xff0c;Office办公套件已成为工作和学习的必备工具&#xff0c;其功能强大但复杂&#xff0c;熟练掌握需要系统的学习。为了简化操作&#xff0c;使每个人都能轻松使用各种功能&#xff0c;市场上涌现出各类办公插件。这些插件不仅提升了用户体验&#xff0c;…...

【深度学习】多目标融合算法(四):多门混合专家网络MMOE(Multi-gate Mixture-of-Experts)

目录 一、引言 二、MMoE&#xff08;Multi-gate Mixture-of-Experts&#xff0c;多门混合专家网络&#xff09; 2.1 技术原理 2.2 技术优缺点 2.3 业务代码实践 2.3.1 业务场景与建模 2.3.2 模型代码实现 2.3.3 模型训练与推理测试 2.3.4 打印模型结构 三、总结 一、…...

git submodule使用

git submodule 用于关联其他独立的仓库。 它有着几点好处&#xff1a; 代码复用&#xff1a;可以将工具代码放到单独的仓库&#xff0c;再通过 submodule 关联。模块化开发&#xff1a;可以将项目拆分成多个模块&#xff0c;每个模块设置单独仓库独立开发&#xff0c;再通过 su…...

朝天椒USB服务器:解决加密狗远程连接

本文探讨朝天椒USB服务器用Usb Over Network技术&#xff0c;解决加密狗在虚拟机、云主机甚至异地的远程连接问题。 在企业数字化转型的浪潮中&#xff0c;加密狗作为防止软件盗版的重要手段&#xff0c;广泛应用于各类软件授权场景。然而&#xff0c;随着企业超融合进程不断加…...

[笔记.AI]deepseek-r1的不同版本(满血版、蒸馏版、量化)

满血版&#xff1a;是原始的高性能模型&#xff1b; 蒸馏版&#xff08;Distill&#xff09;&#xff1a;是指将大型模型&#xff08;教师模型&#xff09;的知识转移到较小的模型&#xff08;学生模型&#xff09;中&#xff0c;以保持性能的同时减少计算资源的需求&#xff1…...

Kokoro 开源文本转语音引擎上线!多语言支持,无需联网,浏览器内极速运行

Kokoro 是一款轻量级的开源文本转语音(TTS)引擎,凭借其高效能和轻量化设计,迅速在技术社区中引起关注。本文将详细介绍 Kokoro 的主要特点,并提供在浏览器和 Python 环境中的代码示例,帮助您快速上手。 1. Kokoro:可在浏览器中运行的 TTS 引擎 1.1 简介 Kokoro 是一个…...

Unity 基础编程

在这个练习中将新建unity脚本&#xff0c;控制player的运动与转动&#xff0c;实现用代码检测碰撞与删除物体。 该练习将应用附件中的项目文件&#xff0c;该文件与Unity快速练习的文件是同一个项目文件。 一、构建Player运动脚本 该部分将构建一个在场景中由玩家控制游戏物…...

CTFHub-RCE系列wp

目录标题 引言什么是RCE漏洞 eval执行文件包含文件包含php://input读取源代码远程包含 命令注入无过滤过滤cat过滤空格过滤目录分隔符过滤运算符综合过滤练习 引言 题目共有如下类型 什么是RCE漏洞 RCE漏洞&#xff0c;全称是Remote Code Execution漏洞&#xff0c;翻译成中文…...

基于YoloV11和驱动级鼠标模拟实现Ai自瞄

本文将围绕基于 YoloV11 和驱动级鼠标实现 FPS 游戏 AI 自瞄展开阐述。 需要着重强调的是&#xff0c;本文内容仅用于学术研究和技术学习目的。严禁任何个人或组织将文中所提及的技术、方法及思路应用于违法行为&#xff0c;包括但不限于在各类游戏中实施作弊等违规操作。若因违…...

基于微信小程序的博物馆预约系统的设计与实现

hello hello~ &#xff0c;这里是 code袁~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生…...

R语言LCMM多维度潜在类别模型流行病学研究:LCA、MM方法分析纵向数据

全文代码数据&#xff1a;https://tecdat.cn/?p39710 在数据分析领域&#xff0c;当我们面对一组数据时&#xff0c;通常会有已知的分组情况&#xff0c;比如不同的治疗组、性别组或种族组等&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 然而&#xff0c;…...

python卷积神经网络人脸识别示例实现详解

目录 一、准备 1&#xff09;使用pytorch 2&#xff09;安装pytorch 3&#xff09;准备训练和测试资源 二、卷积神经网络的基本结构 三、代码实现 1&#xff09;导入库 2&#xff09;数据预处理 3&#xff09;加载数据 4&#xff09;构建一个卷积神经网络 5&#xff0…...

如何把邮件批量导出到本地

最近遇到邮箱满了的问题&#xff0c;需要把邮件批量导出到本地&#xff0c;然后清空邮箱。 问题是这个邮箱的官网&#xff0c;没有批量导出按钮&#xff0c;比较麻烦&#xff1b;总不能一封一封下载到本地&#xff0c;上万的。 找到了一个好用的工具&#xff0c;Mozilla Thun…...

C++智能指针的使用

文章目录 智能指针的使用和原理智能指针的使用场景RAII和智能指针C标准库智能指针的使用 智能指针的使用和原理 智能指针的使用场景 1. 下面的程序中&#xff0c;new了以后&#xff0c;我们也delete了&#xff0c;但是因为抛异常导致后面的delete没有得到执行&#xff0c;所以…...

Docker安装Redis

一、保证Docker提起来了 systemctl status docker想这没有启动要先启动一下 systemctl status docke二、拉取Redis&#xff08;默认拉最新版&#xff09; sudo docker pull redis检查一下拉成功没有 docker images三、创建相关目录 mkdir -p /home/redis/{conf,data}四、…...

深入理解MySQL索引底层数据结构

文章目录 前言一、MySQL索引是什么&#xff1f;二、索引的核心需求三、MySQL为什么选择BTree做为数据结构1.如果使用的是Hash 做为数据结构2.如果使用二叉树做为数据结构3.使用红黑树做为数据结构4.使用B-Tree做为数据结构5.BTree做为数据结构 4.BTree深度剖析结构特性与 B-Tre…...

udp和tcp的区别

目录 UDP 和 TCP 的区别 1. 连接性 2. 可靠性 3. 数据传输顺序 4. 流量控制和拥塞控制 5. 效率 6. 应用场景 UDP 和 TCP 的 C/C 代码实现区别 1. TCP 服务器端和客户端 TCP 服务器端&#xff08;Server&#xff09; TCP 客户端&#xff08;Client&#xff09; 2. U…...

VMware 虚拟机 ubuntu 20.04 扩容工作硬盘

一、关闭虚拟机 关闭虚拟机参考下图&#xff0c;在vmware 调整磁盘容量 二、借助工具fdisk testubuntu ~ $ df -h Filesystem Size Used Avail Use% Mounted on udev 1.9G 0 1.9G 0% /dev tmpfs 388M 3.1M 385M 1% /run /dev/sda5 …...

MapReduce是什么?

MapReduce 是一种编程模型&#xff0c;最初由 Google 提出&#xff0c;旨在处理大规模数据集。它是分布式计算的一个重要概念&#xff0c;通常用于处理海量数据并进行并行计算。MapReduce的基本思想是将计算任务分解为两个阶段&#xff1a;Map 阶段和 Reduce 阶段。 Map 阶段&a…...

跨越边界,大模型如何助推科技与社会的完美结合?

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 概述 2024年&#xff0c;大模型技术已成为人工智能领域的焦点。这不仅仅是一项技术进步&#xff0c;更是一次可能深刻影响社会发展方方面面的变革。大模型的交叉能否推动技术与社会的真正融合&#xff1f;2025年…...

计算机毕业设计SpringBoot校园二手交易小程序 校园二手交易平台(websocket消息推送+云存储+双端+数据统计)(源码+文档+运行视频+讲解视频)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

RK3568平台开发系列讲解(ConfigFS篇)ConfigFS核心数据结构

🚀返回专栏总目录 文章目录 一、数据结构二、结构体关系三、案例3.1、configfs_subsystem 实例3.2、config_group 实例化四、属性和方法五、config_item实例化沉淀、分享、成长,让自己和他人都能有所收获!😄 理解 ConfigFS 的核心数据结构对于深入使用和定制 ConfigFS 非…...

【04】RUST特性

文章目录 隐藏shadowing所有权ownership堆区&栈区所有权规则变量&数据Copy Trait与Drop TraitCopy TraitDrop Trait移动克隆函数参数与返回值的所有权参数引用可变引用悬垂引用slice生命周期隐藏shadowing 有点像同名覆盖 let mut guess = String::new();let guess: u3…...

c语言函数学习

C语言函数学习笔记&#xff1a;从入门到实践 一、什么是函数&#xff1f; 函数是C语言中用于封装特定功能的代码块&#xff0c;是模块化编程的核心。通过函数可以实现&#xff1a; 代码复用&#xff1a;避免重复编写相同逻辑 逻辑清晰&#xff1a;将复杂程序分解为多个小模块…...

LSTM的介绍

网上一些描述LSTM文章看的云里雾里&#xff0c;只是介绍LSTM 的结构&#xff0c;并没有说明原理。我这里用通俗易懂的话来描述一下。 我们先来复习一些RNN的核心公式&#xff1a; h t t a n h ( W h h t − 1 W x x t b h ) h_t tanh(W_h h_{t-1} W_x x_t b_h) ht​tan…...

XML DOM

XML DOM XML DOM(Document Object Model)是一种用于访问和操作XML文档的标准方式。它提供了一种树形结构来表示XML文档,使得开发者能够方便地对XML数据进行读取、修改和操作。本文将详细介绍XML DOM的基本概念、结构、操作方法以及应用场景。 一、XML DOM的基本概念 XML …...

认识网络安全

一 网络攻击链 踩点-工具准备-载荷投递-漏洞利用-释放载荷-建立通道-目标达成 简化下&#xff1a; 目标侦察&#xff1a;准确识别目标&#xff0c;收集目标详细信息&#xff0c;比如 网络、 邮箱、员工、社会关系、对外提供服务、漏洞 信息等&#xff0c;为 后续攻击做准备。…...

华为支付-免密支付接入签约代扣场景开发步骤

一、预签约&#xff08;服务器开发&#xff09; 1.开发者按照商户模型调用预直连商户预签约或服务商预签约接口获取preSignNo构建签约信息参数contractStr。 为保证支付订单的安全性和可靠性需要对请求body和请求头PayMercAuth对象内的入参排序拼接进行签名。请参考排序拼接和…...

9.JVM-方法区

前言 这次所讲述的是运行时数据区的最后一个部分 从线程共享与否的角度来看 ThreadLocal&#xff1a;如何保证多个线程在并发环境下的安全性&#xff1f;典型应用就是数据库连接管理&#xff0c;以及会话管理 栈、堆、方法区的交互关系 下面就涉及了对象的访问定位 Person&a…...

【Linux Oracle】杂货铺 日常实用2024

1.跨服务器移动文件 passwd=^T^bxxxx `/usr/bin/expect <<-EOF set timeout -1 spawn scp -r ${BATCH_TIME} sxnhtc@192.168.3.x:${EXP_MCRO_DIR}/ expect "*password:" send "$passwd\r" interact expect eof EOF` curl -k -X GET https://192.16…...

深入理解指针初阶:从概念到实践

一、引言 在 C 语言的学习旅程中&#xff0c;指针无疑是一座必须翻越的高峰。它强大而灵活&#xff0c;掌握指针&#xff0c;能让我们更高效地操作内存&#xff0c;编写出更优化的代码。但指针也常常让初学者望而生畏&#xff0c;觉得它复杂难懂。别担心&#xff0c;本文将用通…...

Git 与 Git常用命令

Git 是一个开源的分布式版本控制系统&#xff0c;广泛用于源代码管理。与传统的集中式版本控制系统不同&#xff0c;Git 允许每个开发者在本地拥有完整的代码库副本&#xff0c;支持离线工作和高效的分支管理。每次提交时&#xff0c;Git 会对当前项目的所有文件创建一个快照&a…...

jupyterLab插件开发

jupyter lab安装、配置&#xff1a; jupyter lab安装、配置教程_容器里装jupyterlab-CSDN博客 『Linux笔记』服务器搭建神器JupyterLab_linux_布衣小张-腾讯云开发者社区 Jupyter Lab | 安装、配置、插件推荐、多用户使用教程-腾讯云开发者社区-腾讯云 jupyterLab插件开发教…...