HTML5笔记(标签, 表单)

HTML5

简介

HTML: Hyper Text Markup Language超文本标记语言

• W3C
  • World Wide Web Consortium (万维网联盟)
  • 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
  • http://www.w3.org/
  • http://www.chinaw3c.org/
• W3C标准包括
  • 结构化标准语言(HTML、 XML)
  • 表现标准语言(CSS)
  • 行为标准(DOM、ECMAScript )

网页标签

基本标签

• 标题标签

  • <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    

• 段落标签

  • <p>哈哈哈</p>

• 换行标签

  • 哈哈哈<br/>

• 水平线标签

  • <hr/>

• 字体样式标签

  • 粗体: <strong>哈哈哈</strong>
    斜体: <em>哈哈哈</em>
    

• 注释和特殊符号

  • <!--特殊符号-->
    空格: &nbsp;
    > : &gt;
    < : &lt;
    版权: &copy;
    

图像标签

常见的图像格式

• JPG
• GIF
• PNG
• BMP…

<img src="../resource/image/1.jpg" alt="表情包" title="悬停文字" width="300" height="300">

链接标签

• a标签

  • href: 必填, 跳转到哪个页面

  • target: 表示窗口怎么打开

    • _blank 在新标签中打开
    • _self 在本标签打开

  • <a href="first.html" target="_blank">跳转1</a>
    <a href="https://www.baidu.com">跳转百度</a>
    <br/>
    <a href="https://www.baidu.com">
        <img src="../resource/image/1.jpg" alt="表情包" title="悬停文字" width="300" height="300">
    </a>
    

• 锚链接

  • 定义顶部使用id标记, id , a标签跳转#id

  • <a id= top>顶部</a>
    <a href="#id">回到顶部</a>
    <a href="first.html#id">回到顶部</a>
    

• 功能性标签

  • <a href="mailto:100@qq.com">点击联系我</a> 邮箱标签

行内元素和块元素

• 块元素
  • 无论内容多少, 该元素独占一行
  • p, h1-h6
• 行内元素
  • 内容撑开宽度, 左右都是行内元素的可以排在一行
  • a, strong, em

列表

• 列表分类

  • 有序列表

    • <ol> <li>Java4</li> </ol>

  • 有序列表

    • <ul> <li>Java1</li> </ul>

  • 定义列表

    <!--自定义列表 dl 标签 dt 列表名称 dd 列表内容 -->
    <dl> 
        <dt>列表名称</dt>
        <dd>列表内容</dd>
    </dl>
    

表格

基本结构

• 单元格 table
• 行 tr
• 列 td
• 跨行 rowspan
• 跨列 colspan

<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">小明</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr><tr>
    <td rowspan="2">张三</td>
    <td>语文</td>
    <td>100</td>
</tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

视频和音乐

• 视频
• <video src="../resource/video/1.mp4" controls autoplay></video>
• 音乐
• <audio src="../resource/audio/张国荣%20-%20风继续吹.mp3" controls autoplay></audio>
• controls 控制条 autoplay 自动播放

页面结构分析

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

iframe内联框架

<!--通过src的地址内联-->
<iframe src="https://www.bilibili.com"  frameborder="0" height="1000" width="1000"></iframe>
<!--通过a标签跳转内联-->
<iframe src="" name="bilibili" frameborder="0" height="1000" width="1000"></iframe>
<a href="https://www.bilibili.com" target="bilibili">点击跳转</a>

表单语法*

<!--表单
action : 表单提交的位置, 可以是网站也可以是一个请求处理地址
method: post/get 提交方式
    get : 可以在url中看到提交的信息, 不安全 高效
    post: 比较安全 , 可以传输大文件
-->
<form action="1first.html" method="get">
<!--    文本输入框: input type= test-->
    <p>名字: <input type="text" name="name"></p>
    <p>密码: <input type="password" name="pwd"></p>
    <p><input type="submit" name="bt" value="提交"></p>
    <p><input type="reset" name="rs" value="重置"></p>
</form>

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

表单的元素

• 表单 form
  • action: 表单提交的位置, 可以是网站也可以是一个请求处理地址
  • method: post/get 提交方式
    • get : 可以在url中看到提交的信息, 不安全 高效
    • post: 比较安全 , 可以传输大文件
• input标签
  • 提交 type = submit
  • 按钮 type = button 图片按钮<input type="image" src="../resource">图片按钮
  • 重置表单 type = reset
  • 文本框 type = text = password 密码框
  • 单选框 type = radio name相同为同组
    • <input type="radio" value="boy" name="sex" checked/>男 checked 默认选中
    • <input type="radio" value="girl" name="sex"/>女
  • 多选框 type = checkbox 用法和上面一致
  • 文本域 type = file
  • 验证
  • 邮箱: type=email, URL: type = url, 数字: type= number
  • 滑块 type= range
  • 搜索框 type = search
• 文本域 textarea标签
• 鼠标跳转输入框
  • 点我

表单的应用

• 隐藏域 hidden
• 只读 readonly
• 禁用 disabled

表单初级验证

• 常用方式
  • placeholder 输入框提示信息 placeholder="请输入用户名"
  • required 非空判断
  • pattern 正则表达式判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单
action : 表单提交的位置, 可以是网站也可以是一个请求处理地址
method: post/get 提交方式
    get : 可以在url中看到提交的信息, 不安全 高效
    post: 比较安全 , 可以传输大文件
-->
<form action="1first.html" method="get">
<!--    文本输入框: input type= test-->
    <p>名字: <input type="text" name="name" placeholder="请输入用户名"></p>
    <p>密码: <input type="password" name="pwd"></p>
    <p>性别
<!--   单选框  同组, name相同   -->
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
<!--    多选框, 同组, name相同-->
    <p>爱好
        <input type="checkbox" value="sleep" name="favorite" checked>睡觉
        <input type="checkbox" value="game" name="favorite">游戏
        <input type="checkbox" value="chat" name="favorite">聊天
    </p>
<!--    下拉框,列表框
    selected 默认选择
-->
    <p>下拉框
        <select name="列表名称" id="st">
            <option value="China">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="ida">印度</option>
        </select>
    </p>

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

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

<!--邮箱验证-->
    <p>邮箱
        <input type="email" name="email">
    </p>
    <!--url-->
    <p>URL
        <input type="url" name="url">
    </p>
    <p>数字
        <input type="number" name="num" max="100" min="0" step="10">
    </p>
    <p>滑块
        <input  type="range" name="voice" min="0" max="100"step="2">
    </p>
    <p>搜索框
        <input type="search" name="search">
    </p>
    <p>
<!--        鼠标跳转输入框-->
        <label for="mark">点我</label>
        <input type="text" id="mark">
    </p>

    <p><input type="submit" name="bt" value="提交"></p>
    <p><input type="reset" name="rs" value="重置"></p>

    <p>按钮
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resource">图片按钮
    </p>
</form>
</body>
</html>