初识HTML 下

最新推荐文章于 2024-09-28 16:29:52 发布

java_smallwang

最新推荐文章于 2024-09-28 16:29:52 发布

阅读量114

点赞数

分类专栏：计算机专业前端学习 html5 文章标签： html

本文链接：https://blog.csdn.net/qq_42104296/article/details/107366776

版权

计算机专业同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端学习

2 篇文章 0 订阅

订阅专栏

html5

2 篇文章 0 订阅

订阅专栏

页面结构分析

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>

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

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

</body>
</html>

iframe内联框架

<iframe src="path" name="mainFrame" ></iframe>
path：引用页面地址
mainFrame：框架标识名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe内联框架
    src：地址
    w-h：宽度 高度
  扩展：
    可以与a标签一起用 用name属性连接
-->
<iframe src="" frameborder="0" name="baidu" width="1000 " height="800"></iframe>
<a href="https://www.baidu.com" target="baidu">点击跳转</a>

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

表单语法

<form method="post" action="result.html">
    <p>名字: <input name="name" type="text"> </p>
    <p>密码: <input name="pass" type="password"> </p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填">
    </p>
</form>
<!--
method：规定如何发送表单数据 常用值get| post
action：表示向何处发送数据
-->

POST

比较安全，可以提交大文件

重点 jsp中笔记

GET

可以在url中看到我们提交饿信息，不安全，高效

重点 jsp中笔记

表单元素格式

属性	说明
type	指定元素的类型。text,password，checkbox，radio，submit，reste，file，hidden，image和button，默认text
name	指定元素的名称
value	元素的初识值，type为radio时必须指定一个值
size	指定表单元素的初始宽度，当type为text或password时，表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>

<!--表单form
action：表单提交的位置
method：post ， get 提交方式
    get方式提交：可以在url中看到我们提交饿信息，不安全，高效
    post方式提交：比较安全，可以提交大文件
-->

<form method="get" action="1.我的第一个网页.html">
    <!--文本输入框-->
    <p>名字: <input name="name" type="text"> </p>
    <!--密码输入框-->
    <p>密码: <input name="pass" type="password"> </p>
    <!--单选框按钮-->
    <p>
        性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio"value="girl" name="sex">女
    </p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填">
    </p>
</form>
</body>
</html>

按钮和多选框

<!--多选框-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="game" name="hobby">打游戏
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="basketball" name="hobby">打篮球
    </p>
    <!--按钮
        button  普通按钮
        image   图像按钮
        submit  提交按钮
        reset   重置按钮
    -->
    <p>按钮
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resources/img/杰森.jpg" height="100" width="100">
    </p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填">
    </p>

列表框文本域和文件域

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

<!--文本域
    cols="30" rows="10"
    -->
    <p>反馈
        <textarea name="textarea" id="" cols="30" rows="10"></textarea>
    </p>

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

表单的应用

隐藏域

<p>密码: <input name="pass" type="password" hidden> </p>
<!---
hidden:隐藏域 看不到了
-->

只读

 <p>名字: <input name="name" type="text" value="admin" readonly> </p>
<!--
value="admin"  ：给文本框复制admin
readonly：只读，不得修改
-->

禁用

<p>
   <input type="submit" name="Button" value="提交" disabled/>
   <input type="reset" name="Reset" value="重填">
    </p>
</form>

表单的初级验证

常用方式

placeholder 提示信息
required 非空判断
pattern 正则表达式

placeholder：提示内容

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

equired：非空判段

<p>密码: <input name="pass" type="password" required> </p>
<!--
不填写密码字段，点击提交按钮，会提示报错
-->

pattern：正则表达式

<p>自定义邮箱：
        <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

两小时的视频花了一天才完成，哎，其实自己一直都很差。。。。。

立个flag！！！暑假，不回家，在学校学习！

java_smallwang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录