Web前端笔记+表单练习+五彩导航

一、笔记

表单:数据交互的一种方式

          登录、注册、搜索

<from>

<input type=""> ---

<input type="text"> --- 普通输入框,内容在一行显示

<input type="password"> --- 密码框

<input type="radio">男 --- 单选框

eg:性别

<input type="radio">男 等等

name属性,表明是一组单选

eg:<input type="radio"name="sex">男<input type="radio"name="sex">女

默认选中 --- checked

Eg:默认选中女type="radio"name="sex">男<input type="radio"name="sex"checked>女

<br /> --- 换行

<input

type="checkbox"> --- 多选框

Eg:喜欢的水果

<input type="checkbox" name="hobby">榴莲<input type="checkbox"name="hobby">香蕉<input type="checkbox"name="hobby">火龙果name="hobby">莲雾

点字会勾选 --- 放大光标作用率

Eg1:<label>type="radio"name="sex">男</lebel>

Eg2:

<input type="checkbox"name="hobby"> <label for="huolongguo">火龙果</label>

eg:最喜欢的人

<input type="checkbox">卢洋洋

<input type="file"> --- 上传文件,一次传多个 --- multiple

昵称:<input type="text"

placeholder="请输入4-6位汉字"readonly> --- 输入时消失,删除玩输入的字符后出现

Readonly -- 只读

<input type="submit" value=""> --- 按钮

不写value显示为提交

有则写啥有啥

每写一个input记得把name带上,才能看到其状态

将此项设置为必填项 --- require

<button>点击</button> --- h5的上传

<input type="button" value="普通按钮"> --- 不会上传数据

<input type="email"> --- 不写@不给上传数据

<input type="color"> --- 选颜色

<input type="time"> ---

下拉框 --- <select name="city">

<option> value="上海"</option>

<option> value="广州" selected>广州</option>

<option> value="北京"</option>

</select>

<button>提交</button>

 selected --- 默认

<textarea name="留言" cols="300" row="10" maxlengrh="200" placeholder="请留下你的留言"</textarea>

get/post 区别

1.get相对于post较为安全

2.http协议上规定不同

框架标签:嵌入广告

<iframe src="https://www.taobao,com" frameborder="1"></iframe>

<a href="">点击进入</a>

CSS 层叠样式表

       1

<style>

/*选择器{

属性名:属性值;

属性名:属性值;

}*/

div {

width: 300px;

height: 300px;

background-color:green;

}

</style>

<!--外链----推荐 -->

行内

内嵌

1.基本选择器:

标签选择器

类选择器

id选择器

通配符选择器(优先级最低)

2.

子代选择器

后代选择器

逗号选择器

.类名{}

标签{}

#id名{}

*

Ul>li{}

Ul li{}

选择器1,

选择器2

直到选择器你{

}

3.属性选择器

应用软件:c/s架构(客户端服务器)b/s(浏览器服务器)

web前端:html5  css3  javascript

html5:超(超链接)文本 标记语言

网页中包括:文字,图片,视频,音乐,超链接

标签:

双标签语法规范:<标签名> <标签名> 内容 </标签名></标签名>   (可相互嵌套)

单标签:<input type ="text"> (不用尾标签)

属性:定制标签行为,每一个标签存在自身的属性,互不相通

格式:<标签名 属性名="属性值">  <marquee loop="1">

当属性名=属性值时可以只写属性值(disabled =="disabled" == disabled ="")

全局属性:

常用标签:

标题标签:<h1>  </h1>  —— <h6> </h6> 逐级减少,单独换行

换行标签:文本后 <br / >

水平线标签 :文本后<hr / >

段落标签:<p> </p>

文本格式化:

加粗标签:<strong> </strong> <b> </b>

倾斜标签:<em> </em> <i> </i>

下划线标签:<u> </u> <ins> </ins>

上标签:<sup> </sup>

下标签:<sub> </sub>

删除线标签:<del> </del> <s> </s>

原样输出:<pre> </pre>

行内标签:只会占用自身内容的位置,不会独占一行  <span></span>

块标签:独占一行  <div></div> <h1></h1>

图像标签:<img src="../(返回文件上一级) "  图片路径:绝对路径,相对路径,网络路径

width="200px"

height="400px"

border="10px"(边框)

title=""(注释)

align="top/center/left/right/bottom"(对齐方式)

vspace="200px"(垂直间隔距离)

>

视频标签:<video src=""

controls(播放键)

loop(循环播放)

autoplay muted(自动播放+静音)

 >  </video>

音频标签:<audio src=""

controls(播放键)

loop(循环播放)

autoplay muted(自动播放+静音)

 >  </audio>

超链接标签:<a href=" " 

targrt="_blank"

> 点击进入新的页面 </a>

