html5前端学习2

news2024/12/26 11:49:08

一篇思维题题解:

第五周任务 [Cloned] - Virtual Judge (vjudge.net)

http://t.csdn.cn/SIHdM

快捷键:

Ctrl+Alt+Down        向下选取

Ctrl+Alt+Up             向上选取(会出现多个光标,可以同时输入)

Ctrl+Enter                无论光标在哪个位置,都向下换行,与Enter有区别

 

超链接标签

链接分类

外部链接:例如 <a href="http://www.baidu.com">百度</a>

内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可,例如< a href="index.html"> 首页</a>

空链接:如果当时没有确定链接目标时,<a href="#"> 首页</a>

下载链接:如果href里面的地址是一个文件或者压缩包,会下载这个文件

网页元素链接:在当前文件中的各种网页元素,如文本,图表,表格,音频,视频等都可以添加超链接。

锚点链接:点击链接,可以快速定位到页面中的摸个位置。

  • 在链接文本的属性中,设置属性值为 #名字 的形式,如<a href="#two">第二集</a>
  • 找到目标位置的标签,在里面添加一个id属性=名字,如<h3 id="two">第二集介绍</h3>

注释标签和特殊字符

注释

如果需要在HTML文档中添加一些便于阅读和理解的注释文字,需要用到注释标签:

<!--
     注释内容
-->

快捷键:Ctrl+/

特殊字符 

在HTML中,通常多个空格通常会被合并成一个空格,还有其他特殊字符,特殊字符的使用会使得前端代码更加灵活、简洁,提高了开发效率。

caf526af390c4c6cbd31a84e881b676f.png

表单

<input>表单元素

button                定义可点击按钮

checkbox           定义复选框

file                     定义输入自读和“浏览”按钮,供文件上传

hidden               定义隐藏的字段

image                定义图像形式的提交按钮

password          定义密码字段

radio                  定义单选按钮

reset                  定义重置按钮,重置按钮会清除表单中的所有数据

submit               定义提交按钮,提交按钮会把表单数据发送到服务端

text                    定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符

<form>
        <!-- text 文本框 用户可以在里面输入任何文字 -->
        用户名:
        <input type="text" maxlength="6" value="用户名" name="name">
        <br>

        <!-- password 密码框 用户看不见输入的密码 -->
        密码:
        <input type="password" name="pwd">
        <br>

        <!-- radio 单选按钮 可以实现多选 -->
        <!-- name是表单的名字,这里性别多选按钮必须有相同的名字name,才可以实现多选一 -->
        <!-- 单选按钮和复选框可以设置checked属性,当页面打开的时候可以默认选中这个按钮 -->
        性别:
        女<input type="radio" name="name" value="女" checked="checked">
        男<input type ="radio" name="name" value="男">
        <br>

        <!-- checkbox 单选按钮 可以实现多选 -->
        爱好:
        吃饭<input type ="checkbox" name="hobby">
        睡觉 <input type ="checkbox" name=""hobby>
        打豆豆<input type ="checkbox" name="hobby">
        <br>

        <!-- 点击提交按钮,可以把表单域form里面的元素 里面的值 提交给后台 -->
        <input type="submit" value="免费注册">

        <!-- 重置按钮可以还原表单元素的初识默认状态 -->
        <input type="reset" value="重新填写">

        <!-- 普通按钮 button 后期结合js 搭配使用 不会提交信息-->
        <input type="button" value="获取短信验证码">

        <!-- 文件域 上传文件时使用 -->
        上传头像:<input type="file">

        
    </form>

label标签

为input元素定义标签。

<label>标签用于绑定一个表单元素,当点击<label>标签内的文本是,浏览器就会自动将光标转到对应的表单元素上,用来增加用户体验。

    <label for="nan">男</label>

    <input type="radio" name="sex" id="nan">

    <label for="nv">女</label>

    <input type="radio" name="sex" id="nv">

select下拉表单

在页面中,如果用多个选项让用户选择,并且想节约页面空间时,可以使用<select>标签控制

    <select>
        <option>山东</option>
        <option>北京</option>
        <option selected="selected">天津</option>
    </select>

<select>中至少要包含一对<option>

