导语:

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

引用(Quotation)

quote 美音 /kwot/

 
定义短的引用,浏览器会为  元素添加双引号:
    

WWF 的目标是:构建人与自然和谐共存的世界。

定义被引用的节,用于长引用。被
元素引用的节会进行缩进处理:

以下内容引用自 WWF 的网站:

五十年来,WWF 一直致力于保护自然界的未来。 世界领先的环保组织,WWF 工作于 100 个国家, 并得到美国一百二十万会员及全球近五百万会员的支持。
 
定义缩写或首字母缩略语:
当鼠标移动到被标记的缩写词的时候,会显示被缩写的文本
    

WHO 成立于 1948 年。

效果如下:
CrazyWing:Python自动化运维开发实战 二十一、html标签用法平推式

 
定义缩写。
    

WHO 成立于 1948 年。

效果如下:

CrazyWing:Python自动化运维开发实战 二十一、html标签用法平推式
效果根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

效果如下:

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

HTML 计算机代码格式

通常,HTML 使用可变的字母尺寸,以及可变的字母间距,在显示计算机代码时,并不需要如此。
, , 以及 元素全都支持固定的字母尺寸和间距。

 
定义键盘输入:
    

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 c2

HTML中的样式

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

插入样式表的三种姿势:

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。在 head 部分通过

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


    



    

header 1

A paragraph.

内联样式

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

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

This is a paragraph

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


这是一个链接!

外部样式表

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

 标签在(文档的)头部:
    
    
    

浏览器会从文件 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 中却无法正常工作。

标签的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

frame属性

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

Month Savings
January $100

效果:

CrazyWing:Python自动化运维开发实战 二十一、html标签用法平推式_第1张图片


效果:
CrazyWing:Python自动化运维开发实战 二十一、html标签用法平推式_第2张图片


效果:
CrazyWing:Python自动化运维开发实战 二十一、html标签用法平推式_第3张图片


效果:
CrazyWing:Python自动化运维开发实战 二十一、html标签用法平推式_第4张图片


效果:
CrazyWing:Python自动化运维开发实战 二十一、html标签用法平推式_第5张图片

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

HTML无序列表

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

无序列表使用

    标签

    • Coffee
    • Milk

    显示如下:

    • Coffee
    • Milk

    标签

  • 的全称是 : List Item列表项目
    标签
      的全称是: Unordered List 不排序列表

      HTML有序列表

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

        标签。每个列表项始于
      1. 标签。

        列表项使用数字来标记。

        1. Coffee
        2. Milk

        显示如下:

        1.Coffee
        2.Milk

        标签

          的全称是: Ordered List 排序列表

          HTML 自定义列表

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

          标签开始。
          每个自定义列表项以
          开始。
          每个自定义列表项的定义以
          开始。

          例1:

          Coffee
          - black hot drink
          Milk
          - white cold drink

          效果如下:
          Coffee

          • black hot drink
            Milk
          • white cold drink

          例2:

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

          效果如下:

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

            标签的type属性

            不同类型的无序列表

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

            不同类型的有序列表

            数字列表:
            
            1. 苹果
            2. 香蕉
            3. 柠檬
            4. 桔子
            字母列表:
            1. 苹果
            2. 香蕉
            3. 柠檬
            4. 桔子
            小写字母列表:
              罗马字母列表:
                小写罗马字母列表:

            嵌套列表

            例1:
            
            • 咖啡
              • 红茶
              • 绿茶
            • 牛奶
            例2:
            
            • 咖啡
              • 红茶
              • 绿茶
                • 中国茶
                • 非洲茶
            • 牛奶

            你可能感兴趣的:(闫强,wing,html,Python自动化运维开发实战)