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

html和css基础练习

news 2025/12/17 21:17:55

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：主…...

编程日记 2023/10/14 19:54:19

Linux信号 signal（）编程

在Linux的进程间通信中可以用signal（）函数进行信号与信息传递。 1.信号信号的名字和编号： 每个信号都有一个名字和编号，这些名字都以“SIG”开头，例如“SIGIO ”、“SIGCHLD”等等。信号定义在signal.h头文件中&am…...

编程日记 2023/10/14 19:51:16

【LeetCode】16.最接近的三数之和

1 问题给你一个长度为 n 的整数数组 nums 和一个目标值 target。请你从 nums 中选出三个整数，使它们的和与 target 最接近。返回这三个数的和。假定每组输入只存在恰好一个解。示例 1： 输入：nums [-1,2,1,-4], target 1 输出&…...

编程日记 2023/10/14 19:49:13

嵌入式开发学习之STM32F407点亮LED及J-Link下载（二）

嵌入式开发学习之STM32F407点亮LED及J-Link下载（二） 开发涉及工具控制端口配置端口的设定与确认端口配置方法实现点亮LED程序下载与仿真有工程实例，链接在最底部。开发涉及工具开发环境（IDE）：IAR-ARM8…...

编程日记 2023/10/14 19:48:13

智能呼叫中心系统的未来发展趋势：为企业开启全新服务模式

随着人工智能技术的不断发展，智能呼叫中心系统已经成为现代企业服务的重要组成部分。随着客户需求的不断升级，智能呼叫中心系统的未来发展趋势也受到了广泛关注。以下是一些关于未来发展趋势的观点和建议。 1、大数据和人工智能技术未来的系统将更多地…...

编程日记 2023/10/14 19:47:12

UE5中实现沿样条线创建网格体2-SplineMesh版本

我在之前的一篇文章中写过沿样条线创建网格体的方法： https://blog.csdn.net/grayrail/article/details/130453733 但该方法没有网格变形操作，就会导致每一段网格对象是无法连接的： 后来发现了SplineMesh方法可以比较好的解决这个问题&…...

编程日记 2023/10/14 19:45:10

实现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…...

编程日记 2023/10/14 19:44:09

C++ 之 Vector 和 List

Vector vector 是C STL中最常用的容器，支持存储多种类型的数据。与数组相比，它的大小是可变的，因此也会被称为动态数组。使用它，需要包含头文件： #include <vector>定义的结构： vector<数据类…...

编程日记 2023/10/14 19:43:08

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…...

编程日记 2023/10/14 19:42:06

常用gdb调试命令

常见gdb调试命令命令名命令缩写命令说明 backtrace bt 查看函数调用堆栈 frame f 查看栈帧 list l 查看源码 print p 打印内部变量值 info i 查看程序状态 display disp 跟踪某变量,每次停下来则显示值 run r 开始运行程序 continue c 继续程序运行，直到下一个断…...

编程日记 2023/10/14 19:41:04

【动手学深度学习-Pytorch版】BERT预测系列——用于预测的BERT数据集

本小节的主要任务即是将wiki数据集转成BERT输入序列，具体的任务包括： 读取wiki数据集生成下一句预测任务的数据—>主要用于_get_nsp_data_from_paragraph函数从输入paragraph生成用于下一句预测的训练样本：_get_nsp_data_from_paragraph生…...

编程日记 2023/10/14 19:40:03

【数据结构-字符串三】【栈的应用】字符串解码

废话不多说，喊一句号子鼓励自己：程序员永不失业，程序员走向架构！本篇Blog的主题是【字符串转换】，使用【字符串】这个基本的数据结构来实现，这个高频题的站点是：CodeTop，筛选条件为&…...

编程日记 2023/10/14 19:38:01

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…...

编程日记 2023/10/14 19:36:59

10-SRCNN-使用CNN实现超分辨成像

文章目录 utils_dataset.pymodel.pytrain.pyuse.py主要文件 utils_dataset.py 工具文件，主要用来制作dataset，便于加入dataloader，用于实现数据集的加载和并行读取 model.py 主要写入网络（模型） train.py 主要用于训练 use.py 加载训练好的模型，用于测试或使用 utils_dat…...

编程日记 2023/10/14 19:35:57

cmd/bat 输出符,控制台日志输出到文件

前言略输出符 A > B将A执行结果覆盖写入B A >> B将A执行结果追加写入B 常用句柄句柄句柄的数字代号描述STDIN0键盘输入STDOUT1输出到命令提示符窗口STDERR2错误输出到命令提示符窗口控制台日志输出到文件 1.bat 1>d:\log.log将控制台日志输出到文件 d:…...

编程日记 2023/10/14 19:33:54

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 教程链接汇总&…...

编程日记 2023/10/14 19:32:54

【肌电信号】OpenSignals使用方法 --- 肌电信号采集及导入matlab

一、多通道采集教学 1. 数据线连接将PLUX设备通过USB或蓝牙与电脑连接，注意确认在几号通道接线。 2.实时数据采集可视化进行设置。需要在软件中选择你的PLUX设备，并配置相关的参数，如采样率、分辨率、信号类型等 3 支持数据回放和…...

编程日记 2023/10/14 19:30:50

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…...

编程日记 2023/10/14 19:29:50

Linux-文件管理命令

绝对路径：从根目录开始描述的路径 pwd输入即为绝对路径， 开头一定是“/”，因为一定是从根目录开始走相对路径：从当前路径开始描述的路径，开头不一定是“/”，因为不一定是从根目录开始走的 .:是当前目录。…...

编程日记 2023/10/14 19:26:44

JS DataTable中导出PDF右侧列被截断的问题解决

JS DataTable中导出PDF右侧列被截断的问题解决文章目录 JS DataTable中导出PDF右侧列被截断的问题解决一. 问题二. 解决办法三. 代码四. 参考资料一. 问题二. 解决办法设置PDF大小和版型 orientation: landscape, pageSize: LEGAL,上述代码设置打印的PDF尺寸为LEGAL&…...

编程日记 2023/10/14 19:25:42

Day131 | 灵神 | 回溯算法 | 子集型子集

Day131 | 灵神 | 回溯算法 | 子集型子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/12/16 3:23:56

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...

编程新知 2025/12/13 7:26:47

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据准备一个容器,例如: …...

编程新知 2025/12/15 20:41:51

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是：将一个 Flask Web 应用生成成纯静态 HTML 文件，从而可以部署到静态网站托管服务上，如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13