# HTML Introduction

什么是HTML？作为一个前端开发系统的了解一下HTML文档

# 什么是 HTML

是超文本标记语言
是创建网页的标准标记语言
描述网页的结构，它由一段元素组成

# 一个简单的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>段落</p>
</body>
</html>

<!DOCTYPE> 声明：声明表示文档类型，并帮助浏览器正确显示网页。它只出现一次，在页面顶部（在任何HTML标记之前）。
- 数学标记语言：!DOCTYPE math
- 符号交换文件格式：!DOCTYPE NITF
HTML 文档的可见部分位于 <body> 和 </body> 之间。

# HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。日常开发不要忘记结束标签

<tagname>Content goes here...</tagname>
<h1>My First Heading</h1>
<p>我的第一个段落。</p>

# HTML 样式

HTML style 属性用于改变 HTML 元素的样式。

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

# HTML 注释

HTML 注释不会显示在浏览器中，但它们可以帮助记录 HTML 源代码。

<!-- 在这里写下你的注释 -->
<p>我是段落标签</p>

# HTML 与 CSS

CSS 可以通过3种方式添加到 HTML 文档：

内联 - 通过在 HTML 元素中使用 style 属性（它的优先级仅低于 !important）
内部 - 使用 <head> 部分中的 <style> 元素
外部 - 通过使用 <link> 元素引入到外部 CSS 文件

# class 和 id

class 属性通常用于指向样式表中的类名。JavaScript 也可以使用它来访问和操作具有特定类名的元素。

多个类，可以通过空格分开
类名可以通过js获取（getElementsByClassName）
类名区分大小写

<div class="city London">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city Paris">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

id 属性用于为HTML 元素指定唯一的 id。

一个 HTML文档中不能存在多个有相同 id 的元素。
id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。
id 名称对大小写敏感！

<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
<h1 id="myHeader">My Header</h1>

id 可以借助 <a href="#top"> 标签进行简单的锚点

<h2 id="C4">第四章</h2>
<!-- 这里内容可能很多 -->

<a href="#C4">Jump to Chapter 4</a>

使用 id 属性通过 JavaScript 来处理文本：

function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}

（六）Promise 初探 HTML 语义化标签