HTML5基础 下

<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚步</h2>
</footer>

iframe内联框架

src:引用页面地址 name：框架标识名

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

表单语法

method:规定如何发送表单数据 常用值：get | post

action:表示向何处发送表单数据

<form method="post" action="result.html">
  <p>名字：<input name="name"type="text"></p>
  <p>密码：<input name="pass"type="password">
  <p>
     <input type="submit" name="Button"value="提交"/>
     <input type="reset" name="Reset"value="重填"/>
  </p>
</form>

表单元素格式

<!--表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post ,get提交方式
get方式提交：我们可以在URL中看到问提交的信息，不安全，高效
post：比较安全，传输大文件
-->
<form action="我的第一个网页.html"method="post">
<!--    文本输入框 input type="text"
         value=“哈哈哈” 默认初始值
         maxlength=“8” 最长能写几个字符
         size="30" 文本框的长度

-->
    <p>名字：<input type="text"name="username"></p>
<!--    密码框：input type=“password”-->
    <p>密码：<input type="password"name="pwd"></p>

<!--    单选框标签
    input type="radio"
    value:单选框的值
    name：表示组
    checked 默认选中
-->
    <p>性别
        <input type="radio"value="boy" name="sex">男
        <input type="radio"value="girl" name="sex">女
    </p>
    <p>爱好：
        <input type="checkbox" value="sleep"name="hobby">睡觉
        <input type="checkbox" value="girl"name="hobby">女
        <input type="checkbox" value="chat"name="hobby">聊天
        <input type="checkbox" value="game"name="hobby">打篮球
    </p>

<!--    按钮
     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="50px"height="20px">
    </p>




<!--    下拉框-->

    <p>
        <select name="列表名称">
            <option value="china"selected>中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
            <option value="yingdu">印度</option>
        </select>
    </p>

<!--    文本域
        cols="30" rows="10"
-->
    <p>
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
    </p>
<!--    文件域
        type="file"name="files"
-->
<p>
    <input type="file"name="files">
    <input type="button"value="上传"name="upload">
</p>




<!--    邮件验证-->
    <p>邮箱
        <input type="email" name="email">
    </p>
<!--    URL-->
    <p>URL
        <input type="URl" name="URl">
    </p>
<!--    数字-->
    <p>数字
        <input type="number" name="number">
    </p>
    <!--滑块-->
    <p>音量
        <input type="range" name="voice" min="0" max="100"step="2">
    </p>
<!--    搜索框-->
    <p>搜索
        <input type="search" name="search">
    </p>


    <p>
        <input type="submit">
        <input type="reset"value="清空表单" >

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

表单的应用

1. 隐藏域

   hidden

2. 只读

   readonly

3. 禁用

   disabled

表单初级验证

常用方式

1. placeholder 提示信息
2. required 元素不能为空
3. pattern 正则表达式 网址： https://www.jb51.net/tools/regexsc.htm