html 学习指南

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

实例

<a href="http://www.w3school.com.cn">This is a link</a>

<a href="http://www.w3school.com.cn">This is a link</a>


HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

实例

<img src="w3school.jpg" width="104" height="142" />

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

name='Bill "HelloWorld" Gates'

HTML 属性参考手册

我们的完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表:

完整的 HTML 参考手册

下面列出了适用于大多数 HTML 元素的属性:

属性描述
classclassname规定元素的类名(classname)
idid规定元素的唯一 id
stylestyle_definition规定元素的行内样式(inline style)
titletext规定元素的额外信息(可在工具提示中显示)

如需更多关于标准属性的信息,请访问:

HTML 标准属性参考手册

浏览器会自动地在标题的前后添加空行。


因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。


HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。


HTML 注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

注释是这样写的:

实例

<!-- This is a comment -->

xmlns 属性

xmlns 属性可以在文档中定义一个或多个可供选择的命名空间。该属性可以放置在文档内任何元素的开始标签中。该属性的值类似于 URL,它定义了一个命名空间,浏览器会将此命名空间用于该属性所在元素内的所有内容。

例如,如果需要使用符合 XML 规范的 XHTML 文档,则应该在文档中的<html> 标签中至少使用一个 xmlns 属性,以指定整个文档所使用的主要命名空间:

<html xmlns="http://www.w3.org/1999/xhtml">

如果需要在一个 div 元素中显示一串数学公式,则可以为该 div 元素定义一个数学命名空间。比如这样:

<div xmlns="http://www.w3.org/1999/Math/MathMl">x3/x</div>

如果您不希望在每次显示除法公式时都在 div 元素中定义 xmlns 属性,那么更好的办法是在文档的开头处定义具有前缀的命名空间:

<html xmlns="http://www.w3.org/1999/xhtml">
xmlns:math="http://www.w3.org/1999/Math/MathMl">

然后,您就可以在 div 中使用该前缀了,就像这样:

<math:div>x3/X<div>

虽然在大多数情况下,绝大多数 XHTML 作者都不需要定义多个命名空间,但是您仍然有必要理解存在着多个命名空间,以便在需要选择将基于某个 DTD 的内容嵌入其他 DTD 定义的内容中时,可以管理多个命名空间。

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:

<p>This is<br />a para<br />graph with line breaks</p>

对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小,将改变段落中的行数。(可以通过ctrl+滚轮改变缩放比例)

不赞成使用的标签和属性

在 HTML 4 中,有若干的标签和属性是被废弃的。被废弃(Deprecated)的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。

这里传达的信息很明确:请避免使用这些被废弃的标签和属性!

应该避免使用下面这些标签和属性:

标签描述
<center>定义居中的内容。
<font> 和 <basefont>定义 HTML 字体。
<s> 和 <strike>定义删除线文本
<u>定义下划线文本
属性描述
align定义文本的对齐方式
bgcolor定义背景颜色
color定义文本颜色

对于以上这些标签和属性:请使用样式代替!


样式的基本格式:style="styleA;styleB......"

用冒号表示   ,例子:

<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>


HTML 样式实例 - 字体、颜色和尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:

<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

HTML 样式实例 - 文本对齐

text-align 属性规定了元素中文本的水平对齐方式:

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>


HTML 格式化文本

粗体:<b></b> <strong></strong>

换行:<br />
让字稍微大一点:<big> </big>
斜体:<em></em>  <i></i>
让字稍微小一点:<small> </small>
上标和下标:<sup></sup>  <sub></sub>

这里有一点需要注意的:html中元素是可以嵌套的!

HTML 预格式内容

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

HTML “计算机输出”标签

<html>

<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

<p>
<b>注释:</b>这些标签常用于显示计算机/编程代码。
</p>

</body>
</html>

HTML 制表

<table></table>表示表格

<tr></tr>表示一行

<td></td>  <th></th>为两种不同的元素形式

&nbsp; 为空格占位符 注意:此处可以发现一个事实,就是在<tr></tr>之间的空格都会被忽略!一个都不会留下!

<caption>我的标题</caption> 用来表示表格标题

横跨多行/多列的单元格:

<html>

<body>

<h4>横跨两列的单元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>


几点注意事项:1.这里演示了真正的表头的应用;2.这个属性定义在tr或者th里

3.cellpadding 属性规定单元边沿与其内容之间的空白。

注释:请勿将该属性与 cellspacing 属性相混淆,cellspacing 属性规定的是单元之间的空间。

4.bgcolor设置背景颜色  background属性设置背景图片

5.td th 可以用align属性定义对齐方式


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值