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. 修改默认文本方向
      <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. 使变小