码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习----------DAY1 第三节

时间:2017-12-14 04:29:43      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:ges   实验   org   note   this   href   分享图片   而且   not   

本章通过实例向您演示最常用的 HTML 标签。

提示:不要担心本章中您还没有学过的例子,您将在下面的章节中学到它们。

提示:学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器,您可以任意编辑一段 HTML 源码,然后单击 TIY 按钮来查看结果。


HTML 标题

HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

代码:

<html>

<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>

</body>
</html>

效果演示:

技术分享图片


 HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

<html>
<body>

<p>(*^__^*) 嘻嘻……,我是段落1。</p>
<p>╭(╯^╰)╮,我是段落2。</p>
<p>(╯‵□′)╯︵┻━┻,本段落岂是尔等可以看见的。</p>

<p>段落元素由 p 标签定义。</p> 

</body>
</html>

演示效果:

技术分享图片


 

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

<html>
<body>

<a href="http://www.w3school.com.cn">
This is a link</a>

<p></p> 
 <!因为不知道用什么换行,所以尝试了用添加一个空的段落,这就相当于换行了。而且很显然,我也不知道肿么去注释。。。(在学弟和度娘的帮助下,才知道的)>
<p></p>

<a href="https://www.luogu.org/problemnew/show/1454">
这是我的做的题目。</a>

<br><!后来才发现可以用br来实现换行>

<p>这是换行</p>

</body>
</html>

效果演示:

技术分享图片

注释:在 href 属性中指定链接的地址。

(您将在本教程稍后的章节中学习更多有关属性的知识)。


HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

<html>
<body>

<img src="/i/eg_w3school.gif" width="300" height="120" />
<br>
<img src="http://images.cnblogs.com/com/cangT-Tlan/1099682/o_%e5%a4%b4%e5%83%8f2.jpg" width="100" height="120" />
<br>
<img src="http://images.cnblogs.com/com/cangT-Tlan/943345/o_20150423160900_86322.jpg" width="300" height="200" />

<! width用来图片调节宽度,height用来调节图片的高度>

</body>
</html>

效果演示:

技术分享图片技术分享图片

 

注释:图像的名称和尺寸是以属性的形式提供的。


 

 学习内容转自:http://www.w3school.com.cn/html/html_basic.asp

HTML学习----------DAY1 第三节

标签:ges   实验   org   note   this   href   分享图片   而且   not   

原文地址:http://www.cnblogs.com/cangT-Tlan/p/8035078.html

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!