页面结构分析

本次博客带领大家学习HTML中的页面结构分析。

iframe内联框架

• 还可以使用a标签来使内容跳转到iframe内联框架中。

<iframe src="" name="hello" frameborder="0" width="1000px" height="800px">iframe>

<a href="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10" target="hello">点击跳转a>
1
2
3

表单语法

<h1>注册h1>



<form action="firstHtml.html" method="post">

    
    <p>名字：<input type="text" name="username">p>
    
    <p>密码：<input type="password" name="pwd">p>

    <p>
        <input type="submit">
        <input type="reset">
    p>
form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

表单元素格式

<p>名字：<input type="text" name="username" value="1111" maxlength="8" size="30">p>

    
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

多选框和按钮

• 多选框使用的是input type="checkbox"类型，记得设置在同一个name中。

<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="game" name="hobby">游戏
p>
1
2
3
4
5
6
7
8
9

• 普通按钮使用的是input type="button"类型，给按钮设置内容是使用value。

<p>按钮：
    <input type="button" name="btn1" value="点击边长">
    <input type="image" src="../resources/image/1.JPG" width="300px" height="300px">
p>

<p>
    <input type="submit">
    <input type="reset" value="点击清空表单">
p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

列表框、文本域和文件域

• 列表框：使用的是标签，列表里面的内容使用加载。

<p>下拉框：
    <select name="列表名称" >
        <option value="china">中国option>
        <option value="us">美国option>
        <option value="eth" selected>瑞士option>
        <option value="yindu">印度option>
    select>
p>
1
2
3
4
5
6
7
8
9

• 文本域：使用的是标签，其中的cols属性表示占多少列，rows属性表示占多少行。

<p>反馈：
    <textarea name="textarea" id="" cols="50" rows="10">文本内容textarea>
p>
1
2
3
4
5
6

• 文件域：使用的是input type="file"标签。

<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
p>
1
2
3
4
5
6
7

搜索框、滑块和简单验证

• 搜索框：使用的是input type="search"标签。

<p>搜索:
    <input type="search" name="search">
p>
1
2
3
4

• 滑块：使用的是input type="range"标签。

<p>音量：
    <input type="range" name="voice" min="0" max="100" step="2">
p>
1
2
3
4

• 简单验证：邮箱验证、URL、数字验证等等。

<p>邮箱:
    <input type="email" name="email">
p>

<p>URL:
    <input type="url" name="url">
p>

<p>数字：
    <input type="number" name="num" max="100" min="0" step="1">
p>
1
2
3
4
5
6
7
8
9
10
11
12

表单的应用

• 标记只读使用的是readonly。

<p>名字：<input type="text" name="username" value="1111" readonly>p>
1

• 标记禁止使用的是disabled。

<input type="radio" value="boy" name="sex" checked disabled>男
1

• 隐藏标签使用的是hidden。

<p>密码：<input type="password" name="pwd" hidden>p>
1

• 增强鼠标的可用性，点击文字就能跳转到对应的文本框，使用标签，记得添加好对应的id属性。

<p>
    <label for="mark">你点我试试：label>
    <input type="text" id="mark">
p>
1
2
3
4
5

表单的初级验证

• 文本框的提示信息用placeholder属性。

<p>名字：<input type="text" name="username" placeholder="请输入用户名">p>
1

• 文本框填充不能为空使用required属性。

<p>名字：<input type="text" name="username" placeholder="请输入用户名" required>p>
1

• 判断文本框中的信息可以使用正则表达式pattern属性。(正则表达式可以直接在网站中查询)

<p>自定义邮箱：
    <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
p>
ut type="text" name="username" placeholder="请输入用户名" required>p>
1
2
3
4