本节介绍基本的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. ueditor 控制上传图片的显示尺寸

    使用UEditor的编辑框插入图片的时候,如果图片尺寸比较大,则图片会超出编辑器边框出现滚动条,特别不方便. 解决办法:在ueditor 的 themes 文件夹下有个iframe.css 文件,在该 ...

  2. Spring读取配置文件的方式总结

    一.基于XML配置的方式 1.使用 PropertyPlaceholderConfigurer - 在 applicationContext.xml 中配置: <context:property ...

  3. 使用Hyper-V安装Ubuntu16.04 Server 网络配置

    由于最近在研究Docker, 于是需要用到虚拟机,安装Ubuntu 16.04到Hyper-V并部署Docker.这个过程中填平了几个小坑,为了大家以后遇到类似情况节省时间,我将这几个小坑的问题和解决 ...

  4. AV1视频编码标准资源汇总

    一直不看好HEVC,总觉得这东西绝对不可能再恢复像h264那么辉煌了,如此高昂的授权费,被淘汰估计也就这一两年了,有必要预研一下AV1,马上进去二进制码流冻结流程了,感觉aom越来越近了,毕竟goog ...

  5. 【转】支付宝WAP支付接口开发

    支付宝WAP支付接口开发 因项目需要,要增加支付宝手机网站支付功能,找了支付宝的样例代码和接口说明,折腾两天搞定,谨以此文作为这两天摸索的总结.由于公司有自己的支付接口,并不直接使用这个接口,所以晚些 ...

  6. Spring MVC可参数化的视图控制器

    以下示例显示如何使用Spring Web MVC框架来实现多动作控制器的可参数化视图控制器.可参数化视图允许将请求映射到网页. 所下所示配置 - import javax.servlet.http.H ...

  7. 高通音频 媒体喇叭增益隐藏参数（一个QACT无法修改的参数）

    源文件位置:modem_proc\multimedia\audio\avs\src\sndhwg2.c sndhw_init()函数,2520行左右:pm_set_speaker_gain(PM_SP ...

  8. 编译Hadoop1.1.2eclipse插件并测试

    (一).building hadoop 1.编辑{HADOOP_HOME}/build.xml (1).对31行的hadoop版本做修改 <property name="version ...

  9. ubuntu虚拟化平台libvrit-bin

    http://download.cirros-cloud.net/0.3.5/ 下载 cirros-0.3.5-x86_64-disk.img 因为 KVM(准确说是 Libvirt)默认不接受远程管 ...

  10. docker-compose安装confluence

    1.首先安装docker-compose   pip install docker-compose       安装完成提示:         2.编写mysql-confluence-compose ...