CrazyWing:Python自动化运维开发实战 二十一、html标签用法平推式
2017-12-26 13:50
1116 查看
导语:
上一章我们说到了html标签里的格式化手法,今天我们继续其他标签引用(Quotation)
quote 美音 /kwot/<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>
效果如下:
<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>
效果如下:
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 进行格式化。
<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自动化运维开发实战 二十、html标签用法起手式
- CrazyWing:Python自动化运维开发实战 四、Python变量
- CrazyWing:Python自动化运维开发实战 七、Python数据类型之数字
- CrazyWing:Python自动化运维开发实战 十四、Python函数
- CrazyWing:Python自动化运维开发实战 十三、Python文件I/O
- CrazyWing:Python自动化运维开发实战 六、流程控制
- CrazyWing:Python自动化运维开发实战 十二、Python数据类型之集合
- CrazyWing:Python自动化运维开发实战 一、初识Python
- CrazyWing:Python自动化运维开发实战 十一、Python数据类型之字典
- CrazyWing:Python自动化运维开发实战 十八、Python面向对象
- CrazyWing:Python自动化运维开发实战 十、Python数据类型之元组
- CrazyWing:Python自动化运维开发实战 十六、Python正则表达式
- CrazyWing:Python自动化运维开发实战 二、Python基本用法
- CrazyWing:Python自动化运维开发实战 十九、html基础入门
- CrazyWing:Python自动化运维开发实战 八、Python数据类型之字符串
- CrazyWing:Python自动化运维开发实战 九、Python数据类型之列表
- CrazyWing:Python自动化运维开发实战 五、Python运算符与表达式
- CrazyWing:Python自动化运维开发实战 十七、Python异常 推荐
- CrazyWing:Python自动化运维开发实战 十五、Python模块
- CrazyWing:Python自动化运维开发实战 三、python文件类型