a标签点击事件_html常用标签

一、a标签

作用:1、跳转到外部页面;2、跳转到内部锚点;3、跳转到邮箱或电话。

属性:

href(hyper+reference):超级引用、超级链接

1、a的href的取值:

<

//http://google.com:无协议的网址,因为是最高级,会自动选择。由于此方式能够自动补齐相关的网络地址,前面两种写错就会报错,所以推荐使用。

2、路径:

/a/b/c以及a/b/c是当前路径下的a里面的b,b里面的c。

3、伪协议:

<a href="javascript:;">点击后无动作</a>

696b5b9940e4b0e1e3e0a659003d37c3.png
点击后无任何动作
<a href="javascript:;alert(1)">javascript伪协议</a>

521bcb1136c50ddadfc5742bc53b94f9.png
点击后,跳出选项

4、mailto:邮箱

<a href="mailto:XXXXX@qq.com">发邮件给我</a>

5、tel:电话号码

<a href="tel:123456789">打电话给我</a>

6、id:

<a href="#xxx">查看xxx</a>

备注:如果html href留空<a href=" ">留空</a>,页面则会刷新;

如果想写一个a标签,什么也不做,就之能写<a href="javascript:;">...</a>。

7、a的target的取值:

_blank:在空白的页面打开

_top:在最上面的窗口打开

_parent:在当前链接所在的iframe上一层打开

_sejf:在自己当前位置打开,是默认值

二、table标签:

thead:表示表格的头部,可有可无

tbody:表示表格的内容

tfoot:表示表格的尾部,可有可无

tr(table row):table里面的一行

th:表示表头

td(table data):表示表格数据

 <table><thead><tr><th></th><th>小红</th><th>小明</th><th>小兰</th></tr></thead><tbody><tr><th>数学</th><td>61</td><td>91</td><td>85</td></tr><tr><th>语文</th><td>79</td><td>82</td><td>92</td></tr><tr><th>英语</th><td>100</td><td>97</td><td>87</td></tr></tbody><tfoot><th>总分</th><td>200</td><td>200</td><td>200</td></tfoot></table>

854f82569ab9f8977b8165f274746ef2.png
表格

1、table的相关样式:

table-layout:auto:根据内容自动计算行距

table-layout:fixed:表格和列的宽度通过表格来计算的,平均分布

border-collapse:控制border是否合并,默认不合并

border-spacing:控制border和border之间的距离,最好是0

<style>table{width: 600px;table-layout: fixed;border-collapse: collapse;border-spacing: 0;}td,th{border:1px solid black}</style>

三、img标签:

1、作用:发出get请求,展示图片

2、属性

alt:可选的,可替换的,在图片加载失效时,显示一行字来提示用户

<img src="图片.jpg" alt="图片" />

ba05306cffdb3c9f6489807a81d1e82c.png

height:只写高度,宽度会自适应

width:只写宽度,高度会自适应

src(source):图片地址

3、响应式:

img{max-width: 100%;}

4、事件:

onload/onerror:用来监听图片是否加载成功,若加载成功就调用onload;若没有加载成功,则调用onerror

四、form标签:

1、作用:发送get或post请求,然后刷新页面

2、属性:

action:的作用时控制请求哪个页面,刷新页面的地址

method:是控制get还是用post请求

autocomplete:是否自动填充(on)是,(off)否

target:把哪个页面变成当前页面,告诉浏览器提交到哪个页面,哪个页面应该刷新

3、事件:

onsubmit:如果写了input type=“submit”,那么浏览器会根据当前使用的语言自动变成看得懂的文字。

input type=“submit”和button type=“submit”的区别是input里面不能再有内容,只能有纯文本;button里可以有任何其他内容。

form表单必须有一个type=“submit”的按钮,表单才可提交。

五、input标签:

<

f10b88d2d53450535e4cd99f380926c6.png
文本框
<

a553eaf55322a7ac6fd1b52a6bb117e2.png
可选择文本框的颜色
<input type="password" />

05dfe48b1c67db03acbe3bf6da9258b6.png
输入密码
<input name="gender" type="radio" />男
<input name="gender" type="radio" />女

68ab16479b68e20cbe2c86fe54ddb134.png
选择性别
<input type="checkbox" name="hobby" />唱
<input type="checkbox" name="hobby" />跳
<input type="checkbox" name="hobby" />打篮球

