整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML基础(六)-表单(下)

HTML基础(六)-表单(下)

lt;input> 元素的输入类型

大家学习了表单之后,有木有发现input通过定义不同的type属性,描述不同的输入类型。今天小编带大家总结一下input常用的输入类型。

1.文本输入

设置 type 属性值为 'text'

<input type="text">

文本输入框

2.密码输入

设置 type 属性值为 ‘password’

<input type="password">

密码输入框

3.提交表单按钮

设置 type 属性值为 ‘submit’

<input type="submit">

定义提交表单数据至表单处理程序的按钮

4.单选按钮

设置 type 属性值为 ‘radio’

<input type="radio">true

单选按钮

5.复选框

设置 type 属性值为 ‘checkbox’

<input type="checkbox">

6.按钮

设置 type 属性值为 ‘button’

<input type="button" value="确定">

<input>元素输入属性

在讲input的输入属性之前,给大家讲讲HTML属性是怎么回事。

可能大家也发现了,之前文章讲得的HTML中,好多加了属性的元素,例如a标签中加了href属性定义了链接的地址,还有table中加border属性给表格添加边框线。

<a href="https://www.toutiao.com/i6491189339890909709/">sublime的安装与使用</a>

<table border="1"></table>

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现,比如:name="value"。属性总是在 HTML 元素的开始标签中规定。

虽然属性和属性值对大小写不敏感,但是小编还是建议大家用小写的。

后续课程CSS会用到属性给大家总结一下:

class 规定元素的类名

id 规定元素的唯一 id

style 规定元素的行内样式

好啦,我们开始学习input的输入属性。

看如下例子,

<input type="text" value="John">

type属性定义了文本的输入类型,value属性定义了输入字段的初始值。

设置默认值

用value设置初始值往往在你修改输入值时遇到麻烦,如果不提前把初始值删掉的话,你输入新值后跟在初始值后边。

修改输入值

为了解决这个问题,我们可以使用占位符(placeholder)

<input type="text" placeholder="John" >

当你输入新值时,初始值会消失。

使用占位符

readonly 属性

readonly 属性规定输入字段为只读(不能修改)

<input type="text" value="Sunshin" readonly>

disabled 属性

  • disabled 属性规定输入字段是禁用的。

  • 被禁用的元素是不可用和不可点击的。

  • 被禁用的元素不会被提交。

<input type="text" value="Sunshin" disabled >

输入框不可用

required 属性

required 属性是布尔属性。如果设置,则规定在提交表单之前必须填写输入字段。

<input type="text" value="Sunshin" required>

今天内容是不是又有点多呢?我控制不住我自己啊(⊙o⊙)…

打开编辑器好好练习一下吧!

你必须非常努力,才能看起来好不费力!

关注小白前端,才能持续收到文章推送哦~

, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20

  var reg=/^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

  reg.test("a1a__a1a__a1a__a1a__");

2,截取字符串abcdefg的efg

  var str="abcdefg";

  if (/efg/.test(str)) {

  var efg=str.substr(str.indexOf("efg"), 3);

  alert(efg);

  }

3,判断一个字符串中出现次数最多的字符,统计这个次数

  //将字符串的字符保存在一个hash table中,key是字符,value是这个字符出现的次数

  var str="abcdefgaddda";

  var obj={};

  for (var i=0, l=str.length; i < l; i++) {

  var key=str[i];

  if (!obj[key]) {

  obj[key]=1;

  } else {

  obj[key]++;

  }

  }

  /*遍历这个hash table,获取value最大的key和value*/

