CrazyWing：Python自动化运维开发实战二11、html标签用法平推式

时间 2019-11-07

标签 crazywing python 自动化开发实战 html 标签用法栏目 Python 繁體版

原文原文链接

导语:

上一章咱们说到了html标签里的格式化手法,今天咱们继续其余标签css

引用（Quotation）

quote 美音 /kwot/html

<q> 
定义短的引用,浏览器会为 <q> 元素添加双引号:
    <p>WWF 的目标是：<q>构建人与天然和谐共存的世界。</q></p>

<blockquote> 
定义被引用的节,用于长引用。被<blockquote> 元素引用的节会进行缩进处理:
    <p>如下内容引用自 WWF 的网站：</p>
    <blockquote cite="http://www.worldwildlife.org/who/index.html">
    五十年来，WWF 一直致力于保护天然界的将来。
    世界领先的环保组织，WWF 工做于 100 个国家，
    并获得美国一百二十万会员及全球近五百万会员的支持。
    </blockquote>

<abbr> 
定义缩写或首字母缩略语:
当鼠标移动到被标记的缩写词的时候,会显示被缩写的文本
    <p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

效果以下:
linux

<dfn> 
定义缩写。
    <p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

效果以下:数据库

效果根abbr很是相似,直接使用使用 <abbr> 代替。编程

<address> 
定义文档或文章的联系信息（做者/拥有者）。
此元素以斜体显示,大多数浏览器会在此元素先后添加折行。
    <address>
    Written by Donald Duck.<br> 
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
    </address>

<cite> 
定义著做的标题
浏览器会以斜体显示 <cite> 元素。
    <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

<bdo> 
定义双流向覆盖（bi-directional override）,也就是上下左右作反向显示文本
<bdo dir="rtl">This text will be written from right to left</bdo>

效果以下:vim

HTML 计算机代码格式

一般，HTML 使用可变的字母尺寸，以及可变的字母间距,在显示计算机代码时，并不须要如此。
<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。浏览器

<kbd> 
定义键盘输入：
    <p>To open a file, select:</p>
    <p><kbd>File | Open...</kbd></p>

<samp> 
定义计算机输出
    <samp>
    demo.example.com login: Apr 12 09:10:17
    Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
    </samp>

<code> 
定义编程代码,可是不保留多余的空格和折行：
    <code>
    var person = {
        firstName:"Bill",
        lastName:"Gates",
        age:50,
        eyeColor:"blue"
    }
    </code>

<pre>
如需解决上面<code>的问题，必须在 <pre> 元素中包围代码：
    <code>
    <pre>
    var person = {
        firstName:"Bill",
        lastName:"Gates",
        age:50,
        eyeColor:"blue"
    }
    </pre>
    </code>

<var>
定义数学变量：
    <p><var>E = m c<sup>2</sup></var></p>

HTML中的样式

wing提示:本节只是简单演示样式,在脑子里有一个样式的大概印象,若是想深刻学习样式须要专门花时间在CSS上.
全部的格式化代码都可移出 HTML 文档，而后移入一个独立的样式表。
当浏览器读到这个样式表，它就会按照这个样式表来对文档进行格式化。
一句话:所谓样式就是事先统必定义每一个标签所使用的文本格式化方式框架

插入样式表的三种姿式：

内部样式表

当单个文件须要特别样式时，就可使用内部样式表。在 head 部分经过 <style> 标签订义内部样式表。运维

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

例:使用添加到 <head> 部分的样式信息对 HTML 进行格式化。ide

<head>
    <style type="text/css">
        h1 {color: red}
        p {color: blue}
    </style>
</head>

<body>
    <h1>header 1</h1>
    <p>A paragraph.</p>
</body>

内联样式

当特殊的样式须要应用到个别元素时，就可使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性能够包含任何 CSS 属性。

好比:改变段落的颜色和左外边距

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

例:使用样式属性作一个没有下划线的连接

<a href="http://fklinux.blog.51cto.com" style="text-decoration:none">
这是一个连接！
</a>

外部样式表

当样式须要被应用到不少页面时使用外部样式表，就可经过更改一个文件来改变整个站点的外观。
每一个页面使用 <link> 标签连接到样式表。

<link> 标签在（文档的）头部：
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

浏览器会从文件 mystyle.css 中读到样式表，并根据它来格式文档。
文件不能包含任何的 html 标签,以 .css 扩展名进行保存。
好比：

# vim mystyle.css
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/girl1.gif");}

