java前端知识Day03

最新推荐文章于 2024-11-07 10:38:40 发布

换一个梦

最新推荐文章于 2024-11-07 10:38:40 发布

阅读量126

点赞数 1

分类专栏： java前端文章标签： html

本文链接：https://blog.csdn.net/qq_45013931/article/details/119516047

版权

java前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

更多标签的用法：
https://www.cnblogs.com/xuedingwangluo/p/9781840.html

1、Web页面结构分析

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

2、iframe内联框架

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架学习</title>
</head>
<body>

<!--iframe内联框架：
        src:资源地址
        width/height:宽度、高度
-->
<iframe src="https://www.qq.com" frameborder="0" width="1000px" height="800px"></iframe>
<br/>


<!--应用：在一个网站中嵌入另一个网站-->
<iframe src="" frameborder="0" name="tencent" width="1000px" height="800px"></iframe>
<a href="1.我的第一个网页.html" target=tencent" >点击我打开链接</a>
<br/>


<!--数据来源：bilibili中Java狂神说-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

</body>
</html>

3、表单

在这里插入图片描述

3.1 post和get

3.1.1 HTML代码

get方式：可以在URL中看见我们提交的信息，不安全，高效
post方式：URL中看不见，安全，可以传输大文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>

<h1>注册</h1>

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

<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>

3.1.2 样式

在这里插入图片描述

3.1.3 get和post方法的区别

(1)使用get方法提交后URL显示输入的信息，如图：

在这里插入图片描述

(2)使用post方法提交后在URL网址中不显示输入的信息，如图：

在这里插入图片描述

4、表单的基本元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>

<h1>注册</h1>

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

表单元素中的各个组件的name属性一般必须要写，用于表示URL文件中的键值对
-->

<form action="1.我的第一个网页.html" method="get">

    <!--input文本框参数：
            type:文本类型；      name:名称（供java文件读取）  value:初始值
            maxlength:最多输入字符的长度    size:文本框的长度
    -->
    <!--用户名输入框  input type="text"-->
    <p>名字：<input type="text" name="username" value="123123" maxlength="10"/></p>     <!--一般对输入文本框需命名，在后边根据名字找到该组件-->
    <!--密码输入框 input type="password"-->
    <p>密码：<input type="password" name="pwd"/></p>


    <!--单选框标签
           input type="radio";  value:表示选中的值（注意：标签外边的值只起到一个修饰的作用，不是真正的值）
            name:表示分组，name相同表示在一个组当中
    -->
    <p>
        性别:<input type="radio" value="boy" name="sex"/>男          <!--name相同，表示将radio划分到一个组当中-->
             <input type="radio" value="gril" name="sex"/>女
    </p>

    <!--多选框标签
            input type="checkbox"
    -->
    <p>
        爱好：<input type="checkbox" value="唱歌" name="hobby"/>唱歌
             <input type="checkbox" value="睡觉" name="hobby" checked/>睡觉     <!--checked:设置默认选中-->
             <input type="checkbox" value="足球" name="hobby"/>足球
             <input type="checkbox" value="篮球" name="hobby"/>篮球
    </p>

    <!--按钮标签
             input type="button":普通的按钮
             input type="image"：图像按钮
             input type="submit"：提交按钮
             input type="reset"：清空按钮
    -->
    <p>
        普通按钮：<input type="button" value="点击我" name="btn">      <!--此处的value表示的是按钮的值-->
        <br/>
        图片按钮：<input type="image" src="../source/image/Tsinghua.jpg">     <!--功能和submit类似，也可以提交-->
    </p>



    <!--下拉框标签

    -->
    <p>
        国家:
        <select name="表名称" id="1">
            <option value="中国">中国</option>
            <option value="美国" selected>美国</option>     <!--selected:默认选中显示-->
            <option value="英国">英国</option>
            <option value="印度">印度</option>
        </select>
    </p>


    <!--文本域
    cols="30" rows="20" 行和列
    -->
    <p>
        <textarea name="textarea" id="text1" cols="30" rows="20"></textarea>
    </p>


    <!--文件域
        用于提交文件
        input type="file"
    -->
    <p>
        <input type="file" name="files"/>
    </p>




    <!--邮件验证-->
    <!--初级验证形式：只会查验输入邮箱中是否有@符号，以及@后边是否有内容
                    不输入内容也会验证通过，不安全
    -->
    <p>
        邮箱：<input type="email" name="email">
    </p>


    <!--URL验证-->
    <!--输入正确的URL网址后验证才通过，即协议名+www服务+域名+文件包路径-->
    <p>
        URL:<input type="url" name="url">
    </p>


    <!--数字验证
    input type="number"
    max:数字的最大值
    min:数字的最小值
    step:步长值
    -->
    <p>
        数字：<input type="number" name="number" max="100" min="2" step="10">
    </p>


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


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

  <!--增强鼠标可用性：
    点击组件前边的标签，鼠标自动定位到该组件
    -->
    <p>
        <label for="mark">点击我定位到组件:</label>
        <input type="text" id="mark">
    </p>


    <p><input type="submit" value="提交">
        <input type="reset" value="清空表单">
    </p>
</form>

</body>
</html>

5、表单的应用

（1）隐藏域：hidden
（2）只读：readonly
（3）禁用：disabled

6、表单的初级验证

（1）placeholder:显示一些提示性信息；
（2）required:非空判断；
（3）pattern:正则表达式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单初级验证</title>
</head>
<body>

<form action="1.我的第一个网页.html" method="get">

    <!--表单验证方式1：
    placeholder:显示在text类型组件中的提示性的信息
    例：提示用户输入用户名和密码
    -->
    <p>
        用户名:<input type="text" name="username" placeholder="请输入用户名">
        <br/>
        密码:<input type="text" name="pwd" placeholder="请输入密码">
    </p>


    <!--表单验证方式2：
    required: 使文本框中的信息不得为空
    例：用户的邮箱信息不得为空
    -->
    <p>
        邮箱：<input type="email" name="email" required>
    </p>


    <!--表单初级验证方式3：
        patten:正则表达式
        例：邮箱的正则表达式为：（https://www.cnblogs.com/shihaiying/p/11530311.html）
               ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
    -->
    <p>
        自定义正则表达式邮箱：<input type="text" name="myemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

    <p>
        <input type="submit" name="btn" value="提交">
    </p>

</form>

</body>
</html>