var max=-1;

  var max_key="";

  var key;

  for (key in obj) {

  if (max < obj[key]) {

  max=obj[key];

  max_key=key;

  }

  }

  alert("max:"+max+" max_key:"+max_key);

  4,IE与FF脚本兼容性问题

  (1) window.event:

  表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象

  (2) 获取事件源

  IE用srcElement获取事件源,而FF用target获取事件源

  (3) 添加,去除事件

  IE:element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

  FF:element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

  (4) 获取标签的自定义属性

  IE:div1.value或div1[“value”]

  FF:可用div1.getAttribute(“value”)

  (5) document.getElementByName()和document.all[name]

  IE;document.getElementByName()和document.all[name]均不能获取div元素

  FF:可以

  (6) input.type的属性

  IE:input.type只读

  FF:input.type可读写

  (7) innerText textContent outerHTML

  IE:支持innerText, outerHTML

  FF:支持textContent

  (8) 是否可用id代替HTML元素

  IE:可以用id来代替HTML元素

  FF:不可以

  这里只列出了常见的,还有不少,更多的介绍可以参看JavaScript在IE浏览器和Firefox浏览器中的差异总结

5,规避javascript多人开发函数重名问题

  (1) 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀

  (2) 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就ok

6,javascript面向对象中继承实现

  javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链,简单的代码如下:

  function Animal(name) {

  this.name=name;

  }

  Animal.prototype.getName=function() {alert(this.name)}

  function Dog() {};

  Dog.prototype=new Animal("Buddy");

  Dog.prototype.constructor=Dog;

  var dog=new Dog();

7,FF下面实现outerHTML

  FF不支持outerHTML,要实现outerHTML还需要特殊处理

  思路如下:

  在页面中添加一个新的元素A,克隆一份需要获取outerHTML的元素,将这个元素append到新的A中,然后获取A的innerHTML就可以了。

  SPANDIV

  SPAN

  P

8,编写一个方法 求一个字符串的字节长度

  假设:

  一个英文字符占用一个字节,一个中文字符占用两个字节

  function GetBytes(str){

  var len=str.length;

  var bytes=len;

  for(var i=0; i

  if (str.charCodeAt(i) > 255) bytes++;

  }

  return bytes;

  }

  alert(GetBytes("你好,as"));

9,编写一个方法 去掉一个数组的重复元素

  var arr=[1 ,1 ,2, 3, 3, 2, 1];

  Array.prototype.unique=function(){

  var ret=[];

  var o={};

  var len=this.length;

  for (var i=0; i

  var v=this[i];

  if (!o[v]){

  o[v]=1;

  ret.push(v);

  }

  }

  return ret;

  };
  alert(arr.unique());

10,写出3个使用this的典型应用

  (1)在html元素事件属性中使用,如

  (2)构造函数

  function Animal(name, color) {

  this.name=name;

  this.color=color;

  }

12,如何显示/隐藏一个DOM元素?

  el.style.display="";

  el.style.display="none";

  el是要操作的DOM元素

13,JavaScript中如何检测一个变量是一个String类型?请写出函数实现

  String类型有两种生成方式:

  (1)Var str=“hello world”;

  (2)Var str2=new String(“hello world”);

  function IsString(str){

  return (typeof str=="string" || str.constructor==String);

  }

  var str="";

  alert(IsString(1));

  alert(IsString(str));

  alert(IsString(new String(str)));

14,网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天××时××分××秒”

15,补充代码,鼠标单击Button1后将Button1移动到Button2的后面

16,JavaScript有哪几种数据类型

  简单:Number,Boolean,String,Null,Undefined

  复合:Object,Array,Function

17,下面css标签在JavaScript中调用应如何拼写,border-left-color,-moz-viewport

  borderLeftColor

  mozViewport

18,JavaScript中如何对一个对象进行深度clone

  function cloneObject(o) {
  if(!o || 'object' !==typeof o) {
  return o;
  }
  var c='function'===typeof o.pop ? [] : {};
  var p, v;
  for(p in o) {
  if(o.hasOwnProperty(p)) {
  v=o[p];
  if(v && 'object'===typeof v) {
  c[p]=Ext.ux.clone(v);
  }
  else {
  c[p]=v;
  }
  }
  }
  return c;
  };

19,如何控制alert中的换行

  \n alert(“p\np”);

20,请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性)

  SPANDIV

  SPAN

  P