b0be206ed9f38e47e929a5ef4a9c38c3.png
多项选择
<input type="file" />

c4835f0d01e331382011d41a1de43d4e.png
单选文本
<textarea style="resize: none; width: 50%; height: 300px;"></textarea>

9aa35a69cda52225078974c195140fec.png
多行文本框
<select><option value="">-请选择-</option><option value="1">星期一</option><option value="1">星期二</option>
</select>

d500d70131b9bcd9699db29749bd4636.png
选项

这节课的内容太多了,我消化的有点慢,但是还是在这节课里学到了许多,我希望我能好好坚持学到最后,加油

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

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

相关文章

mysql导出表_mysql导出表的3种方式

文章转载自 &#xff1a;https://blog.csdn.net/jbb0403/article/details/26359573navicat导出表一共有三中用法&#xff1a;第一种&#xff1a;数据库上右键—>"转储SQL文件"&#xff0c;如图&#xff1a;"转储文件"是把整个数据库表全部导出&#xff…

网络资产管理系统_固定资产管理系统的常用操作

固定资产管理系统作为一个办公软件&#xff0c;能够帮助企业高效管理固定资产的日常事务。随着信息技术的发展和普及&#xff0c;越来越多的企业都开始使用固定资产管理系统&#xff0c;可是对于首次使用或者没有接触过固定资产管理系统的新手企业来说&#xff0c;对于系统的了…

mac mysql my.cnf_mac 增加 my.cnf

mac 增加 my.cnf发布时间&#xff1a;2018-04-25作者&#xff1a;laosun阅读(8133)mysql下没有my.cnf&#xff0c;如果想要修改一些配置还挺懵逼的&#xff0c;网上找了一些资料&#xff0c;经过博主亲测没有问题&#xff0c;发篇文章一为共享&#xff0c;二为做个备忘。博主使…

python取前三位_Python 实现取多维数组第n维的前几位

Python 实现取多维数组第n维的前几位 现在我们有一个shape为(7352, 9, 128, 1)的numpy数组。 想要取出第2维的前三个数据&#xff0c;构成新数组(7352, 3, 128, 1) 我的思想是&#xff1a;将第2维数据转置&#xff08;transpose&#xff09;到第一维&#xff0c;再用切片&#…

solr 7 mysql导入_solr 7.7.0 windows 导入mysql数据库数据

接上一篇 准备导入数据首先修改hello/cong目录下的solrconfig.xml文件&#xff0c;添加如下节点&#xff1a;data-config.xml新建一个data-config.xml文件&#xff0c;与solrconfig.xml同一个目录下 添加数据库链接信息DataSource&#xff1a;数据库连接信息Entity&#xff1a;…

access vba代码大全_VBA 实践指南 -- VBA连接各种数据库

