页面结构分析

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

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

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>

表单语法

<h1>注册</h1>

<!--表单form

action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post，get提交方式
        get方式提交：我们看在url中看到我们提交的信息，不安全，高效
        post：比较安全，传输大文件
-->

<form action="firstHtml.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>

表单元素格式

属性	说明
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时，指定按钮是否是被选中

<!--文本输入框：input type="text"
    value="1111"  默认初始值
    maxlength="8"   最长能写的几个字符
    size="30"       文本框的长度
-->
<p>名字：<input type="text" name="username" value="1111" maxlength="8" size="30"></p>

    <!--单选框标签
    input type="radio"
    value="boy" ：单选框的值
    name="sex" ：表示组
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

多选框和按钮

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

<!--多选框
input type="checkbox"
-->
<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>

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

<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置
-->
<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>

列表框、文本域和文件域

• 列表框：使用的是<select></select>标签，列表里面的内容使用<option></option>加载。

<!--下拉框，列表框-->
<p>下拉框：
    <select name="列表名称" >
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="eth" selected>瑞士</option>
        <option value="yindu">印度</option>
    </select>
</p>

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

<!--文本域
    cols="50" rows="10"
-->
<p>反馈：
    <textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>
</p>

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

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

搜索框、滑块和简单验证

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

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

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

<!--滑块-->
<p>音量：
    <input type="range" name="voice" min="0" max="100" step="2">
</p>

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

<!--邮件验证-->
<p>邮箱:
    <input type="email" name="email">
</p>
<!--URL-->
<p>URL:
    <input type="url" name="url">
</p>
<!--数字-->
<p>数字：
    <input type="number" name="num" max="100" min="0" step="1">
</p>

表单的应用

• 标记只读使用的是readonly。

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

• 标记禁止使用的是disabled。

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

• 隐藏标签使用的是hidden。

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

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

<!--增强鼠标可用性-->
<p>
    <label for="mark">你点我试试：</label>
    <input type="text" id="mark">
</p>

表单的初级验证

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

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

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

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

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

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