web前端笔记+表单练习题+五彩导航栏练习题

 web前端笔记

1-骨架快捷方式!+enter<!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>2-注释<!-- 这是加粗的字体 v反馈v反馈vv能否均经费 -->3-标题标签<!-- 标题标签  h1-h6  ：逐级减小 独占一行 -->4-换行及水平线<!-- br:换行  hr：水平线 -->5-段落<!--p-->6-文本格式化strong,b---加粗字体em,i---字体打斜sub---顶格 sup--底格u,ins---下划线s,del---划线pre---原样输出span,div---无语义img src=""---路径<!-- ​    路径：​    1、绝对路径  ​    在自己电脑上，从盘符开始的资源的路径​    2、相对路径​    相对于当前文件来说的路径  ../：表示上一级  ./:表示当前级​    3、网络路径-->img src=""video src=----视频controls---控制 loop-循环 autoplay---自动播放要搭配( muted--静音)audio src=-----音频a href=----超链接 target="_blank 点击进入新的页面a href="#one"----锚链接 <h1 id="one">人物事迹</h1>  <!-- id：一个网页里面，标签id的值不能重复 -->

 

 

 

# 表单form action="" method="post" enctype="multipart/form-data"​    <!-- get、post区别​    1、get相对于post较为安全​    2、http协议上规定不同​    3、数据量​    -->​    <!--普通的输入框,内容在一行显示 placeholder提示字  readonly:只读-->昵称:<input type="text"(文本) placeholder="请输入四到六位汉字"(未输入前显示)>required---必填项 maxlength---最大输入量<!--密码框-->密码:<input type="password" required><!--单选框-->​    <!--name属性:表明是一组单选 checked默认选中-->​    性别:<label><input type="radio" name="sex">男</label>​    <label><input type="radio" name="sex" checked>女</label><!--多选框-->​    你喜欢的食物​    <input type="checkbox" name="hobby">榴莲​    <input type="checkbox" name="hobby" id="pinguo"><label for ="pingguo">苹果</label>​    <input type="checkbox" name="hobby">香蕉​    <!--上传文件-->​    上传文件<input type="file" multiple>​    <!-- 按钮 -->​    <!-- <input type="submit" value="点击"> -->​    <-button>点击</button>-##### 下拉框​    <!-- <input type="button" value="普通按钮"> -->​    <select name="city" multiple>​      <option value="上海">上海</option>​      <option value="北京">北京</option>​      <option value="广州" selected>广州</option></select>##### 文本域<textarea name="liuyan" cols="300" rows="10" maxlength="200" placeholder="请写下你的留言"></textarea>##### 框架标签<!-- <iframe src="../代码/01-表单.html" frameborder="1"></iframe> -->
clch1-h6phr\br\video	audio	<a href=""></a><img src="">id classol>li ul>li	dl>dt--dddiv	span	表单:数据交互的一种方式​	登录,注册,搜索​	<form><input##### 1-属性选择器<style>/*  */input[type="password"] {background-color: aqua;}/* 具有某个属性的指定标签 */div[title] {background-color: pink;}/* 属性的值中包含某个值 */input[type*="e"] {background-color: blueviolet;}/* 属性值以什么开头 */input[type^="p"] {background-color: brown;}/* 属性值以什么结尾 */input[type$="t"] {background-color: red;}/* +表示的是下一个标签 */.box1+p {background-color: blue;}</style>##### 伪类选择器<style>/* 访问前 */a:link {color: red;}/* 访问后 */a:visited {color: chartreuse;}/* 鼠标悬停时 */a:hover {color: pink;}/* 鼠标点击时 */a:active {color: darkblue;}/* 需要按照lvha的顺序书写 */</style>##### 其他伪类<style>ul li:nth-child(8) {background-color: pink;}li:nth-child(2n+1) {background-color: blue;}li:last-child {background-color: aqua;}ul li:first-child {background-color: aquamarine;}li:nth-of-type(3) {background-color: aqua;}</style>##### 伪元素选择器<style>ul li::before {content: "66666";width: 10px;height: 10px;background-color: pink;}ul li::after {content: "----------------zhangsan";}/* 文字被选中时 */ul li::selection {background-color: pink;}</style>##### font<style>div {width: 300px;height: 300px;background-color: pink;font-size: 12px;/*  */font-weight: 700;text-align: center;font-style: italic;/* 字体族 */font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;/* 让行高等于容器的高度，来实现单行文本的垂直居中  */line-height: 300px;}h1 {/* 默认400是正常粗细，700是加粗字体   bold*//* font-weight: 400;    normal*/font-weight: bold;}   p {/* line-height: 40px; *//* font：style weight size/line-height family； */font: italic 700 30px/40px "微雅软黑";}</style>##### 文本缩进<style>p {font-size: 30px;text-indent: 2em;}</style>##### 文本装饰<style>a {/* 主要用于去除a链接的默认样式 */text-decoration: none;}p {/* text-decoration: ; */text-decoration: solid underline purple 4px;text-decoration: underline;}</style>##### 文本颜色<style>h1 {background-color: aqua;/* 关键字 */color: rgb(131, 13, 33);/* rgb函数（红、绿、蓝）三原色 *//* rgba函数（红、绿、蓝、透明度） */color: rgba(131, 13, 33, 0.3);/* 十六进制表示 */}</style>##### css三大特性<style>.one {color: pink;font-size: 30px;}p {color: green;}.father {font-size: 30px;color: pink;}</style><!-- 层叠性：相同的选择器，设置相同的属性，遵循就近原则。那个样式距离结构近，就是用哪个样式继承性:子标签会继承父标签的某些属性（字体颜色、字号）--><class="one".............>
<class="father">
<class="son"..........>##### 优先级<style>/* *          0,0,0,0 标签       0，0,0,1         0,0,0,2     0,0,0,1（伪）类选择器 0,0,1,0id选择器       0,1,0,0行内          1,0,0,0!important    无穷大*//* * {color: pink;} */div {color: aquamarine !important;}.one {color: blueviolet;}#two {color: brown;}ul li {background-color: blue;}li {background-color: pink;}/* 权重的四位数字不会进行进位，登记大小的判断，从左向右，一次进行比较继承的权重：为0*/a {display: inline-block;}</style>

