html入门(列表、表单、常用表单控件、浮动框架、iframe、 摘要与细节、度量标签)

一、列表
    1.作用:默认显示方式为从上到下的显示数据
    2.列表的组成 列表类型和列表项
    3.列表的分类:有序列表   无序列表   自定义列表

无序列表语法为ul>li,

语法:ul代表列表,li代表列表项

有序列表语法为ol>li,

语法:ol代表列表,li代表列表项

自定义列表,用法:

<dl>

  <dt>1</dt>

  <dd>1</dd>

</dl>
语法: dl列表的类型 dt列表的标题 dd 列表项

二、表单

1.表单的作用:

用于显示、收集用户信息,并将信息提交给服务器

2.表单组成

  1.表单元素:负责将用户数据提交给服务器

  2.表单控件:负责接收用户的数据(和用户进行交互的)

    表单元素常用属性:

          action=URL,规定当提交表单时向何处发送表单数据。

          method=get或者post,规定用于发送 form-data 的 HTTP 方法。

          name=“表单名称”,规定表单的名称。

          target=_blank、_self、_parent、_top、framename,规定在何处打开 action URL。

关于get传输和post传输:

GET的优点:

1.执行效率比POST高。

2.可以通过url传递数据,查找数据的时候就会体现到它的好处。

GET的缺点:

1.安全性很低,因为上传的数据都会显示在url上,所以一般用在上传无关紧要的数据上。

2.上传的数据量较小,一般不能超过4K.这也是因为url的长度而被限制的。

POST优点:

1.安全性高,但是也不是很高,如果想要高安全性的话就用https传输协议。

2.上传的数据量比GET大得多。“理论上讲,POST是没有大小限制的,HTTP协议规范也没有进行大小限制,说“POST数据量存在 80K/100K的大小限制”是不准确的,POST数据是没有限制的,起限制作用的是服务器的处理程序的处理能力。”

POST缺点:

1.执行效率比GET低,但是现在的计算机都很强大,这些几乎可以忽略不计,所以建议一般都使用POST方式。

2.不可以通过url传递数据,有时候可能会不方便。

表单控件:提供多个类型的表单控件,并具有可视化的外观。

<input> 元素是最重要的表单元素。

<input>常用属性:

        1.autofocus:规定输入字段在页面加载时是否获得焦点。(不适用于 type="hidden")

2.value:规定 input 元素的值。

3.src:定义以提交按钮形式显示的图像的 URL。

    4.align:规定图像输入的对齐方式。

5.checked:规定此 input 元素首次加载时应当被选中。

6.disabled:当 input 元素加载时禁用此元素。

7.form:规定输入字段所属的一个或多个表单。

8.name:定义 input 元素的名称。

9.readonly:规定输入字段为只读。

10.required:指示输入字段的值是必需的。

11.size:定义输入字段的宽度。

12.value:规定 input 元素的值。

13.height:定义 input 字段的高度。(适用于 type="image")

14.width:定义 input 字段的宽度。(适用于 type="image")

        15.type:button:定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。

checkbox:定义复选框。

file:定义输入字段和 "浏览"按钮,供文件上传。

hidden:定义隐藏的输入字段。

image:定义图像形式的提交按钮。

password:定义密码字段。该字段中的字符被掩码。

radio:定义单选按钮。

reset:定义重置按钮。重置按钮会清除表单中的所有数据。

submit:定义提交按钮。提交按钮会把表单数据发送到服务器。

text:定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

<select>  <!--下拉列表元素-->

<option>下拉列表项</option>

</selece>

<select>常用属性:

          1.autofocus:规定在页面加载后文本区域自动获得焦点。

        2.disabled:规定禁用该下拉列表。

        3.form:规定文本区域所属的一个或多个表单。

        4.multiple:规定可选择多个选项。

        5.name:规定下拉列表的名称。

        6.required:规定文本区域是必填的。

        7.size:规定下拉列表中可见选项的数目。(大于1的时候会变成滚动列表)

<textarea>  <!--文本域-->

<textarea>常用属性:

        1.autofocus:规定在页面加载后文本区域自动获得焦点。

        2.cols:规定文本区内的可见宽度。

        3.disabled:规定禁用该文本区。

        4.form:规定文本区域所属的一个或多个表单。

        5.name:规定文本区的名称。

        6.readonly:规定文本区为只读。

        7.required:规定文本区域是必填的。

        8.rows:规定文本区内的可见行数。

        9.placeholder:规定描述文本区域预期值的简短提示。

关于关联input控件使得点击<label>实现对应控件焦点选中状态

1.首先在要关联的input控件上加上一个id

2.用label标签包含住文本并且加上for属性

三、浮动框架
  作用:可以在一个浏览器窗口中同时显示多个页面文档
  第一种用法
    <iframe src="url" width="500px" height="500px"></iframe>
  第二种用法 和超链接的结合使用
    1.创建超链接标签
    2.创建iframe标签
    3.在iframe加上一个name属性
    4.改变超链接的target属性 改变为name的值

四、摘要与细节
  作用: 标签规定了用户可见的或者隐藏的需求的补充细节。

      标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
  语法:第一步写上 摘要标签 details
       第二步 写上标题 summary
       第三步 写内容

<details>

<summary>显示内容(点击显示下列隐藏内容)</summary>

<p>隐藏内容</p>

<p>隐藏内容</p>

</details>

     注意:目前,只有 Chrome 和 Safari 6 支持 details 标签。
五、度量标签
<!--度量标签
min:最小值
max:最大值
value:当前显示的度量值0
-->
<meter min="0" max="50" value="50"></meter>
<!--高亮标签-->
<mark>内容</mark>

原文地址:https://www.cnblogs.com/MDZZZ/p/12000279.html

