html

发表于 更新于

html

标签

  • 标签 又称 元素,是HTML的基本组成单位。
  • 标签分为:双标签 与 单标签 (绝大多数都是双标签)。
  • 标签名不区分大小写,但推荐小写,因为小写更规范。
  • 标签之间的关系:并列关系、嵌套关系,可以使用 tab 键进行缩进:

标签属性

  • 用于给标签提供 附加信息。
  • 可以写在:起始标签 或 单标签中
  • 有些特殊的属性,没有属性名,只有属性值,例如:
    1
    <input disabled>

基本结构

  • 想要呈现在网页中的内容写在body标签中。
  • head标签中的内容不会出现在网页中。
  • head标签中的title标签可以指定网页的标题
    1
    2
    3
    4
    5
    6
    7
    8
    <html>
        <head>
            <title>网页标题</title>
        </head>
        <body>
            ......
        </body>
    </html>

文档声明

1
2
3
4
5
<!DOCTYPE html>  
或  
<!DOCTYPE HTML>
或  
<!doctype html>

字符编码

  • 平时编写代码时,统一采用UTF-8编码(最稳妥)。
  • 为了让浏览器在渲染html文件时,不犯错误,可以通过meta标签配合charset属性指
    定字符编码。
    1
    2
    3
    <head>
      <meta charset="UTF-8"/>
    </head>

语言设置

  • 主要作用:
    • 让浏览器显示对应的翻译提示。
    • 有利于搜索引擎优化。
  • 具体写法:
    1
    <html lang="zh-CN">

标准结构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>我是一个标题</title>
    </head>
    <body>

    </body>
</html>

排版标签

  • h1 ~ h6: 标题
  • p: 段落
  • div: 没有任何含义,用于整体布局(生活中的包装袋)。

文本标签

  • em: 要着重阅读的内容
  • strong: 十分重要的内容(语气比em要强)
  • span: 没有语义,用于包裹短语的通用容器

图片标签

  • 标签名: img:
    • src: 图片路径(又称:图片地址)—— 图片的具体位置
    • alt: 图片描述
    • width: 图片宽度,单位是像素,例如:200px 或 200
    • height: 图片高度, 单位是像素,例如:200px 或 200

超链接

  • 主要作用:从当前页面进行跳转。可以实现:①跳转到指定页面、②跳转到指定文件(也可触发下载)、③跳转到锚点位置、④唤起指定应用。
  • 标签名:a
    • href: 指定要跳转到的具体目标。
    • target: 控制跳转时如何打开页面,常用值如下:
    • _self: 在本窗口打开。
    • _blank: 在新窗口打开。
    • id: 元素的唯一 标识,可用于设置锚点。
    • name: 元素的名字,写在a标签中,也能设置锚点。
  • 跳转到锚点
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- 设置锚点 -->
    <!-- 第一种方式:a标签配合name属性 -->
    <a name="test1"></a>
    <!-- 第二种方式:其他标签配合id属性 -->
    <h2 id="test2">我是一个位置</h2>

    <!-- 跳转到test1锚点-->
    <a href="#test1">去test1锚点</a>
    <!-- 跳到本页面顶部 -->
    <a href="#">回到顶部</a>
    <!-- 跳转到其他页面锚点 -->
    <a href="demo.html#test1">去demo.html页面的test1锚点</a>
    <!-- 刷新本页面 -->
    <a href="">刷新本页面</a>
    <!-- 执行一段js,如果还不知道执行什么,可以留空,javascript:; -->
    <a href="javascript:alert(1);">点我弹窗</a>
  • 唤起指定应用
    1
    2
    3
    4
    5
    6
    <!-- 唤起设备拨号 -->
    <a href="tel:10010">电话联系</a>
    <!-- 唤起设备发送邮件 -->
    <a href="mailto:10010@qq.com">邮件联系</a>
    <!-- 唤起设备发送短信 -->
    <a href="sms:10086">短信联系</a>

列表

  • 有序列表
    1
    2
    3
    4
    5
    6
    <h2>要把大象放冰箱总共分几步</h2>
    <ol>
        <li>把冰箱门打开</li>
        <li>把大象放进去</li>
        <li>把冰箱门关上</li>
    </ol>
  • 无序列表
    1
    2
    3
    4
    5
    6
    <h2>要把大象放冰箱总共分几步</h2>
    <ol>
        <li>把冰箱门打开</li>
        <li>把大象放进去</li>
        <li>把冰箱门关上</li>
    </ol>
  • 自定义列表
    • 一个dl就是一个自定义列表,一个dt 就是一个术语名称,一个dd就是术语描述(可以有多个)。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <h2>如何高效的学习？</h2>
      <dl>
          <dt>做好笔记</dt>
          <dd>笔记是我们以后复习的一个抓手</dd>
          <dd>笔记可以是电子版,也可以是纸质版</dd>
          <dt>多加练习</dt>
          <dd>只有敲出来的代码,才是自己的</dd>
          <dt>别怕出错</dt>
          <dd>错很正常,改正后并记住,就是经验</dd>
      </dl>

