HTML 入门笔记1

HTML 简介

HTML 全称为 HyperText Makeup Language（超文本标记语言），是一种用于创建网页的标准标记语言，由物理学家 Tim Berners-Lee 于1990年左右发明。

HTML 起手式

<!DOCTYPE html>

<html lang="zh-CN">

<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>网页名称</title>

</head>

<body>

</body>

</html>

DOCTYPE：用于声明文档类型。
<html>：整个 html 文档的根元素。
- lang 属性：描述页面大部分内容使用的语言，例如 zh-CN（中文）、en（英文）等
<head>：规定文档相关的配置信息，或者说一些看不见的元素，一般在代码中不缩进。
<meta>：包含文档的一些元数据信息。
- charset 属性：声明了文档的字符编码
- content 属性：包含 http-equiv 或 name 属性的值，具体取决于所使用的值
- http-equiv 属性：定义了一个编译指示指令
  - <meta http-equiv="X-UA-Compatible" content="IE=edge">告诉IE浏览器使用最新内核
  - <meta name="viewport" content="width=device-width, initial-scale=1.0">用于兼容移动端，并禁用缩放
<title>：定义文档的标题，显示在浏览器的标题栏或标签页上。
<body>：表示文档的内容，一般在代码中不缩进。

常用的章节标签

<h1>~<h6>：标题，呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。
<section>：章节，一个通用的分节元素。
<article>：文章，可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
<p>：段落，通常表现为一整块与相邻文本分离的文本。
<header>：头部标签，用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。
<footer>：脚部标签，表示一个章节内容或者根节点元素的页脚。
<main>：表示文档的主要内容。
<aside>：旁支内容，表示一个和其余页面内容几乎无关的部分。
<div>：用于划分文档的内容。

全局属性（所有标签都有）

class 类
contenteditable 表示元素是否可被用户编辑
hidden 隐藏该元素
id 定义了一个全文档唯一的标识符 (ID)，但全局唯一性没有保障，就算有两个重复的 id，HTML 也不会提示错误
style 内联样式
tabindex 控制tab键导航顺序（特殊值 0 指最后一个，-1 指 tab 不会定位到）
title 鼠标浮动到元素后的提示内容

常用的内容标签

<ol>+<li>(ordered list + list item)：有顺序的列表
<ul>+<li>(unordered list + list item)：无顺序的列表
<dl>+<dt>+<dd>(description list + term + data)：用于描述的列表，<dt>表示被描述的对象，<dd>表示描述的内容
<pre>(preview)：保留所有的空格、tab和换行
<code>：表示一段代码，并默认采用等宽字体
<hr>：分割线
<br>(break)：换行
<a>(anchor)：可以通过href属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接
<em>(emphasis)：表示强调语气，一般采用斜体显示
<strong>：表示内容重要，一般采用粗体显示
<q>(quote)：行内引用的文本
<blockquote>：块级引用的文本