本节介绍基本的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. WebLogic配置自己定义密钥库和SSL的操作手冊

    WebLogic配置自己定义密钥库和SSL的操作手冊 (定制标识和定制信任&Keytool&TLS1.0) 1.启用SSLport 保存.重新启动受管Server watermark/ ...

  2. phpexcel图形图表(二)图形

    原创文章,转载请注明出处:http://www.cnblogs.com/phpgcs 本篇文章实例演示如上图,画3种图形以及多sheet操作等 先回忆下第一篇中line图形的API调用步骤: 1,引入 ...

  3. kdump 的使用在linux崩溃时

    Centos7/RHEL7 开启kdump 翻译 2017年12月18日 16:58:28 标签: kernel / kdump / crash / centos 437 原文链接<How to ...

  4. Nginx区分PC或手机访问不同网站

    近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的“响应式web设计”. 响应式web设 ...

  5. Spring MVC控制器类名称处理映射

    以下示例显示如何使用Spring Web MVC框架使用控制器类名称处理程序映射. ControllerClassNameHandlerMapping类是基于约定的处理程序映射类,它将URL请求映射到 ...

  6. 004androidStudio ndk开发环境

    004androidStudio ndk开发环境 android studio中编译C/C++源代码 1. 配置ndk.dir 在 local.properties 添加如下配置: sdk.dir=p ...

  7. sql server case when then

    http://blog.csdn.net/wuxiaokaixinguo/article/details/8895187

  8. wpf数据绑定更新通知

    类似于这样子的;大致的意思是:一个代码变量,通过改变变量的值,绑定这个变量的这个圆颜色也在变化 就是一种心跳效果 在网上数据触发的感觉不多,废了不少时间,这里做个总结 1:通知 class Notif ...

  9. 怎么用源程序把ChemDraw结构复制到Word文档

    在学习化学过程中,不可避免的会接触到各种化学结构.这个时候就需要通过绘制化学结构来进行这方面的学习和传播.ChemDraw Professional 15就可以辅助完成这方面的工作.很多的用户朋友会通 ...

  10. linux安装consul集群

    一.集群规划 consul借助agent来运行,类似elk的logstash agent 或 zabbix监控系统的agent , 每个需要被发现的服务上,通过consul agent client ...