表格

  • 一个完整的表格由:表格标题、表格头部、表格主体、表格脚注,四部分组成。
  • 表格涉及到的标签
    • table: 表格
    • caption: 表格标题
    • thead: 表格头部
    • tbody: 表格主体
    • tfoot: 表格注脚
    • tr: 每一行
    • th 、td:每一个单元格(备注:表格头部中用
    • th ,表格主体、表格脚注中用:td)
  • 具体编码
    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
    <table border="1">
        <!-- 表格标题 -->
        <caption>学生信息</caption>
        <!-- 表格头部 -->
        <thead>
        <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>民族</th>
        <th>政治面貌</th>
        </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉族</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>20</td>
                <td>满族</td>
                <td>群众</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>20</td>
                <td>回族</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>女</td>
                <td>21</td>
                <td>壮族</td>
                <td>团员</td>
            </tr>
        </tbody>
        <!-- 表格脚注 -->
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计:4人</td>
            </tr>
        </tfoot>
    </table>

常用标签补充

  • br: 换行单
  • hr: 分隔单
  • pre: 按原文显示(一般用于在页面中嵌入大段代码)

表单

  • 一个包含交互的区域,用于收集用户提供的数据。
  • 基本结构
    • form(表单)
      • action:用于指定表单的提交地址(需要与后端人员沟通后确定)。
      • target:用于控制表单提交后,如何打开页面,常用值如下:
        • _self: 在本窗口打开。
        • _blank: 在新窗口打开。
      • method:用于控制表单的提交方式,暂时只需了解,在后面Ajax的课程中,会详细讲解。
    • input(输入框)
      • type:设置输入框的类型,目前用到的值是text,表示普通文本。
      • name:用于指定提交数据的名字,(需要与后端人员沟通后确定)。
    • button: 按钮
  • 示例代码
    1
    2
    3
    4
    <form action="https://www.baidu.com/s" target="_blank" method="get">
        <input type="text" name="wd">
        <button>去百度搜索</button>
    </form>

常用表单控件

  • 文本输入框

    1
    <input type="text">
    • 常用属性如下:
      • name属性:数据的名称。
      • value 属性:输入框的默认输入值。
      • maxlength属性:输入框最大可输入长度。

  • 密码输入框

    1
    <input type="password">
    • 常用属性如下:
      • name属性:数据的名称。
      • value 属性:输入框的默认输入值(一般不用,无意义)。
      • maxlength属性:输入框最大可输入长度。

  • 单选框

    1
    2
    <input type="radio" name="sex" value="female">女
    <input type="radio" name="sex" value="male">男
    • 常用属性如下:
      • name 属性:数据的名称,注意:想要单选效果,多个radio的 name 属性值要保持一致。
      • value 属性:提交的数据值。
      • checked 属性:让该单选按钮默认选中。

  • 复选框

    1
    2
    3
    <input type="checkbox" name="hobby" value="smoke">抽烟
    <input type="checkbox" name="hobby" value="drink">喝酒
    <input type="checkbox" name="hobby" value="perm">烫头
    • 常用属性如下::
      • name 属性:数据的名称。
      • value 属性:提交的数据值。
      • checked属性:让该复选框默认选中。

  • 隐藏域

    1
    <input type="hidden" name="tag" value="100">
    • 用户不可见的一个输入区域,作用是: 提交表单的时候,携带一些固定的数据。
      • name 属性:指定数据的名称。
      • value 属性:指定的是真正提交的数据。

  • 提交按钮

    1
    2
    <input type="submit" value="点我提交表单">
    <button>点我提交表单</button>
    • 注意:
      • button 标签 type 属性的默认值是 submit。
      • button不要指定name 属性
      • input标签编写的按钮,使用value属性指定按钮文字。

  • 重置按钮

    1
    2
    <input type="reset" value="点我重置">
    <button type="reset">点我重置</button>
    • 注意点:
      • button不要指定name 属性
      • input标签编写的按钮,使用value属性指定按钮文字。

  • 普通按钮

    1
    2
    <input type="button" value="普通按钮">
    <button type="button">普通按钮</button>
    • 普通按钮的type值为button,若不写type值是submit会引起表单的提交。

  • 文本域

    1
    <textarea name="msg" rows="22" cols="3">我是文本域</textarea>
    • 常用属性如下:
      • rows 属性:指定默认显示的行数,会影响文本域的高度。
      • cols 属性:指定默认显示的列数,会影响文本域的宽度。
      • 不能编写type属性,其他属性,与普通文本输入框一致。

  • 下拉框

    1
    2
    3
    4
    5
    6
    <select name="from">
        <option value="黑">黑龙江</option>
        <option value="辽">辽宁</option>
        <option value="吉">吉林</option>
        <option value="粤" selected>广东</option>
    </select>
    • 常用属性及注意事项:
      • name 属性:指定数据的名称。
      • option 标签设置了 selected 属性,表示默认选中。

禁用表单控件

  • 给表单控件的标签设置 disabled 既可禁用表单控件。(input 、textarea 、button 、select 、option 都可以设置 )

框架标签

  • iframe: 框架(在网页中嵌入其他文件)
    • name: 框架名字
    • width: 框架的宽。
    • height: 框架的高度。
    • frameborder: 是否显示边框, 值: 0 或者 1。