CrazyWing：Python自动化运维开发实战二十、html标签用法起手式

2017-11-12 1446

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

导语:

所有标签亲手测试,请放心享用

HTML 标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的,是块级元素
<h1> 定义最大的标题,<h6> 定义最小的标题。

例:

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

确保将 HTML heading 标签只用于标题。不要仅仅为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线 horizontal

<hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。
例

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

HTML 段落

通过 <p> 标签定义,是块级元素,浏览器会自动地在段落的前后添加空行。
用空段落标记 <p></p> 去插入一个空行是个坏习惯。
用 <br /> 标签代替它！但是不要用 <br /> 标签去创建列表

例:
<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML 换行break

如果想在不产生一个新段落的情况下进行换行，使用 <br /> 标签：
<p>This is<br />a para<br />graph with line breaks</p>

<br /> 元素是一个空的 HTML 元素,没有结束标签。

HTML 超链接

<a href="http://www.fklinux.com/" target="_blank">疯狂linux</a>

<a>
     anchor 锚,设置超文本链接,超链接可以文字/图像，可点击这些内容来跳转到新的文档或者当前文档中的某个部分。

href 属性
    hypertext reference,指定链接的目标。.

target 属性
    定义被链接的文档在何处显示。"_blank"值是在新窗口打开文档

创建mail链接

图像标签<img>

<img>
    是空标签，它只包含属性，没有闭合标签。

border属性
    指定图像边缘宽度

src 源属性
    指定图片地址,可以是本地图片(使用相对路径),也可以是网络上其他服务器上的图片.

alt 属性
     alternate text（替换文字；备用文本；替代文字）,用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

height和width属性
    调整图片大小

title属性
    title是对图片的说明和额外补充，如果需要在鼠标经过图片时出现文字提示应该用属性title。title属性的优先级高于alt text。

向 HTML 页面添加背景图片:

在<body>中使用background属性
<body background="图片地址">

在文字中排列图像:

<p>图像 <img src="图片地址" align="bottom"> 在文本中</p>
<p>图像 <img src ="图片地址" align="middle"> 在文本中</p>
<p>图像 <img src ="图片地址" align="top"> 在文本中</p>
<p><img src ="图片地址" align ="left"> 文本</p>
<p><img src ="图片地址" align ="right"> 文本</p>
align属性设置图片的对齐方式.
align 属性设置为 "left"。图像将浮动到文本的左侧。
align 属性设置为 "right"。图像将浮动到文本的右侧
  align：美[əˈlaɪn] 排列、对齐、对准

制作图像链接:

创建图片链接只需要把链接文本内容替换成图像标签<img>
如果想用动画图片,只需要把图片换成gif格式的.
<!DOCTYPE HTML>
<html>
<body>
<p>
<a href="http://fklinux.blog.51cto.com">
<img border="0" src="images/hello.png" width="128" height="128" />
</a>
</p>
</body>
</html>
注意我这里的图片用的是相对路径,wing测试使用绝对路径不成功!

创建图像映射

创建带有可供点击区域(热点)的图像地图。其中的每个区域都是一个超级链接。
<html>
<body>

<p>请点击图像上的星球，把它们放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。"<map>" 定义图像地图。
"<area>"    定义图像地图中的可点击区域。</p>

</body>
</html>

把图像转换为图像映射

把一幅普通的图像设置为图像映射。(整幅图都是一个热点,wing的理解,这个和普通的图片链接貌似没什么区别)

    <!DOCTYPE html>
    <html>
            <body>
                <p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>
                <a href="/example/html/html_ismap.html">
                    <img src="/i/eg_planets.jpg" ismap />
                </a>
            </body>
    </html>

html样式

style 属性
CrazyWing：Python自动化运维开发实战二十、html标签用法起手式

提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML4引入，是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

不赞成使用的标签和属性

在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。
这里传达的信息很明确：请避免使用这些被废弃的标签和属性！

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

