In this article, we will introduce the content of html5 organization to everyone. We hope it will be helpful to everyone. By default, the format of an HTML document is irrelevant to the format of the document content displayed in the browser window. For example, the browser will convert several consecutive whitespace characters into one space and ignore line breaks. HTML provides a way to organize content, segment displayed content, pre-format content, etc.
Create paragraphs
HTML will ignore carriage returns and other extra spaces you enter in the text. New paragraphs are identified using the p element. A paragraph contains one or more related sentences, usually surrounding a point of view or argument, or there are some common themes among multiple arguments.
<body>
<h1 id="Antoni-nbsp-Gaudí">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>
You can add styles to paragraphs, including font, font size, color, etc.
p element
The p element has no specific meaning. If no appropriate element is available, you can use this element to structure and give content Its meaning, its meaning is usually specified through the class or id attribute.
But note that it is best not to use p elements as a last resort. Priority should be given to elements with semantic importance.
Pre-formatted content
The browser will compress all extra carriage returns and spaces and automatically wrap lines according to the size of the window. The pre element can change the way the browser handles content, preventing whitespace characters from being merged so that the formatting in the source document is preserved. Note, however, that it is best not to use this element unless it is necessary to preserve the original formatting of the document, as it reduces the flexibility of the mechanism to control the rendering results through the use of elements and styles. The
pre element is usually used in conjunction with the code element to display code examples, because formatting in programming languages is usually important.
<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 class="brush:php;toolbar:false">
<code>
abbr[title] {
border-bottom: 1px dotted #000;
}
</code>
Quoting content from elsewhere
The blockquote element represents a quote from elsewhere Content, similar to the q element (used for short quotes, cannot span lines), but is usually used in scenarios where there is a lot of content to be quoted. The cite attribute of this element can be used to specify the source of the content being quoted.
##Copy code
The code is as follows:
The">http://en.wikipedia.org/wiki/Apple"> ;The apple forms a tree that is small and deciduous, ......Note that the browser will ignore the format of the content in the blockquote element and default to blockquote text To create structure in a quote, use some organizational elements such as p or hr. Browsers will automatically add language-specific quotes to the text in the q element, but this varies from browser to browser. The effect will be different. Here is an example of using the q element ##
<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>##Add topic separation
# The ##hr element represents a paragraph-level topic separation. In HTML5, the hr element represents a transition to another related topic, and the custom style is a straight line across the page. ##The above example adds some hr elements to the blockquote element to form a certain structure
##Organize the content into a list The types of lists in HTML include ordered lists, unordered lists and description lists 1) Ordered lists, ol is the parent element, and li is the list item;2 ) Unordered list, ul is the parent element, li is the list item; 3) Description list, dl is the parent element, dt and dd represent the terms and descriptions in dl respectively.
In. In addition, users can also define their own lists.Ordered list
ol element represents an ordered list, and list items are represented by li elements.<blockquote cite="http://en.wikipedia.org/wiki/Apple"> 主题1 <hr> 主题2 <hr> ...... </blockquote>
ol element supports the following attributes: 1) start: Set the number value of the first item in the list. The default number of the first item is 1;
2) type: Set the type of number displayed next to each list item, including:
l: Decimal number (default), 1,2,3,4
a : Lowercase Latin letters, a,b,c,d
A: Uppercase Latin letters, A,B,C,D
i: Lowercase Roman numerals, i,ii,iii,iv
I: Uppercase Roman numerals, I, II, III, IV
3) reversed: List numbers are in descending order, some browsers support
Unordered listThe ul element represents an unordered list, and the li element represents the list item.
<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>
A bullet will be displayed before each item in the unordered list. The style of the symbol can be controlled using the CSS attribute list-style-type.
Attributes of the li elementThe li element represents the items in the list. It can be used with ul and ol, and can contain the value attribute to represent the serial number of the list item.
<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>
Description list
定义说明列表需要用到三个元素：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。
相关推荐：
The above is the detailed content of html5 organize content. For more information, please follow other related articles on the PHP Chinese website!
Beyond Basics: Advanced Techniques in H5 CodeMay 02, 2025 am 12:03 AMAdvanced tips for H5 include: 1. Use complex graphics to draw, 2. Use WebWorkers to improve performance, 3. Enhance user experience through WebStorage, 4. Implement responsive design, 5. Use WebRTC to achieve real-time communication, 6. Perform performance optimization and best practices. These tips help developers build more dynamic, interactive and efficient web applications.
H5: The Future of Web Content and DesignMay 01, 2025 am 12:12 AMH5 (HTML5) will improve web content and design through new elements and APIs. 1) H5 enhances semantic tagging and multimedia support. 2) It introduces Canvas and SVG, enriching web design. 3) H5 works by extending HTML functionality through new tags and APIs. 4) Basic usage includes creating graphics using it, and advanced usage involves WebStorageAPI. 5) Developers need to pay attention to browser compatibility and performance optimization.
H5: New Features and Capabilities for Web DevelopmentApr 29, 2025 am 12:07 AMH5 brings a number of new functions and capabilities, greatly improving the interactivity and development efficiency of web pages. 1. Semantic tags such as enhance SEO. 2. Multimedia support simplifies audio and video playback through and tags. 3. Canvas drawing provides dynamic graphics drawing tools. 4. Local storage simplifies data storage through localStorage and sessionStorage. 5. The geolocation API facilitates the development of location-based services.
H5: Key Improvements in HTML5Apr 28, 2025 am 12:26 AMHTML5 brings five key improvements: 1. Semantic tags improve code clarity and SEO effects; 2. Multimedia support simplifies video and audio embedding; 3. Form enhancement simplifies verification; 4. Offline and local storage improves user experience; 5. Canvas and graphics functions enhance the visualization of web pages.
HTML5: The Standard and its Impact on Web DevelopmentApr 27, 2025 am 12:12 AMThe core features of HTML5 include semantic tags, multimedia support, offline storage and local storage, and form enhancement. 1. Semantic tags such as, etc. to improve code readability and SEO effect. 2. Simplify multimedia embedding with labels. 3. Offline storage and local storage such as ApplicationCache and LocalStorage support network-free operation and data storage. 4. Form enhancement introduces new input types and verification properties to simplify processing and verification.
H5 Code Examples: Practical Applications and TutorialsApr 25, 2025 am 12:10 AMH5 provides a variety of new features and functions, greatly enhancing the capabilities of front-end development. 1. Multimedia support: embed media through and elements, no plug-ins are required. 2. Canvas: Use elements to dynamically render 2D graphics and animations. 3. Local storage: implement persistent data storage through localStorage and sessionStorage to improve user experience.
The Connection Between H5 and HTML5: Similarities and DifferencesApr 24, 2025 am 12:01 AMH5 and HTML5 are different concepts: HTML5 is a version of HTML, containing new elements and APIs; H5 is a mobile application development framework based on HTML5. HTML5 parses and renders code through the browser, while H5 applications need to run containers and interact with native code through JavaScript.
The Building Blocks of H5 Code: Key Elements and Their PurposeApr 23, 2025 am 12:09 AMKey elements of HTML5 include,,,,,, etc., which are used to build modern web pages. 1. Define the head content, 2. Used to navigate the link, 3. Represent the content of independent articles, 4. Organize the page content, 5. Display the sidebar content, 6. Define the footer, these elements enhance the structure and functionality of the web page.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
Notepad++7.3.1
Easy-to-use and free code editor
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
