第四篇 HTML 表单深入了解、注释和a标签的运用

表单深入了解、注释和a标签的运用

注释,HTML中的注释格式:

开头  <!--  结束 -->   例子: <!-- <div>我被注释了</div>  --> 此注释可多行注释,如果只有开头注释, 没有结束注释,那么从开头注释以下的所有内容将会全部被注释掉;还可以用鼠标点击某行 按下 快捷键  "Ctrl + /"注释,也可选择多行再注释。

注释的用处:将无效的代码注释掉,或许它将来有用或考虑二次开发,所以不用删除掉,而是选择注释掉,源代码都不是中文,注释的用处还可以是 中文解释,提醒自己,这里是怎么做的,告诉他人这里是什么模块及思想。

注释掉的代码,程序是不会运行的,所以不会影响程序运行速度,但是注释掉的代码,它依旧存在着,在文件里,内存不会变小,比如你写一个登录页面,此文件大小 10KB,即使你将里面的所有代码注释掉,文件大小依旧是10KB。

深入表单:

<form action="#" method="post">
    <p>
        <!--在登录时,一般用在用户名-->
        文本:<input type="text"/>
    </p>
    <p>
        <!--在登录时,一般用在密码-->
        密码:<input type="password"/>
    </p>
    <p>
        <!--在个人信息中,一般选择你的爱好,性格等,多选-->
        复选: 苹果<input type="checkbox"/>
               西瓜<input type="checkbox"/>
    </p>
    <p>
        <!--单选的 name值必须一致 才能归类成一类 单选-->
        单选:男<input name="gender" type="radio"/>
              女<input name="gender" type="radio"/>
    </p>
    <p>
        <!--隐藏文本框,它存在,但看不见-->
        <input type="hidden"/>
    </p>
    <p>
        <!--下拉列表,我们还会用跟这个做三级浮动,比如 中国的 省、市、县-->
       下拉列表: <select name="xiala" id="xiala">
            <option value="眼睛">眼睛</option>
            <option value="笑容">笑容</option>
            <option value="嘴巴">嘴巴</option>
        </select>
    </p>
    <p>
        <!--大家在评论或者发表的时候,就会用到这个,和文本框性质差不多,不过更合适用来写文本内容-->
        多行文本:<textarea name="text" id="text" cols="30" rows="10"></textarea>
    </p>
    <p>
        <!--它是提交整个form表单,获取这个表单里面的 input select textarea 然后到action指向的地址-->
        提交按钮:<input type="submit"/>
    </p>
</form>

表单中,标签里出现的 "name" 是它的名字,如果说传输到后台做验证,后台获取它的数据,就是通过name来获取的,而value则是它的值。

以上form中的标签,几乎可以使用在所有的登录、注册、个人信息等地方,在HTML5中还扩展了几个属性值,这里就不做说明,有兴趣的同学可以去手册里看看。

a标签的使用!

a标签的写法:

<a href="http://www.baidu.com">百度</a>

在有网的情况下,就会跳转到百度页面,"href"就是地址的指向,a标签不能没有它,访问本地的页面,则就改成文件的名字即可,比如:<a href="my.html">我的</a>    要注意的是,你的文件位置,目录要在一个等级下。

再说一个a标签的锚点使用,它经常用在网站,在浏览到中间部分或者底部的时候,可以点击它,回到顶部,那么做法很简单:

<div id="top" style="height: 600px;background-color: #d6e9c6">我是顶部</div>
<div style="height: 600px;background-color: #b2dba1">我是中间内容</div>
<a href="#top">返回顶部</a>

这里面我们用了css样式,设置了div的高为600px,和背景颜色。给了顶部div 一个id,而a标签则指向这个id,#代表本页,不做其他页面的跳转,#top 就是在本页里寻找top,这样就能返回顶部了,就是锚点的做法。

时间: 2024-08-10 19:08:58

第四篇 HTML 表单深入了解、注释和a标签的运用的相关文章

Vue基础篇--7表单输入绑定input

