2. 技术
    3. 新手学习HTML笔记（三）区块布局与表单

    新手学习HTML笔记（三）区块布局与表单

    技术2023-06-14  72

    导航

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

    文章目录

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

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

    1.区块布局

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

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

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

    对于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.表单

    表单用于收集用户的输入，定义标签：<form></form>

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

    一.表单常用属性

    属性值作用actionURL定义表单发送数据的地址methodget、post定义发送数据的HTTP方法nametext定义表单名称

    二.表单的子标签

    ①.结构属性标签

    标签作用<label></label>定义元素的标注<fieldset></fieldset>定义一组表单元素，并加边框

    Ⅰ.label

    标签 <label></label>定义元素的标注，标注定义在标签内部

    定义label捆绑对象

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

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

    Ⅱ.fieldset

    标签 <fieldset></fieldset> 定义一组表单元素，并加边框

    元素定义在标签内部

    定义fieldset标题

    使用子标签<legend></legend>定义

    ②.功能标签

    标签作用<input></input>定义输入域<textarea></textarea>定义文本框<select></select>定义下拉菜单<button></button>定义一个按钮

    Ⅰ.输入域input

    标签<input></input>提供输入

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

    文本域宽度默认20个字符

    Ⅱ.文本框textarea

    标签<textarea></textarea>定义文本框

    默认值写在标签内

    文本框常用属性
    属性值作用colsnumber定义宽度rowsnumber定义行数nametext定义可见区域名称

    Ⅲ.下拉菜单select

    标签<select></select>定义下拉选择框，使用子标签<option></option>定义选项

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

    选项分组

    使用子标签<optgroup></optgroup>定义

    同组选项使用子标签<option></option>定义在标签内部

    分组名以属性label定义

    Ⅳ.按钮button

    标签<button></button>定义按钮

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

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

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

    按钮属性
    属性值作用disableNull停用按钮typetext定义按钮属性nametext定义按钮名称支持全局属性和事件属性
    按钮type属性
    type作用button定义普通按钮submit定义提交按钮reset定义重置按钮

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

    完

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

    Processed: 0.017, SQL: 9