链接

超级链接用<a>标签表示,href属性指定了链接到的地址。<a>标签可以包含文本,也可以包含图片。

点击查看效果

<a href="http://deerchao.net">deerchao的个人网站</a>
<a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="验证HTML" /></a>

分段与换行

由于HTML文档会忽略空白符,所以要想保证正常的分段换行的话,必须指出哪些文字是属于同一段落的,这就用到了标签<p>。

<p>这是第一段。</p>
<p>这是第二段。</p>

也有人不用<p>,而用<br>。<br>只表示换行,不表示段落的开始或结束,所以通常没有结束标签。

点击查看效果

这是第一段。<br>
这是第二段。<br />
这是第三段。

有时,要把文档看作不同的部分组合起来的,比如一个典型的页面可能包括三个部分:页头,主体,页脚。<div>标签专门用于标明不同的部分:

<div>页头内容</div>
<div>主体内容</div>
<div>页脚内容</div>

表格

HTML文档在浏览器里通常是从左到右,从上到下地显示的,到了窗口右边就自动换行。为了实现分栏的效果,很多人使用表格(<table>)进行页面排版(虽然HTML里提供表格的本意不是为了排版)。

<table>标签里通常会包含几个<tr>标签,<tr>代表表格里的一行。<tr>标签又会包含<td>标签,每个<td>代表一个单元格。

点击查看效果

<table>
  <tr>
    <td>2000</td><td>悉尼</td>
  </tr>
  <tr>
    <td>2004</td><td>雅典</td>
  </tr>
  <tr>
    <td>2008</td><td>北京</td>
  </tr>
</table>

<tr>标签还可以被<table>里的<thead>或<tbody>或<tfoot>包含。它们分别代表表头,表正文,表脚。在打印网页的时候,如果表格很大,一页打印不完,<thead>和<tfoot>将在每一页出现。

<th>和<td>非常相似,也用在<tr>里边,不同的是<th>代表这个单元格是它所在的行或列的标题。

<table>
  <thead>
    <tr><th>时间</th><th>地点</th></tr>
  </thead>
  <tbody>
    <tr><td>2000</td><td>悉尼</td></tr>
    <tr><td>2004</td><td>雅典</td></tr>
    <tr><td>2000</td><td>北京</td></tr>
  </tbody>
</table>

快速掌握、学习HTML的方法的更多相关文章

  1. STM32环境搭建/学习观点/自学方法 入门必看

    文章转自armfly开发板V4软件开发手册,分享学习~ 今天有幸看到armfly的开发板软件开发手册,开头的基础知识,真的很有用,还好有看到,一切都不迟,感悟很多,摘抄部分,学习分享~ 关于开发环境的 ...

  2. 如何快速轻松学习bootstrap

    我以前也是通过看一些视频教程来学的,比如慕课网上的,比如51cto上的那些零基础入门bootstrap什么的,还有一些培训班里流传出来的,感觉晕乎乎的,不知所云. 还是在后面不断使用的过程中慢慢体会到 ...

  3. FWT快速沃尔什变换学习笔记

    FWT快速沃尔什变换学习笔记 1.FWT用来干啥啊 回忆一下多项式的卷积\(C_k=\sum_{i+j=k}A_i*B_j\) 我们可以用\(FFT\)来做. 甚至在一些特殊情况下,我们\(C_k=\ ...

  4. 【译】快速高效学习Java编程在线资源Top 20

    想要加强你的编程能力吗?想要提升你的 Java 编程技巧和效率吗? 不用担心.本文将会提供快速高效学习 Java 编程的 50 多个网站资源: 开始探索吧: 1.MKyong:许多开发者在这里可以找到 ...

  5. 快速高效学习Java编程在线资源Top 20(转载)

    想要加强你的编程能力吗?想要提升你的 Java 编程技巧和效率吗? 不用担心.本文将会提供快速高效学习 Java 编程的 50 多个网站资源: 开始探索吧: 1.MKyong:许多开发者在这里可以找到 ...

  6. Sass简单、快速上手_Sass快速入门学习笔记总结

    Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...

  7. SQL Server 2008 R2:快速清除日志文件的方法

    本例,快速清理“students”数据库的日志,清理后日志文件不足1M. USE [master] GO ALTER DATABASE students SET RECOVERY SIMPLE WIT ...

  8. linux几种快速清空文件内容的方法

    linux几种快速清空文件内容的方法 几种快速清空文件内容的方法: $ : > filename #其中的 : 是一个占位符, 不产生任何输出. $ > filename $ echo & ...

  9. SQL Server 2000:快速清除日志文件的方法

    通过文章 SQL Server中“数据收缩”详解 和 SQLServer删除log文件和清空日志的方法 可以整理出一种快速删除数据库日志的方法,即 第一步:清空日志文件里的数据: 第二步:收缩日志文件 ...

  10. 怎么学习AOPR使用方法

    Advanced Office Password Recovery作为一款专业级别的Office密码破解工具,对十几种office文档的密码都可以有效的破解.一些用户朋友才开始接触Advanced O ...

随机推荐

  1. Sublime Text 配置代码

    { "font_face": "Courier New bold", "font_size": 15.0, "ignored_wo ...

  2. 编译安装mmseg提示cannot find input file: src/Makefile.in错误

    今天安装中文词检索功能模块 coreseek,其中一个分词模块 mmseg ,编译安装到最后,出现annot find input file: src/Makefile.in aclocal   // ...

  3. @Column

    @Column标记表示所持久化属性所映射表中的字段,该注释的属性定义如下: @Target({METHOD, FIELD}) @Retention(RUNTIME) public @interface ...

  4. JVM内存垃圾回收方法

    1.概述 1.1.为什么要回收? 如果不进行垃圾回收,内存迟早都会被消耗空,因为我们在不断地分配内存空间而不进行回收.除非内存无限大,我们可以任性地分配而不回收,但是事实并非如此.所以,垃圾回收是必须 ...

  5. Input输入框输入银行卡号自动空格

    input输入框是表格中用都最多的,像输入手机,密码,银行卡号的,很多对于输入银行卡号是没有处理的,比如这样~~ 看起来是不是一团乱麻,, 眼睛瞬间一片漆黑~  如果是这样,会不会好很多呢~~ 其实逻 ...

  6. 群集中的MS DTC分布式事务协调器

    MS DTC在大多数SQL 服务器下都需要安装,若只是安装数据库引擎或Analysis 服务可不安装DTC.如果后需要使用分布式事务,则可在SQL Server群集安装完成后再安装DTC. 一.群集M ...

  7. HDU 3791二叉搜索树解题(解题报告)

    1.题目地址: http://acm.hdu.edu.cn/showproblem.php?pid=3791 2.参考解题 http://blog.csdn.net/u013447865/articl ...

  8. 使用svn分支

    使用svn分支 原文: https://my.oschina.net/cobish/blog/652984

  9. BZOJ 2096: [Poi2010]Pilots

    Description 求一个最长的序列,最大值最小值之差不超过 \(k\) . Sol 单调队列. 一个队列直接上就行.. Code /******************************* ...

  10. Visual Studio 常用快捷键备忘

    在代码中插入书签 用途 操作   vs2013 快速在自定义的不同代码位置跳转 首先点击: 编辑=>书签=>启用书签 然后再在代码编辑窗口 ctrl+k, k (取消书签,再按一次 ctr ...