属性值与单位之间不能有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，可是在 Mozilla/Firefox 或 Netscape 中却没法正常工做。

<link>标签的rel属性:

规定当前文档与被连接文档之间的关系。
值:stylesheet  
    文档的外部样式表。
    只有 rel 属性的 "stylesheet" 值获得了全部浏览器的支持。其余值只获得了部分地支持。

HTML 表格

<table> 标签订义表格:
    每一个表格均有若干行,由 <tr> 标签订义.
    每行被分割为若干单元格,由 <td> 标签订义.
    字母 td 指表格数据(table data)，即数据单元格的内容.
    数据单元格能够包含文本、图片、列表、段落、表单、水平线、表格等等.

border属性:
    指定表格边框宽度,用于<table>.

cellpadding属性:
    中文翻译为:补白
    用于指定<td>内表格内容到边框间的间距,也就是单元格边距.在<table>内使用.

cellspacing属性:
    中文翻译为:单元格间距
    用于指定表格边框和边框之间的间距.也就是单元格间距.在<table>内使用.

bgcolor属性:
    指定表格背景颜色.在<table>内使用.也可用于<th>和<td>给单元格添加背景色.

background属性:
    指定表格背景图片,注意会覆盖背景色.在<table>内使用.也可用于<th>和<td>给单元格添加背景图片.

align属性:
    用于指定内容在单元格中的位置,在<td>内使用.

<caption>标签:
    用于指定一个表格的标题.

<th>标签:
    指定表头内容(相似于数据库表中的字段名称),浏览器会把表头显示为粗体居中的文本.

 
    no-breaking space
    空格,用于占位.因为没有内容的表格边框不显示,用空格占位来解决.

colspan属性:
    用于跨行或者跨列,在<th>或<td>内使用

<body>
    <table border="1" cellpadding="10" cellspacing="10" bgcolor="red" background="images/girl2.gif">
    <caption>表格标题</caption>

        <tr>
            <th>table head1</th>
            <th>table head2</th>
            <th colspan="2">电话</th>
        </tr>
        <tr>
            <td align="left">1</td>
            <td align="right">2</td>
            <td> </td>   <!--用空格占位-->
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
             <th>姓名</th>   <!--垂直表头-->
             <td>7</td>
        </tr>
        <!--表格内容能够是其余元素,好比下面的段落和无序列表,也能够是另外一个表格-->
        <tr>
        <td>
            <p>this is a para</p>
            <p>this is anothor para</p>
        </td>
        <td>
            <ul>
            <li>this is a list</li>
            <li>this is a list</li>
            </ul>
        </td>
    </tr>
    </table>
</body>

frame属性

框架属性,控制围绕表格的边框。
注释：frame 属性没法在 Internet Explorer 中正确地显示。

<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

效果:

<table frame="above">
效果:

<table frame="below">
效果:

<table frame="hsides">
效果:

<table frame="vsides">
效果:

HTML 支持有序、无序和定义列表

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

<ul>
    <li>Coffee</li>   <!--列表项-->
    <li>Milk</li>
</ul>

显示以下：

• Coffee
• Milk

标签<li>的全称是 : List Item列表项目
标签<ul>的全称是: Unordered List 不排序列表

HTML有序列表

有序列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每一个列表项始于 <li> 标签。

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

显示以下：

1.Coffee
2.Milk

标签<ol>的全称是: Ordered List 排序列表

HTML 自定义列表

自定义列表不只仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。
每一个自定义列表项以 <dt> 开始。
每一个自定义列表项的定义以 <dd> 开始。

例1:

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

效果以下：
Coffee

black hot drink
Milk
white cold drink

例2:

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

效果以下:

计算机   
           用来计算的仪器 ... ...   
    显示器   
            以视觉方式显示信息的装置 ... ...

<ul>标签的type属性

不一样类型的无序列表

<ul type="disc"> 效果以下:
• 苹果
• 香蕉
• 柠檬
• 桔子
<ul type="circle">效果以下:
°苹果
°香蕉
°柠檬
°桔子
<ul type="square">效果以下:
☐ 苹果
☐ 香蕉
☐ 柠檬
☐ 桔子

square  [skweə(r)]  方格

不一样类型的有序列表

数字列表：
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>

字母列表：
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>

小写字母列表：
<ol type="a">

罗马字母列表：
<ol type="I">

小写罗马字母列表：
<ol type="i">

嵌套列表

例1:
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

例2:
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

CrazyWing：Python自动化运维开发实战 二11、html标签用法平推式

导语: