指定中文编码

在<head>标签中加入

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />

  • HTML基本格式
<html>
<head>
<title>标题</title>
</head>
<body>
用户可见部分
</body>
</html>
  • 文本元素
  • <p>普通文本</p>
<br> 换行
<hr> 水平分割线
<pre>预定义文本</pre>
  • 逻辑样式
  • <em>强调（斜体）</em>
<strong>强调（加粗）</strong>
<code>源代码或者机器可以阅读的文本</code>
  • 物理样式
  • <b>粗体文本</b>
<i>斜体文本</i>
  • 超链接、图像元素
  • <a href="">超链接</a>
<a href="
    "><img src="URL"
alt="图像url失败后显示的文本内容"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>
A named anchor:
<a name="tips">name命名</a>
<a href="#tips">跳转到tips</a>
  • 无序列表
  • <ul>
<li>First item</li>
<li>Next item</li>
</ul>
  • 有序列表
  • <ol>
<li>First item</li>
<li>Next item</li>
</ol>
  • 自定义列表
  • <dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
  • 表格
  • <table border="1">
<tr>
  <th>tr代表行</th>
  <th>th代表列</th>
</tr>
<tr>
  <td>text</td>
  <td>text</td>
</tr>
</table>
  • 框架
  • <frameset cols="25%,75%">
  <frame src="page1.htm">
  <frame src="page2.htm">
  //垂直分割为两部分，分别指向不同html
</frameset>
  • 表格
  • <form action="http://www.example.com/test.asp" method="post/get">
//当提交表单时，表单数据会提交到名为 "test.asp" 的页面：
<input type="text" name="lastname" size="30" maxlength="50"> 
//定义文本输入 
<input type="password">
<input type="checkbox" checked="checked"> 	//选择框
<input type="radio" checked="checked">		//单选按钮

<input type="submit">						//提交
<input type="reset">						//重置
<input type="hidden">						//隐藏
<select>									//选择
<option>Apples
<option selected>Bananas
<option>Cherries							//不同选项
</select>
<textarea name="Comment" rows="60"			//文本区域
cols="20"></textarea>
</form>
  • 实体
  • //最常用的———空格
&nbsp;        
/*不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了&nbsp;，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。*/

&ensp;        

/*半角空格，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
*/
&emsp;        

/*全角空格，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。
*/
&thinsp;        
/*
它叫窄空格，全称是Thin Space。该空格占据的宽度比较小。它是em之六分之一宽。
*/
&zwnj; 

/*零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： &#8204;
*/
&zwj;

/*零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D 。
*/
  • 其他
  • <!-- This is a comment -->		//注释
<blockquote>					//标记长引用			
Text quoted from some source.
</blockquote>
<address>						//标签定义文档或文章的作者/拥有者的联系信息。
Address 1<br>
Address 2<br>
City<br>
</address>