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

阅读量：7006 次

发布时间：2019-06-27

本文共 5446 字，大约阅读时间需要 18 分钟。

导语:

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

引用（Quotation）

quote 美音 /kwot/

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


    
      定义被引用的节,用于长引用。被
     
       元素引用的节会进行缩进处理:    
      以下内容引用自 WWF 的网站：
    
      
           五十年来，WWF 一直致力于保护自然界的未来。    世界领先的环保组织，WWF 工作于 100 个国家，    并得到美国一百二十万会员及全球近五百万会员的支持。

 定义缩写或首字母缩略语:当鼠标移动到被标记的缩写词的时候,会显示被缩写的文本    WHO 成立于 1948 年。

效果如下:

 定义缩写。    WHO 成立于 1948 年。

效果如下:

效果根abbr非常类似,直接使用使用 <abbr> 代替。

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

 定义著作的标题浏览器会以斜体显示  元素。    The Scream by Edward Munch. Painted in 1893.

 定义双流向覆盖（bi-directional override）,也就是上下左右做反向显示文本This text will be written from right to left

效果如下:

HTML 计算机代码格式

通常，HTML 使用可变的字母尺寸，以及可变的字母间距,在显示计算机代码时，并不需要如此。

<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。

 定义键盘输入：    To open a file, select:
    File | Open...
 定义计算机输出        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     定义编程代码,但是不保留多余的空格和折行：        var person = {        firstName:"Bill",        lastName:"Gates",        age:50,        eyeColor:"blue"    }    如需解决上面的问题，必须在  元素中包围代码：            var person = {        firstName:"Bill",        lastName:"Gates",        age:50,        eyeColor:"blue"    }    
    定义数学变量：    E = m c²

HTML中的样式

wing提示:本节只是简单演示样式,在脑子里有一个样式的大概印象,如果想深入学习样式需要专门花时间在CSS上.

所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。

当浏览器读到这个样式表，它就会按照这个样式表来对文档进行格式化。

一句话:所谓样式就是事先统一定义每个标签所使用的文本格式化方式

插入样式表的三种姿势：

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。在 head 部分通过 <style> 标签定义内部样式表。

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

header 1

A paragraph.

内联样式

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

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

This is a paragraph

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

这是一个链接！

外部样式表

当样式需要被应用到很多页面时使用外部样式表，就可通过更改一个文件来改变整个站点的外观。

每个页面使用 <link> 标签链接到样式表。


     标签在（文档的）头部：

浏览器会从文件 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 表格


    
      标签定义表格:    每个表格均有若干行,由 
        标签定义.    每行被分割为若干单元格,由 
                   标签定义.    字母 td 指表格数据(table data)，即数据单元格的内容.    数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等.border属性:    指定表格边框宽度,用于
        
         .cellpadding属性:    中文翻译为:补白    用于指定
                              内表格内容到边框间的间距,也就是单元格边距.在
            
             内使用.cellspacing属性: 中文翻译为:单元格间距 用于指定表格边框和边框之间的间距.也就是单元格间距.在
            
            
             内使用.bgcolor属性: 指定表格背景颜色.在
            
            
             内使用.也可用于
                                          和                给单元格添加背景色.background属性: 指定表格背景图片,注意会覆盖背景色.在
                
                 内使用.也可用于
                                                      和                    给单元格添加背景图片.align属性: 用于指定内容在单元格中的位置,在                    内使用.                   
                 
                 
                  标签: 用于指定一个表格的标题.
                                                                       标签: 指定表头内容(类似于数据库表中的字段名称),浏览器会把表头显示为粗体居中的文本.  no-breaking space 空格,用于占位.由于没有内容的表格边框不显示,用空格占位来解决.colspan属性: 用于跨行或者跨列,在                    或                    内使用

    
    
         
      表格标题
                                           table head1                    table head2                    电话               
                                 1                    2                                              
                                 4                    5                    6               
                                  姓名                               7               
                                                       this is a para
            this is anothor para
                                   
                    
         this is a list
            
         this is a list

表格标题
table head1	table head2	电话
1	2
4	5	6
姓名	7
this is a para this is anothor para	this is a list this is a list

frame属性

框架属性,控制围绕表格的边框。

注释：frame 属性无法在 Internet Explorer 中正确地显示。


    
                        Month            Savings         
                   January            $100

Month	Savings
January	$100

效果:

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

<table frame="above">
效果:

<table frame="below">
效果:

<table frame="hsides">
效果:

<table frame="vsides">
效果:

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

HTML无序列表

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

无序列表使用 <ul> 标签


        
     Coffee
   
         
     Milk

显示如下：

• Coffee• Milk

标签<li>的全称是 : List Item列表项目

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

HTML有序列表

有序列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。


    
     Coffee
     Milk

显示如下：

1.Coffee2.Milk

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

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。

每个自定义列表项以 <dt> 开始。

每个自定义列表项的定义以 <dd> 开始。

例1:


    
     
      Coffee
     
     
      - black hot drink
     
     
      Milk
     
     
      - white cold drink

效果如下：

Coffee

black hot drink
Milk

white cold drink

例2:


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

效果如下:

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

<ul>标签的type属性

不同类型的无序列表


    
      效果如下:• 苹果• 香蕉• 柠檬• 桔子
     
      效果如下:°苹果°香蕉°柠檬°桔子
      
       效果如下:☐ 苹果☐ 香蕉☐ 柠檬☐ 桔子square  [skweə(r)]  方格

不同类型的有序列表

数字列表：
     
     苹果
 
     香蕉
 
     柠檬
 
     桔子
    
字母列表：
     
     苹果
 
     香蕉
 
     柠檬
 
     桔子
    
小写字母列表：
    
     罗马字母列表：
     
      小写罗马字母列表：

嵌套列表