HTML 原本只是简单的超文本标记语言,用来展示文档,但到现在已经和 CSS、JS 成为丰富多彩前端的一部分了。

基本结构

首先是文档的基本结构:

<!DOCTYPE html>
<html>
<head>
<title>页面名称</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="Shortcut icon" href=""/>
<link rel="stylesheet" href="style.css"/>
<style type="text/css"></style>
<script src=""></script>
<script type="text/javascript"></script>
</head>
<body>



</body>
</html>

<body> 里是文档的正文,<head> 里的内容不会被显示。

常用元素

标题和块:

  • <h1></h1> <h2></h2> <h3></h3> <h4></h4>
  • <div></div>
  • <span></span>
  • <p></p>
  • <br/>
  • <hr/>
  • <!-- -->

文本样式:

  • &nbsp &lt; &gt;
  • <b></b> <i></i> <u></u> <del></del>
  • <strong></strong> <em></em>

特殊内容:

  • <img src="" alt=""/>
  • <a target="_blank" rel="nofollow" href=""></a>
  • <blockquote"></blockquote>
  • <pre></pre>
  • <code></code>

列表

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>
<dl>
	<dt></dt>
	<dd></dd>
	<dd></dd>
	
	<dt></dt>
	<dd></dd>
	<dd></dd>
</dl>

表格

  • <td colspan="2"></td>
  • <td rowspan="2"></td>
<table>
	<tr>
		<th></th>
		<th></th>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

框架

  • <iframe src=""></iframe>
<frameset rows="50%,50%">
	<frame src="">
	
	<frameset cols="25%,75%">
		<frame src="">
		<frame src="">
	</frameset>
	
</frameset>

表单

  • <form action="" method="get"></form>
  • <input type="text" name=""/>
  • <input type="password" name=""/>
  • <input type="radio" name=""/>
  • <input type="checkbox" name=""/>
  • <input type="file" name=""/>
  • <input type="hidden" name=""/>
  • <input type="button" name=""/>
  • <input type="submit" name=""/>
  • <textarea name="" placeholder=""></textarea>
<select>
	<option value=""></option>
	<option value=""></option>
	<option value=""></option>
</select>

一些好习惯

  • 勤换行
  • 统一小写
  • 遵从 XML/XHTML 的规范,总是关闭标签
  • 样式尽可能交由 CSS 处理
  • 使用 div 而非表格布局

附:HTML 参考手册

这是原笔记和参考文档的合并转写。 —— 2019.12.7