前三次笔记、表单和五彩导航

骨架:

笔记:

需要有包裹的内容,用双标签,不需要包裹内容就可以完成的操作用单标签
标签之间的关系只有父子关系和兄弟关系
标题标签只有h1-h6,且大小依次递减,独占一行
在段落标签“<p> </p>”里进行换行,只会在浏览器里面多一个空格,段落与段落之间默认存在空隙。
换行<br>,水平线<hr>
<a></a>点击跳转
音乐:audio,视频:video
<input>:输入(表单输入)元素
<!--                  -->注释文字,解释说明,不影响程序
<label> 元素(标签)表示用户界面中某个元素的说明
<marquee> 元素用来插入一段滚动的文字
<select> 元素表示一个提供选项菜单的控件
<option> 用于定义在 <select>, <optgroup> 或 <datalist> 元素中包含的项
placeholder 表示 <input> 或 <textarea> 元素中的占位文本
<li> 元素 (或称 HTML 列表条目元素)用于表示列表里的条目
<textarea> 元素表示一个多行纯文本编辑控件
<button> 元素表示一个可点击的按钮,可以用在表单或文档其他需要使用简单标准按钮的地方
 
<caption> 元素展示一个表格的标题
<tr>:表格行元素
<table>:表格元素
<title> 元素 定义文档的标题,显示在浏览器的标题栏或标签页上。
<style>:样式信息元素
<ul>:无序列表元素
background-color 会设置元素的背景色,color 属性设置元素的文本以及文本装饰的颜色值
font-size 设置字体大小
font-weight 指定了字体的粗细程度
text-align 设置块元素或者单元格框的行内内容的水平对齐
ont-style 允许选择 font-family 字体下的 italic 或 oblique 样式
font-family 允许通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体
line-height 用于设置多行元素的空间量,如多行文本的间距

表格:

<!DOCTYPE html>
 
<head>
 
 
 
    <meta charset="UTF-8">
 
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
    <title>Document</title>
 
</head>
 
 
 
<body>
 
    <h1>用户注册</h1>
 
    <from action="">
 
    用户名:<input type="text" name="usename">
 
    <br />
 
    密码:<input type="password" name="password" required>
 
    <br />
 
    性别:<label><input type="radio" name="sex" value="nan">男</label>
 
    <label><input type="radio" name="sex"  value="nv">女</label>
 
    <br />
 
     爱好:<label><input type="checkbox" name="hobby">写作</label>
 
        <label><input type="checkbox" name="hobby">听音乐</label>
 
        <label><input type="checkbox" name="hobby">体育</label>
 
     <br />
 
     省份:<select name="city" >
 
        <option value="shanxi"selected>陕西</option>
 
        <option value="guangzhou">广州</option>
 
        <option value="shanghai">上海</option>
 
        <option value="chongqing">重庆</option>
 
     </select>
 
     <br />
 
    自我介绍:<textarea name="liuyan" cols="10" rows="10" maxlength="10" placeholder=""></textarea>
 
    <br />
 
 
 
    <button>提交</button>
 
     <button>重置</button>

<!DOCTYPE html>
 
 
<html lang="en">
 
 
<head>
 
 
    <meta charset="UTF-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Document</title>
 
 
 
<style>
 
    .wucai a{
 
        display:inline-block;
 
        width: 120px;
 
        height: 60px;
 
        background-color: aqua;
 
        text-align: center;
 
        color: rgb(255, 132, 0);
 
        line-height: 50px;
 
        text-decoration: none;
 
    }
 
    .wucai .wucai1{
 
        background-color: rgb(156, 156, 22);
    }
 
    .wucai .wucai1:hover{
 
        background-color: rgb(169, 206, 100)
    }
 
    .wucai .wucai2{
 
        background-color: rgb(225, 176, 233);
    }
    .wucai .wucai2:hover{
 
        background-color: rgb(163, 231, 25);
    }
    .wucai .wucai3{
        background-color: rgb(17, 200, 228);
    }
    .wucai .wucai3:hover{
 
        background-color: rgb(188, 13, 13);
 
    }
 
        .wucai .wucai4{
 
        background-color: rgb(75, 67, 227);
 
 
 
    }
 
    .wucai .wucai4:hover{
 
        background-color: blanchedalmond;
 
    }
 
 
 
