一1,一个简单的html文件
<html>
<head>
<title>这是第一个网页<\title>
<\head>
<body>
<p>这是第一个段落<\p>
</body>
</html>
2,简单的段落
<html>
<body>
<p>段落元素由p标签定义</p>
</body>
</html>
3,更多的段落
<html>
<body>
<p>
这是第一段;
</p>
<p>
这是第二段;
</p>
<p>
这是第三段;
</p>
</body>
</html>
4,“诗歌”的形式段落
<html>
<body>
<h1> 咏鹅 </h1>
<p>
鹅鹅鹅,
曲项向天歌。
白毛浮绿水,
红掌拨清波。
</p>
</body>
</html>
<html>
<body>
<h2>咏鹅 </h2>
<p>
鹅鹅鹅,
曲项向天歌。
</p>
<p>
白毛浮绿水,
红掌拨清波。
</p>
</body>
</html>
5,拆行
<html>
<body>
<p>
asdfg<br />vbnm,<br />bjhuyo.
</p>
</body>
</html>
6,标题
<html>
<body>
<h1>这是标题一</h1>
<h2>这是标题二</h2>
<h3>这是标题三</h3>
</body>
</html>
7,居中排列的标题
<html>
<body>
<h1 align="center"> this is heading 1</h1>
</body>
</html>
8,水平线
<html>
<body>
<p>this is 1;</p>
<hr />
<p><hr />所呈现的效果就是水平线</p>
<hr />
</body>
</html>
9,隐藏的注释
<html>
<body>
<!--这是一段注释,注释不会在浏览器中显示。-->
<p>一个段落</p>
</body>
</html>
10,背景颜色
<html>
<body bgcolor="yellow">
<h1>这里是改变成黄色的背景</h1>
</body>
</html>
11,链接的生成,在href属性中指定连接的地址
<html>
<body>
<a
href="http://www.w3school.com.cn">
this is a link</a>
</body>
</html>
12图像的定义,凸显个名称和尺寸是以属性的形式提供的
<html>
<body>
<img src="一个图片的路径"
width="300" height="120" />
<p>这里的width height分别是自定义图片的宽度和比重</p>
</body>
</html>
13,文本格式化
<html>
<body>
<b>this text is bold</p>
<br />
<strong>this text is strong</strong>
<br />
<big>this text is big</big>
<br />
<em>this text is emphasized</em>
<br />
<i>this text is italic</i>
<br />
<small>this text is small</small>
<br />
this text contains
<sub>subscript</sub>
<br />
this text contains
<sup>superscript</sup>
</body>
</html>
14,预格式化文本
<html>
<body>
<pre>
#include<stdio.h>
int main()
{
int a,b;
scanf("%d %d",&a,&b);
printf("%d",a+b);
return 0;
}
</pre>
<p>pre标签很适合计算机代码,它的预格式文本保留了空格和换行。</p>
</body>
</html>
15,“计算机输出标签”
<html>
<body>
<code>computer code</code>
<br />
<kbd>keyboard input</kbd>
<br />
<tt>teletype text</tt>
<br />
<samp>sample text</samp>
<br />
<var>computer variable</var>
<br />
<p>
<b>注释:</b>后面用于注释的内容。
</p>
</body>
</html>
16,地址
<html>
<body>
<address>
written by <a
href="链接的路径">
人物名字</a><br>
其他内容<br>
其他内容<br>
</address>
</body>
</html>
17,缩写和首字母缩写
<html>
<body>
<abbr title="etcetera">etc.</abbr><br />
<acronym title="world wide web">WWW.</acronym>
<p>在某些浏览器中,当你把鼠标移动到缩略词语上时,title可用于展示表达的完整版本</p>
<p>仅对于IE 5中的 acronym 元素有效</p>
</body>
</html>
18,文字方向
<html>
<body>
<p>
如果你的浏览器支持bi-directinaloverride(bdo),下一行会自动从右向左输出(rtl);
</p>
<bdo dir="rtl">
这里输入的内容最后呈现的结果是从右向左输出的结果
</bdo>
</body>
</html>
19,块引用
<html>
<body>
这是长的引用:
<blockquote>
这里写入的是长的引用内容。
</blockquote>
这里是短的引用:
<q>
引用的内容
</q>
<p>
使用blockquote元素的话,浏览器会插入换行和外边距,而q元素不会有任何特殊的呈现。
</p>
</body>
</html>
20,删除字效果和插入字效果
<html>
<body>
<p>自我<del>学习</del>让我感到很<ins>难受</ins>.</p>
<p>上面的文字输出的结果中,学习加上了删除线,难受加上了下划线。</p>
<p>大多数浏览器会改写为删除文本和下划线文本,一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
</body>
</html>
21,条件注释只有internet explorer 执行的html标签
<!--[if IE 8]>
......some HTML here.....
<![endif]-->
22,<table border="1">拥有关于表格边框的附加信息。
23,html <q>用于短的引用。
<html>
<body>
<p>浏览器通常会在 q 元素周围包围引号。</p>
<p>例如<q>人与自然和谐共处</q>下边的输出显示的是这样的结果</p>
<p> "人与自然和谐共处“ </p>
</body>
</html>
24,用于长的引用html <blockquote>
<html>
<body>
<p>浏览器通常会对blockquote元素进行缩进处理。</p>
<blockquote
cite="这里添加文件的网址">
亲爱的阅读者。
如果您喜欢作者的文章可否赏个币?
</blockquote>
<p>输出的效果如下:
亲爱的阅读者。如果您喜欢作者的文章可否赏个币?</p>
</body>
</html>
25,颜色值。颜色名,大多数的浏览器支持颜色名集合,仅仅16种颜色名:maroon, navy, olive, purple, red, silver, teal, white, yellow, aqua, black, green, lime, gray, blue, fuchsia.
安全色:
26,具体想要查询颜色名列表可以搜索网址:w3school.com.cn/html/html_colornames.asp
27,如何使用样式
外部样式表:当阳市被用到很多页面时,外部样式表是好的选择。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表:当单个文件需要个别样式时,可以使用内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式:当特殊的样式需要对应到个别的元素时,就可以使用内联样式。改变段落颜色和左边边距。
<p style="color: red; margin-left: 20px">
this is a paragraph
</p>
<style> 定义样式定义
<link> 定义资源定义
<div> 定义文档中的节或者区域(块级)
<span> 定义文档中的行内的小块或者区域
<font> 规定文本的字体,字体尺寸,字体颜色。
<basefont> 定义基准字体
<center> 对文本进行水平居中。