ADO 简介ADO (ActiveX Data Objects&#xff0c;ActiveX数据对象&#xff09;是Microsoft提出的应用程序接口&#xff08;API&#xff09;用以实现访问关系或非关系数据库中的数据。例如&#xff0c;如果您希望编写应用程序从DB2或Oracle数据库中向网页提供数据&#xff0c;可以…

sql date类型_共享单车数据分析的SQL数据库设计

SQL&#xff0c;发音为“ sequel”(或SQL&#xff0c;如果愿意的话)&#xff0c;是数据科学家的重要工具。实际上&#xff0c;它可以说是获取数据工作中最重要的语言。在共享单车数据分析的SQL设计中&#xff0c;我们将从入门者的角度深入研究SQL基础知识&#xff0c;以使您入门…

python header头部请求_python3爬虫怎样构建请求header

写一个爬虫首先就是学会设置请求头header&#xff0c;这样才可以伪装成浏览器。下面小编我就来给大家简单分析一下python3怎样构建一个爬虫的请求头header。 1、python3跟2有了细微差别&#xff0c;所以我们先要引入request&#xff0c;python2没有这个request哦。然后复制网址…

mysql配置文件结构_MariaDB/MySQL配置文件my.cnf解读

MariaDB/MySQL的默认设置性能非常差&#xff0c;仅仅起一个功能测试的作用&#xff0c;不能用在生产环境中&#xff0c;因此要对一些参数进行调整优化。当然&#xff0c;对配置文件各参数的调整需要根据实际环境&#xff0c;不同时期不同数量级的数据进行性能优化。MySQL/Maria…

python各版本区别_关于python中不同版本的print区别

最近有时候会看看python的一些东西。也看了一些入门教程&#xff0c;但是发现一个问题是&#xff0c;在用print的时候老是报错&#xff1a; 报错如下&#xff1a;提示print a这句有语法问题。但是看的教程里面都有这样写的&#xff0c;没有问题啊。 忽然想到以前同学说过python…

stc8g1k08程序范例_通过WiFi对STC单片机程序下载和调试

简介本文设计了基于WiFi-UART的STC单片机下载调试模块&#xff0c;这样便于对嵌入式系统进行远程调试开发&#xff0c;特别是在一些具有移动功能的平台&#xff0c;强电平台以及需要实时监视和修改程序的应用场合。本文相关的下载资源&#xff1a;WiFi模块下载STC程序设计文件[…

echo off备份mysql_windows下备份Linux服务器上的MySQL

【更新】因为windows存在 10点前后生成的时间格式不同&#xff0c;导致无法正确生成sql文件。导致上次的备份文件无法生成研究后对旧内容进行修改echo offforfiles /p "D:\ERP_MySQLbak" /m mysql_backup_*.sql -d -2 /c "cmd /c del /f path"set/a a%time…

python 3d重建_3D点云重建原理及Pytorch实现

3D点云重建原理及Pytorch实现 Pytorch: Learning Efficient Point Cloud Generation for Dense 3D Object Reconstruction 一种Pytorch实现方法&#xff1a;学习高效的点云生成方法用于稠密三维物体重建 一&#xff0e;论文概要 传统的三维对象生成建模方法是利用三维卷积运算的…

Java进阶04 RTTI

链接地址&#xff1a;http://www.cnblogs.com/vamei/archive/2013/04/14/3013985.html 作者&#xff1a;Vamei 出处&#xff1a;http://www.cnblogs.com/vamei 欢迎转载&#xff0c;也请保留这段声明。谢谢&#xff01; 运行时类型识别(RTTI, Run-Time Type Identification)是J…

springdatajpa命名规则_Spring Boot 之Spring data JPA简介

PA的全称是Java Persistence API (JPA)&#xff0c;他是一个存储API的标准&#xff0c;而Spring data JPA就是对JPA的一种实现&#xff0c;可以让我们方便的对数据进行存取。按照约定好的方法命名规则写dao层接口&#xff0c;从而在不实现接口的情况下&#xff0c;实现对数据库…

PHPCMS 模板的设置

编制好模板后&#xff0c; 一、设置config.php<?php return array (name > 现代的蓝红色模板,author > dazhaihui,dirname > simpleblue,homepage > http://www.phpcms.cn/,version > 1.0,disable > 0,file_explan >array (templates|simpleblue|cont…

奖学金设计mysql_基于JAVA的奖学金评定系统设计与实现(MySQL)(含录像)

基于JAVA的奖学金评定系统设计与实现(MySQL)(含录像)(任务书,开题报告,外文翻译,毕业论文10000字,程序代码,MySQL数据库,答辩PPT,答辩视频录像)摘 要本文论述了奖学金评定系统从分析到实现的整个过程&#xff0c;说明了系统实现的基本思路&#xff0c;介绍系统不同的功能模块以…

python ckeditor上传图片400错误_又一款python开发神器

优秀的python开发工具有很多&#xff0c;比如pycharm&#xff0c;spder&#xff0c;ipython&#xff0c;jupyter以及很多编辑器的插件等。但是如果利用python来做数据分析的话&#xff0c;要是有一款类似Rstudio的工具就好了&#xff0c;Rstudio是非常人性化的工具。之前有一个…

rabbitmq 延迟队列_Delayed Message 插件实现 RabbitMQ 延迟队列

延迟队列是为了存放那些延迟执行的消息&#xff0c;待消息过期之后消费端从队列里拿出来执行。DLX TTL 方式存在的时序问题对于延迟队列不管是 AMQP 协议或者 RabbitMQ 本身是不支持的&#xff0c;之前有介绍过如何使用 RabbitMQ 死信队列(DLX) TTL 的方式来模拟实现延迟队列…

JS - 按钮倒计时

效果&#xff1a; html代码&#xff1a; <input type"button" id"btn" value"点击获取效验码" />js代码&#xff1a; //倒计时var wait60;function time(o) {if (wait 0) {o.removeAttribute("disabled"); o.value&qu…