前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML学习笔记二

HTML学习笔记二

作者头像
Mirror王宇阳
发布2020-11-10 23:08:37
1.7K0
发布2020-11-10 23:08:37
举报
文章被收录于专栏:Mirror的技术成长

HTML表单:

  • HTML表单用于搜集不同类型的输入
< form >标签元素:
  • HTML表单用于收集用户输入; form元素定义HTML表单
< form >属性列表:

属性

描述

accept-charset

规定在被提交表单中使用的字符集(默认:页面字符集)。

action

规定向何处提交表单的地址(URL)(提交页面)。

autocomplete

规定浏览器应该自动完成表单(默认:开启)。

enctype

规定被提交数据的编码(默认:url-encoded)。

method

规定在提交表单时所用的 HTTP 方法(默认:GET)。

name

规定识别表单的名称(对于 DOM 使用:document.forms.name)。

novalidate

规定浏览器不验证表单。

target

规定 action 属性中地址的目标(默认:_self)。

表单元素:

表单元素指的是不同类型的 input元素、复选框、单选按钮、提交按钮……等

< input >标签:

< input >标签元素最重要的是 表单元素,标签根据不同的 type 属性,有多态性。

  • 文本输入:
代码语言:javascript
复制
<input type="text" />
  • 定义单选按钮输入
代码语言:javascript
复制
<input type="radio" />
  • 定义提交按钮
代码语言:javascript
复制
<input type="submit" />
action属性:
  • 定义在提交表单是执行的动作

向服务器提交表单的通常做法是提交按钮(submit)

action属性可以指定特定的脚本来处理被提交的表单数据

代码语言:javascript
复制
<form action="*.php[/.jsp/.asp]"></form>
method属性:
  • 定义提交表单时候所用的HTTP方法(GET或POST)
代码语言:javascript
复制
<form action="*.php[/.jsp/.asp]" method="GEP[/POST]"></form>

使用技巧: 如果表单提交是被动的(比如搜索查询),并且没有重要数据。 使用GET时,表单提交的数据在URL中是可见的 反之—— 表单是动态更新或者密码内容的,POST更加适合,而且提交的数据在URL不可见

name属性:

如果希望提交的表单数据可以被服务器获取到或者看见,就需要给表单元素添加一个name属性(在脚本中会按照字段接收数据信息)

< fieldset >标签:组合表单元素
  • < fieldset >组合表单中的相关数据
  • < legend >元素为< fieldset >元素定义标题
代码语言:javascript
复制
<!DOCTYPE html>
<html>
	<head>
		<title>用户</title>
	</head>
	<body>
		<form method="POST">
			<fieldset>
				<legend>用户注册</legend>
				用户名:<br />
				<input type="text" name="name" />
				<br />
				密  码:<br />
				<input type="text" name="passworld" />
				<br />
				<input type="submit" value="确定" name="input" />
			</fieldset>
		</form>
	</body>
</html>
< select >标签:下拉列表
  • < select > 标签是开始 < option > 元素定义可选择的选项
代码语言:javascript
复制
<select>
	<option value="中国">中国</option>
	<option value="美国">美国</option>
</select>
< textarea>标签:文本域
  • 定义一个文本域(多行输入字段)
  • rows / cols:文本域大小(px)
< button >标签:按钮
  • 定义一个可点击的元素按钮

HTML输入:

type属性(输入类型):

描述

button

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

checkbox

定义复选框。

file

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

hidden

定义隐藏的输入字段。

image

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

password

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

radio

定义单选按钮。

reset

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

submit

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

text

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

number

用于包含数字值的输入字段

date

定义日期字段的输入

color

定义颜色的输入

range

定义一个范围的 滑块控件

month

定义日期字段输入或选择

输入限制(属性):

属性

描述

disabled

规定输入字段应该被禁用。

max

规定输入字段的最大值。

maxlength

规定输入字段的最大字符数。

min

规定输入字段的最小值。

pattern

规定通过其检查输入值的正则表达式。

readonly

规定输入字段为只读(无法修改)。

required

规定输入字段是必需的(必需填写)。

size

规定输入字段的宽度(以字符计)。

step

规定输入字段的合法数字间隔。

value

规定输入字段的默认值。

height

规定高度(image)

width

规定宽度(image)

HTML图形:*

HTML多媒体:

视频格式:

AVI,WMV,MPEG,MOV,Flash(.swf/.flv),MP4……

声音格式:

​ MIDI,rm,WAVMP3

Object 元素:*

object的作用是支持HTML助手(插件)

HTML音频:
使用< embed >元素标签:
代码语言:javascript
复制
<embed height="100" width="100" src="/*.mp3" />
使用< object >元素标签:
  • < object tag > 标签可以定义外部内容的容器
代码语言:javascript
复制
<object height="100" width="100" data="/*.mp3" />
使用 < audio >元素标签:(HTML5)
代码语言:javascript
复制
<audio control="controls">
    <source src="/*.mp3" type="audio/mp3" />
</audio>
HTML视频:
使用 < embed >元素标签:
代码语言:javascript
复制
<embed src="/*.mp4" height="200" width="200" />
使用< object >元素标签:
代码语言:javascript
复制
<object data="/*.mp4" height="200" width="200" />
使用< video >元素标签:(HTML5)
代码语言:javascript
复制
<video width="300" height="250" controls="controls">
    <source src="/*.mp4" type="video/mp4" />
</video>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-08-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • HTML表单:
    • < form >标签元素:
      • < form >属性列表:
    • 表单元素:
      • < input >标签:
        • action属性:
        • method属性:
        • name属性:
      • < fieldset >标签:组合表单元素
        • < select >标签:下拉列表
          • < textarea>标签:文本域
            • < button >标签:按钮
            • HTML输入:
              • type属性(输入类型):
                • 输入限制(属性):
                • HTML图形:*
                • HTML多媒体:
                  • 视频格式:
                    • 声音格式:
                      • Object 元素:*
                        • HTML音频:
                          • 使用< embed >元素标签:
                          • 使用< object >元素标签:
                          • 使用 < audio >元素标签:(HTML5)
                        • HTML视频:
                          • 使用 < embed >元素标签:
                          • 使用< object >元素标签:
                          • 使用< video >元素标签:(HTML5)
                      相关产品与服务
                      容器服务
                      腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档