本节介绍基本的HTML标签的使用实例。

    (1)h标签:

<!DOCTYPE html>

<html>

  <head>

    <title>示例2.1</title>

  </head>

  <body>

  <h1>h1标题<h1>

  <h2>h2标题<h2>

  <h3>h3标题<h3>

  <h4>h4标题<h4>

  <h5>h5标题<h5>

  <h6>h6标题<h6>

  </body>

</html>

    (2)p标签:

<!DOCTYPE html>

<html>

  <head>

    <title>示例2.2</title>

  </head>

  <body>

    <p>是是非非终为假，云淡风清总是真!</p>

    <p>窗前明月光；

       疑是地上霜。

       举头望明月；

       低头思故乡。

    </p>

  </body>

</html>

    (3)pre标签:

<!DOCTYPE html>

<html>

  <head>

    <title>示例2.3</title>

  </head>

  <body>

    <pre>是是非非终为假，云淡风清总是真!</pre>

    <pre>窗前明月光；

       疑是地上霜。

       举头望明月；

       低头思故乡。

    </pre>

  </body>

</html>

    (4)a标签:

<!DOCTYPE html>

<html>

  <head>

    <title>示例2.4</title>

  </head>

  <body>

    <a href="http://www.cnblogs.com/MenAngel/">MenAngel博客园主页</a>

    <a href="http://www.cnblogs.com/MenAngel/p/5677479.html">作品展示</a>

  </body>

</html>

    (5)br标签:

<!DOCTYPE html>

<html>

  <head>

    <title>示例2.5</title>

  </head>

  <body>

    <a href="http://www.cnblogs.com/MenAngel/">MenAngel博客园主页</a><br/>

    <a href="http://www.cnblogs.com/MenAngel/p/5677479.html">作品展示</a><br/><br/>

    <pre>注意:

    br标签用来换行

    </pre>

  </body>

</html>

    (6)font标签:

<!DOCTYPE html>

<html>

  <head>

    <title>示例2.6</title>

  </head>

  <body>

    <h1><font size=5>标题标签h1</font></h1>

    <h2><font size=5>标题标签h2</font></h2>

    <h3><font size=5>标题标签h3</font></h3>

    <h4><font size=5>标题标签h4</font></h4>

    <h5><font size=5>标题标签h5</font></h5>

    <h6><font size=5>标题标签h6</font></h6>

  </body>

</html>

      (7)img标签:

<!DOCTYPE html>

<html>

  <head>

    <title>示例2.7</title>

  </head>

  <body>

    <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC1.jpg" width="300" height="200"/>

    <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC2.jpg" width="300" height="200"/>

    <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC3.jpg" width="300" height="200">

  </body>

</html>

    (8)hr标签:

<!DOCTYPE html>

<html>

  <head>

    <title>示例2.6</title>

  </head>

  <body>

    <pre><font size=5>hr标签的测试：</font></pre>

    <hr width="400" color="red"   size="3px" align="left"/>

    <hr width="600" color="black" size="5px" align="left"/>

    <hr width="800" color="blue"  size="7px" align="left"/>

  </body>

</html>

    (9)table标签:

<html>

  <head>

    <title>示例2.9</title>

  </head>

  <body>

    <table border="2">

      <tr>

         <th colspan="3"><font size="6">学生基本情况</font></th>

      </tr>

      <tr>

        <th><font size="6">姓名</font></th>

        <th><font size="6">性别</font></th>

        <th><font size="6">专业</font></th>

      </tr>

      <tr>

        <th><font size="6">刘备</font></th>

        <th><font size="6">男</font></th>

        <th rowspan="3"><font size="6">计算机</font></th>

      </tr>

      <tr>

        <th><font size="6">孙尚香</font></th>

        <th><font size="6">女</font></th>

      </tr>

      <tr>

        <th><font size="6">诸葛亮</font></th>

        <th><font size="6">男</font></th>

      </tr>

    </table>

  </body>

</html>

    (10)ul标签:

<!DOCTYPE html>

<html>

  <head>

    <title>示例2.10</title>

  </head>

  <body>

    <!--可以当做展示新闻的样板-->

    <table width="600" height="150" style="border:solid 1px;">

      <tr>

        <th rowspan="2">      <image width="220" height="140" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858720/o_%E6%98%8E%E6%97%A501.jpg" /></th>

        <th cellspcing="10">  <image width="120" height="60"  src="http://images.cnblogs.com/cnblogs_com/MenAngel/858720/o_%E6%98%8E%E6%97%A502.jpg" /></th>

        <th rowspan="2">

      <ul>

            <!--此处定义有序列表的排序值，和将列表的黑点去掉忘了-->

            <!--此处换做a标签以后，可以设置超链接-->

            <pre>如何做好一个男人</pre>

            <li><tt><font color="blue">做一个身体健壮的男人</font></tt></li>

            <li><tt><font color="blue">做一个善良孝顺的男人</font></tt></li>

            <li><tt><font color="blue">做一个有责任心的男人</font></tt></li>

            <li><tt><font color="blue">做一个风度翩翩的男人</font></tt></li>

            <li><tt><font color="blue">做一个成熟稳重的男人</font></tt></li>

          <ul>

        </th>

      </tr>

      <tr>

        <th><image width="120" height="60" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858720/o_%E6%98%8E%E6%97%A503.jpg" /></th>

      </tr>

    <table>

  </body>

