html5组织内容_动力节点Java学院整理


Posted in HTML / CSS onJuly 10, 2017

默认情况下,HTML文档的格式与文档内容在浏览器窗口中显示的格式是不相关的,例如:浏览器会将连在一起的几个空白字符折算为一个空格,并且会忽略换行符。HTML提供了组织内容的方式,将显示的内容分段,预先编排内容的格式等。

建立段落

HTML会忽略你在文本中输入的回车符和其他额外的空格,网页中的新的段落使用p元素标识,一个段落包含一个或多个相关句子,通常围绕的是一个观点或论点,或者多个论点间有一些共同的主题。

<body>  
    <h1>Antoni Gaudí</h1>  
    <p>Many tourists are drawn to Barcelona  
       to see Antoni Gaudí's incredible  
       architecture.</p>  
    <p>Barcelona celebrated the 150th  
       anniversary of Gaudí's birth in  
       2002.</p>  
</body>

可以为段落添加样式,包括字体、字号、颜色等。

div元素

div元素没有具体的含义,如果没有恰当的元素可用时可以使用这个元素为内容建立结构并赋予其含义,它的含义通常通过class或id属性指定。

但是注意不在万不得已的情况下最好不要使用div元素,应该优先考虑那些具有语义重要性的元素。

预先编排内容格式

浏览器会将所有额外的回车和空格压缩,并根据窗口的大小自动换行。pre元素可以改变浏览器处理内容的方式,阻止合并空白字符,让源文档中的格式得以保留。但注意除非有必要保留文档原始格式,否则最好不要使用该元素,因为它削弱了通过使用元素和样式来控制呈现结果这一机制的灵活性。

pre元素通常和code元素搭配使用,用于展示代码示例,因为编程语言中的格式通常都很重要。

<p>Add this to your style sheet if you want  
  to display a dotted border underneath the  
  <code>abbr</code> element whenever it has  
  a <code>title</code> attribute.</p>  
<pre>  
    <code>  
        abbr[title] {  
            border-bottom: 1px dotted #000;  
        }  
    </code>  
</pre>

引用他处内容

blockquote元素表示引自他处的一片内容,与q元素类似(用于短的引述,不能跨行),但通常用在要引用的内容较多的场景。该元素的cite属性可以用来指定所引用的内容的来源。

复制代码
代码如下:
<blockquote cite="<a href="http://en.wikipedia.org/wiki/Apple">The">http://en.wikipedia.org/wiki/Apple">The</a> apple forms a tree that is small and deciduous, ......</blockquote>

注意浏览器会忽略blockquote元素中的内容的格式,默认对blockquote文本进行缩进。要在引用中建立结构,可以使用一些组织元素,例如p或hr。

浏览器应对q元素中的文本会自动加上特定语言的引号,但不同的浏览器的效果会有差异。下面是使用q元素的一个例子。

<p>She tried again, this time in French:  
<q lang="fr">Avez-vous lu le livre 
<cite lang="en">High Tide in Tucson</cite> 
de Kingsolver? C'est inspirational.</q></p>

添加主题分隔

hr元素代表段落级别的主题分隔。在HTML5中,hr元素代表着向另一个相关主题的转换,习惯样式是一条横贯页面的直线。

<blockquote cite="http://en.wikipedia.org/wiki/Apple">  
主题1  
<hr>  
主题2  
<hr>  
......  
</blockquote>

上例在blockquote元素中加入了一些hr元素,形成一定的结构。

将内容组织为列表

HTML中列表的类型有有序列表、无序列表和描述列表。

1)有序列表,ol为父元素,li为列表项;

2)无序列表,ul为父元素,li为列表项;

3)描述列表,dl为父元素,dt和dd分别代表dl中的术语和描述。

在此之外,用户还可以定义自己的列表。

有序列表

ol元素表示有序列表,列表项用li元素表示。

<body>  
    I like apples and oranges.  
    I also like:  
    <ol>  
        <li>bananas</li>  
        <li>mangoes</li>  
        <li>cherries</li>  
        <li>plums</li>  
        <li>peaches</li>  
        <li>grapes</li>  
    </ol>  
    You can see other fruits I like <a href="fruitlisthtml">here</a>  
</body>

ol元素支持属性如下:

1)start:设置列表首项的编号值,默认首项的编号为1;

2)type:设置显示在各列表项旁的编号的类型,包括:

l:十进制数(默认),1,2,3,4 

a:小写拉丁字母,a,b,c,d 

A:大写拉丁字母,A,B,C,D

i:小写罗马数字,i,ii,iii,iv

I:大写罗马数字,I,II,III,IV

3)reversed:列表编号采用降序,部分浏览器支持

无序列表

ul元素表示无序列表,用li元素表示列表项。

