三、表单元素

①<form></form>表单标签,代表表单

主要属性:1、action提交到的页面。   2、method数据提交方式(get显示提交,有长度限制。post隐式提交)

②文本类(name值必须写)

1、<input />

1.文本框type="text"。value文本框的值(框内显示默认内容),name文本框的名称。

2.密码框type="password"。value密码框的值(默认密码),name密码框的名称。

3.隐藏域type="hidden"。value隐藏域的值(默认,但不显示),name隐藏域的名称。

2、<textarea></textarea>文本域

常见属性:

disable="disable"禁用该文本域。

form_id规定文本域所属的表单。

cols="number"规定文本域内的可见宽度。

rows="number"规定文本域的可见行数。

maxlength="number"规定文本域的最大字符数。

readonly="readonly"规定文本域为只读。

!注释:文本域的value值写在双标签中间。

③按钮类(value值必须写)

1.普通按钮type="button"。name按钮名称,value按钮上显示的文字。

2.提交按钮type="submit"。name按钮名称,value按钮上显示的文字。

3.重置按钮type="rest"。name按钮名称,value按钮上显示的文字。功能:将表单里面的所有内容重置为默认。

4.图片按钮type="image"。name按钮的名称,src图片来源地址。

④选择按钮

1.单选按钮type="radio"。name按钮组的名称(相同name下的多个radio为单选),vlaue按钮的值

2.复选框,多选按钮type="checkbox"。name复选框的 名称,value复选框的值。

!附:对象方法:blur()移开焦点,click(一次鼠标点击),focus赋予焦点。

3.下拉列表<select></select>。

常见属性:

name下拉列表名称。

multiple="multiple",规定多选,按住ctrl键。

from_id,规定所属的表单id。html5

autofocus=“”autofocus“,规定页面加载后自动获得焦点。html5

required="required",规定区域是必填的。html5

disable="disable",规定禁用。

size下拉列表的可选项目数:=1时为菜单。>1时为下拉列表。

<option></opyion>下拉列表的项标签,每一个代表一项选项。value该项的值。selected="selected"默认选中一项。

4.文件选择type="file"。name文件选择的名称。

5。<label></label>标签为input标签定义标注标记。for="id",id与关联的input的id相同,使此标签获得指向id的input。

<form action="a.html">
<input type="text" name="tet" />文本框
<input type="password" name="pass" />密码框
<input type="hidden" name="hid" />隐藏域
<textarea>文本域</textarea>
<input type="button" value="按钮" id="a" />普通按钮
<input type="submit" value="提交" />提交按钮
<input type="reset" value="重置" />重置按钮
<input type="image" src="1.jpg" />图片按钮
<input type="radio" name="rad" /><input type="radio" name="rad" />
<input type="checkbox" name="check" /><input type="checkbox" name="check" />
<select name="sele">
<option>选项1</option>
<option selected="selected">选项2</option>
<option>选项3</option>
</select>
<input type="file" name="文件选择" />文件选择
<label for="a">指向id为a的按钮</label>
</form>

四、框架标签

①<framest></framset>框架集。!注释:如果使用该标签该页面不能有body标签。

属性:cols="number,number"左右拆分。

rows="number,*"上下拆分。

frameborder边框,默认为1。

<frame />框架,是<framest>中的一个框架。src显示指向地址,scrolling滚动条属性。

<frameset cols="30%,*">
<frame src="a.html" />
<frameset rows="300px,*">
<frame src="b.html" />
<frame src="c.html" />
</frameset>
使用frameset标签时页面内不能用body标签
</frameset><noframes></noframes>

②<iframe>行内框架,可以包含在一个普通的页面中。sec显示地址,width、height宽高,frameborder边框,scrolling滚动条。

<body>
<iframe src="a.html"></iframe> </body>

六、其他标签

①<marquee></marquee>滚动标签。direction滚动方向,内容可以是 文字、图片。

②<mark></mark>标记标签,标记文字。

③<hr />分割线。效果就是一条直线。

④<embed></embed>嵌入视频标签。最简单的方法就是点击视频分享复制HTML代码到页面。

⑤<video></video>视频标签。格式只能是MP3、MP4。

常用属性:

src视频路径

controls播放控件

autoplay自动播放(页面加载完后)

loop循环播放

width、height宽高

⑥<audio></audio>音频标签,  <source>子标签 src音频位置。

controls播放控件

autoplay自动播放

loop循环播放

<body>
<marquee>滚动标签<img />滚动图片</marquee>
<font>标记文字<mark>它</mark>,标记它</font>
<hr />分割线
<embed src="">嵌入网页视频,直接复制粘贴html代码</embed>
<video src="a.mp4">视频只能是MP3、MP4格式</video>
<audio controls="controls" loop="loop"><!--添加了播放控件以及自动播放-->
<source src="b.mp3" />
</audio> </body>