标签                                  描述
<center>                            定义居中的内容。
<font> 和 <basefont>     定义 HTML 字体。
<s> 和 <strike>              定义删除线文本
<u>                                 定义下划线文本

属性                      描述
align                       定义文本的对齐方式
bgcolor             定义背景颜色
color                   定义文本颜色

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

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>

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>

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文本格式化

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。

文本格式化标签

标签              描述
<b>             定义粗体文本。Bold 粗体（文本）
<big>           定义大号字。
<em>            定义着重文字。
<i>             定义斜体字。Italic 斜体（文本）
<small>     定义小号字。
<strong>    定义加重语气。
<sub>           定义下标字。
<sup>           定义上标字。
<ins>           定义插入字。
<del>           定义删除字。
<s>             不赞成使用。使用 <del> 代替。
<strike>        不赞成使用。使用 <del> 代替。
<u>             不赞成使用。使用样式（style）代替。

“计算机输出”标签

标签                  描述
<code>          定义计算机代码。
<kbd>               定义键盘码。
<samp>          定义计算机代码样本。
<tt>                    定义打字机代码。
<var>               定义变量。
<pre>               定义预格式文本。
<listing>           不赞成使用。使用 <pre> 代替。
<plaintext>     不赞成使用。使用 <pre> 代替。
<xmp>           不赞成使用。使用 <pre> 代替。

引用、引用和术语定义

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

例子:

对文本进行格式化
<b>This text is bold</b>
<strong>This text is strong</strong>
<big>This text is big</big>
<em>This text is emphasized</em>
<i>This text is italic</i>
<small>This text is small</small>

This text contains
<sub>subscript</sub>

This text contains
<sup>superscript</sup>

预格式文本
使用 pre 标签对空行和空格进行控制,很适合显示计算机代码,它保留了空格和换行.
<pre>
for i = 1 to 10
      print i
        next i
</pre>

“计算机输出”标签
不同的“计算机输出”标签的显示效果。这些标签常用于显示计算机/编程代码。
<code>Computer code</code>
<kbd>Keyboard input</kbd>
<tt>Teletype text</tt>
<samp>Sample text</samp>
<var>Computer variable</var>

地址
在 HTML 文件中写地址。
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

实现缩写或首字母缩写

<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

改变文字的方向
<p>This paragraph will go left-to-right.</p>
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>

块引用
实现长短不一的引用语。
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

标记删除文本和插入文本。

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

本文转自 CrazyWing 51CTO博客，原文链接:http://blog.51cto.com/fklinux/2053156

CrazyWing：Python自动化运维开发实战二十、html标签用法起手式

导语:

HTML 标题

HTML 水平线 horizontal

HTML 段落

HTML 换行break

HTML 超链接

创建mail链接

图像标签<img>

向 HTML 页面添加背景图片:

在文字中排列图像:

制作图像链接:

创建图像映射

把图像转换为图像映射

html样式

不赞成使用的标签和属性

background-color 属性为元素定义了背景颜色：

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

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

html文本格式化

文本格式化标签

“计算机输出”标签

引用、引用和术语定义

例子:

热门文章

最新文章

相关课程

相关电子书

相关实验场景

CrazyWing：Python自动化运维开发实战 二十、html标签用法起手式

导语:

HTML 标题

HTML 水平线 horizontal

HTML 段落

HTML 换行break

HTML 超链接

创建mail链接

图像标签<img>

向 HTML 页面添加背景图片:

在文字中排列图像:

制作图像链接:

创建图像映射

把图像转换为图像映射

html样式

不赞成使用的标签和属性

background-color 属性为元素定义了背景颜色：

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

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

html文本格式化

文本格式化标签

“计算机输出”标签

引用、引用和术语定义

例子:

热门文章

最新文章

相关课程

相关电子书

相关实验场景

CrazyWing：Python自动化运维开发实战二十、html标签用法起手式