第一个Html,编码格式要写,否则会出现乱码。
<!DOCTYPE html>
<html>
<head>
<title>我的第一个Html页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 编码格式,如果浏览器不是utf-8会出乱码 -->
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
2、h标签的练习
<!DOCTYPE html>
<html>
<head>
<title>MyHtml1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<!-- h标签标题的练习,h1,h2,h3,h4,h5,h6字体大小的不同 -->
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>
</body>
</html>
3、p 段落标签的练习
<!DOCTYPE html>
<html>
<head>
<title>MyHtml2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<!-- p标签段落的练习 -->
<body>
<p>段落一。</p>
<p>段落一。</p>
<p>段落一。</p>
<p>段落一。</p>
<p>段落一。</p>
</body>
</html>
4、a标签,href超链接
<!DOCTYPE html>
<html>
<head>
<title>MyHtml2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<!-- a标签超链接的练习 -->
<body>
<a href="http://www.baidu.com">这是一个href类型的超链接</a>
</body>
</html>
5、img 图片引用标签
<!DOCTYPE html>
<html>
<head>
<title>MyHtml2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<!-- img标签 ,这个图片是放在同级的目录下,所以直接就可以了,如果不是同级,指定到确定的目录-->
<body>
<img src="sss.png" width="300" height="120"/>
</body>
</html>
6、br标签换行,hr标签划线
<!DOCTYPE html>
<html>
<head>
<title>MyHtml2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<!-- p标签段落的练习 -->
<!-- br标签换行的练习 -->
<!-- hr标签划线的练习 -->
<body>
<p>段落一。</p>
<hr />
<p>段落一。</p>
<br />
<p>段落一。</p>
<br />
<p>段落一。</p>
<br />
<p>段落一。</p>
</body>
</html>
7、排版练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落练习</title>
</head>
<body>
<p>
这个段落
在源代码中
包含许多行
但是浏览器
忽略了它们。
</p>
<p>
这个段落
在源代码 中
包含 许多行
但是 浏览器
忽略了 它们。
</p>
<p>
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小,将改变段落中的行数。
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>排版</title>
</head>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓,
处处闻啼鸟。
夜来风雨声,
花落知多少。
</p>
<p>注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。</p>
</body>
</html>
8、b,strong,big,small,em,sub,sup标签的作用
<!DOCTYPE html>
<html>
<head>
<title>我的第一个Html页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 编码格式,如果浏览器不是utf-8会出乱码 -->
</head>
<!-- b,strong加粗 -->
<body>
<b>这个文本是加粗的</b>
<br/>
<strong>这个文本是加粗的</strong>
<br/>
<big>这个文本放大</big>
<br/>
<em>这个文本是斜体的</em>
<br/>
<small>这个文本是缩小的</small>
<br/>
这个文本包含
<sub>下标</sub>
<br/>
这个文本包含
<sup>上标</sup>
<br/>
</body>
</html>
9、pre标签,让空格生效的标签
<!DOCTYPE html>
<html>
<head>
<title>我的第一个Html页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 编码格式,如果浏览器不是utf-8会出乱码 -->
</head>
<!-- b,strong加粗 -->
<body>
<pre>
演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
</body>
</html>
10、关于计算机编码的标签,都已写注释
<!DOCTYPE html>
<html>
<head>
<title>我的第一个Html页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 编码格式,如果浏览器不是utf-8会出乱码 -->
</head>
<!-- b,strong加粗 -->
<body>
<code>计算机输出</code>
<br/>
<kbd>键盘输入</kbd>
<br/>
<tt>打字机文本</tt>
<br/>
<samp>计算机代码样本</samp>
<br/>
<var>计算机变量</var>
<br/>
<p>
<b>注释:</b>
这些标签常用作显示计算机/编程代码
</p>
</body>
</html>
11、缩略词的用法
<!DOCTYPE html>
<html>
<head>
<title>我的第一个Html页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 编码格式,如果浏览器不是utf-8会出乱码 -->
</head>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="www.baidu.com">www</acronym>
<br />
<p>在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>
12、控制文字显示顺序的标签 bdo
<!DOCTYPE html>
<html>
<head>
<title>我的第一个Html页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 编码格式,如果浏览器不是utf-8会出乱码 -->
</head>
<body>
<p>该段落文字从右到左显示</p>
<p><bdo dir="rtl">该段落从右到左显示</bdo></p>
</body>
</html>
好了,今天就学到这里吧。