HTML学习笔记02

HTML笔记02

页面结构分析

元素名 描述
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>
  • 打开浏览器查看网页:

HTML学习笔记02_第1张图片

iframe内联框架

HTML学习笔记02_第2张图片

  • 下面我们通过写代码的方式来学习iframe内联框架:
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架iframe学习title>
head>
<body>


<iframe src="https://www.taobao.com/" name="hello" frameborder="0" width="1000px" height="800px">iframe>


<a href="https://www.tmall.com/" target="hello">点击跳转到天猫商城a>






body>
html>
  • 打开浏览器查看网页:

HTML学习笔记02_第3张图片

  • 点击文字可以跳转到天猫官网:

HTML学习笔记02_第4张图片

表单语法

HTML学习笔记02_第5张图片

  • 下面我们通过写代码的方式来学习表单语法:
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册title>
head>
<body>

<h1>注册h1>


<form action="1.我的第一个网页.html" method="get">
    
    <p>名字: <input type="text" name="username">p>
    
    <p>密码: <input type="password" name="pwd">p>
    
    
    <p>
        <input type="submit">
        <input type="reset">
    p>
form>

body>
html>
  • 打开浏览器查看网页:

HTML学习笔记02_第6张图片

  • 随便输入一下名字和密码(这里我输入的名字为:Clown,密码为:123456),并点击提交。查看此时的网页:

HTML学习笔记02_第7张图片

  • 可以发现网页跳转到了我们指定的表单提交的位置(即 “我的第一个网页” )。由于我们使用的表单提交方式为get方式,所以我们能直接从跳转后网页的URL上看到我们刚才提交的信息,很明显这是不安全的。

  • 下面我们将表单提交方式改为post

<form action="1.我的第一个网页.html" method="post">
  • 我们再打开浏览器查看网页:

HTML学习笔记02_第8张图片

  • 再次输入名字和密码并提交。查看此时的网页:

HTML学习笔记02_第9张图片

  • 由于这次我们使用的表单提交方式为post方式,所以我们不能直接从跳转后网页的URL上看到我们提交的信息了,这相对于使用get方式来说较为安全。
  • 当然,由于我们并未进行任何加密操作,所以我们仍然可以通过以下步骤获取到我们提交的信息(具体的加密操作我们学习 JavaScript 时再详细了解):

HTML学习笔记02_第10张图片

表单元素格式

属性 说明
type 指定元素的类型。textpasswordcheckboxradiosubmitresetfilehiddenimagebutton,默认为text
name 指定表单元素的名称
value 元素的初始值。typeradio时必须指定一个值
size 指定表单元素的初始宽度。当typetextpassword时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlength typetextpassword时,输入的最大字符数
checked typeradiocheckbox时,指定按钮是否是被选中
  • 下面我们在之前的代码的基础上继续添加代码来学习其他的表单元素:
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册title>
head>
<body>

<h1>注册h1>


<form action="1.我的第一个网页.html" method="get">
    
    <p>名字: <input type="text" name="username" value="张三" maxlength="8" size="30">p>
    
    <p>密码: <input type="password" name="pwd">p>

    
    <p>性别:
        <input type="radio" value="male" name="gender" checked><input type="radio" value="female" name="gender">p>

    
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">玩游戏
    p>

    
    <p>按钮:
        <input type="button" value="点击变长">
        <input type="image" src="../resources/image/1.jpg" width="100px" height="70px">
    p>

    
    <p>国家:
        <select name="country">
            <option value="china">中国option>
            <option value="usa">美国option>
            <option value="switzerland" selected>瑞士option>
            <option value="india">印度option>
        select>
    p>

    
    <p>反馈
        <textarea name="textarea" cols="50" rows="10">文本内容textarea>
    p>

    
    <p>
        <input type="file" name="files">
        <input type="button" value="上传">
    p>

    
    <p>邮箱:
        <input type="email" name="email">
    p>

    
    <p>URL:
        <input type="url" name="url">
    p>

    
    <p>商品数量:
        <input type="number" name="num" max="100" min="0" step="1">
    p>

    
    <p>音量:
        <input type="range" name="voice" max="100" min="0" step="2">
    p>

    
    <p>搜索: 
        <input type="search" name="search">
    p>

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

body>
html>
  • 打开浏览器查看网页:

HTML学习笔记02_第11张图片

表单的应用

  • 隐藏域 hidden

  • 只读 readonly

  • 禁用 disabled

  • 我们在上面代码的基础上再次进行修改:

    • 名字的文本输入框变为只读,不可修改:
    
    <p>名字: <input type="text" name="username" value="admin" readonly>p>
    
    • 密码的输入框隐藏,不可见:
    
    <p>密码: <input type="password" name="pwd" value="123456" hidden>p>
    
    • 性别的单选框禁用选项,只能选择
    
    <input type="radio" value="female" name="gender" disabled>
    • 补充 label:在最后再添加一个文本输入框,使鼠标点击输入框左侧的文字时能自动锁定到右侧的输入框:
    
    <label for="mark">点我可自动锁定右侧输入框label>
    <input type="text" id="mark">
    
  • 打开浏览器查看网页:

HTML学习笔记02_第12张图片

  • 上述应用全都正常实现。

表单初级验证

  • 为什么要进行表单验证?

    • 降低服务器开销
    • 使用户填写更高效
    • 保证数据的安全性
  • 常用方式

    • 用户提示 placeholder
    • 非空判断 required
    • 正则表达式 pattern
  • 常用正则表达式:点此查看

  • 我们在上面代码的基础上再次进行修改:

    • 设置名字右侧的文本输入框中的提示信息,且设置其不能为空:
    
    <p>名字: <input type="text" name="username" placeholder="请输入用户名" required>p>
    
    • 使用正则表达式自定义一个带验证的邮箱:
    
    <p>自定义邮箱
        <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    p>
    
  • 打开浏览器查看网页:

HTML学习笔记02_第13张图片

你可能感兴趣的:(HTML学习笔记合集,html,学习,笔记)