html标签用法平推式,html中的列表标签

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

一.<dl>定义列表,<dt>定义列表中的项目,<dd>对品种的描述

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

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

澳门葡京 1<!DOCTYPE
HTML> <html> <head> <meta charset=”utf-8″>
<title> </title> <link rel=”stylesheet”
href=”;
</head> <body> <!–Bootstrap中的标题–>
<h壹>Bootstrap标题一</h1>
<h贰>Bootstrap题目2</h贰>
<h三>Bootstrap标题3</h三>
<h四>Bootstrap标题4</h四>
<h5>Bootstrap标题伍</h5>
<h6>Bootstrap题目6</h陆>
<!–Bootstrap中让非题目成分和标题使用相同的体裁,特意定义了.h1~.h六多少个类名–>
<div class=”h一”>Bootstrap标题壹</div> <div
class=”h贰”>Bootstrap题目2</div> <div
class=”h三”>Bootstrap题目三</div> <div
class=”h4″>Bootstrap标题四</div> <div
class=”h5″>Bootstrap标题伍</div> <div
class=”h陆”>Bootstrap题目六</div>
<!–Bootstrap中央银行使了<small>标签来塑造副标题–>
<h一>Bootstrap标题一<small>笔者是副标题</small></h壹>
<h二>Bootstrap标题2<small>小编是副题目</small></h2>
<h3>Bootstrap标题3<small>笔者是副标题</small></h三>
<h四>Bootstrap标题4<small>笔者是副题目</small></h四>
<h五>Bootstrap标题五<small>笔者是副标题</small></h五>
<h陆>Bootstrap标题陆<small>我是副题目</small></h陆>
<!–Bootstrap中,p成分之间全数一定的间隔,便于用户阅读文本,p成分的margin值p
{ margin: 0 0 10px; }–>
<p>超酷的网络、IT技术免费学习平台,立异的互连网壹站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互连网工程师火速成为技术能手!</p>
<!–Bootstrap中一经想让一个段落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>1起念书<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>
排版代码

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

澳门葡京 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> <!–冬天列表–>
<h5>普通列表</h⑤> <ul> <li>列表项目</li>
<li>列表项目</li> <li>列表项目</li>
<li>列表项目</li> <li>列表项目</li> </ul>
<!–有体系表–> <h⑤>有系列表</h5> <ol>
<li>项目列表一</li> <li>项目列表二</li>
<li>项目列表叁</li> </ol> <!–有类别表嵌套–>
<h5>有系列表嵌套</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> <html标签用法平推式,html中的列表标签。!–有系列表去序号–>
<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>W三cplus</li>
<li>Blog</li> <li>CSS三</li>
<li>jQuery</li> <li>PHP</li> </ul>
<!–定义列表,Bootstrap并从未做太多的调整,只是调整了行间距,外边距和字体加粗效果。–>
<dl> <dt>定义列表标题</dt>
<dd>定义列表新闻一</dd> <dd>定义列表音信二</dd>
</dl>
<!–水平定义列表,仿佛内联列表1样,Bootstrap能够给<dl>添加类名“.dl-horizontal”给定义列表实现程度显得效果。(依照显示屏宽度自动换行)–>
<dl class=”dl-horizontal”> <dt>W三cplus</dt>
<dd>一个转业于推广国内前端行业的技能博客。它以研究为己任,不断活跃在行业技术抢先,努力提供高质量前端技术博文</dd>
<dt>慕课网</dt>
<dd>3个正式的,真心实目的在于做作育的网址</dd>
<dt>小编来测试1个题名,笔者来测试2个标题</dt>
<dd>作者在写贰个水准定义列表的职能,作者在写四个程度定义列表的效用</dd>
</dl> </body> </html> 列表代码

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

相似在私有博客上运用的较为频仍,用于展示代码的品格。在Bootstrap首要提供了二种代码风格:

壹、使用<code></code>来呈现单行内联代码

二、使用<pre></pre>来展示多行块代码

3、使用<kbd></kbd>来突显用户输入代码

在接纳代码时,用户能够依照具体的需求来使用差异的类型:

一、<code>:一般是本着于单个单词或单个句子的代码

二、<pre>:1般是对准于多行代码(也正是成块的代码)

3、<kbd>:一般是意味用户要因此键盘输入的始末

不论选拔哪一种代码风格,在代码中遭受小于号(<)要采取硬编码“<”来替代,大于号(>)使用“>”来顶替。而且对于<pre>代码块风格,标签前边留多少个空格,在展现效果中就会留多少个空格。

澳门葡京 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>

作用如下:
澳门葡京 4

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

功用如下:

澳门葡京 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>

意义如下:

澳门葡京 6

澳门葡京 7

澳门葡京 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 文书档案,然后移入一个单独的样式表。
当浏览器读到这么些样式表,它就会服从那些样式表来对文书档案举行格式化。
一句话:所谓样式正是事先统一定义每一种标签所选择的文本格式化方式

澳门葡京 9

澳门葡京 10

安排样式表的三种姿势:

二.<ul>冬辰列表,<li>列表项

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

澳门葡京 11

澳门葡京 12

外表样式表

当样式须求被采取到众多页面时利用外部样式表,就可通过改变一个文本来改变总体站点的外观。
各类页面使用 <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>

澳门葡京 13

澳门葡京 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>

效果:

澳门葡京 15

<table frame=”above”>
效果:
澳门葡京 16

<table frame=”below”>
效果:
澳门葡京 17

<table frame=”hsides”>
效果:
澳门葡京 18

<table frame=”vsides”>
效果:
澳门葡京 19

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

三.<ol>有种类表,<li>列表项

HTML 协理有序、严节和概念列表

例:

例:

HTML严节列表

冬天列表是三个项目标列表,此列项目利用粗体圆点(典型的小黑圆圈)举行标记。

冬日列表使用 <ul> 标签

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

来得如下:

• Coffee
• Milk

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

澳门葡京 20

澳门葡京 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属性

澳门葡京 22

澳门葡京 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>

相关文章

发表评论

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

*
*
Website