HTML 順序なしリスト-htmlチュートリアル-php.cn

Syntax of HTML Unordered List

Example #2

Types of Attributes for HTML Unordered List

1. Attribute type=’disc.’

2. Attribute type=’square.’

3. Attribute type=’circle.’

Replacing HTML list Items with Customizable Images

Example #1 – Style properties between the list elements

Example #2 – With image style

Kesimpulan

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML 順序なしリスト

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:43 PM

html html5 HTML Tutorial HTML Properties HTML tags

Lists in HTML are a concept of gathering a number of data or elements arranged in a specific order organized for the purpose of being used in the program execution. HTML uses three types of lists, namely Ordered List, Unordered List and Definition List, where Unordered List is a type of list where the data or elements can be arranged in the list in no specific order. The syntax for the HTML Unordered List is

, where

The three types of lists we could use to bring order to the web pages. Below are the different types:

Ordered List
Unordered list
Definition List

In this article, we shall go through the unordered list specification with an example. The unordered list is a list that doesn’t require any order of numbering in their list; instead, we use bullets for the list levels.

Syntax of HTML Unordered List

The syntax for the unordered list is similar to the ordered list we created in the previous article. Unordered list is created using an element named

element and ends with

<ul>
<li></li>
………..
</ul>

ログイン後にコピー

Example #1

This shows how this short item list is implemented in a browser.

<html>
<head>
<title> Demo on Unordered list</title><br>   </head>
<body bgcolor="orange" text="green" order="">
<h1><u>Demo on Unordered list</u></h1>
<h2>Ingredients for making of cake</h2>
<h3>
<ul type="square">
<li>Baking Powder</li>
<li >Flour</li>
<li> Sugar</li>
<li>Coco poder</li>
</ul>
<h3>
</body>
</html>

ログイン後にコピー

Output:

This will give you the result like

HTML 順序なしリスト

Example #2

Unordered List with colors and for the positions.

<!DOCTYPE html>
<html>
<head>
<title>unordered list Demo2</title>
</head>
<body>
<h1>Unordered Disc</h1>
<ul>
<li>Lion</li>
<li>Tiger</li>
<li>Giraffe</li>
<li>Camel</li>
</ul>
<h1>Top Rhymes </h1>
<ul type="square">
<li>Johny Johny Yes papa</li>
<li>Wheels on the Bus</li>
<li> Baa Baa Black Sheep</li>
</ul>
<h1>Fruits Name List</h1>
<ul type="circle" >
<li > Avacado</li>
<li> Orange</li>
<li>Pears</li>
<li> Banana</li>
</ul>
</body>
</html>

ログイン後にコピー

Output:

HTML 順序なしリスト

Types of Attributes for HTML Unordered List

To figure the unordered list, there are three primary types of attributes for this unordered element. The unordered list is used where it is not required to represent the lists in any specific orders. The following sections explain the related attributes and examples of them.

This attribute gives the type of bullets to be used in the list.

type =’disc’ – Gives default bullet structure
type =’square’ – Looks like solid box bullets
type =’circle’ – Gives Hollow box structure

1. Attribute type=’disc.’

This is the default type, and all the items are marked as bullets. Here we use type attribute, and all these attributes support in HTML 3, To define under HTML5, we are supposed to implement list-style CSS. Here is an example demo.

Example:

<html>
<head>
<title> Demo on Unordered list Types</title><br>   </head>
<body bgcolor="pink" text="blue" order="">
<h1><u>Demo on Unordered list Types</u></h1>
<UL>
<LI>This is Program Agenda.
<UL>
<LI>First a Welcome Note
<LI>Second We Start with the talks
</UL>
<LI type="square">Opening Speech
<LI>Mrs.Claria Winston from Ireland and Eyjolfur From Bank of America.
<LI type="circle"> Tea Break
<LI type="disk">Last part from the topic Data Lake By Surendran Thomas.
</UL>
</body>
</html>