<html>

HTML系列（2）基本的HTML标签（一）的更多相关文章

  1. 第一篇-Html标签中head标签，body标签中input系列，textarea和select标签

    第十四周课程(1-12章节) HTML 裸体 CSS   穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...

  2. ECMall2.x模板制作入门系列之2（模板标签/语法）

    ECMall2.x模板制作入门系列之2(模板标签/语法) 今天给大家带来一个模板语法的教程.希望能为ECMall模板制作者提供一份参考资料.如有问题.建议和意见,欢迎提出. 在ECMall模板中,用& ...

  3. struts2官方 中文教程 系列十二：控制标签

    介绍 struts2有一些控制语句的标签,本教程中我们将讨论如何使用 if 和iterator 标签.更多的控制标签可以参见 tags reference. 到此我们新建一个struts2 web 项 ...

  4. struts2官方 中文教程 系列三：使用struts2 标签 tag

    避免被爬,先贴上本帖地址:struts2 官方系列教程一:使用struts2 标签 tag http://www.cnblogs.com/linghaoxinpian/p/6901316.html 本 ...

  5. 4 django系列之HTML通过form标签来同时提交表单内容与上传文件

    preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...

  6. 我给女朋友讲编程html系列(4) -- html常用简单标签

    今天似乎有点感冒,浑身无力,在操场上躺了半个小时,好了许多.好了,废话不说了,还是写今天的教程吧. 1,html中的换行标签是 br,写法是: <br /> 2,html中有一些特殊的字符 ...

  7. Python图形编程探索系列-04-网上图片与标签组件的结合

    跳转到自己的博客 任务设定 任务:从网上找到一张图片,然后将其显示在标签上? 网上图片网站:http://pic.58pic.com/58pic/17/56/38/52w58PICtER_1024.j ...

  8. HTML标签深入学习系列（1）——注释标签 <!-- -->

    一.HTML注释的语法 <!--注释内容--> 二.HTML注释的用处 1.普通注释(增强代码的可读性) 方便别人:方便其它程序员了解你的代码 方便自己:方便以后对自己代码的理解与修改等等 ...

  9. PHPCMS快速建站系列之phpcms v9 模板标签说明整理

    [摘要]本文介绍phpcms v9中模板标签使用说明. {template "content","header"} 调用根目录下phpcms\template\ ...

  10. 踩坑系列《四》a标签的href属性拼接问题

    如上所示,无法直接在 html里面的 a 标签的href属性传递参数时,只需要在 JS 中获取对应 a 标签的id,再通过 attr 方法抓到 href,进行字符串拼接即可

随机推荐

  1. UVa10099_The Tourist Guide(最短路/floyd)(小白书图论专题)

    解题报告 题意: 有一个旅游团如今去出游玩,如今有n个城市,m条路.因为每一条路上面规定了最多可以通过的人数,如今想问这个旅游团人数已知的情况下最少须要运送几趟 思路: 求出发点到终点全部路其中最小值 ...

  2. HTML 网页中以超链接的方式调用iphone 手机的app

    2011-11-13 14:36:33|  分类: 随笔 |  标签:iphone  调用iphone手机app  |举报|字号 订阅     <1>. 调用iphone 手机地图APP的 ...

  3. easyui常见属性

    4)onBeforeClose:当面板关闭前激活.                 5)onClose:当面板关闭后激活.                 6)onBeforeDestroy:当面板销 ...

  4. 简单熟悉eclipse

  5. NIPS2016 best paper: Value Iteration Networks 解析

    论文介绍ppt:https://pan.baidu.com/s/1gfDURyb Tamar, Aviv, et al. "Value iteration networks." A ...

  6. 第二百节，jQuery EasyUI，Tabs(选项卡)组件

    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...

  7. Eclipse 浏览(Navigate)菜单浏览 Eclipse 工作空间

    Eclipse 浏览(Navigate)菜单 浏览 Eclipse 工作空间 浏览(Navigate)菜单提供了多个菜单可以让你快速定位到指定资源. 上图中 Open Type, Open Type ...

  8. python XML实例

    案例:使用XPath的爬虫 现在我们用XPath来做一个简单的爬虫,我们尝试爬取某个贴吧里的所有帖子,并且将该这个帖子里每个楼层发布的图片下载到本地. # tieba_xpath.py #!/usr/ ...

  9. caffe net 可视化工具,，层特征可视化

    1.只用网络在线结构绘制可视化网络模型 http://ethereon.github.io/netscope/#/editor 将对应的网络输入到里面,然后按shift+enter即可查看对应的网络结 ...

  10. 12个十分实用的JavaScript小技巧

    12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候 ...