21,请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象,如:

  var url=“http://witmax.cn/index.php?key0=0&key1=1&key2=2″;

  function parseQueryString(url){

  var params={};

  var arr=url.split("?");

  if (arr.length <=1)

  return params;

  arr=arr[1].split("&");

  for(var i=0, l=arr.length; i

  var a=arr[i].split("=");

  params[a[0]]=a[1];

  }

  return params;

  }

  var url="http://witmax.cn/index.php?key0=0&key1=1&key2=2";

  var ps=parseQueryString(url);

  alert(ps["key1"]);

22,ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?

  Ajax是多种技术组合起来的一种浏览器和服务器交互技术,基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用,并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术:

  XHTML:对应W3C的XHTML规范,目前是XHTML1.0。

  CSS:对应W3C的CSS规范,目前是CSS2.0

  DOM:这里的DOM主要是指HTML DOM,XML DOM包括在下面的XML中

  JavaScript:对应于ECMA的ECMAScript规范

  XML:对应W3C的XML DOM、XSLT、XPath等等规范

  XMLHttpRequest:对应WhatWG的Web Applications1.0规范(http://whatwg.org/specs/web-apps/current-work/)

  AJAX交互模型



  同步:脚本会停留并等待服务器发送回复然后再继续

  异步:脚本允许页面继续其进程并处理可能的回复

  跨域问题简单的理解就是因为JS同源策略的限制,a.com域名下的JS无法操作b.com或c.a.com下的对象,具体场景如下:



  PS:(1)如果是端口或者协议造成的跨域问题前端是无能为力的

  (2) 在跨域问题上,域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP

  前端对于跨域的解决办法:

  (1) document.domain+iframe

  (2) 动态创建script标签

23,请给出异步加载js方案,不少于两种

  默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。

  异步加载方式:

  (1) defer,只支持IE

  (2) async:

  (3) 创建script,插入到DOM中,加载完毕后callBack,见代码:

  function loadScript(url, callback){

  var script=document.createElement("script")

  script.type="text/javascript";

  if (script.readyState){ //IE

  script.onreadystatechange=function(){

  if (script.readyState=="loaded" ||

  script.readyState=="complete"){

  script.onreadystatechange=null;

  callback();

  }

  };

  } else { //Others: Firefox, Safari, Chrome, and Opera

  script.onload=function(){

  callback();

  };

  }

  script.src=url;

  document.body.appendChild(script);

  }

25,请设计一套方案,用于确保页面中JS加载完全。

  var n=document.createElement("script");

  n.type="text/javascript";

  //以上省略部分代码

  //ie支持script的readystatechange属性(IE support the readystatechange event for script and css nodes)

  if(ua.ie){

  n.onreadystatechange=function(){

  var rs=this.readyState;

  if('loaded'===rs || 'complete'===rs){

  n.onreadystatechange=null;

  f(id,url); //回调函数

  }

  };

  //省略部分代码

  //safari 3.x supports the load event for script nodes(DOM2)

  n.addEventListener('load',function(){

  f(id,url);

  });

  //firefox and opera support onload(but not dom2 in ff) handlers for

  //script nodes. opera, but no ff, support the onload event for link

  //nodes.

  }else{

  n.onload=function(){

  f(id,url);

  };

  }

26,js中如何定义class,如何扩展prototype?

  Ele.className=“***”; //***在css中定义,形式如下:.*** {…}

  A.prototype.B=C;

  A是某个构造函数的名字

  B是这个构造函数的属性

  C是想要定义的属性的值

27,如何添加html元素的事件,有几种方法.

  (1) 为HTML元素的事件属性赋值

  (2) 在JS中使用ele.on***=function() {…}

  (3) 使用DOM2的添加事件的方法 addEventListener或attachEvent

28,documen.write和 innerHTML的区别

  document.write只能重绘整个页面

  innerHTML可以重绘页面的一部分

29,多浏览器检测通过什么?

  (1) navigator.userAgent

  (2) 不同浏览器的特性,如addEventListener

30,js的基础对象有那些, window和document的常用的方法和属性列出来

  String,Number,Boolean

  Window:

  方法:setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open

  属性:name,parent,screenLeft,screenTop,self,top,status

  Document

  方法:createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln

  属性:cookie,doctype,domain,documentElement,readyState,URL,

31,前端开发的优化问题

  (1) 减少http请求次数:css spirit,data uri

  (2) JS,CSS源码压缩

  (3) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

  (4) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能

  (5) 用setTimeout来避免页面失去响应

  (6) 用hash-table来优化查找

  (7) 当需要设置的样式很多时设置className而不是直接操作style

  (8) 少用全局变量

  (9) 缓存DOM节点查找的结果

  (10) 避免使用CSS Expression

  (11) 图片预载

  (12) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢

32,如何控制网页在网络传输过程中的数据量

  启用GZIP压缩

  保持良好的编程习惯,避免重复的CSS,JavaScript代码,多余的HTML标签和属性

  33,Flash、Ajax各自的优缺点,在使用中如何取舍?

  Ajax的优势

  (1) 可搜索型

  (2) 开放性

  (3) 费用

  (4) 易用性

  (5) 易于开发

  Flash的优势

  (1) 多媒体处理

  (2) 兼容性

  (3) 矢量图形 比SVG,Canvas优势大很多

  (4) 客户端资源调度,比如麦克风,摄像头

Sdd;d’dsdsdsd

.标签

1.1meta标签

meta主要用于设置网页中的一些元数据,元数据不是给用户看 charset 指定网页的字符集 name 指定的数据的名称 content 指定的数据的内容

keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

description 用于指定网站的描述

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

将页面重定向到另一个网站

1.2title标签

title标签的内容会作为搜索结果的超链接上的文字显示

<title>Document</title>

1.3标题

  • h1 ~ h6 一共有六级标题
  • 从h1~h6重要性递减,h1最重要,h6最不重要
  • h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1
  • 标题元素是块元素
  • <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

  • hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup
  • <hgroup>
    <h1>回乡偶书二首</h1>
    <h2>其一</h2>
    </hgroup>
  • 其他标签
    • p标签表示页面中的一个段落
    • <p>在p标签中的内容就表示一个段落</p>
    • em标签用于表示语音语调的一个加重
    • <p>今天天气<em></em>不错!</p>
    • strong表示强调,重要内容!
    • <p>你今天必须要<strong>完成作业</strong></p>
    • blockquote 表示一个长引用
    • <blockquote>
      这句话我是从来没有说过的!
      </blockquote>
    • q表示一个短引用
    • 子曰<q>学而时习之,乐呵乐呵!</q>
    • br标签表示页面中的换行
    • <br>

1.4布局标签

header 表示网页的头部 main 表示网页的主体部分(一个页面中只会有一个main) footer 表示网页的底部 nav 表示网页中的导航 aside 和主体相关的其他内容(侧边栏) article 表示一个独立的文章 section 表示一个独立的区块,上边的标签都不能表示时使用section

div 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素

span 行内元素,没有任何的语义,一般用于在网页中选中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分类

1.1.1.1有序列表

使用ol标签来创建无序列表,使用li表示列表项

<ul>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ul>

1.1.1.2 无序列表

使用ul标签来创建无序列表,使用li表示列表项

<ol>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ol>

1.1.1.3定义列表

使用dl标签来创建一个定义列表, 使用dt来表示定义的内容,使用dd来对内容进行解释说明

<dl>
       <dt>结构</dt>
       <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
       <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
       <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
   </dl>

1.1.1.4列表之间可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超链接

1.6.1 作用

超链接可以让我们从一个页面跳转到其他页面, 或者是当前页面的其他的位置

1.6.2 定义

使用 a 标签来定义超链接

<a href="https://www.baidu.com">超链接</a>

1.6.3 属性

1.6.3.1属性1:href

指定跳转的目标路径

值可以是一个外部网站的地址

也可以写一个内部页面的地址

超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素

1.6.3.2 属性2:target

用来指定超链接打开的位置

_self 默认值 在当前页面中打开超链接

_blank 在一个新的要么中打开超链接

<a href="07.列表.html" target="_blank">超链接</a>

1.6.4其他

将#作为超链接的路径的展位符使用

javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生

将超链接的href属性设置为#,这样点击超链接以后 页面不会发生跳转,而是转到当前页面的顶部的位置

跳转到页面的指定位置,只需将href属性设置 #目标元素的id属性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三个自然段</a>
   <br><br>
<p>
  内容多一点
</p>
<a href="#">这是一个新的超链接</a>
   <br><br>
<a href="javascript:;">这是一个新的超链接</a>
   <br><br>
<a id="bottom" href="#">回到顶部</a>

1.7图片标签

img标签来引入外部图片,img标签是一个自结束标签

属性:src 属性指定的是外部图片的路径(路径规则和超链接是一样的)

alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示

<img src="./img/1.gif" alt="松鼠">

1.8内联框架

用于向当前页面中引入一个其他页面

  • src 指定要引入的网页的路径
  • frameborder 指定内联框架的边框
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音视频标签

1.8.1音频

audio 标签用来向页面中引入一个外部的音频文件的

1.8.1.1 属性

  • controls 是否允许用户控制播放
  • autoplay 音频文件是否自动播放
    • 如果设置了autoplay 则音乐在打开页面时会自动播放
  • loop 音乐是否循环播放
<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通过src来指定外部文件的路径以外,还可以通过source来指定文件的路径

<audio controls>
       <!-- 对不起,您的浏览器不支持播放音频!请升级浏览器!-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2视频

与 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>


2.表格table

  • 在table中使用tr表示表格中的一行,有几个tr就有几行
  • 在tr中使用td表示一个单元格,有几个td就有几个单元格
  • rowspan 纵向的合并单元格
  • colspan 横向的合并单元格
<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

长表格

  • 可以将一个表格分成三个部分:
    • 头部 thead
    • 主体 tbody
    • 底部 tfoot
  • th 表示头部的单元格
<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合计</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合计</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格样式

  • border-spacing: 指定边框之间的距离
border-spacing: 0px;
  • border-collapse: collapse; 设置边框的合并
border-collapse: collapse;
  • 如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody,并且将tr全都放到tbody中tr不是table的子元素

3.表单(form)

  • 使用form标签来创建一个表单
  • action 表单要提交的服务器的地址
  • 数据要提交到服务器中,必须要为元素指定一个name属性值
<input type="text" name="username">
  • 单选按钮
    • 像这种选择框,必须要指定一个value属性,value属性最终会作为用户的填写的值传递给服务器
    • checked 可以将单选按钮设置为默认选中
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
  • 多选框
<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>
  • 下拉列表
<select name="haha">
          <option value="i">选项一</option>
          <option selected value="ii">选项二</option>
          <option value="iii">选项三</option>
      </select>
  • 提交按钮
<input type="submit" value="注册">

属性

  • autocomplete="off" 关闭自动补全
  • readonly 将表单项设置为只读,数据会提交
  • disabled 将表单项设置为禁用,数据不会提交
  • autofocus 设置表单项自动获取焦点
<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按钮 -->
      <input type="reset">
      <!-- 普通的按钮 -->
      <input type="button" value="按钮">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按钮</button>
  </form>

4.注释

<!--
我是注释中的注释 注释不能嵌套
-->

5.属性

  • 属性,在标签中(开始标签或自结束标签)还可以设置属性
  • 属性是一个名值对(x=y)
  • 属性用来设置标签中的内容如何显示
  • 属性和标签名或其他属性应该使用空格隔开
  • 属性不能瞎写,应该根据文档中的规定来编写,有些属性有属性值,有些没有。如果有属性值,属性值应该使用引号引起来

6.文档声明

<!doctype html>