html-210130-01-优快云博客

本文详细介绍了HTML中的网页结构元素如header、footer、section、article、aside和nav的使用，以及iframe内联框架的配置。此外，还深入讲解了HTML表单的构成，包括不同类型的input元素、文本域、单选框、复选框、按钮、下拉框等，并探讨了表单验证的方法。最后，提到了一些增强表单可用性的属性，如hidden、readonly和disabled。

html - 210130 - 01

网页结构分析

header 标题头部区域内容（用于页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section web页面中一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容

<body>

<header><h3>网站头部</h3></header>

<section><h3>网站主体</h3></section>

<footer><h3>网站脚部</h3></footer>

</body>

iframe内联框架

<!--
	src：	引用页面地址
	name：	框架标识名
-->

<iframe src="path" name="mainFrame"	width=""  height="">
   
</iframe>

<body>
<!--
	1.0
-->
<iframe src="//www.baidu.com/" name="" width="1000px" height="800px"></iframe>

<!--
	2.0
	在内联框架中打开一个网站
-->
<iframe src="" name="bilibili"></iframe>
<a href="https://www.bilibili.com/" target="bilibili">b站</a>

</body>

表单

<!--
	method:		规定如何发送表单数据，常用值  post|get
	action:		表示向何处发送表单数据
-->

<from method="" action="">
    <p>
        姓名：<input type="text" name=username value="白光一" maxlength="8" size="30">
    </p>
    <p>
        密码：<input type="password" name=psd>
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</from>

input属性：

type：
1. text（默认为text）
2. password
3. checkbox
4. radio
5. submit
6. reset
7. file
8. hidden
9. image
10. button
name：

指定元素名称
value：

元素初始值，type为radio时必须指定一个值
size：

指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength：

type为text或password时，输入的最大字符数
checked：

type为radio或checkbox时，指定按钮是否是被选中

文本

<!--
	redonly		不能修改（只读）
-->
<p>
  姓名：<input type="text" name=username value="白光一" maxlength="8" size="30" redonly>
</p>


<!--
	hedden		隐藏（可以设置初始值）
-->
<p>
        密码：<input type="password" name=psd hidden value="1111111">
</p>

单/复选框

<!--
	name		表示一个组
	checked		默认被选中
	disabled	不能被选中（禁用）
-->
<p>单选框
    <input type="radio" value="男" name="sex" checked  disabled/>男
	<input type="radio" value="女" name="sex" />女
</p>
<p>爱好（复选框）：
    <input type="checked" value="看书" name="hobby" checked/>看书
	<input type="checked" value="看电影" name="hobby"/>看电影
    <input type="checked" value="看动漫" name="hobby"/>看动漫
</p>

按钮

<!--
	普通按钮：button
	图片按钮：image
-->
<p>按钮
    <input type="button" name="but" value="按钮键"/>
    <input type="image"	src="图片位置"/>
</p>

下拉框

<!--下拉框
	selected：	表示默认选中
-->
<p>下拉框：
    <select name="列表名称">
        <option value="值1" selected>值1</option>
        <option value="值2">值2</option>
        <option value="值3">值3</option>
        <option value="值4">值4</option>
    </select>
</p>

文本域

<!--
	文本域
	cols：行
	rows：列
-->
<p>文本域:
    <textarea name="textarea" cols="10" rows>="50">文本内容</textarea>
</p>

文件域

<p>文件域
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>

验证

<!--邮件验证-->
<p>
    <input type="email" name="email">
</p>

<!--url验证-->
<p>
    <input type="url" name="url">
</p>

<!--数字验证
	max		最大数字
	min		最小数组
	step	每次增加多少
-->
<p>
    <input type="number" name="num" max="100" min="0" step="1">
</p>

滑块

<!--滑块-->
<p>滑块
    <input type="range" name="voice" min="0" max="100" setp="5">
</p>

搜索

<!--搜索-->
<p>搜索
    <input type="search" name="search">
</p>

增强鼠标可用

<p>
	<label for="mark">点我跑到文本域中</label>
	<input type="text" id="mark">    
</p>

表单应用

隐藏域		hidden
只读		 readonly
禁用		 disabled

表单验证

常用方式：
	placeholder		作为提示信息，应用于文本域，输入框中
	required		不能为空
	pattern			正则表达式

<p>
	<label for="mark">点我跑到文本域中</label>
	<input type="text" id="mark">    
</p>

表单应用

隐藏域		hidden
只读		 readonly
禁用		 disabled

表单验证

常用方式：
	placeholder		作为提示信息，应用于文本域，输入框中
	required		不能为空
	pattern			正则表达式