锚链接标签:<a href="# "> <

表格标签:

<table width="400px"  border="2" (边框)cellspacing="0"(间距)>

<caption>2024年下学期课表</caption>

<tr align="center" bgcolor="">(第一行)

<td rowspan="2">(跨行)语文</td>

<td>数学</td>

<td>英语</td>

</tr>

<ty align="center">(第二行)

<td>数学</td>

<td>英语</td>

</tr>

<ty align="center">(第三行)

<td>语文</td>

<td>数学</td>

<td>英语</td>

</tr>

</table>

特殊字符:

   有序列表:

你喜欢吃什么

<ol type="">

<li>苹果</li>

<li>香蕉</li>

<li>雪梨</li>

</ol>

   无序列表:

你喜欢吃什么

<ul type="">

<li>苹果</li>

<li>香蕉</li>

<li>雪梨</li>

</ul>

   自定义列表:

<dl>

<dt>你喜欢吃什么</dt>

<dd>苹果</dd>

<dd>香蕉</dd>

<dd>雪梨</dd>

</dl>

4.伪类选择器

描述某一个标签的状态

访问前

:link{

}

访问后

:visited{

}

鼠标悬停时

:hover{

}

鼠标点击时

:active{

}

需按顺序写

<style>

ul li:nth-child(6) {

Background-color:pink;

}

Li:last-child{

Background-color:aqua;

}

5.伪元素选择器

字体倾斜 --- font-style

行高 --- line-height

文本装饰

层叠性:相同的选择器,设置相同的属性,遵循就近原则,哪一个样式距离结构近就用哪个

继承性子标签会继承父标签的某些属性(字体颜色、字号)

优先性

二、表单练习

三、五彩导航

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

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

相关文章

内存卡损坏怎么修复数据,内存卡损坏修复数据方法

内存卡损坏是许多用户都可能面临的问题。当我们的内存卡损坏时,其中存储的重要数据可能会受到威胁,承载着我们无尽回忆的数据,一旦失去,将成为大家心中永远的遗憾。因此我们迫切需要找到一种方法来修复这些数据。本文将介绍一些内存卡损坏修复数据方法,帮助大家解决因为内…

【计算机视觉】Gaussian Splatting源码解读补充(一)

本文旨在补充gwpscut创作的博文学习笔记之——3D Gaussian Splatting源码解读。 Gaussian Splatting Github地址&#xff1a;https://github.com/graphdeco-inria/gaussian-splatting 论文地址&#xff1a;https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/3d_gauss…

物联网数据报表分析

随着物联网技术的迅猛发展&#xff0c;越来越多的企业开始将物联网解决方案应用于各个领域&#xff0c;从提高生产效率到优化用户体验&#xff0c;物联网都发挥着至关重要的作用。然而&#xff0c;如何有效地分析和管理物联网产生的海量数据&#xff0c;成为企业面临的挑战之一…

Linux centos7安装nginx-1.24.0并且实现自启动

1.安装之前的操作 ps -ef|grep nginx 查看是否有运行 如果有就杀掉 kill -9 pid find / -name nginx 查看nginx文件 rm -rf file /usr/local/nginx* 通通删掉删掉 yum remove nginx 限载一下服务 1.2.下载安装包 地址 nginx: download 2.减压文件 tar…

学习笔记Day14:Linux下软件安装

软件安装 Anaconda 所有语言的包(package)、依赖(dependency)和环境(environment)管理器&#xff0c;类似应用商店 Conda < Miniconda < Anaconda&#xff08;有交互界面&#xff09; Linux下Miniconda即可 安装Miniconda 搜索北外/清华miniconda镜像网站&#xff…

【09】进阶JavaScript事件循环Promise

一、事件循环 浏览器的进程模型 何为进程? 程序运行需要有它自己专属的内存空间,可以把这块内存空间简单的理解为进程 每个应用至少有一个进程,进程之间相互独立,即使要通信,也需要双方同意。 何为线程? 有了进程后,就可以运行程序的代码了。 运行代码的「人」称之…

Linux信号处理

Linux信号处理 什么是linux信号 本质是一种通知机制&#xff0c;用户 or 操作系统通过发送一定的信号&#xff0c;通知进程&#xff0c;某些事情已经发生&#xff0c;你可以在后续进行处理。 信号产生是随机的&#xff0c;进程可能正在忙自己的事情&#xff0c;所以&#xf…

目标检测——PP-YOLOE-R算法解读

PP-YOLO系列&#xff0c;均是基于百度自研PaddlePaddle深度学习框架发布的算法&#xff0c;2020年基于YOLOv3改进发布PP-YOLO&#xff0c;2021年发布PP-YOLOv2和移动端检测算法PP-PicoDet&#xff0c;2022年发布PP-YOLOE和PP-YOLOE-R。由于均是一个系列&#xff0c;所以放一起解…

