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

html第一次作业

常用标签

0, 骨架(!+tap)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>骨架部分</title>
</head><body></body></html>
1,<h1> - <h6>:定义标题,从大到小的六个级别(逐级减小 独占一行)
2, 段落标签:<p>:定义段落<div></div>自成一段
3, 链接标签:<a>:定义超链接 <a href="09-视频.html" target="_blank"> 点击进入新的页面</a>
4, 图像标签:<img>:插入图像 <img src="../素材/1.jpg" width="200px" alt="这是一张未加载    出来的法斗的照片" title="555" align="bottom" vspace="200px" hspace="20px">视频标签 <vidio>音频标签 <audio>
5, 无序列表:<ul> 和 <li>:创建无序列表
6, 有序列表:<ol> 和 <li>:创建有序列表
7, 表格标签:<table>:定义表格<tr>:定义表格行<th>:定义表头单元格<td>:定义数据单元格
8, 注释标签<-- 内容 --> 做注释
9 ,<br>换行  <hr>水平线
10, <pre> 文本格式化(原样输出)
11, 表单<form action="" method="get和post"> get比较安全 http协议规定不同 昵称:<input type="text"> placeholder(加提示) readonly(只读)密码:<input type="password">(黑点) required设置为必选性别:<input type="radio">男(单选)需要内部属性标明是一组单选
(name="sex"),如果要开局选定一个选项加 checked   value=""最终输出你喜欢吃的食物是:<input type="checkbox">榴莲(多选) 用<label>包起则点文字也能选上传文件<input type="file"> multiple 可传多个文件#下拉框<select name="city"><option value="上海">上海</option></select>#文本域<textarea name="留言" cols="300" rows="300">按钮<input type="submit"> 提交按钮(相当于<button>)  valuege="更改按钮上的文字"<button></button>元素有三种类型:submit、reset和button。分别用来提交表单、重置表单和执行一些自定义操作。
12, 框架标签 <iframe src="链接" frameborder="1"></iframe>name="超链接"  超链接替换链接来嵌套
13, css引入 <link rel="stylesheet" href="xx.css"  此方法为外链,写在head内xx.css内<div>样式</div>css内也可以引用其他css样式 css的三大特性
层叠性:相同的选择器,设置相同的属性,遵循就近原则。哪个样式距离结构近,就用哪个样式
继承性:子标签会继承父标签的某些属性
优先级:*0,0,0,0标签0,0,0,1(伪)类选择器0,0,1,0id选择器0,1,0,0行内1,0,0,0!important最大
14, 选择器 
基本选择器             
标签选择器             标签{样式}
类选择器(class="")    .类名{样式}
id选择器              #id名{样式}
通配符选择器 全部东西  *{样式} 优先级最低,容易被覆盖子代选择器.a>li 第一层
后代选择器.a li 包含内层
逗号选择器.a li ,转行.one{<ul class="a"><li>1</li><li>2</li><li>3</li>属性选择器 标签+[属性] { 样式 } 属性可以使用正则*(包含什么) ^(以什么开头) $(以什么结尾)+号表示下一个标签伪类选择器 (描述标签状态的)  :hover 当鼠标悬停时状态  比如 a :hover{样式}a:link(访问前) visited(访问后) active(点击时)要按照lvha顺序书写
其他伪类 ul li:nth-child(个数){}  最后一个nth-last-child{}
15, 字体相关样式 
字体大小 font-size: px;加粗 font-weight:400正常 700加粗;斜体 font-style: intalic;行高 line-height: 40px;  让行高=容器高度来实现单行文本的垂直居中,水平居中(text-align:center;)首行缩进,单位使用em(一个字符) 文本装饰,text-decoration: none;主要用于去除a链接的默认样式颜色 color: rgb(x,x,x);或者用十六进制的方法

练习1,表单

<!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>用户注册</title>
</head>
<body><div align="center"><p>用户注册</p>用户名<input type="text"><br>密码<input type="password"><br>性别<input type="radio" checked>男<input type="radio">女<br>爱好<input type="checkbox">写作<input type="checkbox">听音乐<input type="checkbox">体育<br>省份<select name="city"><option value="陕西">陕西</option><option value="广东">广东</option><option value="黑龙江">黑龙江</option></select><br>自我介绍<br><textarea name="自我介绍" cols="30" rows="9"></textarea><br><button type="submit">提交</button><button type="reset">重置</button></div>
</body>
</html>

结果

练习2,五彩斑斓练习题 

骨架代码
<!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>Document</title><link rel="stylesheet" href="abbjq.css"
</head>
<body><a href="#">五彩斑斓</a><a href="#">五彩斑斓</a><a href="#">五彩斑斓</a><a href="#">五彩斑斓</a>
</body>
</html>css代码
a{display: inline-block;background-color: aqua;text-decoration: none;font-size: 30px;font-weight: 700;line-height: 40px;}
a:hover{background-color: green;
}
a:active{background-color: pink;
}

 悬停时深绿色,点击时粉色,正常浅蓝色

相关文章:

html第一次作业

常用标签 0, 骨架&#xff08;&#xff01;tap&#xff09; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><t…...

基于java实现的KTV点歌系统

开发语言&#xff1a;Java 框架&#xff1a;ssm 技术&#xff1a;JSP JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclip…...

GPT+向量数据库+Function calling=垂直领域小助手

引言 将 GPT、向量数据库和 Function calling 结合起来&#xff0c;可以构建一个垂直领域小助手。例如&#xff0c;我们可以使用 GPT 来处理自然语言任务&#xff0c;使用向量数据库来存储和管理领域相关的数据&#xff0c;使用 Function calling 来实现领域相关的推理和计算规…...

DeepSeek-coder 微调训练记录

简介 微调过程不再细说, 参考link进行即可. 主要是数据集. 1.3b模型微调训练占用资源信息 top信息 评估 根据DeepSeek-coder的Evaluation试进行对微调后的模型进行评估. 其中的评估库主要是evol-teacher和human-eval. 新建一个eval_ins.sh文件, 填入以下内容 LANG"…...

【Android】【Bluetooth Stack】蓝牙音乐协议分析之音频控制与信息加载(超详细)

1. 精讲蓝牙协议栈(Bluetooth Stack):SPP/A2DP/AVRCP/HFP/PBAP/IAP2/HID/MAP/OPP/PAN/GATTC/GATTS/HOGP等协议理论 2. 欢迎大家关注和订阅,【蓝牙协议栈】和【Android Bluetooth Stack】专栏会持续更新中.....敬请期待! 目录 1. 音乐信息加载 1.1 歌曲信息 1.1.1 key_c…...

ChatGPT无法登录,提示我们检测到可疑的登录行为?如何解决?

OnlyFans 订阅教程移步&#xff1a;【保姆级】2024年最新Onlyfans订阅教程 Midjourney 订阅教程移步&#xff1a; 【一看就会】五分钟完成MidJourney订阅 GPT-4.0 升级教程移步&#xff1a;五分钟开通GPT4.0 如果你需要使用Wildcard开通GPT4、Midjourney或是Onlyfans的话&am…...

程序员表白

啥&#xff1f;&#xff01;你说程序员老实&#xff0c;认真工作&#xff0c;根本不会什么表白&#xff01;那你就错了&#xff01;(除了我) 那今天我们就来讲一下这几个代码&#xff01;赶紧复制下来&#xff0c;这些代码肯定有你有用的时候&#xff01; 1.Python爱心代码 im…...

CSS的使用与方法

什么是CSS CSS是层叠样式表。它是一种用于描述网页或者文档外观和样式的标记语言。 层级样式表&#xff1a;就是给HTML标签加样式的。 如果说HTML是个游戏英雄 、那么CSS就是游戏皮肤。 【一】注释语法 /* 注释 */ 【二】CSS的语法结构 选择符 {样式属性: 样式属性值;样…...

(保姆级)离线安装mongoDB集群

Docker搭建MongoDB集群 副本集模式&#xff08;Replica Set&#xff09; 是一种互为主从的关系&#xff0c; Replica Set 将数据复制多份保存&#xff0c;不同服务器保存同一份数据&#xff0c;在出现故障时自动切换&#xff0c;实现故障转移。 此集群拥有一个主节点和多个从…...

面试笔记——MySQL(主从同步原理、分库分表)

主从同步原理 主从同步结构&#xff1a;主库负责写数据&#xff0c;从库负责读数据&#xff0c;如图—— MySQL主从复制的核心就是二进制日志&#xff08;BINLOG&#xff09;&#xff0c;它记录了所有的 DDL&#xff08;数据定义语言&#xff09;语句和 DML&#xff08;数据操…...

面试题2.0

目录 css 动画 深拷贝和浅拷贝 ES6新特性 事件循环 vue-router原理 flex布局 session和local storage分别是用来干嘛的&#xff1f; http状态码 原型链 虚拟dom vuex的五个属性 vue路由跳转的四种方式 vue生命周期 link和import的区别 GET 与 POST 的区别 fle…...

【剑指offer】53. 最小的k个数(java选手)(优先队列+快排+快速选择)

题目链接 题目链接 力扣题目链接 题目描述 输入 n个整数&#xff0c;找出其中最小的 k 个数。 注意&#xff1a; 输出数组内元素请按从小到大顺序排序; 数据范围 1≤k≤n≤1000 样例 输入&#xff1a;[1,2,3,4,5,6,7,8] , k4 输出&#xff1a;[1,2,3,4] 题目分析 排序算法…...

带有GUI界面的电机故障诊断(MSCNN-BILSTM-ATTENTION模型,TensorFlow框架,有中文注释,带有六种结果可视化)

本次创作最主要是在MSCNN-BILSTM-ATTENTION模型&#xff08;可轻松替换为其它模型&#xff09;基础上&#xff0c;搭建GUI测试界面&#xff0c;方便对你想要测试的数据的进行测试&#xff0c;同时进行了全面的结果可视化&#xff1a;1.训练集和测试集的准确率曲线&#xff0c;2…...

【技术栈】Spring Cache 简化 Redis 缓存使用

​ SueWakeup 个人主页&#xff1a;SueWakeup 系列专栏&#xff1a;学习技术栈 个性签名&#xff1a;保留赤子之心也许是种幸运吧 ​ 本文封面由 凯楠&#x1f4f8; 友情提供 目录 本栏传送门 1. Spring Cache 介绍 2. Spring Cache 常用注解 注&#xff1a;手机端浏览本文章…...

解决wrap_socket() got an unexpected keyword argument ‘ciphers‘

看报错本以为是一个简单的传参问题&#xff0c;没想到查到盘丝洞。 # 报错信息 wrap_socket() got an unexpected keyword argument ciphers# 报错代码段 _exception_handler() def connect(self):u"""连接MySQL数据库"""self.config_connect_a…...

【力扣hot100】128.最长连续序列

给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; 输入&#xff1a;nums [100,4,200,1,3,2] 输出&#xff1a;4 解…...

css的text-shadow详解

CSS的text-shadow属性用于为文本添加阴影效果&#xff0c;以增强文本的立体感和印刷品质感。该属性可以接受多个值&#xff0c;每个值通过空格分隔&#xff0c;以定义阴影的各个方面。以下是text-shadow属性的详细介绍&#xff1a; 阴影颜色 (Color): 这是阴影的颜色值。它可以…...

Qt 利用共享内存实现一次只能启动一个程序(单实例运行)

Qt 利用共享内存实现一次只能启动一个程序 文章目录 Qt 利用共享内存实现一次只能启动一个程序摘要利用共享内存实现一次只能启动一个程序示例代码 关键字&#xff1a; Qt、 unique、 单一、 QSharedMemory、 共享内存 摘要 今天接着在公司搞我的屎山代码&#xff0c;按照…...

【生活知识-茶叶】

生活知识-茶叶 茶 茶 茶叶分类代表茶名功效绿茶龙井碧螺春 毛峰清热解毒、降脂减肥、提神醒脑、改善肝功能、减轻肝脏负担乌龙茶铁观音武夷岩茶冻顶乌龙茶清心明目、提神醒脑、促进新陈代谢、维护肝脏健康白茶白毫银针白牡丹贡眉清热降火、抗氧化、保护心血管、提高免疫力黄茶…...

[AIGC] 在Spring Boot中指定请求体格式

在使用Spring Boot开发Web应用的时候&#xff0c;我们经常会遇到需要接收并处理HTTP请求的情况。一个HTTP请求通常包括一个请求行、若干请求头和一个请求体。请求体在POST和PUT请求中特别重要&#xff0c;因为它通常用于向服务器传递数据。 文章目录 创建并使用一个Java Bean指…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...