新手学习HTML笔记(三)区块布局与表单

导航

·新手学习HTML笔记(一)标签_简单网页的结构解析
·新手学习HTML笔记(二)表格与列表
·新手学习HTML笔记(三)区块布局与表单

文章目录

  • 导航
  • 1.区块布局
    • 举个例子:区块容器
  • 2.表单
    • 一.表单常用属性
    • 二.表单的子标签
      • ①.结构属性标签
        • Ⅰ.label
          • 定义label捆绑对象
        • Ⅱ.fieldset
          • 定义fieldset标题
      • ②.功能标签
        • Ⅰ.输入域input
          • 输入域常用属性
            • 输入type类型
        • Ⅱ.文本框textarea
          • 文本框常用属性
        • Ⅲ.下拉菜单select
          • 选项分组
        • Ⅳ.按钮button
          • 按钮属性
            • 按钮type属性

整理自菜鸟教程,便于复习和查阅
->原教程传送门<-

1.区块布局

HTML元素被定义为块级元素内联元素,块级元素通常以换行符作为开始或结尾,
而内联元素不以换行符作为开始或结尾

将同一类型的几个元素关联组合成一个整体的容器可以很方便的定义文档的布局

标签 作用
块级元素容器
定义文档区块
内联元素容器
组合文档的行内元素

对于HTML布局,大多数网站会使用div或table设计,CSS用于元素定位

举个例子:区块容器

将标题和文本组合在容器内,便于管理

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
	</head>
	
	<body>

		<div id="container">
			<div id="header">
				<h1>主要的网页标题</h1>
				<p>第一段</p>
			</div>
			
		</div> 
	</body>
</html>

不同样式文本的组合

<p>Hello <span style="font-weight:bold">World!</span></p>

2.表单

表单用于收集用户的输入,定义标签:

标签内写入提示文本和放置子标签以完成相对应的功能

一.表单常用属性

属性 作用
action URL 定义表单发送数据的地址
method get、post 定义发送数据的HTTP方法
name text 定义表单名称

二.表单的子标签

①.结构属性标签

标签 作用
定义元素的标注
定义一组表单元素,并加边框

Ⅰ.label

标签 定义元素的标注,标注定义在标签内部

定义label捆绑对象

通常声明属性for值为id将之与相关元素捆绑

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label
元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

Ⅱ.fieldset

标签

定义一组表单元素,并加边框

元素定义在标签内部

定义fieldset标题

使用子标签定义

②.功能标签

标签 作用
定义输入域
定义文本框
定义下拉菜单
定义一个按钮

Ⅰ.输入域input

标签提供输入

输入域常用属性
属性 作用
type text 定义输入属性
name text 定义可见区域名称
value text 定义传值对象名称
maxlength number 定义输入最大长度
输入type类型
type 作用
text 定义文本域
password 定义密码字段
radio 定义单选框
checkbox 定义复选框
submit 定义提交按钮
reset 定义重置按钮

文本域宽度默认20个字符

Ⅱ.文本框textarea

标签定义文本框

默认值写在标签内

文本框常用属性
属性 作用
cols number 定义宽度
rows number 定义行数
name text 定义可见区域名称

Ⅲ.下拉菜单select

标签定义下拉选择框,使用子标签定义选项

选项值通过属性value定义,选项可见名在标签内部定义

选项分组

使用子标签定义

同组选项使用子标签定义在标签内部

分组名以属性label定义

Ⅳ.按钮button

标签定义按钮

按钮提示文本置于标签内部

必须对button添加type属性,值为button

标签内部可以放置内容,如文本或图像

按钮属性
属性 作用
disable Null 停用按钮
type text 定义按钮属性
name text 定义按钮名称
支持全局属性和事件属性
按钮type属性
type 作用
button 定义普通按钮
submit 定义提交按钮
reset 定义重置按钮

与使用输入域标签定义按钮的作用相同

欢迎在评论区留言
感谢浏览

你可能感兴趣的:(#,HTML,html)