HTML知识点整理

  • 前世今生与概括

    许多计算机通过Internet连接在一起，而在万维网上，可以找到图片、视频等资源。网景与微软争夺浏览器市场，促使了HTML规范的统一。
    HTML:描述网页的一种语言，没有强逻辑处理能力，标记语言而非编程语言。

  • 入门

    创建一个.html文件，使用VSCode打开，输入!，显示出了

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

    • 基础

      1. doctype声明：在HTML4.01中很复杂，HTML5使其统一
      2. language为English
      3. 字符集编码（character）为utf-8
      4. 实现网页自适应（根据不同终端设备动态调整网页的缩放与比例）
      5. title为网站标题

    • 提升

      1. meta部分放在head中，让浏览器早知道这些信息
      2. meta元素中name属性有不同的值。这里引出搜索引擎优化（SEO）
      1
      2
      3
      <meta name="keywords" content="这里写关键字">
      <meta name="description" content="这里写描述">
      <meta name="author" content="这里写作者">

      其他功能

      1
      <meta http-equiv="refresh" content="这里写秒数;这里写网站">

  • 元素及其属性介绍

    • 元素：img（元素后为属性，以下同理）

      1. src->路径
      2. alt->图片不能正常显示时出现的文字

    • a

      1. href->链接
      2. target->如果值为_blank，则超链接在新窗口打开。如果值为_self，则超链接在当前页打开。

    • noscript

      1. 当浏览器不支持JS时，显示的内容

    • pre

      1. 浏览器遇到一个或多个tab、space、enter时会被设置为一个空格，pre按照源文本格式显示
      2. 其内字体为等宽字体而非比例字体

    • code

      1. 内写代码
      2. 注意前端开发的规范，使用正确的元素去做正确的事

    • q

      1. 段引用，会在两侧加“ ”

    • blockquote

      1. 长引用，会缩进

    • cite

      1. 引用作品

    • abbr

      1. 定义简称或缩写，配合title使用
      1
      <p><abbr title="这里写全称">这里写简称</abbr>这里写后续文本</p>

    • dfn

      1. 定义术语

    • address

      1. 作者联系方式

    • ruby

      1. rt->里写标识的内容。rp->浏览器不支持ruby时所显示的内容
      1
      <ruby> 明 日 <rp>(</rp><rt>ming ri</rt><rp>)</rp> </ruby>

    • bdo

      1. 修改默认文本方向
      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
              <bdo dir="ltr">left- to - right</bdo>
              <bdo dir="rtl">right - to - left</bdo>
              <bdo dir="auto">auto</bdo>

          - strong 
              1. 表示强调
              2. b也可以表示强调

          - em
              1. 倾斜
              2. i也可以表示强调
              3. 尽管b与i也可以实现相应的功能，但这些**标签**没有相应的语义。有本书说*应该遵循语义与实现相分离*，暂时不太理解。

          - ins/del
              1. 分别为插入与删除

          - s
              1. 定义不正确的内容
              2. 注意del与s不能混用

          - mark
              1. 标记

          - sup/sub
              1. 上标文本与下标文本

          - small
              1. 使变小


      ## 列表语法

      - 元素及其属性介绍

          - ol
        1. 定义有序列表，列表中的每一项同样用`<li></li>`标识
        2. 属性，reversed、start、type

          - reversed（对列表进行降序排序）

          ```html
          <ol reversed>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
          </ol>

    • start

    1
    2
    3
    4
    5
    <ol start="50">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    • type（规定类型为罗马字母）
    1
    2
    3
    4
    5
    <ol type="I">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>

  • dl

    1. 定义列表
    2. dl需要与dt和dd配合使用
    1
    2
    3
    4
    5
    6
    <dl>
      <dt>Coffee</dt>
      <dd>Black hot drink</dd>
      <dt>Milk</dt>
      <dd>White cold drink</dd>
    </dl>

    显示效果：

    1
    2
    3
    4
    5
    6
    <dl>
        <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dt>Milk</dt>
        <dd>White cold drink</dd>
    </dl>

表格

  • table/tr/th/td(row,headercell,datacell)

    1. tr中的内容默认加粗并居中
    2. 标签table没有边框—语法与实现相分离
    3. 加边框—{border:1px solid black;}，写在table、th、td内即给对应的加边框
    4. 使边框合并—border-collapse:collapse;
    5. 给table加标题，需要紧挨着table开始标签，使用caption属性写在table标签内
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <table style="border:1px solid black;">
            <caption>
                Hdd
            </caption>
            <tr>
                <th style="border:1px solid black;">
                    1
                </th>
                <th style="border:1px solid black;">
                    2
                </th>
            </tr>
            <tr>
                <td style="border:1px solid black;">
                    q1
                </td>
                <td style="border:1px solid black;">
                    q2
                </td>
            </tr>
        </table>
    1. thead/tbody/tfoot进行分割表格

    <thead> 元素与 <tbody> 和 <tfoot> 元素结合使用，以规定表格的每个部分（页眉、正文、页脚）。

    • colspan属性：允许th、td跨行、列显示（colspan跨行，rowspan跨列）
    1
    <td rowspan="这里写要跨的行数">XX</td>
    • 批量设置一列或者多列的style
    1
    2
    3
    <colgroup>
        <col span="这里写列数，默认为1" style="这里写样式">
    </colgroup>

表单<form></form>

  1. action=””。交由谁处理，默认当前界面
  2. method=””。使用哪种HTTP方法将表单发给Server
    • GET：将数据整合到URL里，不安全
    • POST：数据随HTTP消息主题发到服务器
  3. target：指定显示的位置，例如_blank

  • button：按钮

    • type：选择可选的属性值
      1. submit：提交
      2. button：按钮
      3. reset：重置
    • formmethod=”get/post”，HTML5新增，修改原form中规定的提交方法

  • form中的autocomplete属性：on开；off关。（自动填充：由于隐私，有时候用户不希望输入框下有提示）

input元素

  • type：此属性可以选择不同的属性值，但最终都是以按钮的形式展示

    1. submit
    2. reset
    3. button
    4. text
    5. radio（单选框）
    6. checkbox（复选框）
    7. time/data（时间/日期选择器）
      • 13:14会在URL地址栏中显示13%3A34，因为其为了避免有歧义，引入了URL编码。
    8. search（搜索框）
      • 具体的搜索用script code实现
    9. color（颜色选择器）
      • 例如：#1bac5a,可分为3组，分别代表R\G\B三原色的值
    10. hidden（隐藏按钮）
    11. file（上传文件）
    12. number（限定数字）
      • min最小；max最大
    13. range（数值滚动条）
      • step步长；min最小；max最大
    14. textarea：接受多行文本

  • value：此属性指定在按钮上显示的值或者在文本框里预定输入的值等

  • name：这个名称在表单提交时，将作为键值对的一部分被发送到服务器。只有设置了name属性的表单元素，其值才会在表单提交时被传递。这意味着如果你的输入元素没有name属性，或者name属性为空，那么这个输入的值就不会与表单一起提交。

  • id：在一个HTML文件中，id值是唯一的，可供CSS/JS选择器选择

  • placeholder：输入框中的提示

  • required：必填字段，否则不能提交

  • autofocus：一打开界面，光标就会自动放在某个输入框上

  • autocomplete属性：自动填充。on开；off关。

div与语义化布局

  1. div：一个块级无语义元素

HTML5中的新语义元素：

  • nav：导航
  • section：节

嵌入

  1. 嵌入网页
1
<iframe src="https://www.example.com" width="500" height="300"></iframe>
  • sandbox 属性为 iframe 中的内容启用了一组额外的限制。
    404

在个人博客中嵌入搜索引擎

使用 CSS 渐变

点击这里

CSS 文字特效

点击这里

60+ CSS 搜索框代码

点击这里

学习Web的小网站

点击这里

实现嵌入搜索功能的核心代码

<div class="c1">
    <form name="a1" action="https://www.bing.com/search" method="GET" target="_blank">
        <input type="text" name="q" placeholder="请输入搜索内容"> <!--name="q" 是关键-->
        <input type="submit" value="搜索">
    </form>
</div>