表单练习题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action=""><center><h1>用户注册</h1><br>用户名:<input type="text" name="username" placeholder="张三" required maxlength="10"><br><input type="text" disabled  placeholder="zhangsan" ><br>密码:<input type="password" required><br>性别:<label><input type="radio" name="sex" value="nan">男</label><label><input type="radio" name="sex" value="nv">女</label><br>爱好<input type="checkbox" name ="hoppy" id="chang"><label for="chang">唱</label><input type="checkbox" name ="hoppy" >rap<input type="checkbox" name ="hoppy" >篮球<br>邮箱:<input type="email"><br>用户头像:<input type="file"><br>建议和意见:<input type="text"><br>喜欢的颜色:<input type="color"><br>注册时间:<input type="datetime-local" multiple><button>注册</button><input type="reset" value="重置"></center></form>
</body>
</html>

五彩导航栏练习题

<!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>.nav a{display: inline-block;width: 120px;height: 60px;background-color: pink;text-align: center;color: #ffffff;line-height: 48px;text-decoration: none;}.nav .wucai1{background-color: aqua;}.nav .wucai1:hover{background-color: brown;}.nav .wucai2{background-color: rgb(61, 28, 71);}.nav .wucai2:hover{background-color: rgba(42, 165, 63, 0.185);}.nav .wucai3{background-color: rgb(255, 0, 102);}.nav .wucai3:hover{background-color: rgba(106, 165, 42, 0);}.nav .wucai4{background-color: rgba(38, 0, 255, 0.324);}.nav .wucai4:hover{background-color: rgb(59, 59, 56);}</style>
</head>
<body><div class="nav"><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/282285.html

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

相关文章

基于单片机的指纹打卡机设计

基于单片机的指纹打卡机设计

摘要 在科学技术飞速发展的今天&#xff0c;社会对身份识别的要求越来越高&#xff0c;尤其是在企业管理的人员签到、工作考勤等活动中对身份识别的高效性和可靠性的需求更为迫切。而传统的个人身份识别手段&#xff0c;如钥匙、密码、IC卡等&#xff0c;由于具有可盗用、可伪…
阅读更多...
vue3 reactive丢失响应式

vue3 reactive丢失响应式

问题 使用 reactive 构造响应式对象时&#xff0c;当对其进行重新赋值后&#xff0c;会导致原有变量失去响应式&#xff0c;页面不会发生联动更新 例如&#xff1a; 1、使用 reactive 定义一个响应式的对象变量 let data1 reactive({name: 小李,date: 2024-03-18,address: xx…
阅读更多...
Spring炼气之路（炼气二层）

Spring炼气之路（炼气二层）

目录 一、bean的配置 1.1 bean的基础配置 1.2 bean的别名配置 1.3 bean的作用范围配置 二、bean的实例化 2.1 bean是如何创建创建的&#xff1f; 2.2 使用静态工厂实例化bean 2.3 使用实例工厂实例化bean 三、bean的生命周期 3.1 什么是bean的生命周期 3.2 bean的生…
阅读更多...
工控机在机器人领域的应用丨工业一体机的应用

工控机在机器人领域的应用丨工业一体机的应用

随着机器人技术的不断发展&#xff0c;机器人在制造、物流等领域得到了广泛应用。而工业控制计算机&#xff08;工控机&#xff09;作为机器人控制系统的核心设备&#xff0c;也在机器人领域发挥着越来越重要的作用。 机器人控制系统是机器人的核心部分&#xff0c;控制系统的…
阅读更多...
C++的内存管理

C++的内存管理

目录 1. C/C内存分布 2. C语言中动态内存管理方式 3. C内存管理方式 3.1 new/delete操作内置类型 4. operator new与operator delete函数 4.1 连续开辟空间(尽力了解) 5. new和delete的实现原理 5.1 内置类型 5.2 自定义类型 6. 深入理解 6.1malloc/free和new/delete的区…
阅读更多...
SAP CAP篇十五：写个ERP的会计系统吧，Part II

SAP CAP篇十五：写个ERP的会计系统吧，Part II

本文目录 本系列文章目标开发步骤数据库表设计初始数据初始数据&#xff1a;AccountCategories初始数据&#xff1a;AccountUsages初始数据&#xff1a;ChartOfAccounts初始数据&#xff1a;AccountSubjects Service 定义生成Fiori AppApp运行 本系列文章 SAP CAP篇一: 快速创…
阅读更多...
适用于智能语音小家电的语音ic类型有哪些？

适用于智能语音小家电的语音ic类型有哪些？

适用于智能语音小家电的语音ic类型有哪些&#xff1f; 1. 语音播放芯片&#xff1a;这种芯片主要用于实现语音提示和报警功能。例如&#xff0c;当按下某个按钮时&#xff0c;它可以发出语音提醒&#xff0c;或者在出现故障时发出报警声音。这种芯片的应用非常广泛&#xff0…
阅读更多...
操作系统笔记之进程调用API中的getpid、fork、wait、exec补充

操作系统笔记之进程调用API中的getpid、fork、wait、exec补充

操作系统笔记之进程调用API中的getpid、fork、wait、exec补充 code review! —— 杭州 2024-03-17 夜 文章目录 操作系统笔记之进程调用API中的getpid、fork、wait、exec补充1.getpid()2.fork()3.wait()4.exec()5.通常&#xff0c;exec() 调用与 fork() 调用一起使用&#xff…
阅读更多...
002_avoid_for_loop_in_Matlab避免使用for循环

002_avoid_for_loop_in_Matlab避免使用for循环

避免使用for循环 在程序设计思想中&#xff0c;循环是一个很有力的工具。在循环中&#xff0c;计算机很轻松地重复执行相同的操作。循环是汇编之上的编程中最重要的概念之一。Matlab的循环有两个语言构造&#xff0c;一个是for循环&#xff0c;另一个是while循环。在Matlab中&…
阅读更多...
JetBrains全家桶激活，分享 GoLand 2024 激活的方案

JetBrains全家桶激活，分享 GoLand 2024 激活的方案

大家好&#xff0c;欢迎来到金榜探云手&#xff01; GoLand 公司简介 JetBrains 是一家专注于开发工具的软件公司&#xff0c;总部位于捷克。他们以提供强大的集成开发环境&#xff08;IDE&#xff09;而闻名&#xff0c;如 IntelliJ IDEA、PyCharm、和 GoLand等。这些工具被…
阅读更多...
总结mac下解决matplotlib中文显示问题的几种方法

总结mac下解决matplotlib中文显示问题的几种方法

一、前言&#xff1a; 使⽤matplotlib画图时&#xff0c;由于matplotlib默认没有中⽂&#xff0c;显⽰中文时会出现空⽩⼩⽅块。 二、方法&#xff1a; 2.1 matplotlib中使用SimHei字体 1&#xff09;进入终端后查看matplotlib的字体路径&#xff1a; $ python >>&g…
阅读更多...
Linux学习-进程

Linux学习-进程

目录 进程基本概念 进程相关命令 进程的创建 进程的调度 进程相关函数接口 进程的消亡 实例&#xff1a;创建九个子进程 目录 进程基本概念 进程相关命令 进程的创建 进程的调度 进程相关函数接口 进程的消亡 实例&#xff1a;创建九个子进程 exec函数…
阅读更多...
Python脚本：用py处理PDF的五大功能

Python脚本：用py处理PDF的五大功能

一、代码 【第三方库】3个 【Py版本】3.9 【使用前提】关闭所有的word文档 import os from datetime import datetime from docx2pdf import convert from pdf2docx import parse from PyPDF2 import PdfMerger from PyPDF2 import PdfReader,PdfWriter#将文件夹中的所有Wo…
阅读更多...
C++语言学习（二）—— C++语言的基本知识

C++语言学习（二）—— C++语言的基本知识

目录 一、面向对象的三个核心概念 二、C语言中的I/O口 三、C语言中的数据类型​​​​​​​ 3.1 逻辑类型 3.2 引用类型 3.2.1 引用作为函数参数 3.2.2 引用作为函数返回值 3.2.3 引用作为类成员 3.3 类类型 四、 C语言中的内联函数 五、 函数重载 六、 带默认形参…
阅读更多...
四、分布式锁之自定义分布式锁

四、分布式锁之自定义分布式锁

1、基本原理和实现方式对比 分布式锁&#xff1a;满足分布式系统或集群模式下多个进程可见并且互斥的锁。分布式锁的核心思想就是多线程都使用同一把锁&#xff0c;实现程序串行执行。 分布式锁需要具备的条件&#xff1a; 特性含义可见性多个线程都能感知到变化互斥性分布…
阅读更多...
数据库系统概论-第16章 数据仓库与联机分析处理技术

数据库系统概论-第16章 数据仓库与联机分析处理技术

概念性的介绍&#xff0c;一略而过&#xff0c;不重要。 16.1 数据仓库技术 16.2 联机分析处理技术 16.3 数据挖掘技术 16.4 大数据时代的新型数据仓库 16.5 小结
阅读更多...
G - Find a way

G - Find a way

题目分析 1.双重bfs,遍历两个起点求最短路再计算总和即可 2.唯一的坑点在于对于一个KFC&#xff0c;两人中可能有一个到不了&#xff0c;所以还要对到不了的点距离做处理 #include <bits/stdc.h> using namespace std; using ll long long; const int N 220;struct pos…
阅读更多...
Linux/Ubuntu/Debian从控制台启动程序隐藏终端窗口

Linux/Ubuntu/Debian从控制台启动程序隐藏终端窗口

如果你想从终端运行应用程序但隐藏终端窗口. 你可以这样做&#xff1a; 在后台运行&#xff1a; 你只需在命令末尾添加一个与号 (&) 即可在后台运行它。 例如&#xff1a; your_command &将 your_command 替换为你要运行的命令。 这将在后台启动该命令&#xff0c…
阅读更多...
Three.js基础入门介绍——【毕业季】Three.js动态相册

Three.js基础入门介绍——【毕业季】Three.js动态相册

前言 岁月匆匆&#xff0c;又是一年毕业季&#xff0c;这次做个动态相册展示图片&#xff0c;放些有意思的内容&#xff0c;一起回忆下校园生活吧。 预期效果 相册展示和点选切换&#xff0c;利用相机旋转和移动来实现一个点击切图平滑过渡的效果。 实现流程 基本流程 1、搭…
阅读更多...
【python】python汽车效能数据集—回归建模（源码+数据集）【独一无二】

【python】python汽车效能数据集—回归建模（源码+数据集）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023