</style>
 
 
</head>
 
 
 
<body>
 
 
    <div class="wucai">
 
      <a href="#" class="wucai1">五彩导航</a>
 
      <a href="#" class="wucai2">五彩导航</a>
 
      <a href="#" class="wucai3">五彩导航</a>
 
      <a href="#" class="wucai4">五彩导航</a》
 
 
    </div>
 
 
 
</body>
 
 
 
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/286695.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java项目:74 ssm基于Java的超市管理系统+jsp

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 功能包括:商品分类&#xff0c;供货商管理&#xff0c;库存管理&#xff0c;销售统计&#xff0c;用户及角色管理&#xff0c;等等功能。项目采用mave…

3.25C++

定义自己的命名空间&#xff0c;其中有string类型的变量&#xff0c;再定义两个函数&#xff0c;一个函数完成字符串的输入&#xff0c;一个函数完成求字符串长度&#xff0c;再定义一个全局函数完成对该字符串的反转 #include <iostream> #include <cstring> usi…

C++细节

背景知识&#xff1a; 面向对象的编程中&#xff0c;类&#xff08;Class&#xff09;是创建对象的蓝图或模板&#xff0c;它包含了数据&#xff08;通常称为属性或变量&#xff09;和行为&#xff08;通常称为方法或函数&#xff09;。将数据封装为私有&#xff08;private&am…

前端学习-HTML基础

一、简介 1.介绍 网页就是html文件&#xff0c;前端编写代码->浏览器解析代码->呈现网页 谷歌浏览器Blink内核最好 2.Web标准 让网页设计排版更统一规范 结构&#xff1a;对网页元素进行整理和分类&#xff0c;html 表现&#xff1a;设置网页元素的板式、颜色、大小等外…

11.测试教程-自动化测试selenium-3

文章目录 1.unittest框架解析2.批量执行脚本2.1构建测试套件2.2用例的执行顺序2.3忽略用例执行 3.unittest断言4.HTML报告生成5.异常捕捉与错误截图6.数据驱动 大家好&#xff0c;我是晓星航。今天为大家带来的是 自动化测试selenium第三节 相关的讲解&#xff01;&#x1f600…

spring boot商城、商城源码 欢迎交流

一个基于spring boot、spring oauth2.0、mybatis、redis的轻量级、前后端分离、防范xss攻击、拥有分布式锁&#xff0c;为生产环境多实例完全准备&#xff0c;数据库为b2b2c设计&#xff0c;拥有完整sku和下单流程的商城 联系: V-Tavendor

I.MX6ULL_Linux_驱动篇(56)linux PWM驱动

PWM 驱动简析 设备树 PWM 控制器节点 I.MX6ULL 有 8 路 PWM 输出&#xff0c;因此对应 8 个 PWM 控制器&#xff0c;所有在设备树下就有 8 个PWM 控制器节点。这 8 路 PWM 都属于 I.MX6ULL 的 AIPS-1 域&#xff0c;但是在设备树 imx6ull.dtsi 中分为了两部分&#xff0c; PW…

『VUE』01. 开发前的准备(详细图文注释)

目录 nodejs安装软件检查环境变量设置镜像源 安装vue环境并搭建项目全局安装 Vue 的命令行工具&#xff08;Vue CLI&#xff09;验证安装是否成功创建新vue项目 启动vue项目进入项目根目录安装依赖启动项目 配置开发ide (vscode)安装vscode配置vue插件vue2与vue3兼容性插件js插…

Linux之时间子系统(四): tick 层模块(broadcast )

一、前言 在内核中&#xff0c;有cpuidle framework可以控制cpu的节电&#xff1a;当没有进程调度到该cpu上执行的时候&#xff0c;swapper进程粉墨登场&#xff0c;将该cpu会被推入到idle状态。当然CPU的idle状态有深有浅&#xff0c;当CPU睡的比较深入的时候&#xff0c;有可…

