代码显示

<!DOCTYPE html>
<html>
<!--告诉浏览器html从这里开始-->
<head>
 	<meta charset='UTF-8'>
 	<title>这是标题，会显示在浏览器的标题栏</title>
 	<style type='text/css'><!--属性type可以告诉浏览器你在使用什么类型-->  
 	<!--body{}里不能有注释，这里是为了方便阅读添加了注释-->
   	body{background-color:#d2b48c;<!--设置背景颜色为土黄色,#d2b48c是十六进制代码-->
  		 margin-left:20%;<!--页面左边距占页面的20%-->
 		 margin-right:20%;
    		 border:2px dotted black;<!--定义页面主体周围的边框是虚线，颜色为黑色-->
    		 padding:10px 10px 10px 10px;<!--在页面主体周围创建一些页边距(顺时针)-->
   		 font-family:sans-serif;}<!--定义文本使用的字体--> 
</style>
</head>
<!--这是注释，内容不会显示在浏览器中-->
<body>
	<!--body的内容会显示在浏览器中-->
	<h1 align='center'>这是标题</h1><!--描述标题在页面居中-->
	<hr /><!--创建一条水平线在h1和h2中间-->
	<h2>这是标题</h2>
 	<h3>这是标题</h3>
	<h4>这是标题</h4>
 	<h5>这是标题</h5>
 	<h6>这是标题</h6><!--描述文本为粗体，且数字越大，字号越小-->
	<p id='指定内容'>这是段落<br />段落的行数随浏览器窗口大小改变</p>
 	<!--br标签描述换行-->
 	<img src='1.jpg'>
	<a href='http://www.baidu.com'>百度一下，你就知道</a>
 	<a href='1.jpg'>你懂的</a><!--href指向相同文件夹中的页面-->
 	<a href='../python/猜数游戏.py'>嘿嘿嘿</a>
 	<a href='#指定内容' target='_blank'>111</a><!--在新窗口打开链接，并且页面滚动到<p>处-->
 	<q>用于短引用，作为现有段落的一部分，有的浏览器会把引用内容加上双引号</q>
	<blockquote>用于长引用，创建了单独的一个文本块,还把文字稍稍缩进，使它更像一个引用。</blockquote>
 	<blockquote>现在在段落里放入<br>标签，表示换行</blockquote>
 	<em>元素告诉浏览器把其中的文本表示为强调的内容。 对于所有浏览器来说，这意味着要把这段文字用斜体来显示。</em>
	<strong>标记你希望的特别强调的文本，加粗显示</strong>
	<ol><!--创建一个有序列表-->
  		<li>北京</li>
 		<li>上海</li>
  		<li>广州</li>
  		<li>深圳</li>
 	</ol>
 	<ul><!--创建一个无序列表-->
 		<li>北京</li>
  		<li>上海</li>
  		<li>广州</li>
  		<li>深圳</li>
 	</ul>
	<dl>
  		<dt>列表中每一项都有一个定义术语< dt ></dt>
  		<dd>和一个定义描述< dd ></dd>
 	</dl> 
 	<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
 	<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>
 	<!--time告诉浏览器这个内容是一个时间或日期，或者同时包含时间和日期-->
 	 <pre>
 		希望浏览器按你的输入方式原样输入文本时，使用这个元素来指定文本的格式
 	</pre>
 	<code>
	 显示计算机程序代码
 	</code>
</body>
</html>

补充内容

1.< a >元素

1.语法href属性：< a href=“value” >xxx< /a >
值：超链接的 URL。可能的值：

绝对 URL - 指向另一个站点（比如 href=“http://www.example.com/index.htm”）
相对 URL - 指向站点内的某个文件（href=“index.htm”）
锚 URL - 指向页面中的锚（href="#top"）
相对路径：
链接到当前文件夹(a)的子文件夹( b )里的图片(1.jpg):< a href=‘b/1.jpg’ >1< /a >
链接到当前文件夹(a)的父文件夹( c )里的图片(2.jpg):< a href=’…/2.jpg’ >2< /a >
每一次使用’…‘都会上行到上一层文件夹，所以如果想上行两级文件夹，可以输入’…/…’

2.语法title属性：< a href=“value1” title=“value2” >xxx< /a >
值：value2描述value1链接的网站的大致信息。
功能：当用户鼠标在xxx上停留时，会显示value2，对于有视力障碍的人来说，浏览器可能会大声地朗读链接标题。另：可以为任意元素添加title属性！

3.id属性
功能：可以链接到另一个网页的指定内容。
使用方法：

确定要链接的目标，一般是目标网页的标题，在目标网页的源代码中加入id=‘指定内容’，如<h1 id='指定内容'>，注意，这个指定内容的目标id必须是唯一的！
在原网页的< a >元素中加入<a href='目标网页的URL#指定内容'>。如果指定内容就在原网页中，可以省略href中目标网页的URL。
此时点击目标网页的链接，浏览器会自动将目标网页滚动到指定内容。

4.target属性
功能：在新窗口打开链接
语法：<a target='_blank' href='xxx'>xxxx</a>
在这里插入图片描述

2.< br >元素

表示换行。
元素 = 开始标签 + 内容 + 结束标签
< br >没有内容，是void元素。< img >也是void元素。

3.块元素与内联元素

块元素：< h1 >、< h2 >…< p >、< blockquote >
每个块元素都单独显示，就好像前后都有换行，将内容分块显示。

内联函数：< q >、< a >、< em >
显示在段落中。

4.创建列表

第一步：将每一个列表项放入< li >元素中。
第二步：用< ol >或< ul >包围列表项。
< ol >表示有序列表
< ul >表示无序列表
*除了有序列表和无序列表，还有一种是定义列表：

<dl>
 	<dt>列表中每一项都有一个定义术语</dt>
  	<dd>和一个定义描述</dd>
</dl>

5.字符实体

当我们需要在浏览器中显示<和>时，或者想在web页面中使用某个字符，但是你的编辑器无法输入（比如版权字符）时，需要使用字符实体，也就是符号相应的缩写。可以在www.unicode.org和www.w3cschools.com查到字符实体。
例如：

<的缩写是"&lt ;"
>的缩写是"&gt ;"
< html >可以写成&lt;html&gt;

6.< pre >元素

可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
< pre > 标签的一个常见应用就是用来表示计算机的源代码。
可以导致段落断开的标签（例如标题、< p > 和 < address > 标签）绝不能包含在 < pre > 所定义的块里。

7. URL

在这里插入图片描述

绝对路径：告诉服务器如何从你的根文件夹到达某个特定的页面或文件。例如根文件夹为a，你所需的页面c在a的子文件夹b中，那么绝对路径为"/b/c"。
如果浏览器向服务器请求一个目录(文件夹)而不是文件，如http://www.xxx.com/image或http://www.xxx.com/时，web服务器会尝试查找这个目录中的默认文件，通常默认文件名为"index.html"或"default.hml"，如果服务器找到这样的文件，会把它返回给浏览器显示。
所以要从根目录（或者任何其他目录）默认地返回一个文件，只需把这个文件命名为"index.html"或"default.hml"
但我们有时的请求末尾没有"/"，当web服务器收到末尾没有"/“的请求时，而且这个目录确实存在，服务器就会自动在末尾加上”/"，这会让服务器查找一个默认文件，最终返回这个文件。