Vue基础篇--7表单输入绑定input 1.基础语法 你可以用 v-model 指令在表单 . 及 `元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但v-model` 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. 注意: v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data

Java+MyEclipse+Tomcat (四)Servlet提交表单和数据库操作

前面三篇文章讲述了如何配置MyEclipse和Tomcat开发JSP网站.如何配置Servlet简单实现表单提交.如何配置MySQL实现JSP数据库查询. 这篇文章主要讲述Servlet表单的提交.Java中实现数据库的查询操作和自己遇到的瓶颈及理解.Java Web基础性文章,希望对大家有所帮助~ Java+MyEclipse+Tomcat (一)配置过程及jsp网站开发入门 Java+MyEclipse+Tomcat (二)配置Servlet及简单实现表单提交 Java+MyEclipse+

[AngularJS] AngularJS系列(3) 中级篇之表单验证

目录 基本验证 验证插件messages 自定义验证 基本验证 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <form name="form" novalidate ng-app>     <span>{{form.$invalid}}</span>     <span>{{form.$valid}}</span>     <span>{{form.$dirty}}</spa

第三篇 HTML 表单及表格

表单及表格 表单,常用在登录.注册等地方,这也是一个最基本的. 我们就用登录,来学习什么是表单! 表单 form 标签,在某些好用的编辑工具,比如:WebStorm  你在上面写出form再按下 键盘左侧的'Tab'键,会直接弹出form的开始和结束标签,其他元素 div table span 等都是一样的,还会弹出此元素必要的 属性, 比如img 按下 'Tab' 就会弹出 这样的 <img src="' /> 它会直接帮你写好. 来吧,继续说form表单,因为是介绍给入门同学的,

(四) HTML之表单元素

HTML中的表单元素,是构成动态网页的重要组成部分,因此,熟知表单元素是十分重要的.下面将根据表单中的一些常用标签进行介绍 1.单选按钮 <input type="radio" name="sex" value="man" checked/>男 <input type="radio" name="sex" value="weman"/>女 其中,name必须相同.

表单和验证事件以及marquee标签

1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码,身份证号,邮箱,信用卡号等的验证:需要用到正则表达式来进行验证. (5).其它验证 2.正则表达式 用符号来描述书写规则:/ 中间写正则表达式 / ^ :匹配开头,$:匹配结尾 : /^ve/以ve开头的 /ve$/以ve结尾 \d:一个任意的数字 \w:一个任意的数字或字母 \s:任意的字符串 {n}:把左

[oldboy-django][2深入django]老师管理 -- form表单如何生成多选框标签,多选框的默认值显示,以及多选框数据插入到数据库,多选框数据更改到数据库

1 form表单如何生成多选框(包含了多选框可选择内容) - Form设置班级输入框为 select多选 - 多选 class TeacherForm(Form): name = fields.CharField(max_length=16, widget=widgets.TextInput(attrs={'class': 'form-control'}) ) cls = fields.MultipleChoiceField( choices=models.Classes.objects.val

js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param {object} 参数对象 * url 必填 提交地址 * methond 选填 默认post 提交方式 post get * target 选填 默认_self 当前页面还是新页面 _self _blank * 其它参数 */ function jsFormSubmit(params) { var turnForm = document.createElement("form"); //一定要

数据结构第四篇——线性表的链式存储之双向链表

?注:未经博主同意,不得转载. 前面讨论的单链表,每个结点中只有一个指针域,用来存放指向后继结点的指针,因此,从某个结点出发只能顺时针往后查找其他结点.若要查找某个结点的直接前驱,则需要从头指针开始沿链表探寻,处理起来十分不方便.为克服单链表的这一缺点,可引入双向链表. 双向链表中每一个结点含有两个指针域,一个指针指向其直接前驱结点,另一个指针指向直接后继结点.和单链表类似,双向链表一般也只有头指针唯一确定:同样也可设头结点,使得双向链表的某些操作简便一些. 双向链表结构定义如下:  双向链表是