bootstrap基础学习小记,Python自动化运行开发实战

By admin in 4858美高梅 on 2019年4月5日

4858美高梅 ,1.<dl>定义列表,<dt>定义列表中的项目,<dd>对品种的叙说

1.<dl>定义列表,<dt>定义列表中的项目,<dd>对项目的讲述

bootstrap基础学习小记(二)排版、列表、代码风格,bootstrap小记

排版——标题、副标题、段落(正文文本)、强调内容、粗体、斜体、强调相关的类、文本对齐

4858美高梅 1<!DOCTYPE
HTML> <html> <head> <meta charset=”utf-8″>
<title> </title> <link rel=”stylesheet”
href=”;
</head> <body> <!–Bootstrap中的标题–>
<h一>Bootstrap标题一</h壹>
<h贰>Bootstrap标题2</h二>
<h叁>Bootstrap标题3</h三>
<h四>Bootstrap标题4</h肆>
<h五>Bootstrap标题5</h伍>
<h六>Bootstrap标题陆</h陆>
<!–Bootstrap中让非标题成分和标题使用同一的体制,特意定义了.h一~.h6两个类名–>
<div class=”h壹”>Bootstrap题目1</div> <div
class=”h二”>Bootstrap题目二</div> <div
class=”h叁”>Bootstrap标题三</div> <div
class=”h四”>Bootstrap题目4</div> <div
class=”h5″>Bootstrap标题伍</div> <div
class=”h陆”>Bootstrap标题陆</div>
<bootstrap基础学习小记,Python自动化运行开发实战。!–Bootstrap中运用了<small>标签来创设副标题–>
<h一>Bootstrap标题一<small>小编是副标题</small></h一>
<h二>Bootstrap标题贰<small>小编是副标题</small></h贰>
<h三>Bootstrap标题3<small>小编是副标题</small></h三>
<h四>Bootstrap标题4<small>小编是副标题</small></h四>
<h5>Bootstrap题目5<small>小编是副标题</small></h伍>
<h六>Bootstrap标题六<small>笔者是副标题</small></h6>
<!–Bootstrap中,p成分之间具有自然的距离,便于用户阅读文本,p成分的margin值p
{ margin: 0 0 10px; }–>
<p>超酷的网络、IT技术免费上学平台,立异的互联网一站式学习、实践经验;服务及时贴心,内容专业、有趣易学。专注服务网络工程师快捷成为技术权威!</p>
<!–Bootstrap中只要想让3个段落p优秀显示,能够透过添加类名“.lead”落成,其意义就是外加文本字号,加粗文本,而且对行高和margin也做相应的处理。–>
<p
class=”lead”>笔者是专门要优秀的文本,作者的指南成这么。作者是专程要杰出的文件,作者的榜样长成那样。</p>
<!–Bootstrap中得以接纳<b>和<strong>标签让文本间接加粗。–>
<p>笔者在求学<strong>Bootstrap</strong>,作者要控制<strong>Bootstrap</strong>的全数知识。</p>
<!–斜体类似于加粗一样,除了能够给成分设置样式font-style值为italic达成之外,在Bootstrap中还足以因而选用标签<em>或<i>来实现。–>
<p>作者在慕课网上跟<em>大漠</em>一起读书<i>Bootstrap</i>的选拔。小编肯定要学会<i>Bootstrap</i>。</p>
<!–Bootstrap中强调类名(类似前面说的“.lead”),那几个强调类皆以透过颜色来表示强调–>
<!–.text-muted:提醒,使用浅土红(#999)–> <div
class=”text-muted”>.text-muted 效果</div>
<!–.text-primary:主要,使用浅紫蓝(#428bca)–> <div
class=”text-primary”>.text-primary效果</div>
<!–.text-success:成功,使用紫色色(#3c763d)–> <div
class=”text-success”>.text-success效果</div>
<!–.text-info:布告音讯,使用棕浅米灰(#31708f)–> <div
class=”text-info”>.text-info效果</div>
<!–.text-warning:警告,使用青灰(#8a6d3b)–> <div
class=”text-warning”>.text-warning效果</div>
<!–.text-danger:危险,使用豆青(#a94442)–> <div
class=”text-danger”>.text-danger效果</div>
<!–为了简化操作,方便使用,Bootstrap通过定义多少个类名来支配文件的对齐风格–>
<p class=”text-left”>笔者居左</p> <p
class=”text-center”>小编居中</p> <p
class=”text-right”>我居右</p> <p
class=”text-justify”>两端对齐</p> </body> </html>
排版代码

列表——冬季列表、有类别表、去点列表、内联列表、定义列表、水平定义列表

4858美高梅 2<!DOCTYPE
HTML> <html> <head> <meta charset=”utf-8″>
<title>列表–简介</title> <link rel=”stylesheet”
href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
</head> <body> <!–冬日列表–>
<h五>普通列表</h五> <ul> <li>列表项目</li>
<li>列表项目</li> <li>列表项目</li>
<li>列表项目</li> <li>列表项目</li> </ul>
<!–有类别表–> <h伍>有连串表</h5> <ol>
<li>项目列表壹</li> <li>项目列表贰</li>
<li>项目列表三</li> </ol> <!–有种类表嵌套–>
<h伍>有类别表嵌套</h五> <ol>
<li>有系列表</li> <li> 有体系表 <ol>
<li>有系列表(二)</li> <li>有连串表(二)</li>
</ol> </li> <li>有体系表</li> </ol>
<!–冬日列表去点–> <ul> <li> 项目列表 <ul>
<li>带有项指标志</li> <li>带有项目的志</li>
</ul> </li> <li> 项目列表 <ul
class=”list-unstyled”> <li>不带项目的志</li>
<li>不带项目的志</li> </ul> </li>
<li>项目列表</li> </ul> <!–有类别表去序号–>
<ol> <li> 项目列表 <ol>
<li>带有项目编号</li> <li>带有项目编号</li>
</ol> </li> <li> 项目列表 <ol
class=”list-unstyled”> <li>不带项目编号</li>
<li>不带项目编号</li> </ol> </li>
<li>项目列表</li> </ol>
<!–内联列表,不难点说正是把垂直列表换来水平列表,而且去掉项指标志(编号),保持水平显得。–>
<ul class=”list-inline”> <li>W3cplus</li>
<li>Blog</li> <li>CSS三</li>
<li>jQuery</li> <li>PHP</li> </ul>
<!–定义列表,Bootstrap并从未做太多的调整,只是调整了行间距,外边距和字体加粗效果。–>
<dl> <dt>定义列表题目</dt>
<dd>定义列表新闻一</dd> <dd>定义列表音信2</dd>
</dl>
<!–水平定义列表,就如内联列表壹样,Bootstrap能够给<dl>添加类名“.dl-horizontal”给定义列表完毕程度显得效果。(根据荧屏宽度自动换行)–>
<dl class=”dl-horizontal”> <dt>W三cplus</dt>
<dd>3个从业于推广国内前端行业的技能博客。它以斟酌为己任,不断活跃在行业技术超过,努力提供高品质前端技术博文</dd>
<dt>慕课网</dt>
<dd>二个规范的,真心实意在做培养的网址</dd>
<dt>小编来测试一个标题,作者来测试多个题名</dt>
<dd>笔者在写二个品位定义列表的服从,作者在写1个水平定义列表的功效</dd>
</dl> </body> </html> 列表代码

代码(用于体现代码风格)、展现大块代码(设置一定区域显示,超出后现身滚动条)

貌似在个人博客上采纳的比较频仍,用于展示代码的作风。在Bootstrap主要提供了两种代码风格:

一、使用<code></code>来体现单行内联代码

二、使用<pre></pre>来突显多行块代码

③、使用<kbd></kbd>来彰显用户输入代码

在采纳代码时,用户能够依据现实的需求来利用不一致的档次:

1、<code>:1般是对准于单个单词或单个句子的代码

2、<pre>:一般是指向于多行代码(也正是成块的代码)

三、<kbd>:1般是代表用户要因而键盘输入的内容

任由选择哪一类代码风格,在代码中遇见小于号(<)要运用硬编码“<”来代替,大于号(>)使用“>”来代表。而且对于<pre>代码块风格,标签前边留多少个空格,在展现效果中就会留多少个空格。

4858美高梅 3<!DOCTYPE
HTML> <html> <head> <meta charset=”utf-捌”>
<title>代码</title> <link rel=”stylesheet”
href=”//netdna.bootstrapcdn.com/bootstrap/三.壹.1/css/bootstrap.min.css”>
</head> <body> code风格:
<div>Bootstrap的代码风格有二种:<code><code></code>、<code><pre></code>和<code><kbd></code></div>
pre风格: <div> <pre> <ul> <li>…</li>
<li>…</li> <li>…</li> </ul>
</pre> </div> kbd风格:
<div>请输入<kbd>ctrl+c</kbd>来复制代码,然后接纳<kbd>ctrl+v</kbd>来粘贴代码</div>
<!–高度超越340px,就会在Y轴现身滚动条.pre-scrollable { max-height:
340px; overflow-y: scroll;}–> <pre> <ol>
<li>….</li> <li>….</li>
<li>….</li> <li>….</li>
<li>….</li> <li>….</li>
<li>….</li> <li>….</li>
<li>….</li> <li>….</li>
<li>….</li> <li>….</li>
<li>….</li> <li>….</li> </ol>
</pre> </body> </html> 代码风格

 

排版标题、副标题、段落(正文文本)、强调内容、粗体、斜体、强调相关…

导语:

上壹章大家聊起了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>

效益如下:
4858美高梅 4

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

功效如下:

4858美高梅 5
功效根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>

功用如下:

4858美高梅 6

4858美高梅 7

4858美高梅 8

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 文书档案,然后移入1个单独的样式表。
当浏览器读到那些样式表,它就会绳趋尺步这一个样式表来对文书档案进行格式化。
一句话:所谓样式就是先行统一定义每种标签所运用的文本格式化方式

4858美高梅 9

4858美高梅 10

布置样式表的三种姿势:

2.<ul>冬天列表,<li>列表项

2.<ul>严节列表,<li>列表项

个中样式表

当单个文件需求尤其样式时,就足以选拔当中样式表。在 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>

4858美高梅 11

4858美高梅 12

外表样式表

当样式必要被使用到许多页面时采纳外部样式表,就可由此转移1个文本来改变总体站点的外观。
种种页面使用 <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 陆 中有效,可是在 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>

4858美高梅 13

4858美高梅 14

frame属性

框架属性,控制围绕表格的边框。
诠释:frame 属性无法在 Internet Explorer 中国中国科学技术大学学学地呈现。

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

效果:

4858美高梅 15

<table frame=”above”>
效果:
4858美高梅 16

<table frame=”below”>
效果:
4858美高梅 17

<table frame=”hsides”>
效果:
4858美高梅 18

<table frame=”vsides”>
效果:
4858美高梅 19

3.<ol>有连串表,<li>列表项

三.<ol>有体系表,<li>列表项

HTML 补助有序、冬日和概念列表

例:

例:

HTML冬日列表

冬季列表是贰个类型的列表,此列项目选取粗体圆点(典型的小黑圆圈)进行标记。

冬日列表使用 <ul> 标签

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

显示如下:

• Coffee
• Milk

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

4858美高梅 20

4858美高梅 21

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属性

4858美高梅 22

4858美高梅 23

不等种类的冬辰列表

<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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有