<body>  
    I like apples and oranges.  
    I also like:  
    <ul>  
        <li>bananas</li>  
        <li>mangoes</li>  
        <li>cherries</li>  
        <li>plums</li>  
        <li>peaches</li>  
        <li>grapes</li>  
    </ul>  
    You can see other fruits I like <a href="fruitlisthtml">here</a>  
</body>

无序列表的每个项目前都会显示一个项目符号,符号的样式可以用CSS属性list-style-type控制。

li元素的属性

li元素表示列表中的项目,它可以与ul、ol搭配使用,可以包含value属性,表示列表项的序号。

<body>  
    I like apples and oranges.  
    I also like:  
    <ol>  
        <li>bananas</li>  
        <li value="4">mangoes</li>  
        <li>cherries</li>  
        <li value="7">plums</li>  
        <li>peaches</li>  
        <li>grapes</li>  
    </ol>  
    You can see other fruits I like <a href="fruitlisthtml">here</a>  
</body>

描述列表

定义说明列表需要用到三个元素:dl、dt和dd元素,这些元素没有局部属性:

1)dl:表示说明列表;

2)dt:表示说明列表中的术语;

3)dd:表示说明列表中的定义。

<body>  
    I like apples and oranges.  
    I also like:  
    <dl>  
        <dt>Apple</dt>  
            <dd>The apple is the pomaceous fruit of the apple tree</dd>  
            <dd><i>Malus domestica</i></dd>  
        <dt>Banana</dt>  
            <dd>The banana is the parthenocarpic fruit of the banana tree</dd>  
            <dd><i>Musa acuminata</i></dd>  
        <dt>Cherry</dt>  
            <dd>The cherry is the stone fruit of the genus <i>Prunus</i></dd>  
    </dl>  
    You can see other fruits I like <a href="fruitlist.html">here</a>.  
</body>

自定义列表

HTML中的ul元素结合CSS中的counter特性和:before选择器,可以生成复杂的列表。下面是一个例子:

<head>  
    ......  
    <style>  
        body{  
            counter-reset: OuterItemCount 5 InnerItemCount;  
        }  
        #outerlist > li:before {  
         content: counter(OuterItemCount)". ";  
            counter-increment: OuterItemCount 2;  
        }  
        ulinnerlist > li:before {  
            content: counter(InnerItemCount, lower-alpha) ". ";  
            counter-increment: InnerItemCount;  
        }  
    </style>  
</head>  
<body>  
    I like apples and oranges.  
    I also like:  
    <ul id="outerlist" style="list-style-type: none">  
        <li>bananas</li>  
        <li>mangoes, including:</li>  
            <ul class="innerlist">  
                <li>Haden mangoes</li>  
                <li>Keitt mangoes</li>  
                <li>Kent mangoes</li>  
            </ul>  
        <li>cherries</li>  
        <li>plums, including:  
            <ul class="innerlist">  
                <li>Elephant Heart plums</li>  
                <li>Stanley plums</li>  
                <li>Seneca plums</li>  
            </ul>  
        </li>  
        <li>peaches</li>  
        <li>grapes</li>  
    </ul>  
    You can see other fruits I like <a href="fruitlist.html">here</a>.  
</body>

使用插图

HTML5对插图的定义为:一个独立的内容单元,可带标题,通常作为一个整体被文档的主体引用,把它从文档主体中删除也不会影响文档的含义。

HTML使用figure元素插入图表、照片、图形、插图、代码片段等,figcaption是figure的标题,可选,出现在figure内容的开头或结尾处。

<body>  
    I like apples and oranges.  
    <figure>  
        <figcaption>Listing 23. Using the code element</figcaption>  
        <code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>document.writen("I like " + fruits.length + " fruits");  
        </code>  
    </figure>  
    You can see other fruits I like <a href="fruitlist.html">here</a>.  
</body>

figure元素生成了一个将code元素裹在其中的插图,并用figcaption元素为其添加了一个标题。注意figcaption元素必须是figure元素的第一个或最后一个子元素。

figure元素可以包含多个内容块,但只能包含一个figcaption。

HTML / CSS 相关文章推荐
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 #HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 #HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 #HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 #HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 #HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 #HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 #HTML / CSS
You might like
第三章 php操作符与控制结构代码
2011/12/30 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
mouse_on_title.js
2006/08/25 Javascript
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
常用的javascript设计模式
2017/01/11 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
Python检测QQ在线状态的方法
2015/05/09 Python
开源Web应用框架Django图文教程
2017/03/09 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
python 实现客户端与服务端的通信
2020/12/23 Python
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
大学生活动策划方案
2014/02/10 职场文书
五年级数学教学反思
2014/02/11 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
Python 中的 copy()和deepcopy()
2021/11/07 Python