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

html和css基础练习

news 2026/2/7 11:38:15

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&#xff1a;图像&#xff0c;title&#xff1a;头部文字&#xff0c;body&#xff1a;主…...

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

Linux信号 signal（）编程

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

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

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

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

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

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

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

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

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

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

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

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

我在之前的一篇文章中写过沿样条线创建网格体的方法&#xff1a; https://blog.csdn.net/grayrail/article/details/130453733 但该方法没有网格变形操作&#xff0c;就会导致每一段网格对象是无法连接的&#xff1a; 后来发现了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中最常用的容器&#xff0c;支持存储多种类型的数据。 与数组相比&#xff0c;它的大小是可变的&#xff0c;因此也会被称为动态数组。 使用它&#xff0c;需要包含头文件&#xff1a; #include <vector>定义的结构&#xff1a; vector<数据类…...

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

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

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

常用gdb调试命令

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

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

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

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

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

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

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

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

Stm32_标准库_10_TIM_显示时间日期

利用TIM计数耗费1s,启动中断&#xff0c;秒表加一 时间显示代码&#xff1a; #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或蓝牙与电脑连接&#xff0c;注意确认在几号通道接线。 2.实时数据采集可视化 进行设置。需要在软件中选择你的PLUX设备&#xff0c;并配置相关的参数&#xff0c;如采样率、分辨率、信号类型等 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-文件管理命令

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

编程日记 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

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2026/2/6 3:56:50

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/31 12:47:25

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2026/2/1 6:36:36

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/2/4 16:23:56

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/6 17:58:07

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2026/2/6 15:56:54

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2026/1/25 10:16:57

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2026/1/25 2:04:42