HTML入门笔记（一）

前端小学生001
168 阅读2分钟

什么是HTML

  • 超文本标记语言 (英语：HypertextMarkupLanguage，简称：HTML )
  • 用来结构化 Web 网页及其内容的标记语言

image.png

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−------------------------------------------

HTML是谁发明的？

  • HTML诞生于1990年
  • 是由Tim Berners-Lee发明的
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−------------------------------------------

这个人做了个啥

  • 他自己写了第一个浏览器
  • 他自己写了第一个服务器
  • 他用自己写的浏览器访问了自己写的服务器
  • 还发明了WWW（万维网 World Wide Web），同时也发明了HTML、HTTP、URL
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−------------------------------------------

HTML 起手应该怎么写

以vscode为例

<!DOCTYPE html>  <!-- 文档类型 -->
<html lang="en">  <!-- lang==>language  en==>English  zh-CN==>中国中文 -->

<head>
    <meta charset="UTF-8"> <!-- 文件的字符编码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 告诉IE使用最新内核 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- viewport==>视口 -->
    <!-- content="width=device-width, initial-scale=1.0" --- 禁用缩放，兼容手机 -->
    <title>Document</title> <!-- 标题 -->
</head>

<body></body>

</html>
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−------------------------------------------

常用的表示章节标签

  • 标题 h1~h6
  • 章节 section
  • 文章 article
  • 段落 p
  • 头部 header
  • 脚步 footer
  • 主要内容 main
  • 旁支内容 aside
  • 划分 div
<body>
    <header>
        我是头部
    </header>
    <div> <!-- 划分的区域 -->
        <main> <!-- 主要内容 -->
            <section> <!-- 章节一 -->
                <h1>章节标题</h1>
                <article> <!-- 章节文章 -->
                    <p>章节文章的段落</p>
                    <p>章节文章的段落</p>
                    <p>章节文章的段落</p>
                </article>
                
            </section>
        </main>
        <aside> <!-- 旁支内容 -->
            <h1>旁支标题</h1>
            <article> <!-- 旁支文章 -->
                <p>旁支文章的段落</p>
                <p>旁支文章的段落</p>
                <p>旁支文章的段落</p>
            </article>
        </aside>
    </div>
    <footer>
        我是脚部
    </footer>
</body>
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−------------------------------------------

常用的内容标签

  • ol + li 表示有序列表

image.png

  • ul + li 表示无序列表

image.png

  • dl + dt + dd 表示描述的列表

image.png

  • pre 表示预定义格式文本
<pre>
        A                           E
            B                   F
                C           G
                    D   H
</pre>

image.png

  • hr 表示分割线

image.png

  • br 表示换行

image.png

  • a 超链接标签

image.png

  • em 表示语气上的强调（斜体展示）

image.png

  • strong 表示内容本身的重要性（加粗展示）

image.png

  • code 呈现一段计算机代码

image.png

  • q 内联引用文本
  • blockquote 块级引用文本
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−------------------------------------------

HTML标签的全局属性

  • class 类名
  • contenteditable 被包裹的内容允许编辑
  • hidden 隐藏元素
  • id 定义唯一标识符
  • style 为元素增加css样式
  • tabindex 通过tab建聚焦元素 （访问顺序为数字从小到大，-1表示不被聚焦，0表示最后访问）
  • title 包含表示与其所属元素相关信息的文本
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−------------------------------------------

资料来源：饥人谷、mdn

avatar
文章
阅读
粉丝