HTML实例【一】

今天在写JavaScript应用实例的时候遇到点问题，发现css还不太熟，html也一块学一下。我用hbuilderx发现轮播图的效果一直出不来，只是图片堆积，但是在菜鸟的在线工具上却可以，母鸡原因～各位大佬有知道原因的吗？？

	<h1>1、HTML基础</h1>
		<h1>标题</h1>
		<h2>标题</h2>
		<h3>标题</h3>
		<h4>标题</h4>
		<h5>标题</h5>
		<h6>标题</h6>
		
		<p>段落</p>
		
		<a href="https://www.baidu.com/">链接href属性</a>
		<br />
		<img src="./sun.gif" width="300" height="200"/>
		
		<h1>2、HTML标题</h1>
		<!-- 插入注释 ，在浏览器中不显示-->
		
		<p>hr标签定义水平线</p>
		<hr />
		<hr />
		<hr />
		
		<h1>3、HTML段落</h1>
		<p>更多段落：
			这个段落第一行
			段落第二行
			段落第三行
			但是浏览器省略了很多行这件事，只剩空格。
			多余的空格也省略成一个            空格
		</p>
		<p>更多段落：段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。111111111111111111111111111111</p>
		
		<p>折行：这个段落分行用br标签就可以了</p>
		<p>折行：这个段落分行用<br>标签<br>就可以了</p>
		
		<p>html中格式化某些问题</p>
		<h4>春晓</h4>
		<p>
			春眠不觉晓，
			  处处闻啼鸟。
			    夜来风雨声，
				  花落知多少。
		</p>
		<p>注意：浏览器忽略了源代码中的排版（省略了多余的空格）</p>
		
		<h1>4、HTML文本格式化</h1>
		<p>4.1、文本格式化</p>
		<p>b:加粗文本，br：换行，strong：文本加粗，big：文本字体放大，em、i：文本斜体，small：文本缩小，sub：文本下标（右下角），sup：文本上标（右上角）</p>
		<b>没事多笑笑</b>
		<br />
		<strong>没事多笑笑</strong>
		<br />
		<big>没事多笑笑</big>
		<br />
		<em>没事多笑笑</em>
		<br />
		<i>没事多笑笑</i>
		<br />
		<small>没事多笑笑</small>
		<br />
		没事多<sub>笑笑</sub>
		<br />
		没事多<sup>笑笑</sup>
		
		<p>4.2、pre标签可以实现源码中的空格和换行</p>
		<pre>
			今天我想空几个     格了
		</pre>
		<pre>
			现在我又想换个
			行了
		</pre>
		
		<p>4.3、不同的“计算机输出”标签显示效果</p>
		<code>计算机输出效果</code>
		<br />
		<kbd>键盘输入效果</kbd>
		<br />
		<tt>打字机（为什么我输入法老是显示“打自己”）文本</tt>
		<br />
		<samp>计算机代码样本（丸子表示没理解什么玩意儿）</samp>
		<br />
		<var>计算机变量</var>
		<br />
		
		<p>
			<b>注释：</b>这些标签常用于显示计算机/编程代码（虽然丸子表示没搞懂，但是跟着记一遍完事）
		</p>
		
		<p>4.4、在HTML文件中写地址</p>
		<address>
			Written by <a href="mailto:123456@qq.com">丸子</a>.(注意双引号里面的mailto不要丢掉)<br />
			Visit us at:<br />
			Example.com<br />
			Box 123,Disneyland<br />
			USA
		</address>
		
		<p>4.5、缩写或者首字母缩写</p>
		<p>在某些浏览器中，当把鼠标移到缩略词上时，title会显示你定义的完整版本。（仅对于 IE 5 中的 acronym 元素有效。对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。）</p>
		<abbr title="etcetera">etc.</abbr>
		<br />
		<acronym title="World Wide Web">WWW</acronym>
		
		<p>4.6、改变文字方向：文字逆向显示</p>
		<p>水仙花字符串就算了，比如“上海自来水来自海上”</p>
		<p>
			<bdo dir="rtl">RightToLeft</bdo>
		</p>
		
		<p>4.6、实现长短不一的引用语</p>
		<p>WWF's goal is to:
		<q>Build a future where people live in harmony with nature.</q>
		We hope they succeed.</p>
		
		<p>4.7、删除线和下划线</p>
		<p>My favorite color is <del>blue</del><ins>red!</ins></p>

再问一下，用hbuilderx发现轮播图的效果一直出不来，只是图片堆积，但是在菜鸟的在线工具上却可以，母鸡原因～各位大佬有知道原因的吗？？没有我就自己再琢磨一下，哭着飘过～每次都坑在这些歌乱七八遭的小问题上。。