html标签学习入门 随笔
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> | 定义著作的标题。 |