ログイン後にコピー

Output:

HTML 順序なしリスト

2. Attribute type=’square.’

Here the items are marked with Square bullets.

Example:

Demonstrating the HTML code with the square bullet embedded with style color and the position.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.5">
<style>
ul {
list-style: square;
}
ul li::before {
content: "\1022";
color: pink;
font-weight: bold;
display: inline-block;
width: 0.8em;
margin-left: -1em;
}
</style>
</head>
<body>
<h2>List of top hollywood movies-Square</h2>
<ul>
<li>World Of the wars</li>
<li>Mission Impossible</li>
<li>Independence Day special</li>
<li> Behind enemy lines</li>
</ul>
</body>
</html>

ログイン後にコピー

Output:

HTML 順序なしリスト

3. Attribute type=’circle.’

This attribute gives hollow bullet values. Below are the example rendering circle and square attribute together with the nested lists.

Example:

<HTML>
<HEAD>
<TITLE> EDUCBA List Example </TITLE>
;style>
h3{
color:orange;
}
ul{
list-style: none;
}
ul li::before {
content: "\25AA";
color: brown;
display: inline-block;
width: 1em;
margin-left: -0.8em;
font-weight: bold;
font-size:1rem;
}
</style>
</HEAD>
<BODY>
<H1> List of Mobiles</h1>
<UL>
<LI> Redmi Xiami
<LI> Iphone
<LI> Samsung
<LI> Nokia
</UL>
<H1>Mobile Operating System Supports</h1>
<UL TYPE = "circle">
<LI> Android
<LI> Windows phone
<LI TYPE = "circle"> Samsung
<LI TYPE = "square"> Nokia
</UL>
</BODY>
</HTML>

ログイン後にコピー

Output:

HTML 順序なしリスト

Replacing HTML list Items with Customizable Images

This would ultimately enhance the overall theme and makes the website visually good. The default bullets are replaced by native style or even can customizable using images with CSS help. Actually speaking, there are three styling lists to be used in HTML. Here we go with a list-style-type and list-style-image.

Using image bullet is to make the lists more unique and differentiate the information by type, Giving the presentation a look on the web page.

In the below example, the examples are demonstrated by style properties between the list elements.

Example #1 – Style properties between the list elements

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML unordered list with Styles</title>
</head>
<body>
<style>
ul li {
background: red;
}
ul.in.li {
list-style: circle inside none;
color: red;
left: -20px;
position: inside;
text-align: left;
width: 27px;
}</style>
<ul>
<li><span> Finland is a Scandinavian Country</span></li>
<li><span>Oslo is the capital city</span></li>
<li><span>Iceland is known for its beauty , hiking, fishing</span></li>
<li><span>Ranked among the chillness country in europe</span></li>
</ul><br/>
</body></html>

ログイン後にコピー

Output:

This will give out the output like

HTML 順序なしリスト

Example #2 – With image style

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<h2>The list-style- Demo</h2>
<p>Harry Potter Characters:</p>
<ul id="circle">
<li> Harry</li>
<li>Hermione</li>
<li>Ron Weasely</li>
</ul>
</body>
</html>

ログイン後にコピー

Output:

HTML 順序なしリスト

Kesimpulan

Sekarang kita menemui cara membina senarai tidak tersusun dalam HTML. Kami telah melihat bagaimana elemen blok tidak tersusun memainkan peranan dalam mencipta halaman web dengan contoh yang berbeza dan meneroka beberapa ciri senarai. Malah ini boleh digunakan dalam menu navigasi untuk dipaparkan secara menegak. Penciptaan senarai Tidak Tertib adalah sangat mudah; adalah penting untuk mempertimbangkan tempat untuk membetulkan pendekatan ini untuk tempat bit terbaik. Dengan kata lain, dokumen yang sempurna lebih suka menggunakan format senarai HTML.

以上がHTML 順序なしリストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。