HTML 笔记

贡献者： addis

本文处于草稿阶段。

<!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=".."，不要求唯一。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 的缩写，常见的值还有 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：显示效果（可以作为分子或分母或上下标的输入框）

代码 1：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>