HTML网页基础

HTML网页基础

1.基本结构

<!--网页基本结构-->

    <header> <h2>网页的头部</h2> </header>

    <section> <h2>网页主体</h2> </section>

    <footer> <h2>网页脚步</h2> </footer>

2.内联框架

<!--内联框架 iframe  width宽度  height高度-->
    <iframe src="https://www.baidu.com" name="hl" frameborder="0" width="300px" height="500px"></iframe>
<!--通过a标签来跳转到hl里面-->
    <a href="https://user.qzone.qq.com/3187311481" target="hl">点击跳转</a>

3.表单语法

<!--表单语法

    表单提交的位置：action 可以是一个网站，也可以是一个请求处理
    method: post ,  get 提交方式
    get提交方式会在浏览器上方显示我们输入的账号密码，所以不安全
    post比较安全，传输大文件
-->

<form action="Deom1.html" method="get">

<!-- 文本输入框：input type=text
      密码框： input  type=password
-->
    <p>账号:<input type="text" name="username"> </p>
    <p>密码:<input type="password" name="pwd"> </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

4.按钮

单选按钮

<!--单选按钮 name值一样的情况下才可以只选择其中一个，否则会全部选中-->

    <input type="radio" name="sex">男
    <input type="radio" name="sex">女

多选按钮

<!--多选按钮 -->

    <input type="checkbox" >睡觉
    <input type="checkbox" >泡澡
    <input type="checkbox" >沐浴

5.下拉列表

<!--下拉列表-->


    <select>

        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>

    </select>

6.文件域

<!--文件域  input标签都是name加上上传的东西 以键值对的形式昂-->

    <p>
        <input type="file" name="files">
    </p>

7.email邮件判断

<!--email邮件判断  这只是初级验证，往后咱们用JS来进行验证-->

<input type="email" name="email">

8.滑块

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

9.搜索

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

10.禁用&隐藏

<input type="submit" disabled>
<input type="submit" hidden>
<!--disabled 是禁用域-->
<!--hidden   是隐藏域-->

11.增强

<!--增强鼠标可用性  点击文字可以直接选中所属ID的文本框-->

    <label for="mark">你点我试试看</label>
    <input type="text" id="mark">

12.表单初级验证

<!--
	 placeholder：提示性的消息
	 required：非空判断，必须填写内容	
	 pattern: 正则表达式
	 正则表达式速查表网址：https://www.jb51.net/tools/regexsc.htm	
-->
	<p>账号:<input type="text" name="username" placeholder="请输入用户名" required  pattern=""> </p>
    <p>密码:<input type="password" name="pwd"> </p>

• 正则表达式速查表网址：点击进入