1.<img>  标签

   &copy;

    &lt;h1&gt;

    <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之二 -特殊标签 与数据交互标签的更多相关文章
	

    
								
  1. （转载）Android项目实战（二十七）：数据交互（信息编辑）填写总结
		
    Android项目实战(二十七):数据交互(信息编辑)填写总结   前言: 项目中必定用到的数据填写需求.比如修改用户名的文字编辑对话框,修改生日的日期选择对话框等等.现总结一下,方便以后使用. 注: ...
    
		
    2. 
						
  2. Android项目实战（二十七）：数据交互（信息编辑）填写总结
		
    前言: 项目中必定用到的数据填写需求.比如修改用户名的文字编辑对话框,修改生日的日期选择对话框等等.现总结一下,方便以后使用. 注: 先写实现过程,想要学习的同学可以看看,不需要的同学可以直接拉到最下 ...
    
		
    3. 
						
  3. springmvc学习笔记(18)-json数据交互
		
    springmvc学习笔记(18)-json数据交互 标签: springmvc springmvc学习笔记18-json数据交互 springmvc进行json交互 环境准备 加入json转换的依赖 ...
    
		
    4. 
						
  4. 无废话ExtJs 入门教程二十[数据交互：AJAX]
		
    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
    
		
    5. 
						
  5. Ajax实现xml文件数据插入数据库（二）--- ajax实现与jsp的数据交互。
		
    在上一篇文章中我们成功得到了重新组织后的数据,接下来需要做的便是将数据插入到数据库中了.在与数据库打交道的过程中有一些方法是普遍的,我们将这些通用方法封装到一个DbUtil类中,以便复用,封装好的Db ...
    
		
    6. 
						
  6. SpringMVC入门（二）—— 参数的传递、Controller方法返回值、json数据交互、异常处理、图片上传、拦截器
		
    一.参数的传递 1.简单的参数传递 /* @RequestParam用法:入参名字与方法名参数名不一致时使用{ * value:传入的参数名,required:是否必填,defaultValue:默认 ...
    
		
    7. 
						
  7. JSP／Servlet开发——第二章 JSP数据交互（二）
		
    1. JSP 内置对象 application: ●application 对象类似于系统的 "全局变量", 用于同一个应用内的所有用户之问的数据共享: ●application对 ...
    
		
    8. 
						
  8. Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互
		
    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
    
		
    9. 
						
  9. 玩转Web之Json（二）----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
		
    最近在学Json,在网上也找过一些资料,觉得有点乱,在这里,我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互 使用Json,首先需要导入一些jar包,这些资源可以在网上下载到 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Day03 - Ruby比一比：Module的include与extend
			
    前情提要在第一天里,我们很激昂地用Ruby的类别.物件.方法,写了开赛宣言!在第二天里,我们比较了方法与模块,比的过程中,发现模块多了包含(inclusion)与延伸(extension). 超级比一 ...
    
			
    2. 
						
  2. python 并发编程 操作系统 进程 并发.并行 及 同步/异步,阻塞/非阻塞
			
    操作系统: 多道技术背景: 提高工作效率(充分利用IO阻塞的时间) 同时执行多个任务 多道技术 空间复用:充分的利用内存空间 时间复用:充分利用IO阻塞时间 分时系统: 并发:提高了程序的工作效率 两 ...
    
			
    3. 
						
  3. 【JAVA】JAVAで各DBに接続する方法(JDBC)の纏め（未完結）
			
    ■目録 ■ソース ①SQLite3 package cn.com.sy; import java.sql.Connection; import java.sql.DriverManager; impo ...
    
			
    4. 
						
  4. svn 恢复删除文件
			
    参考这个 https://blog.csdn.net/qdujunjie/article/details/37766167
    
			
    5. 
						
  5. poj2828（线段树查找序列第k小的值）
			
    题目链接:https://vjudge.net/problem/POJ-2828 题意:有n个人,依次给出这n个人进入队列时前面有多少人p[i],和它的权值v[i],求最终队列的权值序列. 思路:基本 ...
    
			
    6. 
						
  6. 通信导论-IP数据网络基础（3）
			
    ICMP(IP辅助协议)--网际控制报文协议 ICMP报文种类:ICMP差错报文(终点不可达.时间超过等5种)和ICMP询问报文(回送请求和回答请求.时间戳请求和回答报文2种) ICMP是一种集差错报 ...
    
			
    7. 
						
  7. Spring--基础介绍一：IOC和DI
			
    前面学习了Struts2和Hibernate. Struts2主要是用来控制业务层面逻辑和显示,告诉你什么时候走哪个action,跑去运行哪个class的什么方法,后面调到哪个jsp. Struts2 ...
    
			
    8. 
						
  8. go语言学习逻辑运算符if判断，iota的理解
			
    第一天学习go语言,首先吐槽一下,配置go语言浪费了我两个小时的时间 不是在百度,就是在百度的路上,这里介绍一下我的go语言的版本和开发平台 go语言1.12版本,之前没有用过在早的版本了首先记录一下 ...
    
			
    9. 
						
  9. JS整理--闭包
			
    1.闭包可以访问当前函数以外的变量 function a(){ var date="1"; function b(str){ console.log(str+date) } ret ...
    
			
    10. 
						
  10. DOCKER学习 docker
			
    DOCKER只能安装到LIUX系列机器上 如果WINDOWS想安装必须通过虚拟机来完成. 比如用VM,VBOX等 安装之前需要用ROOT账户 su 安装DOCKER (CE是个人版本,EE是企业版本) ...
    
			
    11.