【前端】-【性能优化常识】

目录 前端性能优化指标首屏速度、白屏时间性能优化收效很大的操作收效不大或者特殊情况的优化操作 操作速度、渲染速度造成操作卡顿和渲染慢的场景性能优化 数据缓存 前端性能优化指标 首屏速度、白屏时间 页面一打开的白屏时间&#xff0c;主要是由资源加载&#xff08;耗时多…

vue 隐藏导航栏和菜单栏,已解决

初始效果&#xff1a; 效果&#xff1a; 出现问题&#xff1a; 解决方法&#xff1a;

Linux——进程程序替换

替换原理 用fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支),子进程往往要调用一种exec函数 以执行另一个程序。当进程调用一种exec函数时,该进程的用户空间代码和数据完全被新程序替换,从新程序的启动 例程开始执行。调用exec并不创建新进程,所以调用…

JS加密解密之应用如何保存到桌面书签

前言 事情起因是这样的&#xff0c;有个客户解密了一个js&#xff0c;然后又看不懂里边的一些逻辑&#xff0c;想知道它是如何自动拉起谷歌浏览器和如何保存应用到书签的&#xff0c;以及如何下载应用的。继而诞生了这篇文章&#xff0c;讲解一下他的基本原理。 渐进式Web应用…

C++动态内存管理:new/delete与malloc/free的对比

在C中&#xff0c;动态内存管理是一个至关重要的概念。它允许我们在程序运行时根据需要动态地分配和释放内存&#xff0c;为对象创建和销毁提供了灵活性。在C中&#xff0c;我们通常会用到两对工具&#xff1a;new/delete 和 malloc/free。虽然它们都能够完成类似的任务&#x…

人工心脏术后两个月,他给父母做了一顿饭丨心脏病专家联合访谈

假如人生即将走到尽头&#xff0c;你最后的愿望会是什么&#xff1f; 不同的人会有不同的答案。 对于陈华&#xff08;化名&#xff09;来说&#xff0c;他的愿望是亲手为父母做顿饭。 罹患心脏病多年&#xff0c;陈华的病情反反复复逐渐发展为终末期心衰。虽然自己与父母家仅…

PMP考试费用涨价了?或将涨至4100元!

现在国内线下笔试的PMP报名费是3900元&#xff0c;但最近听到消息&#xff0c;说国外的PMP报名费用已经确认上调&#xff08;从2024年3月1日开始调整&#xff09;&#xff0c;由原本的555美元上调至575美元&#xff0c;根据h率换算&#xff0c;575美元≈4100元。既然国外的报名…

公司调研 | 空间机械臂GITAI | 日企迁美

最近做的一些公司 / 产品调研没有从技术角度出发&#xff0c;而更关注宏观发展&#xff1a;主营方向、产品介绍、商业化落地情况、融资历程、公司愿景、创始人背景等。部分调研放在知乎上&#xff0c;大部分在飞书私人链接上 最近较关注人形Robot的发展情况&#xff0c;欢迎感兴…

SCI一区 | Matlab实现PSO-TCN-BiGRU-Attention粒子群算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现PSO-TCN-BiGRU-Attention粒子群算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测 目录 SCI一区 | Matlab实现PSO-TCN-BiGRU-Attention粒子群算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测预测效果基本介绍模型描述…

Capture One Pro 23中文---颠覆性的图像编辑与色彩配置

Capture One Pro 23是一款功能强大且专业的RAW图像编辑处理软件。它拥有全球领先的色彩管理技术和精细的图像编辑工具&#xff0c;可以对图片进行多种精细调整&#xff0c;包括曝光、色温、对比度、锐度等&#xff0c;以满足用户特定的后期处理需求。此外&#xff0c;Capture O…

DNS 服务 Unbound 部署最佳实践

文章目录 安装unbound-control配置启动服务测试 参考&#xff1a; 官网地址&#xff1a;https://nlnetlabs.nl/projects/unbound/about/ 详细文档&#xff1a;https://unbound.docs.nlnetlabs.nl/en/latest/index.html DNS服务Unbound部署于使用 https://cloud.tencent.com/…