html标签学习入门 随笔

2018/03/06 16:33
阅读数 7

Html学习入门    随笔1:

HTML 标题

HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

标题仅用于标题文本  不应该被使用在加粗字体等字体处理方面。

实例

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯,实际上空段落标记不会起到空行作用也不会换行,换行用 <br /> 标签!    但是不要用 <br /> 标签去创建列表!

实例

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 折行

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

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

HTML 水平线

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

hr 元素可用于分隔内容。

实例

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

不要忘记结束标签

即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

<p>This is a paragraph
<p>This is a paragraph

上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

注释:未来的 HTML 版本不允许省略结束标签。

HTML 链接

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

实例

<a href="http://www.51zxw.com">学习网站</a>


HTML 图像

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

假如说当前html文件的位置是D://A,那么这个图片的位置就是D://A/i/eg_w3school.gif

实例

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

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

HTML 提示:使用小写标签

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现,比如:name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

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

HTML 注释

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

注释是这样写的:

实例

<!-- This is a comment -->

HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。

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

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

<html>

<body>

<h1>春晓</h1>

<p>
春眠不觉晓,
   处处闻啼鸟。
      夜来风雨声,
           花落知多少。
</p>

<p>注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。</p>

</body>

</html>

结果:

春晓

春眠不觉晓, 处处闻啼鸟。 夜来风雨声, 花落知多少。

注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。

 

不赞成使用的标签和属性

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

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

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

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

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

background-color 属性为元素定义了背景颜色:<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

style 属性淘汰了“旧的” bgcolor 属性

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>

font-family字体类型
color 字体颜色
font-size 字体大小

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>
text-align 对齐方式  center right left  默认居左left

HTML 文本格式化实例

文本格式化标签

标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del>

定义删除字。

“计算机输出”标签

标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。

引用、引用和术语定义

标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。

 

HTML <q> 用于短的引用

HTML <q> 元素定义短的引用。

浏览器通常会为 <q> 元素包围引号。

实例

<p>WWF 的目标是:<q>构建人与自然和谐共存的世界。</q></p>

用于长引用的 HTML <blockquote>

HTML <blockquote> 元素定义被引用的节。

浏览器通常会对 <blockquote> 元素进行缩进处理。

实例

<p>以下内容引用自 WWF 的网站:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来,WWF 一直致力于保护自然界的未来。
世界领先的环保组织,WWF 工作于 100 个国家,
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

用于缩略词的 HTML <abbr>

HTML <abbr> 元素定义缩写或首字母缩略语。

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

实例

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

用于联系信息的 HTML <address>

HTML <address> 元素定义文档或文章的联系信息(作者/拥有者)。

此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

实例

<address>
Written by Donald Duck.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

HTML 引文、引用和定义元素

标签 描述
<abbr> 定义缩写或首字母缩略语。
<address> 定义文档作者或拥有者的联系信息。
<bdo> 定义文本方向。
<blockquote> 定义从其他来源引用的节。
<dfn> 定义项目或缩略词的定义。
<q> 定义短的行内引用。
<cite> 定义著作的标题。





展开阅读全文
red
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部