HTML之二 -特殊标签 与数据交互标签
1.<img> 标签
©
<h1>
<img src="1.jpg" width="200" height="200" alt="hehe" title="大美女"> //alt是图片没有加载成功时显示的内容,title时鼠标指向图片时显示的提示
2.<a> </a>标签
作用: 链接,锚定,target,title(悬浮显示,同Img)
链接
<a href="www.baidu.com">百度</a> //href 指向的地址
锚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">-->
<!--<link rel="icon" href="http:////www.jd.com/favicon.ico">-->
<title>Title</title>
<style>
#div1{ //选取id div1的div设置属性
height: 500px;
background-color: yellow;
}
#div2{
height: 500px;
background-color: green;
}
#div3{
height: 500px;
background-color: yellow;
}
</style>
</head>
<body>
<!--<img src="1.jpg" width="200" height="200" alt="hehe" title="大美女">-->
<!--<a href="www.baidu.com">百度</a>-->
<div id="div_top"></div>
<a href="#div1">第一章</a> //设置锚的id位置,点击跳转到锚定位置
<a href="#div2">第二章</a>
<a href="#div3">第三章</a> <div id="div1">第一章</div> //为标签设置id
<a href="#div_top">返回</a>
<div id="div2">第二章</div>
<a href="#div_top">返回</a>
<div id="div3">第三章</div>
<a href="#div_top">返回</a>
</body>
</html>
target:指定链接从当前页打开还是新建页面打开
<a href="www.baidu.com">百度</a> //当前页打开
<a href="www.baidu.com" target="-_blank">百度</a> //新建页打开
3.列表标签:<ul></ul> <ol></ol>
//无序列表
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
//有序列表
<ol>
<li>222</li>
<li>222</li>
<li>222</li>
<li>222</li>
</ol>
//自定义列表: dt 即title dd即数据
<dl>
<dt>第一章</dt>
<dd>111</dd>
<dd>111</dd>
<dt>第二章</dt>
<dd>111</dd>
<dd>111</dd>
</dl>
4 <table> 现代设计中布局已经应用很少。
略
5.<form>表单-唯一能与后台交互的标签 -重点
<input>
1.各种类型显示
<form action="127.0.0.1:8090/index" method="get">
<p>姓名<input type="text"></p>
<p>性别<input type="text"></p>
<p>密码<input type="password"></p>
<p><input type="submit"></p>
<p><input type="submit" value="press"></p>
</form>
2.数据传输:
一句话,input 的name属性是给服务器看的(后台服务器传输), id属性是给前端看的(js,css控制)
<form action="127.0.0.1:8090/index" method="get">
<p>姓名<input type="text" name="username"></p> //通过username和passwd传输值
<p>密码<input type="password" name="passwd"></p> <p>爱好:篮球<input type="checkbox" name="hobby" value="1"></p> //复选按钮,name一样,值不同
<p>乒乓球<input type="checkbox" name="hobby" value="2"></p> <p>性别:男<input type="radio" name="sex" value="0"></p> //单选按钮,name一样,值不同
<p>女<input type="radio" name="sex" value="1"></p>
<p><input type="submit"></p>
<p><input type="file"></p> //文件传输按钮
<p><input type="reset"></p> //清空各个值按钮
</form>
<select>
<form action="127.0.0.1:8090/index" method="get">
<select>
<optgroup label="河南南部"> //分组select 图1
<option>南阳市</option>
<option>信阳市</option>
</optgroup>
<optgroup label="河南西部">
<option>洛阳市</option>
<option>郑州市</option>
<option>新乡市</option>
</optgroup>
</select>
<select> //一般select 图2
<option>春</option>
<option>夏</option>
<option>秋</option>
<option>冬</option>
</select>
<p><input type="submit"></p>
<select name="season" multiple size="2"> //数据传输,允许多选并一次显示2个 图3
<option value="spring">春</option>
<option value="summer">夏</option>
<option value="autumn">秋</option>
<option value="winter">冬</option>
</select>
<p><input type="submit"></p>
</form>
<textarea> &关联点击 for
<form>
<textarea id="www" rows="" cols="" name="tex1"> </textarea>
<label for="www"> 关联点击 </label>
</form>
HTML之二 -特殊标签 与数据交互标签的更多相关文章
- (转载)Android项目实战(二十七):数据交互(信息编辑)填写总结
Android项目实战(二十七):数据交互(信息编辑)填写总结 前言: 项目中必定用到的数据填写需求.比如修改用户名的文字编辑对话框,修改生日的日期选择对话框等等.现总结一下,方便以后使用. 注: ...
- Android项目实战(二十七):数据交互(信息编辑)填写总结
前言: 项目中必定用到的数据填写需求.比如修改用户名的文字编辑对话框,修改生日的日期选择对话框等等.现总结一下,方便以后使用. 注: 先写实现过程,想要学习的同学可以看看,不需要的同学可以直接拉到最下 ...
- springmvc学习笔记(18)-json数据交互
springmvc学习笔记(18)-json数据交互 标签: springmvc springmvc学习笔记18-json数据交互 springmvc进行json交互 环境准备 加入json转换的依赖 ...
- 无废话ExtJs 入门教程二十[数据交互:AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- Ajax实现xml文件数据插入数据库(二)--- ajax实现与jsp的数据交互。
在上一篇文章中我们成功得到了重新组织后的数据,接下来需要做的便是将数据插入到数据库中了.在与数据库打交道的过程中有一些方法是普遍的,我们将这些通用方法封装到一个DbUtil类中,以便复用,封装好的Db ...
- SpringMVC入门(二)—— 参数的传递、Controller方法返回值、json数据交互、异常处理、图片上传、拦截器
一.参数的传递 1.简单的参数传递 /* @RequestParam用法:入参名字与方法名参数名不一致时使用{ * value:传入的参数名,required:是否必填,defaultValue:默认 ...
- JSP/Servlet开发——第二章 JSP数据交互(二)
1. JSP 内置对象 application: ●application 对象类似于系统的 "全局变量", 用于同一个应用内的所有用户之问的数据共享: ●application对 ...
- Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
最近在学Json,在网上也找过一些资料,觉得有点乱,在这里,我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互 使用Json,首先需要导入一些jar包,这些资源可以在网上下载到 ...
随机推荐
- 1503.02531-Distilling the Knowledge in a Neural Network.md
原来交叉熵还有一个tempature,这个tempature有如下的定义: \[ q_i=\frac{e^{z_i/T}}{\sum_j{e^{z_j/T}}} \] 其中T就是tempature,一 ...
- python2和python3关于列表推导的差别
看下面两个例子: python2的环境:列表中的同名变量名被替换了 >>> x = 'my precious' >>> dummy = [x for x in 'A ...
- CR--同事分享学习
1.持续发布是什么? 频繁地将软件的新版本,交付给质量团队或者用户,以供评审. 2.对接持续发布需要具备什么条件? 1) 测试自动化程度较高,持续发布的终态是不需要人工介入 2) 做到持续集成,持 ...
- 提高GitHub下载速度
修改/etc/hosts 加上 151.101.72.249 GitHub.global.ssl.fastly.net 192.30.253.112 github.com
- 基于Dapper写的一个sqlhelp适用于多版本数据库
ConnectionInit方法用于初始化数据库连接对象, 只需要修改databasetype参数即可进行适用各个版本的数据库, ExecuteNonQuery方法用于执行增.删.改操作,返回受影响的 ...
- ucos中信号量 事件标志 消息队列都怎么用
信号量 事件标志和消息队列分别应用于什么场景(反正我学的时候有点闹不清,现在总结一下): 信号量和事件标志用于任务同步.详细来说,这个功能可以替代以前裸机中你打一个标记的功能,比如使用了一个定时器,5 ...
- mysql学习笔记--数据库多表查询
一.内连接[inner join] 1. 语法一:select 列名 from 表1 inner join 表2 on 表1.公共字段=表2.公共字段 2. 语法二:select 列名 from 表1 ...
- vim matchit 自定义配对关键字之间的跳转
vim因其强大的扩展性一直深受linux程序员的喜爱,最近在用vim写verilog的时候,由于一个逻辑块中的begin end较多,常常会多写或者漏掉匹配关键字,很是苦恼,于是寻找匹配关键字间跳转的 ...
- py_innodb_page_info
python py_innodb_page_info.py -v /usr/local/var/mysql/ibdata1 mylib.py #encoding=utf-8 import os imp ...
- QVariant类
QVariant类: #include "widget.h" #include <QApplication> #include <QDebug> int m ...