在<option>中定义selected="selected"使,当前项即为默认选中项。

textarea表单元素

当用户输入内容较多的情况下,不能使用文本框表单了,此时可以使用<textaera>标签。

常用于多行文本输入控件,可以输入更多的文字,该控件常用于留言板,评论。

    <from>
        今日反馈:
        <textarea>hello,world!</textarea>
    </from>

属性:clos=“每行中的字符数”,rows=“显示的行数”。(在实际开发中不会使用,是通过CSS来改变大小)

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux 内核资源配置--cgroups详解以及在docker中的应用

一、Cgroup 概述 1.1、cgroups 是什么 Linux cgroup &#xff08;Control Groups&#xff09;是 Linux 内核提供的一种机制&#xff0c;用于限制进程组使用的资源&#xff08;如 CPU、内存、磁盘 I/O 等&#xff09;。通过将进程组划分为层次结构&#xff0c;并将资源限制应用…

【操作系统】2、进程与线程

【重要考点】 1. 进程与线程 进程与线程的基本概念 进程与线程的状态 转换 ——五态图&#xff0c;七态图 线程的实现&#xff1a; 内核级 用户级 进程与线程的组织和控制 进程间通信IPC&#xff1a; 共享内存、消息传递、管道 2.CPU调度与上下文切换 调度的基本概念 调度的实…

39.SpringCloud—配置管理nacos、远程调用Feign、服务网关Gateway

目录 一、SpringCloud。 &#xff08;1&#xff09;Nacos配置管理。 &#xff08;1.1&#xff09;统一配置管理。 &#xff08;1.2&#xff09;配置热更新&#xff08;自动更新&#xff0c;不需要重启服务&#xff09;。 &#xff08;1.3&#xff09;多环境配置共享。 &a…

【C++篇】初识C++

友情链接&#xff1a;C/C系列系统学习目录 知识点内容正确性以C Primer&#xff08;中文版第五版&#xff09;、C Primer Plus&#xff08;中文版第六版&#xff09;为标准&#xff0c;同时参考其它各类书籍、优质文章等&#xff0c;总结归纳出个人认为较有逻辑的整体框架&…

E. Tracking Segments - 二分+前缀和

分析&#xff1a; 记录所有区间和给定的每一次的询问&#xff0c;二分询问的最小满足条件&#xff0c;可以通过前缀和来计算区间内有几个1。 代码&#xff1a; #include <bits/stdc.h>#define x first #define y secondusing namespace std;typedef long long ll; type…

​面试官疯了:while(true)和for(;;)哪个性能好?

△Hollis, 一个对Coding有着独特追求的人△ 这是Hollis的第 427 篇原创分享 作者 l Hollis 来源 l Hollis&#xff08;ID&#xff1a;hollischuang&#xff09; while(true)和for(;;)都是做无限循环的代码&#xff0c;他俩有啥区别呢&#xff1f; 我承认这个问题有点无聊&#…

四、Docker镜像

学习参考&#xff1a;尚硅谷Docker实战教程、Docker官网、其他优秀博客(参考过的在文章最后列出) 目录 前言一、Docker镜像1.1 概念1.2 UnionFS&#xff08;联合文件系统&#xff09;1.3 Docker镜像加载原理1.4 重点理解 二、docker commit 命令2.1 是什么&#xff1f;2.2 命令…

走进人工智能|机器学习 解码未来的科技革命

前言: 机器学习的发展为我们提供了更智能、高效和便捷的科技产品和服务&#xff0c;可以改善我们的生活和工作方式。 文章目录 序言背景解码未来的科技革命技术支持应用领域程序员如何学总结 序言 机器学习是一种人工智能领域的技术&#xff0c;它让计算机通过数据自动地学习和…

folium离线地图使用

几点说明&#xff1a; 1. 代码亲测有效&#xff08;效果见文末图&#xff09; 2. 离线使用&#xff0c;需要预先下载png格式的离线地图&#xff0c;这里以OpenStreetMap为例。 3. 离线地图下载工具&#xff1a;Offline Map Maker https://www.allmapsoft.com/omm/ 4. foliu…

赋予女性力量:在 Web3 和元宇宙中释放新的机会

