作者: xiaoman
2023-07-01
This is the first post of my new Astro blog.
前前后后看了不少次 HTML 教程了，总是停留在看的阶段，没有亲自动手去写前端页面。 因为暂时还用不到，又有想学的念头，为了防止之后用起来的时候遗忘得太严重，这里写一篇总结以随时查阅。 关于 HTML 这个东西，跟 CSS，JavaScript 号称网页三剑客，其中 HTML 又是最基础的。 它是网页结构的骨架，是网页内容最原始、最朴素的展现。 HTML 包含了以下这些内容，在我看来，最基础的是语义化标签结构，在此基础上扩展了表格、表单、图片、视频、链接等。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<meta
name="description"
content="HTML 语言入门"
/>
<meta
name="keywords"
content="HTML,教程"
/>
<meta
name="author"
content="张三"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<meta
name="application-name"
content="Application Name"
/>
<meta
name="generator"
content="program"
/>
<meta
name="subject"
content="your document's subject"
/>
<meta
name="referrer"
content="no-referrer"
/>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'"
/>
<meta
http-equiv="Content-Type"
content="Type=text/html; charset=utf-8"
/>
<meta
http-equiv="refresh"
content="30"
/>
<meta
http-equiv="refresh"
content="30;URL='http://website.com'"
/>
<link
href="default.css"
rel="stylesheet"
title="Default Style"
/>
<link
href="fancy.css"
rel="alternate stylesheet"
title="Fancy"
/>
<link
href="basic.css"
rel="alternate stylesheet"
title="Basic"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="114x114"
href="favicon114.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="72x72"
href="favicon72.png"
/>
<link
rel="alternate"
type="application/atom+xml"
href="/blog/news/atom"
/>
<!--
rel属性表示外部资源与当前文档之间的关系，是<link>标签的必需属性。它可以但不限于取以下值。
alternate：文档的另一种表现形式的链接，比如打印版。
author：文档作者的链接。
dns-prefetch：要求浏览器提前执行指定网址的 DNS 查询。
help：帮助文档的链接。
icon：加载文档的图标文件。
license：许可证链接。
next：系列文档下一篇的链接。
pingback：接收当前文档 pingback 请求的网址。
preconnect：要求浏览器提前与给定服务器，建立 HTTP 连接。
prefetch：要求浏览器提前下载并缓存指定资源，供下一个页面使用。它的优先级较低，浏览器可以不下载。
preload：要求浏览器提前下载并缓存指定资源，当前页面稍后就会用到。它的优先级较高，浏览器必须立即下载。
prerender：要求浏览器提前渲染指定链接。这样的话，用户稍后打开该链接，就会立刻显示，感觉非常快。
prev：表示当前文档是系列文档的一篇，这里给出上一篇文档的链接。
search：提供当前网页的搜索链接。
stylesheet：加载一张样式表。
-->
<!-- 作者信息 -->
<link
rel="author"
href="humans.txt"
/>
<!-- 版权信息 -->
<link
rel="license"
href="copyright.html"
/>
<!-- 另一个语言的版本 -->
<link
rel="alternate"
href="https://es.example.com/"
hreflang="es"
/>
<!-- 联系方式 -->
<link
rel="me"
href="https://google.com/profiles/someone"
type="text/html"
/>
<link
rel="me"
href="mailto:name@example.com"
/>
<link
rel="me"
href="sms:+15035550125"
/>
<!-- 历史资料 -->
<link
rel="archives"
href="http://example.com/archives/"
/>
<!-- 目录 -->
<link
rel="index"
href="http://example.com/article/"
/>
<!-- 导航 -->
<link
rel="first"
href="http://example.com/article/"
/>
<link
rel="last"
href="http://example.com/article/?page=42"
/>
<link
rel="prev"
href="http://example.com/article/?page=1"
/>
<link
rel="next"
href="http://example.com/article/?page=3"
/>
<!-- 资源预加载 -->
<link
rel="preload"
href="image.png"
as="image"
/>
<script
type="text/javascript"
src="javascript.js"
></script>
<script
type="module"
src="main.js"
></script>
<script
async
defer
nomodule
src="fallback.js"
></script>
<noscript>
您的浏览器不能执行 JavaScript 语言，页面无法正常显示。
</noscript>
<!--
<head>的子元素一般有下面七个，后文会一一介绍。
<meta>：设置网页的元数据。
<link>：连接外部样式表。
<title>：设置网页标题。
<style>：放置内嵌的样式表。
<script>：引入脚本。
<noscript>：浏览器不支持脚本时，所要显示的内容。
<base>：设置网页内部相对 URL 的计算基准。
-->
<title>这是网页标题</title>
<nav>
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
<form target="/search">
<input
name="q"
type="search"
/>
<input type="submit" />
</form>
</nav>
</head>
<body>
<header>页眉</header>
<aside>
<!-- 侧边栏 -->
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</aside>
<nav>
<!-- 导航栏 -->
<ol>
<li><a href="item-a">商品 A</a></li>
<li><a href="item-b">商品 B</a></li>
<li>商品 C</li>
</ol>
</nav>
<main>
<!-- 主内容 -->
<article>
<article>
<h1>文章标题</h1>
<section>
<h2>第一章</h2>
<p>...</p>
</section>
<section>
<h2>第二章</h2>
<p>...</p>
</section>
</article>
</article>
</main>
<footer>页尾</footer>
</body>
</html>