二、阅读器的开发(初始)-- 2、阅读器开发

1、epubjs核心工作原理 1.1 epubjs的核心工作原理解析 epub电子书&#xff0c;会通过epubjs去实例化一个Book对象&#xff0c;Book对象会对电子书进行解析。Book对象可以通过renderTo方法去生成一个Rendition对象&#xff0c;Rendition主要负责电子书的渲染&#xff0c;通过R…

java网络原理(三)----三次握手四次挥手

三次握手 三次握手是建立连接的过程&#xff0c;四次挥手是断开连接的过程&#xff0c;三次握手发生在socket.accept()之前。 客户端和服务器尝试建立连接的时候服务器就会和客户端进行一系列的数据交换称为握手&#xff0c;这个过程建立完了后&#xff0c;连接就好了。 A和B…

python的BBS论坛系统flask-django-nodejs-php

为了更好地发挥本系统的技术优势&#xff0c;根据BBS论坛系统的需求&#xff0c;本文尝试以B/S架构设计模式中的django/flask框架&#xff0c;python语言为基础&#xff0c;通过必要的编码处理、BBS论坛系统整体框架、功能服务多样化和有效性的高级经验和技术实现方法&#xff…

数据挖掘与分析学习笔记

一、Numpy NumPy&#xff08;Numerical Python&#xff09;是一种开源的Python库&#xff0c;专注于数值计算和处理多维数组。它是Python数据科学和机器学习生态系统的基础工具包之一&#xff0c;因为它高效地实现了向量化计算&#xff0c;并提供了对大型多维数组和矩阵的支持…

2024年企业级通用人工智能的关键技术趋势

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

爬虫(七)

1.批量爬取知网数据 lxml:是 Python 的一个功能强大且易用的 XML 和 HTML 处理库。它提供了简单又轻巧的 API,使得解析、构建和操作 XML 和 HTML 文档变得非常方便。lxml 库通常用于处理 XML 和 HTML 文档,例如解析网页、处理配置文件等。openpyxl:是 Python 中用于操作 Ex…

二、Kubernetes(k8s)中部署项目wordpress(php博客项目,数据库mysql)

前期准备 1、关机顺序 2、开机顺序 (1)、k8s-ha1、k8s-ha2 (2)、master01、master02、master03 (3)、node01、node02 一、集群服务对外提供访问&#xff0c;需要通过Ingress代理发布域名 mast01上传 ingress-nginx.yaml node01、node02 上传 ingress-nginx.tar 、kube-webh…

五、C#归并排序算法

简介 归并排序是一种常见的排序算法&#xff0c;它采用分治法的思想&#xff0c;在排序过程中不断将待排序序列分割成更小的子序列&#xff0c;直到每个子序列中只剩下一个元素&#xff0c;然后将这些子序列两两合并排序&#xff0c;最终得到一个有序的序列。 归并排序实现原…

Android Studio实现内容丰富的安卓校园二手交易平台(带聊天功能)

获取源码请点击文章末尾QQ名片联系&#xff0c;源码不免费&#xff0c;尊重创作&#xff0c;尊重劳动 项目编号083 1.开发环境android stuido jdk1.8 eclipse mysql tomcat 2.功能介绍 安卓端&#xff1a; 1.注册登录 2.查看二手商品列表 3.发布二手商品 4.商品详情 5.聊天功能…

【超全详解】Maven工程配置与常见问题解决指南

Maven工程 目录 Maven工程一、如何检查Maven工程是否配置正确&#xff1f;1、检查路径2、检查基本配置3、其他配置 二、Maven的基本操作基本操作install和package的区别 三、获取别人的Maven工程之后如何修改&#xff1f;四、如何正确写好配置文件&#xff1f;1.寻找配置资源2.…

第六十一回 放冷箭燕青救主 劫法场石秀跳楼-编译安装飞桨paddlepaddle@openKylin+RISCV

卢俊义在水里被张顺抓住&#xff0c;用轿子抬到了梁山。宋江等人下马跪在地上迎接&#xff0c;请他坐第一把交椅。卢俊义宁死不从&#xff0c;大家只好说留他在山寨几天&#xff0c;先让李固带着马车货物回去。吴用对李固说&#xff0c;你的主人已经答应坐第二把交椅了&#xf…

基于python+vue分类信息服务平台移动端的设计与实现flask-django-php-nodejs

分类信息服务平台是在Android操作系统下的应用平台。为防止出现兼容性及稳定性问题&#xff0c;框架选择的是django&#xff0c;Android与后台服务端之间的数据存储主要通过MySQL。用户在使用应用时产生的数据通过 python等语言传递给数据库。通过此方式促进分类信息服务平台信…