学习HTML最好的方式就是边学边做实验

HTML 是谁发明的?

HTML超文本标记语言,是一种用于创建网页标准的标记语言。由蒂姆·伯纳斯-李(Tim Berners-Lee)1990年创立。

HTML 起手应该写什么

  1. <!DOCTYPE html> 表示指定文档类型为HTML5
  2. <html lang="en"> 设定主语言,中文需把en改为"zh-CN"
  3. <head>
  4. <meta charset="UTF-8"> 文件的字符编码
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 告诉IE使用最新内核
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 禁用缩放,兼容手机
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. </body>
  11. </html>

HTML 章节标签(常用)

  • 标题 h1~h6
  • 章节 section
  • 文章 article
  • 段落 p
  • 头部 header
  • 脚部 footer
  • 主要内容 main
  • 旁支内容 aside
  • 划分 div (块级元素)

HTML 全局属性

所有标签都有属性

属性 描述
class 给标签分类(标记)
contenteditable 可以使任何元素可以被编辑
hidden 对元素进行隐藏
id 元素唯一的id
style 元素的行内样式
tabindex 设置元素的 Tab 键控制次序
title 规定元素的额外信息
(可在工具提示中显示)

【注】最好别用id,因为它不报错,CSS和Javascript里用class就够了。
【注】tabindex值:

  1. 为正整数时Tab键按顺序访问
  2. 为0时表示最后被访问
  3. 为负整数时不参与访问

HTML 默认样式

  • 不同浏览器拥有各自的默认样式
  • 怎么看默认样式

在Chrome开发者工具中查看
Elements->Styles->user agent stylesheet

  • User Agent

就是浏览器

  • CSS reset

默认样式已经不符合我们的需求了。

常见的CSS reset

  • 方方经常用的代码
  • 抄大厂代码
    • 进入大厂首页
    • Chrome开发者工具,找到类似代码
    • 复制到自己的项目
    • 命名为reset.css

HTML 内容标签(常用)

    +
  1. 有序列表

  • ordered list+list item)

    1. <ol>
    2. <li>知乎</li>
    3. <li>B站</li>
    4. <li>微博</li>
    5. </ol>

      +
    • 无序列表

  • (unordered list + list item)

    1. <ul>
    2. <li>橘子</li>
    3. <li>葡萄</li>
    4. <li>西瓜</li>
    5. </ul>

    +
    +
    描述列表

  • (description list + term + data)

    1. <dl>
    2. <dt>CPU</dt>
    3. <dd>中央处理器</dd>
    4. <dt>Memory</dt>
    5. <dd>内存</dd>
    6. <dt>Hard Disk</dt>
    7. <dd>硬盘</dd>
    8. </dl>

    1. 预格式化文本 preformatted

  • 保留空格和换行符、字体等宽。

    1. <pre>
    2. 此例演示如何使用 pre 标签
    3. 对空行
    4. 和 空格
    5. 进行控制
    6. </pre>


    水平线


    换行 (break)

    超链接 (anchor)

    1. <a href="https://wikipedia.org/">维基百科</a>

    表示强调,默认样式斜体 (emphasis)

    1. <p>我们<em>已经</em>讨论过这件事情了。</p>

    表示内容本身的强调,浏览器默认样式粗体

    1. <p>开会时间是<strong>下午两点</strong></p>

    代码

  • 如果要表示多行代码,标签必须放在

    1. 内部。本身仅表示一行代码。
    2. ```html
    3. alert()的作用是让网页弹出一个提示框。

  1. let a = 1;
  2. console.log(a);
  3.  

  1. <a name="MDTfF"></a>
  2. #### <blockquote> 块引用
  3. - <blockquote>标签有一个cite属性,它的值是一个网址,表示引言来源,不会显示在网页上。
  4. ```html
  5. <blockquote cite="https://quote.example.com">
  6. <p>天才就是 1% 的天赋和99%的汗水。</p>
  7. </blockquote>

行引用 (quote)

  • 它与
    的区别,就是它不会产生换行。
    1. <p>
    2. 莎士比亚的《哈姆雷特》有一句著名的台词:
    3. <q cite="https://quote.example.com">活着还是死亡,这是一个问题。</q>
    4. </p>