html学习第二天

行内元素和块元素

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

列表

• 什么是列表

  • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化

    并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

• 列表的分类

  • 无序列表

    <!--无序列表
    应用范围:导航，侧边栏。。。。
    -->
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>运维</li>
        <li>前端</li>
    </ul>
    

  • 有序列表

    <!--有序列表
    应用范围:试卷，问答...
    -->
    <ol>
        <li>Java</li>
        <li>Python</li>
        <li>运维</li>
        <li>前端</li>
    </ol>
    

  • 定义列表

    <!--自定义列表
    dl:标签
    dt:标题
    dd:列表内容
    公司网站底部
    -->
    <dl>
        <dt>学科</dt>
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>运维</dd>
        <dd>前端</dd>
        <dt>位置</dt>
        <dd>大庆</dd>
        <dd>哈尔滨</dd>
        <dd>牡丹江</dd>
    </dl>
    

表格

• 为什么使用表格

  • 简单通用
  • 结构稳定

• 基本结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列

<!--表格table
行 tr rows
列 td
border:边框-->
<table border="1px">
    <tr>
        <!--colspan跨列-->
        <td colspan="3">1-1</td>

    </tr>
    <tr>
        <!-- rowspan跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>3-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

视频和音频

src：资源路径
controls控制条
autoplay自动播放

• 视频元素

  • video

    <video src="" controls autoplay></video>
    

• 音频元素

  • audio

    <audio src="" controls autoplay></audio>
    

页面结构分析

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

iframe内联框架

<!--
iframe内联框架
src：地址
w-h宽度高度-->
<iframe src="" name="hello" width="1000px" height="800px">

</iframe>
<!--在hello的内联框架实现跳转-->
<a href="https://www.baidu.com" target="hello">点击跳转</a>

表单

表单语法

表单form
method:规定如何发送表单数据
常用值:get|post
action:表示想何处发送表单数据
表单提交的位置,可以是网站，也可以是一个请求处理地址
get 方式提交:我们可以在url中看到我们提交的信息, 不安全但高效
post:比较安全，传输大文件
文本输入框: input type=“text”
value:默认初始值
maxlength: 最长能写几个字符
size:文本框的长度

单选框标签input type=“radio”
value :单选框的值
name:表示组

多选框
input type=“checkbox”

按钮
input type="button"普通按钮
input type="image"图片按钮
input type="submit"提交按钮
input type="reset"重置按钮

文本域
cols:行
rows:列

<form method="post" action="我的第一个网页.html">
    <!--文本输入框: input type="text"
    value="温嘉璐" 默认初始值
     maxlength: 最长能写几个字符
     size:文本框的长度-->
    <p>用户名：<input type="text" name="username" value="温嘉璐" maxlength="8" size="30"></p>
    <!--密码输入框: input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>

    <p>  <!--  单选框标签input type="radio"
        value :单选框的值
        name:表示组 -->
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>
    <p>
        <!--多选框
        input type="checkbox"
        -->
        爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <p>
        <!--按钮
          input type="button"普通按钮
          input type="image"图片按钮
          input type="submit"提交按钮
          input type="reset"重置按钮-->
        按钮:
        <input type="button" name="btn1" value="点击变长">

        <input type="image" src="../resources/image/1.png">
    </p>
    <!--下拉框,列表框-->
    <P>
        国家:
        <select>
            <option value="China">中国</option>
            <option value="Us">美国</option>
            <option value="Eth">瑞士</option>
            <option value="India">印度</option>
        </select>
    </P>
    <!--文本域
    cols:行
    rows:列
    -->
    <p>
        反馈:
        <textarea name="textarea" cols="50" rows="10"></textarea>
    </p>
    <!--文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <!--邮件验证-->
    <p>
        邮箱：
        <Input type="email" name="email">
    </p>
    <!--url验证-->
    <p>
        url:
        <input type="url" name="url">
    </p>
    <!--数字验证
    max:最大值
    min:最小值
    step:步长-->
    <P>
        数字：
        <input type="number" name="number" max="100" min="0" step="5">
    </P>
    <!--滑块-->
    <p>音量
        <input type="range" min="0" max="100" name="voice" step="1">
    </p>
    <!--搜索框-->
    <p>
        搜索:
        <input type="search" name="search">
    </p>
    <p>
        <!--提交： input type="submit"-->
        <input type="submit">
        <!--重置： input type="reset"-->
        <input type="reset">
    </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时，指定按钮是否被选中

表单的应用

• 隐藏域

  hidden

• 只读

  readonly

• 禁用

  disabled

表单初级验证

• 为什么要进行表单验证

  1. 减轻服务器的压力
  2. 保证数据安全性

• 常用方式

  • placeholder

    提示信息

  • required

    非空判断

  • pattern

    正则表达式