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>

效果以下:
CrazyWing：Python自動化運維開發實戰 二11、html標籤用法平推式 linux

<dfn> 
定義縮寫。
    <p><dfn title="World Health Organization">WHO</dfn> 成立於 1948 年。</p>

效果以下:數據庫

CrazyWing：Python自動化運維開發實戰 二11、html標籤用法平推式
效果根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

CrazyWing：Python自動化運維開發實戰 二11、html標籤用法平推式

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>

效果:

CrazyWing：Python自動化運維開發實戰 二11、html標籤用法平推式

<table frame="above">
效果:
CrazyWing：Python自動化運維開發實戰 二11、html標籤用法平推式

<table frame="below">
效果:
CrazyWing：Python自動化運維開發實戰 二11、html標籤用法平推式

<table frame="hsides">
效果:
CrazyWing：Python自動化運維開發實戰 二11、html標籤用法平推式

<table frame="vsides">
效果:
CrazyWing：Python自動化運維開發實戰 二11、html標籤用法平推式

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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程