html5机构內容

日期:2020-10-10 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

默认设置状况下,HTML文本文档的文件格式与文本文档內容在访问器对话框中显示信息的文件格式是不有关的,比如:访问器会将连在1起的几个空白标识符折算为1个空格,而且会忽视换行符。HTML出示了机构內容的方法,将显示信息的內容分段,预先编排內容的文件格式等。

创建段落

HTML会忽视你在文字中键入的回车符和别的附加的空格,网页页面中的新的段落应用p元素标志,1个段落包括1个或好几个有关语句,一般紧紧围绕的是1个见解或论点,或好几个论点间有1些相互的主题。

<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元素能够更改访问器解决內容的方法,阻拦合拼空白标识符,让源文本文档中的文件格式得以保存。但留意除非必须保存文本文档初始文件格式,不然最好是不必应用该元素,由于它消弱了根据应用元素和款式来操纵展现結果这1体制的灵便性。

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元素表明引自他处的1片內容,与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文字开展缩进。要在引入中创建构造,可使用1些机构元素,比如p或hr。

访问器解决q元素中的文字会全自动再加特殊語言的引号,但不一样的访问器的实际效果会有差别。下面是应用q元素的1个事例。

<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元素意味着着向另外一个有关主题的变换,习惯性款式是1条横穿网页页面的平行线。

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

上例在blockquote元素中添加了1些hr元素,产生1定的构造。

将內容机构为目录

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:10进制数(默认设置),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>  

无编码序列表的每一个新项目前都会显示信息1个新项目标记,标记的款式能够用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>  

叙述目录

界定表明目录必须用到3个元素: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挑选器,能够转化成繁杂的目录。下面是1个事例:

<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对插图的界定为:1个单独的內容模块,可带题目,一般做为1个总体被文本文档的行为主体引入,把它从文本文档行为主体中删掉也不容易危害文本文档的含意。

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元素转化成了1个将code元素裹在这其中的插图,并用figcaption元素为其加上了1个题目。留意figcaption元素务必是figure元素的第1个或最终1个子元素。

figure元素能够包括好几个內容块,但只能包括1个figcaption。

上一篇:HTML5自定特性前缀data 返回下一篇:没有了