时间: 2024-10-09 00:35:38

html入门(列表、表单、常用表单控件、浮动框架、iframe、 摘要与细节、度量标签)的相关文章

Android 用户表单融合各类简易控件以及融入FloatingActionButton以及butterknife(一)

转载请注明出处王亟亟的大牛之路 空了2个礼拜,终于开始有事做了,用了午休时间和下午的大概1个小时,完成了这个例子,让小伙伴们,对一些常用的表单所需的控件,做一个温故,再配合炫酷的FloatingActionButton以及好用butterknife,可以有效的提高我们的效率. 本文为2部分,还有部分图片上传啊一些功能明天再做了,今天 有点来不及了. 包结构: 项目是Android Studio的所以贴下Gradle配置: apply plugin: 'com.android.applicatio

b/s和C/S方法用C#递归方法把数据表加载到treeview控件中

先看一下数据库的结构: 表结构如下所示: Num                   Name                                 fatherNum       BZ 01                      总节点                                      0              ...... 0101                   第一个一级节点                          01      

【读书笔记-《Android游戏编程之从零开始》】6.Android 游戏开发常用的系统控件(TabHost、ListView)

3.9 TabSpec与TabHost TabHost类官方文档地址:http://developer.android.com/reference/android/widget/TabHost.html Android 实现tab视图有2种方法,一种是在布局页面中定义<tabhost>标签,另一种就是继承tabactivity.但是我比较喜欢第二种方式,应为如果页面比较复杂的话你的XML文件会写得比较庞大,用第二种方式XML页面相对要简洁得多. <?xml version="1

【读书笔记-《Android游戏编程之从零开始》】3.Android 游戏开发常用的系统控件(Button、Layout、ImageButton)

3.1 Button Button这控件不用多说,就是一个按钮,主要是点击后进行相应事件的响应. 给组件添加ID属性:定义格式为 android:id="@+id/name",这里的name是自定义的,不是索引变量."@+"表示新声明,"@"表示引用,例如:"@+id/tv" 表示新声明一个id,是id名为tv的组件:"@id/tv" 表示引用id名为tv的组件. 给按钮添加点击事件响应  想知道按钮是否被

【读书笔记-《Android游戏编程之从零开始》】8.Android 游戏开发常用的系统控件(系统控件常见问题)

Android 中常用的计量单位Android有时候需要一些计量单位,比如在布局Layout文件中可能需要指定具体单位等.常用的计量单位有:px.dip(dp).sp,以及一些不常用的pt.in.mm.下面详细介绍下这些计量单位之间的区别和联系.in:英寸(长度单位):mm:毫米(长度单位):pt:磅/点,1/72英寸(一个标准的长度单位):sp:全名 scaled pixels-best for text size,放大像素,与刻度无关,可以根据用户的字体大小就行缩放,主要用来处理字体的大小:

【读书笔记-《Android游戏编程之从零开始》】5.Android 游戏开发常用的系统控件(ProgressBar、Seekbar)

3.7 ProgressBar ProgressBar类官方文档地址:http://developer.android.com/reference/android/widget/ProgressBar.html 在Android应用开发中,ProgressBar(运行进度条)是比较常用到的组件,例如下载进度.安装程序进度.加载资源进度显示等.在Android中提供了两种样式来分别表示在不同状态下显示的进度条,下面来实现这两种样式.默认进度条是圆形,通过style属性来指定系统进度条的大小:sty

【读书笔记-《Android游戏编程之从零开始》】4.Android 游戏开发常用的系统控件(EditText、CheckBox、Radiobutton)

3.4 EditText EditText类官方文档地址:http://developer.android.com/reference/android/widget/EditText.html EditText继承TextView,所以EditText具有TextView的属性特点,下面主要介绍一些EditText的特有的输入法的属性特点android:layout_gravity="center_vertical":设置控件显示的位置:默认top,这里居中显示,还有bottomand

AxcUIKit,一个快速搭建常用UI的控件集合库

空闲下来后,总结了iOS项目开发中常用的几个控件和复用性,就做了一个AxcUIKit,主要用来快速完成项目中的细节需求,其中部分控件是沿用或改造的其他优秀的开源三方库,如: RBPlayer.M13BadgeView.WLUnitField.PPDragDropBadgeView.SDProgress.TTGTagCollectionView.HCSStarRatingView.FSPagerView.DGActivityIndicatorView等等. 每个作者都通过邮件联系过,声明过使用和改

JavaFX 初学入门(一):FXML嵌套与原始控件继承

说明 之前由于做一个小项目需要用swing,结果swing把我折腾的够呛.后来得知有javaFX这个类似于C#中WPF形式的利用XML来写界面的框架之后,马上就转到javaFX上了.找过一些资料但是帮助都不大,最后还是选择直接看官方demo.(我之前是做过android app,有些东西其实都是差不多的.) 下面选取官方demo中的一个 UnlockCustom . 这个demo中涉及到 继承原始控件(自定义),FXML 布局嵌套,以及一些控件动画等. 一.javaFX的入口函数 整个javaF

android中常用的小控件------Widgets的使用

好久没有写博客了,都不知博客怎么写了,最近突然想写博客,以帮助更多的人,却又不知道写什么好呢? 好吧  我承认我有点懒惰了,可是程序猿是不应该懒惰的哦,俺要做个好孩子. 好了言归正传,开始介绍下今天的主要内容吧! Widgets一个桌面的小控件    个人认为是很常用的,不知道大神们是不是这么觉得的呢?比如说你开发的一款音乐播放器的软件,可把基本的上一曲和下一曲.暂停的几个功能放在这个小控件里面将它显示在桌面上来,这样就很方便啦,你想要下一曲.上一曲.暂停播放的时候,就不用再打开播放器了,而是直