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 相关文章推荐
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
介绍一些PHP判断变量的函数
2012/04/24 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
js比较日期大小的方法
2015/05/12 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Python远程方法调用实现过程解析
2020/07/28 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
2014年应届大学生自我评价
2014/01/09 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
绵山导游词
2015/02/05 职场文书
个人党性锻炼总结
2015/03/05 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
python神经网络ResNet50模型
2022/05/06 Python