Web3 和元宇宙的出现引发了数字领域的革命&#xff0c;为全世界的用户带来了更多可能性。这一转变的其中一个重要方面是赋予女性权力&#xff0c;因为她们更踊跃参与元宇宙活动&#xff0c;并利用 Web3平台挑战传统边界。 The Sandbox 非常自豪能够开放、具包容性地为 womenint…

Swing如何使用?几个操作示例教会你!

以下是四个使用 Swing 组件创建的示例代码&#xff1a; 示例一&#xff1a;JFrame JFrame 是一个顶级容器&#xff0c;用于创建框架窗口。下面是一个简单的 JFrame 示例&#xff1a; import javax.swing.JFrame;/*** author: Ajie* create: 2023/6/21* Description:* FileNa…

OpenStack(1)-创建实例

目录 一、上传镜像 1.1 新建目录 1.2 上传至glance 1.3 查看镜像 二、新建实例 2.1 获取秘钥 2.2 新建实例 2.3 新建实例admin-vm 2.4 获取实例VNC的url 2.5 nova常用命令 一、上传镜像 1.1 新建目录 上传名为cirros-0.3.4-x86_64-disk.img的Linux测试镜像&#xf…

JdbcTemplate 数据访问工具

文章目录 前言JdbcTemplate 数据访问工具1. 概述2. 主要功能3. 示例 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&…

新时代的黑科技:就凭这个,还真就非JNPF低代码不可了

随着技术的不断进步&#xff0c;现代企业对软件开发的需求越来越迫切&#xff0c;传统的软件开发方式已无法满足快速迭代和创新的需求。在这种情况下&#xff0c;低代码开发平台应运而生。低代码开发平台通过提供可视化的开发工具和预构建的组件&#xff0c;大大加快了应用程序…

Docker的安装部署以及配置的操作流程(图文)

Docker的安装以及配置流程&#xff08;图文&#xff09; Docker一、配置域名解析二、CentOS Docker 安装1. 查询已安装的docker2. 安装必要的一些系统工具3. 添加软件源&#xff08;阿里云&#xff09;信息4. 更新并安装Docker-CE5. 查看docker 的版本6. 关闭运行的防火墙7. 开…

CMake 工程实践指南专栏介绍

CMake 工程实践指南专栏介绍 大家好,我是 eg,欢迎来到我的 CMake 工程实践指南专栏。本专栏会保持一周一更的节奏,带大家从一个 CMake 小白蜕变成 CMake 熟练使用者。 1. 我与 CMake 的故事 在正式内容开始之前,我想谈谈我和 CMake 的故事。我读书的时候是压根儿不知道 …

造手机、“+ AI”,掉队的蔚来瞎折腾?

对标豪华品牌BBA&#xff0c;自建换电站&#xff0c;蔚来汽车曾凭借先发优势&#xff0c;一度成为造车新势力的领头羊&#xff0c;但最近两个月&#xff0c;蔚来的单月交付量仅有6000多台&#xff0c;渐露掉队之相。 主业低迷&#xff0c;蔚来传出新消息。两天前&#xff0c;工…

c++lambda函数笔记

1、labmda函数用途&#xff1a; 用于简短功能函数的定义&#xff0c;并传递到std算法中。 2、一般函数与lambda函数比较示例 3、如何定义lambda 如下为lambda通用定义式子&#xff1a; [capture] (params) opt->ret{body;}; capture——捕获列表&#xff0c;[]为不捕获变量…

JAVA线程池submit详解 ,execute和submit提交任务的区别

文章目录 前言submit方法定义Future是什么execute、submit方法区别是什么submit主干流程逻辑newTaskFor做了什么FutureTasknewTaskFor(Runnable runnable, T value)的实现FutureTask(Callable<V> callable)的实现execute(ftask) FutureTask是如何实现线程池执行可获取返回…

java多线程简明笔记(5)线程礼让 yield

关键字&#xff1a;yield 官方文档就不说了&#xff0c;简单理解&#xff0c;礼让 线程礼让 yield正在执行的线程暂停&#xff0c;不阻塞 示例代码&#xff1a; public class ThreadTest7 implements Runnable{public static void main(String[] args) {ThreadTest7 tnew Th…