HTML 笔记

贡献者： addis

本文处于草稿阶段。

代码 1：test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 内容 -->
</body>
</html>

　　 常识：

文件头 <!DOCTYPE html> 意味着必须使用 html 5。之前的标准的头更复杂。
注释用 
所有的 <script src=""></script>，无论是外部 js 文件还是直接嵌入代码，无论在 <head> 还是 <body> 中都是按出现的顺序执行的。如果 <head> 中的代码还没有执行完，就不会渲染 html 页面。
attributes 用双引号（最常见），单引号，无引号（不标准）都行，例如 <a href="https://example.com" title="Visit Example Website">链接文字</a>。注意用空格隔开。
可以用 base64 来表示图片，代替单独的图片文件 <img src="data:image/jpeg;base64,一个base64字符串" alt="..."> \end{lstlisting}。其中 一个base64字符串 是直接把整个文件转换成 base64，在 linux 命令行中可以用 base64 文件 做到。该命令默认给每 64 个字符换行，最后一行即使每填满也换行。若不需要换行用 base64 -w 0 文件
任何 tag 都可以加 id=".."，原则上 id 是整个 html 中唯一的。
任何 tag 都可以加 class="class1 class2 class3"，不要求唯一。css 可以指定一个 class 或 id 的格式。
这些属性叫做 global attributes。其他例子如 style，title（鼠标悬停提示），hidden（隐藏内容）
每个 html 都建议在 <head> 中放一个图标 <link rel="icon" href="path/to/your/favicon.ico" type="image/x-icon">，否则浏览器调试界面会报错找不到图标。
rel 是 relationship 的缩写，常见的值还有 rel="stylesheet"
如果目录 example.com/folder/ 中有 index.html，那么直接输入前者就可以自动加载后者。如果 html 中需要同目录的文件，只需要 href="文件名" 即可加载 example.com/folder/文件名，但如果 url 没有最后的 / 就会出错。为此，可以在 <head> 的一开始用 js 检查并添加最后的 /：
```

<script>
if (window.location.href.slice(-1) != '/')
    window.location.href = window.location.href + '/';
</script>
```
注意改变 window.location.href 相当于立即进行一次页面跳转。另外注意 window.location.href 包含了整个 url，包括后面可能的参数，js 就是通过这个属性来 parse 参数的（参考 URL 和 URLSearchParams 类）。

转义字符

  不换行的空格
& (&).
< (<).
> (>).
" (").
' (').

1. <input> 输入框属性

　　这是为了重新实现 mathtype 网页编辑器的一个努力，还需要用 JS 实现输入框随内容变长

图 1：显示效果（可以作为分子或分母或上下标的输入框）

代码 2：input_box.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Input Box Example</title>
	<style>
		#myInput {
			/* Positioning relative to the nearest positioned ancestor */
			position: absolute;
			/* 100px from the top of the nearest positioned ancestor */
			top: 100px;
			/* 200px from the left of the nearest positioned ancestor */
			left: 200px;
			/* Width of the input box */
			width: 50px;
			/* Height of the input box */
			height: 20px;
			/* Size of the text inside the input box */
			font-size: 18px;
			/* Horizontally center text */
			text-align: center;
			/* Remove padding to avoid text misalignment */
			padding: 0;
			/* Vertically center the text by matching line height to box height */
			line-height: 50px;
			/* Dashed gray border, color #808080 */
			border: 2px dashed #808080;
			/* Removes any focus outline the browser might apply */
			outline: none;
			/* Ensures no shadow effects are applied */
			box-shadow: none;
		}
	</style>
</head>
<body>
	<input id="myInput" type="text" placeholder="">

	<script>
		// Automatically focus the input box when the page loads
		window.onload = function() {
			document.getElementById('myInput').focus();
		};
	</script>
</body>
</html>

致读者：小时百科一直以来坚持所有内容免费无广告，这导致我们处于严重的亏损状态。长此以往很可能会最终导致我们不得不选择大量广告以及内容付费等。因此，我们请求广大读者热心打赏 ，使网站得以健康发展。如果看到这条信息的每位读者能慷慨打赏 20 元，我们一周就能脱离亏损，并在接下来的一年里向所有读者继续免费提供优质内容。但遗憾的是只有不到 1% 的读者愿意捐款，他们的付出帮助了 99% 的读者免费获取知识，我们在此表示感谢。