HTML学习-2标记标签-2的更多相关文章

  1. HTML学习-2标记标签-1

    大致可以分为以下6类学习: 1.通用标签. 2.常用标签. 3.表格标签. 4.表单元素. 5.框架. 6.其他. 一.通用标签.及属性 1.<body></body>标签,主 ...

  2. 学习笔记_Java_day13_JSTL标签库(1、2、3、4、5、6、7、8)

    1.一种标签语言 day13 l  JSTL标签库(重点) l  自定义标签(理解) l  MVC设计模式(重点中的重点) l  Java三层框架(重点中的重点) JSTL标签库 1 什么是JSTL ...

  3. java continue break 关键字 详解 区别 用法 标记 标签 使用 示例 联系

    本文关键词: java continue break 关键字 详解 区别  用法 标记  标签 使用 示例 联系   跳出循环 带标签的continue和break 嵌套循环  深入continue ...

  4. JUnit5学习之五:标签(Tag)和自定义注解

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  5. HTML学习笔记之标签基础

    目录 1.基本标签 2.链接 3.图像 4.表格 5.列表 6.块与布局 1.基本标签 (1)标题与段落 标签 <h1> ~ <h6> 分别用于定义一至六级标题,标签 < ...

  6. 前端学习(一) body标签(上)

    body标签中相关标签 主要内容: 字体标签:  h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...

  7. 重温JSP学习笔记--JSTL标签库

    以前写jsp的时候对jstl标签库是有些抵触的,因为我觉得嵌入java代码的方式几乎无往不利,没有必要使用标签库,不过这次复习还是好好地学习了一下,发现这个还是很有用处的,用得好能省不少事,JSTL是 ...

  8. JAVA学习Swing章节标签JLabel中图标的使用

    package com.swing; import java.awt.Color; import java.awt.Component; import java.awt.Container; impo ...

  9. JQery w3school学习第一章 标签的隐藏和显示

    鄙人初学JQuery,最关键的是JQuery获取标签对象的方式 这一章学习的是点击按钮让所有标签的文字以及标签栏的位置隐藏起来,因为单纯的隐藏文字,还是会有空格和空行的影响 这里最关键的代码就是 $( ...

随机推荐

  1. C++之单例类模板

    单例类模板:一个类只能有一个对象,比如超市收银系统中清点物品的仪器只有一个 设计思路: 1.构造函数,拷贝构造函数必须设计为private,防止自己生成新的对象 2.且类的指针要设计为static类型 ...

  2. google最新的书签导入导出

    1.google浏览器地址栏最右边,自定义及控制--->书签----->书签管理器 2. 右上角,有整理图标, 3.点击按钮即可导入导出书签

  3. [UE4]地图缩放

    一.创建一个设置UI比例尺的函数 二.通过Get Cached Geometry获得当前UI实际显示的尺寸,Get Desired Size获得当前UI原始尺寸,计算得到UI缩放比例尺 三.地图比例尺 ...

  4. Course List for Student

    题目描述 Zhejiang University has 40000 students and provides 2500 courses. Now given the student name li ...

  5. python中文件操作

      打印进度条

  6. Java基础知识_毕向东_Java基础视频教程笔记(11-12 多线程)

    11天-01-多线程进程:是一个正在执行中的程序.每个进程执行都有一个执行顺序.该顺序是一个执行路径或者叫一个控制单元.线程:是进程中的一个独立的控制单元,线程在控制着进程的执行.一个进程至少有一个线 ...

  7. cocos源码分析--ClippingNode绘图原理

    在OpenGL 绘制过程中,与帧缓冲有关的是模版,深度测试,混合操作.模版测试使应用程序可以定义一个遮罩,在遮罩内的片段将被保留或者丢弃,在遮罩外的片段操作行为则相反.深度测试用来剔除那些被场景遮挡的 ...

  8. Structrued Streaming业务数据实时分析

    先启动spark-shell,记得启动nc服务 输入以下代码 scala> import org.apache.spark.sql.functions._ import org.apache.s ...

  9. mysql自动创建分区

    call Insert_Partition('2018-07-07','2019-01-01'); 存储过程 BEGIN DECLARE nowdate date; DECLARE endtmp da ...

  10. 'ascii' codec can't decode byte 0xd6 in position 0

    使用elastalert,执行python文件时报错: 经查,python命令下输出中文字符时需要将编码指定为gb2312,一开始博主也不知道是输出在控制台的信息编码格式问题,一直以为是博主自己的ya ...