HTML5（进阶了解）

最新推荐文章于 2023-07-19 15:13:37 发布

金士曼

最新推荐文章于 2023-07-19 15:13:37 发布

阅读量427

点赞数 4

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/weixin_45869823/article/details/124323276

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面结构分析

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

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架学习</title>
</head>
<body>
<!--iframe内联框架
src：地址
w/h：高度宽度
name:框架标识名字-->
<iframe src="https://www.4399.com" name="hello" frameborder="0" width="1000px" height="1000px"></iframe>
<a href="http://hbt666.top" target="hello">点击跳转个人博客</a>
</body>
</html>

表单语法

初识表单post和get提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册账号</h1>
<!--表单form
action：表单提交的位置，可以是网站也可以是一个请求处理地址
method：post，get  提交方式
get方式提交：我们可以在url中看到自己提交的信息，不安全，高效
post提交：比较安全，传输大文件-->
<form action="1.我的第一个网站.html" method="post">
    
<!--文本输入框：input type="text"-->
    <p>名字：
        <input type="text" name="username">
    </p>
   
<!--密码框：input type="password"-->
    <p>密码：
        <input type="password" name="pwd">
    </p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

表单元素格式

属性	说明
type	指定元素的类型。text、password、checkbox（多选框）、radio（单选框）、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称（表示组，比如单选框要有分组的概念）
value	元素的初始值，type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输出的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

单选框代码示例：

checked：默认选中

<p>性别：
<input type="radio" value="boy" name="sex1" checked>男
<input type="radio" value="girl" name="sex">女
</p>

多选框（checkbox）代码示例

checked：默认选中

<p>爱好：
<input type="checkbox" value="篮球" name="hobby">篮球
<input type="checkbox" value="足球" name="hobby" checked>足球
<input type="checkbox" value="排球" name="hobby">排球
<input type="checkbox" value="跑步" name="hobby">跑步
</p>

按钮（button）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮标签</title>
</head>
<body>
<!--按钮标签
input type="button" 普通按钮
input type="image"  图像按钮
input type="submit" 提交按钮
input type="reset"  重置按钮
input -->
<p>
    <input type="button" name="btn1" value="点击">
    <input type="image" src="../resources/image/1.jpg">
</p>
<p>
    <input type="submit">
    <input type="reset">
</p>
</body>
</html>

列表框

selected：默认选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框学习</title>
</head>
<body>
<!--下拉框-->
<p>国家：
    <select name="列表名称" id="">
        <option value="1" selected>中国</option>
        <option value="2">美国</option>
        <option value="3">瑞士</option>
        <option value="4">印度</option>
    </select>
</p>
</body>
</html>

文本（文件）域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本域</title>
</head>
<body>
<!--文本域
cols 行
rows 列-->
<p>反馈：
    <textarea name="textarea" id="" cols="30" rows="20">文本内容：</textarea>
</p>
<!--文件域
input type="file" name="files"-->
<p>
    <input type="file" name="files">
    <input type="button" name="upload" value="上传">
</p>
</body>
</html>

ps：input标签都需要name值

搜索框滑块和简单验证

简单验证：邮箱验证、url验证、数字验证和滑块和搜索框等等

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邮箱验证</title>
</head>
<body>
<form action="1.我的第一个网站.html">
    
<!--邮箱验证-->
<p>邮箱：
    <input type="email" name="email1">
</p>
    
<!--url验证-->
<p>url：
    <input type="url" name="地址">
</p>
    
<!--数字验证
max和min：最大和最小
step：一次增加或者减少多少-->
<p>商品数量：
    <input type="number" name="number1" max="100" min="1" step="1">
</p>
    
<!--滑块-->
<p>音量：
    <input type="range" name="voice" min="10" max="100">
</p>
    
<!--搜索框-->
<p>搜索：
    <input type="search" name="search">
</p>
<p>
    <input type="submit">
    <input type="reset">
</p>
</form>
</body>
</html>

表单的应用

disabled禁用

例如下面代码中，disabled就代表只能选男，而不能选nü

<p>性别：
<input type="radio" value="boy" name="sex1" >男
<input type="radio" value="girl" name="sex" disabled>女
</p>

hidden隐藏（隐藏域）

例如下面代码中，将会看不见原本的输入框，但是仍然可以提交

<!--密码框：input type="password"-->
    <p>密码：
        <input type="password" name="pwd" hidden>
    </p>

readonly：只读

增强鼠标的可用性（了解）

label标签，可以指向某一个位置，例如下列，点击文字，会选择对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增强鼠标可用性</title>
</head>
<body>
<P>
<label for="mark">你点我试试：</label>
    <input type="text" id="mark">
</P>
</body>
</html>

表单初级验证

**placeholder：**提示信息

<P>密码：
    <input type="text" id="mark" placeholder="请输入密码">
</P>

在这里插入图片描述

**required：**元素不能为空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单初级验证</title>
</head>
<body>
<form action="1.我的第一个网站.html">
<P>账号：
    <input type="text" id="mark" placeholder="请输入账号">
</P>
<P>密码：
    <input type="text" id="mark1" placeholder="请输入密码" required>
</P>
<p>
    <input type="submit">
    <input type="reset">
</p>
</form>
</body>
</html>

pattern：正则表达式

ps：可能有人不太懂正则表达式，可以点击上面文字的链接看一下官方解释

举例如下：

邮箱的正则表达式为：¹+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$"

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单初级验证</title>
</head>
<body>
<form action="1.我的第一个网站.html">
    <P>账号：
        <input type="text" id="mark" placeholder="请输入账号">
    </P>
    <P>密码：
        <input type="text" id="mark1" placeholder="请输入密码" required>
    </P>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

<p>邮箱：
    <input type="text" name="email" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
</p>
</form>
</body>
</html>

详细解释：这里第21行代码的pattern后面使用了正则表达式，就相当于网站里面输入邮箱的时候，如果格式不为正确的邮箱格式，则无法提交!!!

text" id=“mark1” placeholder=“请输入密码” required>

邮箱：

```

详细解释：这里第21行代码的pattern后面使用了正则表达式，就相当于网站里面输入邮箱的时候，如果格式不为正确的邮箱格式，则无法提交!!!

a-zA-Z0-9_- ↩︎

金士曼

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5（进阶了解）

页面结构分析元素名描述header标记头部区域的内容（用于页面或页面中的一块区域）footer标记脚步区域的内容（用于整个页面或者页面的一块区域）sectionweb页面中的一块独立区域article独立的文章内容aside相关内容或应用（常用于侧边栏）nav*导航类辅助内容iframe内联框架<!DOCTYPE html><html lang="en"><head> <met
复制链接

扫一扫