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

简介:

导语:

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

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链接

<a href="mailto:yanqiang@1000phone.com?Subject=Hello%20again" target="_top">Send Mail</a>

图像标签<img>

<img border="0" src="图片地址" alt="Big Boat" width="50" height="50" title="你看不见我=_=">

<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

相关文章
|
26天前
|
移动开发 前端开发 JavaScript
HTML 框架高阶用法
HTML框架,或前端框架,如Bootstrap、Vue.js等,显著提升了Web应用开发的速度与用户体验。本文介绍了一些高级技巧,如自定义样式与组件、响应式设计实践、JavaScript功能增强及性能优化策略等,帮助开发者更好地利用这些工具,实现高效开发并提升应用性能与灵活性。
|
1月前
|
前端开发 JavaScript 关系型数据库
基于Python+Vue开发的大学竞赛报名管理系统
基于Python+Vue开发的大学竞赛报名管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Python编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Python的大学竞赛报名管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
37 3
基于Python+Vue开发的大学竞赛报名管理系统
|
17天前
|
Linux Android开发 iOS开发
开源的Python库,用于开发多点触控应用程序
Kivy是一款开源Python库,专为开发多点触控应用设计,支持Android、iOS、Linux、OS X和Windows等平台。本文将指导你使用Kivy创建“Hello World”应用并打包成Android APK。首先通过`pip install kivy`安装Kivy,然后创建并运行一个简单的Python脚本。接着,安装Buildozer并通过`buildozer init`生成配置文件,修改相关设置后,运行`buildozer -v android debug`命令打包应用。完成构建后,你将在`./bin/`目录下找到类似`your-app-debug.apk`的文件。
21 2
|
22天前
|
SQL 安全 Go
SQL注入不可怕,XSS也不难防!Python Web安全进阶教程,让你安心做开发!
在Web开发中,安全至关重要,尤其要警惕SQL注入和XSS攻击。SQL注入通过在数据库查询中插入恶意代码来窃取或篡改数据,而XSS攻击则通过注入恶意脚本来窃取用户敏感信息。本文将带你深入了解这两种威胁,并提供Python实战技巧,包括使用参数化查询和ORM框架防御SQL注入,以及利用模板引擎自动转义和内容安全策略(CSP)防范XSS攻击。通过掌握这些方法,你将能够更加自信地应对Web安全挑战,确保应用程序的安全性。
55 3
|
1月前
|
前端开发 JavaScript
html图像属性的高级用法
在HTML中,通过结合CSS、JavaScript及其他HTML元素,可以实现图像属性的高级用法,例如响应式图像、懒加载、图像映射、CSS滤镜、SVG图像、图像作为背景以及使用JavaScript动态更改图像。
|
29天前
|
IDE 数据挖掘 开发工具
python开发
python开发
14 3
|
1月前
|
SQL JavaScript 前端开发
用Java、Python来开发Hive应用
用Java、Python来开发Hive应用
25 6
|
1月前
|
前端开发 JavaScript 关系型数据库
基于Python+Vue开发的体育用品商城管理系统
基于Python+Vue开发的体育用品商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Python编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Python的体育用品销售商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
23 0
基于Python+Vue开发的体育用品商城管理系统
|
1月前
|
前端开发 JavaScript 关系型数据库
基于Python+Vue开发的母婴商城管理系统
基于Python+Vue开发的母婴商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Python编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Python的网上母婴商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
19 0
基于Python+Vue开发的母婴商城管理系统
|
1月前
|
前端开发 JavaScript 关系型数据库
基于Python+Vue开发的婚恋交友管理系统
基于Python+Vue开发的婚恋交友管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Python编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Python的婚恋相亲交友系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
19 0
基于Python+Vue开发的婚恋交友管理系统