html中组织内容的元素总结

原创 2015年07月08日 14:29:55

p——表示段落;

div——将全局属性应用到一片内容上,但不表示任何其他内容分组;

pre——保留html文档中的布局;

blockquote——表示引自他处的内容;

hr——表示段落级别的主题转变;

ol、li——生成有序列表;

          设置li的value属性:——生成项目编号不连续的有序列表;

ul、li——生成无序列表;

dl、dt及dd——生成术语及其定义的列表;

ul(配合使用css的:before选择器及content特性)——生成带自定义项目编号的列表;

figure、figcaption——表示插图(及可有可无的标题)(html5);

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <base href="http://www.shydzc.com/" target="_blank"/>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/>
    <!--另一种声明html页面所用字符编码的方法
    <meta http-equiv="content-type" content="text/html charset=utf-8"/>
    -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <script src="simple.js"></script>
    <noscript>
        <h1>需要javascript脚本!</h1>
        <!--或者导到另一网站
        <meta http-equiv="refresh" content="0;http://www.shydzc.com"/>
        -->
    </noscript>
    <style type="text/css">
        body{
            counter-reset:OuterItemCount 5 InnerItemCount;
        }
        #outerlist > li:before{
            content:counter(OuterItemCount) ".";
            counter-increment: OuterItemCount 2;
        }
        ul.innerlist > li:before{
            content:counter(InnerItemCount,lower-alpha)".";
            counter-increment: InnerItemCount;
        }
        details{border: solid thin black;padding:5px}
        details > summary{
            font-weight: bold;
        }
    </style>
</head>
<body>
<pre>
    <code>
        var fruits=["苹果","橘子"];<br/>
        document.writeln("我喜欢"+fruits.length+"fruits");
    </code>
</pre>
<blockquote cite="http://en.wikipedia.org/wiki/Apple">The apple is the pomaceous fruit of the apple tree. </blockquote> <br/>
<hr>
<ol start="2" type="I">
    <li>Haden mangoes</li>
    <li>Keitt mangoes</li>
    <li>Kent mangoes</li>
</ol>
<br/>
<ol>
    <li>Haden mangoes</li>
    <li value="4">Keitt mangoes</li>
    <li>Kent mangoes</li>
    <li>Elephant Heart plums</li>
    <li value="9">Stanley plums</li>
    <li>Seneca plums</li>
</ol>
<br/>
<dl>
    <dt>mangoes</dt>
        <dd>Haden mangoes</dd>
        <dd>Keitt mangoes</dd>
        <dd>Kent mangoes</dd>
    <dt>plums</dt>
    <dd>Elephant Heart plums</dd>
    <dd>Stanley plums</dd>
    <dd>Seneca plums</dd>
</dl>
<br/>
<!--带自定义计数器的嵌套列表-->
<ul id="outerlist" style="list-style-type: none">
    <li>bananas</li>
    <li>mangoes,including:
        <ul class="innerlist">
            <li>Haden mangoes</li>
            <li>Keitt mangoes</li>
            <li>Kent mangoes</li>
        </ul>
    </li>
    <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>
<br/>
<figure>
    <figcaption>Listing 23. Using the code element</figcaption>
    <code>
        var fruits=["苹果","橘子"];<br/>
        document.writeln("我喜欢"+fruits.length+"fruits");
    </code>
</figure>
<br/>
</body>
</html>



企业管理软件中的组织模型和权限模型

1. 概述 组织模型是管理软件中系统建模的一个重要组成部分(企业模型一般包括资源模型、组织模型、信息模型、功能模型、流程模型),权限模型是管理软件系统的安全体系的核心,这两个模型本身既有很强的独立性...
  • yczz
  • yczz
  • 2014年12月30日 12:03
  • 1790

使用Jsoup提取HTML元素,修改HTML内容

Jsoup是一个开源的,专门处理HTML内容的强大工具,下载地址+中文文档地址:http://www.open-open.com/jsoup/。最初开始使用时,由于对网页前端知之甚少,并未感受到Jso...
  • Futureer
  • Futureer
  • 2014年02月22日 15:58
  • 4388

Java中如何利用Selenium获取元素分析网页内容

本文首先探讨了编写 Selenium 脚本时的两种最简单、常用的截图方法,接着重点介绍了在难以利用普通截图方法获取到截图时,如何利用 Selenium 获取到的元素分析网页内容,进而绘制出所需要的图像...
  • xiaomin1991222
  • xiaomin1991222
  • 2016年03月10日 16:05
  • 4495

html中嵌入内容的元素总结

img——在html文档里嵌入图像; a元素里使用img——创建基于图像的超链接; 将img或object与map和area结合使用——创建客户端分区响应图; iframe——嵌入另一张html文档;...
  • bboyjoe
  • bboyjoe
  • 2015年07月09日 18:11
  • 783

千呼万唤 HTML 5 (3) - 内容分组元素

原文地址:http://www.cnblogs.com/webabcd/archive/2011/09/22/2184684.html 作者:webabcd 介绍 HTM...
  • scoliver
  • scoliver
  • 2012年03月08日 19:25
  • 360

Extjs框架html5中input、textarea的placeholder,元素内容为空时,颜色为灰色

前端Extjs框架,使用input、textarea的属性placeholder,当元素内容为空,显示placeholder对应的值。 在Google、Firefox都显示为灰色,但是在IE11...
  • qq_30679953
  • qq_30679953
  • 2016年05月26日 20:19
  • 1251

javascript访问html元素的内容(1)

形如如下格式的html元素:I'm BIG panda!!!有3种方式获取其内容,可以获取起全部的子内容,或是获取其子内容的text纯文本标识,或是以对象方式获取其子内容。可以使用元素对象的inner...
  • mydo
  • mydo
  • 2015年03月26日 09:44
  • 739

AngularJS实现一个HTML元素内容可编辑指令

有时我们想让用户可编辑元素某个属性内容,比如自定义数据名称,所以在此实现一个简易的指令my-editable先看效果吧: 指令代码:.directive('myEditable', function...
  • u014291497
  • u014291497
  • 2017年05月27日 23:09
  • 839

Javascript:Dom简介(查找/修改HTML元素的内容及属性)

Javascript:Dom简介(查找/修改HTML元素的内容及属性)
  • books1958
  • books1958
  • 2015年01月27日 12:43
  • 1467

JQ获取html元素的内容

JQ获取html元素的内容
  • daobin543
  • daobin543
  • 2017年06月11日 21:16
  • 193
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html中组织内容的元素总结
举报原因:
原因补充:

(最多只允许输入30个字)