本章通过实例向您演示最常用的 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/cnblogs_com/cangT-Tlan/1099682/o_%e5%a4%b4%e5%83%8f2.jpg" width="100" height="120" />
<br>
<img src="http://images.cnblogs.com/cnblogs_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 第三节的更多相关文章

  1. 风炫安全WEB安全学习第二十三节课 利用XSS获取COOKIE

    风炫安全WEB安全学习第二十三节课 利用XSS获取COOKIE XSS如何利用 获取COOKIE 我们使用pikachu写的pkxss后台 使用方法: <img src="http:/ ...

  2. Python学习-day1

    Mark一下,python学习. 今天一天已1.5x的速度看完了Alex老师的第一周的视频,先是4节鸡汤课,而且给了勺,讲述了python目前在世界的地位,发展趋势,以及未来的愿景. 最重要的还是写一 ...

  3. python学习——DAY1

    日期:20170113 一.个人体会: 零基础学python,是艰辛的,需要付出和坚持. 关于流程图.我最开始画的是从上到下,再从左到右,画了很多重复的内容,单线程的流程图,看起来很容易理解,但是自己 ...

  4. python全栈学习--day1

      计算机基础 CPU:中央处理器 内存:4GB,8GB,临时处理事务的地方,供给CPU数据. 硬盘:相当于电脑的数据库,存储着大量的数据,文件,电影等. 操作系统:执行者,支配所有关系 window ...

  5. [struts2学习笔记] 第三节 创建struts 2 HelloWorld所需的六个步骤

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40349201 官方文档:http://struts.apache.org/releas ...

  6. python学习Day1 计算机原理编程思维

    一.学习思想:3W+1H   学什么(what).为什么学(why).用在哪里(where).怎么用(how) 学习编程语言重在代码量.代码量.代码量! 二.计算机五大组成部分,三大核心: 五大组成部 ...

  7. Python爬虫学习 - day1 - 爬取图片

    利用Python完成简单的图片爬取 最近学习到了爬虫,瞬时觉得很高大上,想取什么就取什么,感觉要上天.这里分享一个简单的爬取汽车之家文章列表的图片教程,供大家学习. 需要的知识点储备 本次爬虫脚本依赖 ...

  8. 算法学习--Day1

    为了冲刺研究生初试,我准备在课余时间捡起往日的算法.多多练习算法题目,提前准备算法的机试. 今天是4月14日,距离算法考试还有两个月的时间吧,这两个月的所学所得我就都记录在这里了.不仅仅包括算法的准备 ...

  9. HTML学习----------DAY1 第二节

    使用 Notepad 或 TextEdit 来编写 HTML 可以使用专业的 HTML 编辑器来编辑 HTML: Adobe Dreamweaver Microsoft Expression Web ...

随机推荐

  1. 连类比事-category和extension

    extension看起来很像一个匿名的category,但是extension和有名字的category几乎完全是两个东西. extension在编译期决议,它就是类的一部分,在编译期和头文件里的@i ...

  2. 妙用$.extend

    在js中,我们有时需要复制一个对象的值,而不是复制它的引用的时候,可以使用jquery的$.extend方法,简单代码如下 <script> var a = { "name&qu ...

  3. 简单暴力的TP5多主题方案

    一个小项目,需要配置多套前端主题.解决的思路是根据域名加载不同的主题配置. 一.在应用目录 application 下创建 common 目录. 二.application/common 目录下创建 ...

  4. yii2.0 发送邮件带word小附件

        把 common/config/main-local.php 下的 mailer 注释掉:           'mailer'=>[                    'class ...

  5. luogu P3795 钟氏映射(递推)

    题意 n<=107 20MB 题解 也就是给n个点,把他们一个分为一组,或两个分为一组,有多少种方法. 空间大点随便做. 我们靠递推. 一个新点,要不自己一组,要不和前面的一个点构成一组. 所以 ...

  6. 紫书 习题 8-25 UVa 11175 (结论证明)(配图)

    看了这篇博客https://blog.csdn.net/u013520118/article/details/48032599 但是这篇里面没有写结论的证明, 我来证明一下. 首先结论是对于E图而言, ...

  7. UVA 11020 Efficient Solutions+multiset的应用

    题目链接:点击进入 首先来讲,非常easy看到我们事实上仅仅要维护优势人群的集合:假设增加一个新的人,我们首先看一下优势人群中是否有人会让这个人失去优势,假设没有,则将这个人插入集合中.但要注意到这个 ...

  8. 电源管理ACPI、及APM、GNU/Linux系统下的相应命令使用

    /*********************************************************************  * Author  : Samson  * Date   ...

  9. 【LeetCode】Longest Palindromic Substring 解题报告

    DP.KMP什么的都太高大上了.自己想了个朴素的遍历方法. [题目] Given a string S, find the longest palindromic substring in S. Yo ...

  10. 2、java注释、标识符、数据类型、类型转换

    一.三种注释:单行注释.多行注释.文档注释(只能在类前或者方法前,@author作者) 二.java使用的编码为unicode码[0-65535]   包含ASCII码,在0-255中 ASCII码( ...