Hyper Text Markup Language (超文本标记语言)

  • W3C 标准包括

    • 结构化标准语言(html，xml)
    • 表现标准语言(css)
    • 行为标准(Dom、ECMAScript)

  • HTML基本结构

    1
    2
    3
    4
    5
    6
    7
    8
    <html 
    <head>
        <title>Title</title>  头部
    </head>
    <body>
                             主体 
    </body>
    </html>
  • 等成对的标签，分别叫做开放标签和闭合标签单独呈现的标签(空元素)

文本标签

  • b 加粗
  • u 下划线
  • i 倾斜
  • s 删除线
  • 如果需要突出重要性则用下面的
    • strong 加粗
    • ims 下划线
    • em 倾斜
    • del 删除线

网页基本标签

  • 标题标签
    • <h1>内容</h1>
  • 段落标签
    • <p> 内容</p>
  • 换行标签
    • <br/> 换行符会比段落紧凑
  • 水平线标签
  • <hr/>
  • 字体样式标签
    • 粗体 <strong></strong>
    • 斜体 <em></em>
  • 注释和特殊符号
    • 空格 &nbsp;
    • 大于号 &gt;
    • 小于号 &lt;
    • 版权符号 &copy;

图像，超链接，网页布局

  • 图像标签

    • 常见的图像格式
      • JPG
      • GIF
      • PNG
      • BMP
      • …
        1
        2
        <img src="path" alt="text" title="text" width="x" height="y" /> 
              图像地址  图像替代文字 鼠标悬停提示文字     图像宽、高 工作中只需给出一个值 ，另一个会等比例缩放

  • 文本超链接

    • 图像超链接
      1
      2
      3
          链接路径    链接在那个窗口打开，常用指：_self、_blank
      <a herf="path" target="目标窗口位置">链接文本或图像</a>

  • 錨链接

    1
    2
    <a name="top">顶部</a>
    <a href="#top" >回到顶部</a>

  • 功能性链接

    • 邮件链接
      1
      <a href="mailto:123@163.com">和xx联系</a>

  • 行内元素和块元素

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

列表，表格，媒体元素

  • 列表
    • 有序列表
      1
      2
      3
      <ol>  大标签    order list
          <li>Python</li>  子标签
      </ol>
    • 无序列表
      1
      2
      3
      <ul>
          <li>Python</li>
      </ul>
    • 自定义列表
      1
      2
      3
      4
      <dl>    标签
          <dt></dt>   列表名称
          <dd></dd>  列表内容
      </dl>
  • 表格
    • 为什么使用表格
      • 简单通用
      • 结构稳定
    • 基本结构
      • 单元格
      • 行
      • 列
      • 跨行
      • 跨列
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        <table border="1px">
            <tr>
        <!--        colspan 跨列-->
                
                <td colspan="4">1-1</td>
            </tr>
            <tr>
        <!--        rowspan 跨行-->
                <td rowspan="2">2-1</td>
                <td>2-2</td>
                <td>2-3</td>
                <td>2-4</td>
            </tr>
        </table>

视频和音频

  • 视频元素
    • video
      1
      2
                            控制      自动播放 循环播放
      <video src="资源路径" controls autoplay  loop></video>
  • 音频元素
    • audio 
      1
      <audio src="资源路径" controls autoplay loop></audio>

页面结构域分析

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

表单及表单应用

  • iframe内联框架

    1
    2
    3
    4
    5
    6
    7
              引用页面地址  框架标识名
    <iframe src="path" name="mainFrame"></iframe>

    嵌套百度
    <iframe src="www.baidu.com" frameborder="0" wisth="1000px" width="800px"></iframe>

    还可以跳转网页

  • 表单语法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!--      规定如何发送表单数据 常用指：get|post       action 向何处提交
         get 可以在浏览器看到输入的请求 不安全 但高效
         post 可以传大文件 还隐藏
          -->
    <form method="post" action="表单.html">
    <!--    文本输入框 input type="text"
            value="123"  默认初始值
            maxlength="9" 最长能写几个字符
            size="30" 文本框的长度
    -->
        <p>用户名:<input name="name" type="text"></p>
    <!--    密码框  input name="pass" type="password"-->
        <p>密码：<input name="pass" type="password"></p>
    <!--    单选框标签
            input type="radio"
            value : 单选框的值
            name：表示组 单选需放到一个组里
    -->
        <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>

  • 表单元素个数

    • 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

  • 直接跟在 input里边即可

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>
    <!--      规定如何发送表单数据 常用指：get|post       action 向何处提交
         get 可以在浏览器看到输入的请求 不安全 但高效
         post 可以传大文件 还隐藏
          -->
    <form method="post" action="表单.html">
    <!--    文本输入框 input type="text"
            value="123"  默认初始值
            maxlength="9" 最长能写几个字符
            size="30" 文本框的长度
    -->
        <p>用户名:<input name="name" type="text" placeholder="请输入用户名"></p>
    <!--    密码框  input name="pass" type="password"-->
        <p>密码：<input name="pass" type="password"></p>
    <!--    单选框标签
            input type="radio"
            value : 单选框的值
            name：表示组 单选需放到一个组里
    -->
        <p>性别：
            <input type="radio" value="boy" name="sex"/>男
            <input type="radio" value="girl" name="sex">女
        </p>
    <!-- 多选框
    input type="checkbox"
    checked 默认选中
            -->
        <p>爱好：
            <input type="checkbox" value="sleep" name="hobby"/>睡觉
            <input type="checkbox" value="game" name="hobby"/>打游戏
        </p>

    <!-- 按钮
    input type="button" 普通按钮
    input type="image" 图像按钮
    input type="submit" 提交按钮
    input type="reset" 重置
    -->
        <p>
            <input type="button" name="btn1" value="点击跳转"/>
        </p>


    <!--    下拉框，列表框
                 selected 默认选中
    -->
        <p>下拉框：
            <select name="列表名称">
                <option value="china">中国</option>
                <option value="US" selected>美国</option>
                <option value="japan">日本</option>
            </select>
        </p>

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

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

        <p>
            <input type="submit" name="Button" value="提交"/>
            <input type="reset" name="Reset" 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="">
        </p>
    <!--    滑块
    input type="range"
    -->
        <p>音量
            <input type="range" name="voice" min="10" max="100" step="2">
        </p>

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


    </form>

表单初级验证

  • 减轻后端压力

  • 常用方式

    • placeholder 提示用户
    • required 非空判断 直接加在输入标签里即可
    • pattern 正则表达式
      1
      2
      3
      4
      5
      <!--    邮件验证-->
          <p>邮箱：
              <input type="email" name="diyemail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
      /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/">
          </p>