html和css基础练习
vscode快捷键
alt + b 在浏览器中打开
alt + shift + b 在其他浏览器打开
ctrl + / 注释
ctrl + y 快捷键删除
参考文章
https://www.bilibili.com/video/BV1m84y1w7Tb
基础html标签
img：图像，title：头部文字，body：主体，hr：段落行，span：行，a：超链接，video：视频，p：文件段 等等
<!DOCTYPE html>
<!-- 文档类型为html --><html lang="en">
<head><!-- 设置字符集 --><meta charset="UTF-8"><!-- 设置浏览器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body><!-- img 参见的属性src 路径width 宽度height 高度参数px 是像素 20% 父元素的百分百--><!-- 绝对路径和相对路径 --><!-- 还可以添加网络路径 --><img src="img/news_logo.png" > 新浪政务 > 正文<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><!-- 水平分割线hr --><hr>2023年03月02日 21:50 央视网<hr></body>
</html>
css和html基础
css选择器
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈</title><!-- 方式二：内嵌样式 --><style>h1 {/* color: rgb(0, 255, 0); */color: #5567C2;}/* span {color: gray;} *//* 类选择器 *//* .cls{color: gray;} *//* id选择器，id不能重复 */#time {color: gray;font-size: 14px; /* 设置字体大小 */}a {/* 设置黑色 */color: black;/* 文本 */text-decoration: none;}p {/* 首行缩进 */text-indent: 24px;/* 设置行高 */line-height: 30px;}#plast {text-align: right;}#center {width: 65%;/* margin:0% 17.5% 0% 17.5% ; *//* 上 右 下 左 */margin: 0% auto;}</style><!-- 方式三，外联样式，通过导入css文件来定义样式 --><!-- <link rel="stylesheet" href="css/news.css"> --></head>
<body><div id="center" ><img src="img/news_logo.png" > <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><!-- 方式一：行内样式 --><!-- style color 定义颜色 --><!-- span 标签没有任何语义的 --><hr><span id="time">2023年03月02日 21:50 </span><span><a href="https://www.cctv.com/" target="_blank">央视网</a></span><hr><!-- css 的选择器，id选择器优先级大于类选择器，大于元素选择器 --><!-- video 和 audio 标签 --><!-- 正文部分 --><!-- 视频 --><video src="video/1.mp4" controls width="950"></video><!-- audio，音频 --><!-- <audio src="audio/1.mp3" controls></audio> --><!-- p 段落标签，b strong 加粗 --><!-- 首行缩进 --><p><b>央视网消息</b> （焦点访谈）：</p><p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p><img src="img/1.jpg" alt=""><p>今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。</p><img src="img/2.jpg" alt=""><p>测试。</p><p id="plast">责任编辑：王树淼 SN242</p><!-- 布局标签div和span --></div></body>
</html>
表单，列表等
表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表格</title><style>td {text-align: center; /* 单元格内容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0" width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg" width="100px"> </td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table></body>
</html>
效果
表单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单项标签</title>
</head>
<body><!-- value: 表单项提交的值 -->
<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>图像: <input type="file" name="image"> <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>邮箱: <input type="email" name="email"> <br><br>年龄: <input type="number" name="age"> <br><br>学历: <select name="degree"><option value="">----------- 请选择 -----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select> <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交"> <br>
</form></body>
</html>
效果：
相关文章：
html和css基础练习
vscode快捷键 alt b 在浏览器中打开 alt shift b 在其他浏览器打开 ctrl / 注释 ctrl y 快捷键删除 参考文章 https://www.bilibili.com/video/BV1m84y1w7Tb 基础html标签 img：图像，title：头部文字，body：主…...
Linux信号 signal（）编程
在Linux的进程间通信中可以用signal（）函数进行信号与信息传递。 1.信号 信号的名字和编号： 每个信号都有一个名字和编号，这些名字都以“SIG”开头，例如“SIGIO ”、“SIGCHLD”等等。 信号定义在signal.h头文件中&am…...
【LeetCode】16.最接近的三数之和
1 问题 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数，使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 示例 1： 输入：nums [-1,2,1,-4], target 1 输出&…...
嵌入式开发学习之STM32F407点亮LED及J-Link下载（二）
嵌入式开发学习之STM32F407点亮LED及J-Link下载（二） 开发涉及工具控制端口配置端口的设定与确认端口配置方法实现点亮LED程序下载与仿真 有工程实例，链接在最底部。 开发涉及工具 开发环境（IDE）：IAR-ARM8…...
智能呼叫中心系统的未来发展趋势：为企业开启全新服务模式
随着人工智能技术的不断发展，智能呼叫中心系统已经成为现代企业服务的重要组成部分。随着客户需求的不断升级，智能呼叫中心系统的未来发展趋势也受到了广泛关注。以下是一些关于未来发展趋势的观点和建议。 1、大数据和人工智能技术 未来的系统将更多地…...
UE5中实现沿样条线创建网格体2-SplineMesh版本
我在之前的一篇文章中写过沿样条线创建网格体的方法： https://blog.csdn.net/grayrail/article/details/130453733 但该方法没有网格变形操作，就会导致每一段网格对象是无法连接的： 后来发现了SplineMesh方法可以比较好的解决这个问题&…...
实现Element Select选择器滚动加载
<template><el-selectpopper-class"more-tag-data"v-model"tagId"filterableplaceholder"请选择"focus"focusTag"><el-optionv-for"(item, index) in taskTagLists":key"index":label"item.n…...
C++ 之 Vector 和 List
Vector vector 是C STL中最常用的容器，支持存储多种类型的数据。 与数组相比，它的大小是可变的，因此也会被称为动态数组。 使用它，需要包含头文件： #include <vector>定义的结构： vector<数据类…...
力扣-448.找到所有数组中消失的数字
Idea 模拟 class Solution { public:vector<int> findDisappearedNumbers(vector<int>& nums) {int n nums.size();vector<int> a(n 1, 0);for(int i : nums) a[i];vector<int> ans;for(int i 1; i < n; i) if(!a[i]) ans.emplace_back(i);r…...
常用gdb调试命令
常见gdb调试命令 命令名 命令缩写 命令说明 backtrace bt 查看函数调用堆栈 frame f 查看栈帧 list l 查看源码 print p 打印内部变量值 info i 查看程序状态 display disp 跟踪某变量,每次停下来则显示值 run r 开始运行程序 continue c 继续程序运行，直到下一个断…...
【动手学深度学习-Pytorch版】BERT预测系列——用于预测的BERT数据集
本小节的主要任务即是将wiki数据集转成BERT输入序列，具体的任务包括： 读取wiki数据集生成下一句预测任务的数据—>主要用于_get_nsp_data_from_paragraph函数从输入paragraph生成用于下一句预测的训练样本：_get_nsp_data_from_paragraph生…...
【数据结构-字符串 三】【栈的应用】字符串解码
废话不多说，喊一句号子鼓励自己：程序员永不失业，程序员走向架构！本篇Blog的主题是【字符串转换】，使用【字符串】这个基本的数据结构来实现，这个高频题的站点是：CodeTop，筛选条件为&…...
Stm32_标准库_10_TIM_显示时间日期
利用TIM计数耗费1s,启动中断，秒表加一 时间显示代码： #include "stm32f10x.h" // Device header #include "Delay.h" #include "OLED.h"uint16_t num 0; TIM_TimeBaseInitTypeDef TIM_TimeBaseInitStructure; NVIC_I…...
10-SRCNN-使用CNN实现超分辨成像
文章目录 utils_dataset.pymodel.pytrain.pyuse.py主要文件 utils_dataset.py 工具文件，主要用来制作dataset，便于加入dataloader，用于实现数据集的加载和并行读取 model.py 主要写入网络（模型） train.py 主要用于训练 use.py 加载训练好的模型，用于测试或使用 utils_dat…...
cmd/bat 输出符,控制台日志输出到文件
前言 略 输出符 A > B将A执行结果覆盖写入B A >> B将A执行结果追加写入B 常用句柄 句柄句柄的数字代号描述STDIN0键盘输入STDOUT1输出到命令提示符窗口STDERR2错误输出到命令提示符窗口 控制台日志输出到文件 1.bat 1>d:\log.log将控制台日志输出到文件 d:…...
ODrive移植keil（七）—— 插值算法和偏置校准
目录 一、角度读取1.1、硬件接线1.2、程序演示1.3、代码说明 二、锁相环和插值算法2.1、锁相环2.2、插值2.3、角度补偿 三、偏置校准3.1、硬件接线3.2、官方代码操作3.3、移植后的代码操作3.4、代码说明3.5、SimpleFOC的偏置校准对比 ODrive、VESC和SimpleFOC 教程链接汇总&…...
【肌电信号】OpenSignals使用方法 --- 肌电信号采集及导入matlab
一、 多通道采集教学 1. 数据线连接 将PLUX设备通过USB或蓝牙与电脑连接，注意确认在几号通道接线。 2.实时数据采集可视化 进行设置。需要在软件中选择你的PLUX设备，并配置相关的参数，如采样率、分辨率、信号类型等 3 支持数据回放和…...
STM32 多功能按键中断
key1 开关实现led1亮灭,key2开关实现蜂鸣器开关,key3开关实现风扇开关 main.c #include "uart.h" #include "key_it.h" #include "led.h" int main() {char c;char *s;uart4_init();//串口初始化all_led_init();key_it_config();fengshan_init…...
Linux-文件管理命令
绝对路径：从根目录开始描述的路径 pwd输入即为绝对路径， 开头一定是“/”，因为一定是从根目录开始走 相对路径：从当前路径开始描述的路径，开头不一定是“/”，因为不一定是从根目录开始走的 .:是当前目录 。…...
JS DataTable中导出PDF右侧列被截断的问题解决
JS DataTable中导出PDF右侧列被截断的问题解决 文章目录 JS DataTable中导出PDF右侧列被截断的问题解决一. 问题二. 解决办法三. 代码四. 参考资料 一. 问题 二. 解决办法 设置PDF大小和版型 orientation: landscape, pageSize: LEGAL,上述代码设置打印的PDF尺寸为LEGAL&…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接：344. 反转字符串 双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具
第2章 虚拟机性能监控，故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
Golang——7、包与接口详解
包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...
图解JavaScript原型：原型链及其分析 | JavaScript图解
忽略该图的细节（如内存地址值没有用二进制） 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么：保存在堆中一块区域，同时在栈中有一块区域保存其在堆中的地址（也就是我们通常说的该变量指向谁&…...