Ingredients for making of cake<\/h2>\n\n\n- Baking Powder<\/li>\n
- Flour<\/li>\n
- Sugar<\/li>\n
- Coco poder<\/li>\n<\/ul>\n
\n<\/body>\n<\/html><\/pre>\n
Output:<\/strong><\/p>\nThis will give you the result like<\/p>\n
![\"HTML](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543943484790.png\")
<\/p>\n
Example #2<\/h4>\n
Unordered List with colors and for the positions.<\/p>\n
\n\n\nunordered list Demo2<\/title>\n<\/head>\n<body>
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n<h1>Unordered Disc<\/h1>\n<ul>\n<li>Lion<\/li>\n<li>Tiger<\/li>\n<li>Giraffe<\/li>\n<li>Camel<\/li>\n<\/ul>\n<h1>Top Rhymes <\/h1>\n<ul type=\"square\">\n<li>Johny Johny Yes papa<\/li>\n<li>Wheels on the Bus<\/li>\n<li> Baa Baa Black Sheep<\/li>\n<\/ul>\n<h1>Fruits Name List<\/h1>\n<ul type=\"circle\" >\n<li > Avacado<\/li>\n<li> Orange<\/li>\n<li>Pears<\/li>\n<li> Banana<\/li>\n<\/ul>\n<\/body>\n<\/html><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543943575912.png\" alt=\"HTML ??? ??\" ><\/p>\n<h3>Types of Attributes for HTML Unordered List<\/h3>\n<p>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.<\/p>\n<p>This attribute gives the type of bullets to be used in the list.<\/p>\n<ul>\n<li>type =’disc’ – Gives default bullet structure<\/li>\n<li>type =’square’ – Looks like solid box bullets<\/li>\n<li>type =’circle’ – Gives Hollow box structure<\/li>\n<\/ul>\n<h4>1. Attribute type=’disc.’<\/h4>\n<p>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.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre><html>\n<head>\n<title> Demo on Unordered list Types<\/title><br>?? <\/head>\n<body bgcolor=\"pink\" text=\"blue\" order=\"\">\n<h1><u>Demo on Unordered list Types<\/u><\/h1>\n<UL>\n<LI>This is Program Agenda.\n<UL>\n<LI>First a Welcome Note\n<LI>Second We Start with the talks\n<\/UL>\n<LI type=\"square\">Opening Speech\n<LI>Mrs.Claria Winston from Ireland and Eyjolfur From Bank of America.\n<LI type=\"circle\"> Tea Break\n<LI type=\"disk\">Last part from the topic Data Lake By Surendran Thomas.\n<\/UL>\n<\/body>\n<\/html><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543943775985.png\" alt=\"HTML ??? ??\" ><\/p>\n<h4>2. Attribute type=’square.’<\/h4>\n<p>Here the items are marked with Square bullets.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p>Demonstrating the HTML code with the square bullet embedded with style color and the position.<\/p>\n<pre><!DOCTYPE html>\n<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.5\">\n<style>\nul {\nlist-style: square;\n}\nul li::before {\ncontent: \"\\1022\";\ncolor: pink;\nfont-weight: bold;\ndisplay: inline-block;\nwidth: 0.8em;\nmargin-left: -1em;\n}\n<\/style>\n<\/head>\n<body>\n<h2>List of top hollywood movies-Square<\/h2>\n<ul>\n<li>World Of the wars<\/li>\n<li>Mission Impossible<\/li>\n<li>Independence Day special<\/li>\n<li> Behind enemy lines<\/li>\n<\/ul>\n<\/body>\n<\/html><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543943869827.png\" alt=\"HTML ??? ??\" ><\/p>\n<h4>3. Attribute type=’circle.’<\/h4>\n<p>This attribute gives hollow bullet values. Below are the example rendering circle and square attribute together with the nested lists.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre><HTML>\n<HEAD>\n<TITLE> EDUCBA List Example <\/TITLE>\n;style>\nh3{\ncolor:orange;\n}\nul{\nlist-style: none;\n}\nul li::before {\ncontent: \"\\25AA\";\ncolor: brown;\ndisplay: inline-block;\nwidth: 1em;\nmargin-left: -0.8em;\nfont-weight: bold;\nfont-size:1rem;\n}\n<\/style>\n<\/HEAD>\n<BODY>\n<H1> List of Mobiles<\/h1>\n<UL>\n<LI> Redmi Xiami\n<LI> Iphone\n<LI> Samsung\n<LI> Nokia\n<\/UL>\n<H1>Mobile Operating System Supports<\/h1>\n<UL TYPE = \"circle\">\n<LI> Android\n<LI> Windows phone\n<LI TYPE = \"circle\"> Samsung\n<LI TYPE = \"square\"> Nokia\n<\/UL>\n<\/BODY>\n<\/HTML><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543944189565.png\" alt=\"HTML ??? ??\" ><\/p>\n\n\n<h3>Replacing HTML list Items with Customizable Images<\/h3>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>In the below example, the examples are demonstrated by style properties between the list elements.<\/p>\n<h4>Example <strong>#<\/strong>1 – Style properties between the list elements<\/h4>\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<title>HTML unordered list with Styles<\/title>\n<\/head>\n<body>\n<style>\nul li {\nbackground: red;\n}\nul.in.li {\nlist-style: circle inside none;\ncolor: red;\nleft: -20px;\nposition: inside;\ntext-align: left;\nwidth: 27px;\n}<\/style>\n<ul>\n<li><span> Finland is a Scandinavian Country<\/span><\/li>\n<li><span>Oslo is the capital city<\/span><\/li>\n<li><span>Iceland is known for its beauty , hiking, fishing<\/span><\/li>\n<li><span>Ranked among the chillness country in europe<\/span><\/li>\n<\/ul><br\/>\n<\/body><\/html><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>This will give out the output like<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543944422472.png\" alt=\"HTML ??? ??\" ><\/p>\n<h4>Example #2 – With image style<\/h4>\n<pre><!DOCTYPE html>\n<html>\n<head>\n<style>\nul {\nlist-style-image: url('sqpurple.gif');\n}\n<\/style>\n<\/head>\n<body>\n<h2>The list-style- Demo<\/h2>\n<p>Harry Potter Characters:<\/p>\n<ul id=\"circle\">\n<li> Harry<\/li>\n<li>Hermione<\/li>\n<li>Ron Weasely<\/li>\n<\/ul>\n<\/body>\n<\/html><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543944869330.png\" alt=\"HTML ??? ??\" ><\/p>\n<h3>??<\/h3>\n<p>?? HTML?? ???? ?? ??? ???? ??? ???????. ??? ??? ???? ?? ?? ??? ??? ??? ?? ? ???? ???? ? ??? ??? ??? ???? ?? ?? ??? ??????. ?? ????? ?? ???? ???? ??? ? ????. ??? ???? ?? ??? ??? ?? ?? ?????. ??? ?? ??? ?? ? ?? ??? ??? ??? ???? ?? ?????. ?, ??? ??? HTML ?? ??? ???? ?? ?????.<\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/ko/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="?? ??" class="head_nava head_nava-template1">?? ??</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ko/article.html" title="??" class="languagechoosea on">??</a>
<a href="http://www.miracleart.cn/ko/faq/zt" title="??" class="languagechoosea">??</a>
<a href="http://www.miracleart.cn/ko/wenda.html" title="Q&A" class="languagechoosea">Q&A</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="???" class="head_nava head_nava-template1_1">???</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ko/course.html" title="??" class="languagechoosea on">??</a>
<a href="http://www.miracleart.cn/ko/dic/" title="????? ??" class="languagechoosea">????? ??</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="?? ?????" class="head_nava head_nava-template1_2">?? ?????</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ko/toolset/development-tools" title="?? ??" class="languagechoosea on">?? ??</a>
<a href="http://www.miracleart.cn/ko/toolset/website-source-code" title="???? ?? ??" class="languagechoosea">???? ?? ??</a>
<a href="http://www.miracleart.cn/ko/toolset/php-libraries" title="PHP ?????" class="languagechoosea">PHP ?????</a>
<a href="http://www.miracleart.cn/ko/toolset/js-special-effects" title="JS ?? ??" class="languagechoosea on">JS ?? ??</a>
<a href="http://www.miracleart.cn/ko/toolset/website-materials" title="???? ??" class="languagechoosea on">???? ??</a>
<a href="http://www.miracleart.cn/ko/toolset/extension-plug-ins" title="?? ????" class="languagechoosea on">?? ????</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/ko/ai" title="AI ??" class="head_nava head_nava-template1_3">AI ??</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="??" class="head_nava head_nava-template1_3">??</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ko/game" title="?? ????" class="languagechoosea on">?? ????</a>
<a href="http://www.miracleart.cn/ko/mobile-game-tutorial/" title="?? ????" class="languagechoosea">?? ????</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ko')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="??" onclick="searchs('ko')"><img src="/static/imghw/find.png" alt="??"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">???<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:;" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1L">
<div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="377j5v51b" class="Article_Details_main1L1">??</div>
<div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標題1 id="Article_Details_main1L2s_1"-->
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Syntax-of-HTML-Unordered-List" title="Syntax of?HTML Unordered List" >Syntax of?HTML Unordered List</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Example" title="Example #2" >Example #2</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Types-of-Attributes-for-HTML-Unordered-List" title="Types of Attributes for HTML Unordered List" >Types of Attributes for HTML Unordered List</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Attribute-type-disc" title="1. Attribute type=’disc.’" >1. Attribute type=’disc.’</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Attribute-type-square" title="2. Attribute type=’square.’" >2. Attribute type=’square.’</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Attribute-type-circle" title="3. Attribute type=’circle.’" >3. Attribute type=’circle.’</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Replacing-HTML-list-Items-with-Customizable-Images" title="Replacing HTML list Items with Customizable Images" >Replacing HTML list Items with Customizable Images</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Example-strong-strong-Style-properties-between-the-list-elements" title="Example <strong>#</strong>1 – Style properties between the list elements" >Example <strong>#</strong>1 – Style properties between the list elements</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Example-With-image-style" title="Example #2 – With image style" >Example #2 – With image style</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#??" title="??" >??</a>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/ko/" title="?"
class="phpgenera_Details_mainL1a">?</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ko/web-designer.html"
class="phpgenera_Details_mainL1a">? ?????</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ko/div-tutorial.html"
class="phpgenera_Details_mainL1a">HTML ????</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>HTML ??? ??</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">HTML ??? ??</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/ko/member/887227.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/887/227/63bb7851c9547215.jpg" src="/static/imghw/default1.png" alt="WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/ko/member/887227.html" class="author_name">WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Sep 04, 2024 pm 04:43 PM</span>
<div id="377j5v51b" class="Articlelist_txts_infos">
<span id="377j5v51b" class="Articlelist_txts_infoss on">html</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">html5</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">HTML Tutorial</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">HTML Properties</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">HTML tags</span>
</div>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p>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 <ul><li></li>………..</ul>, where <ul> is the tag that indicates the unordered list type.</p>
<p>The three types of lists we could use to bring order to the web pages. Below are the different types:</p>
<ol>
<li>Ordered List</li>
<li>Unordered list</li>
<li>Definition List</li>
</ol>
<p>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.</p>
<h3 id="Syntax-of-HTML-Unordered-List">Syntax of?HTML Unordered List</h3>
<p>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 <ul> element and ends with</ul> tag. The list item is embedded inside the <ul> element.</p>
<pre class="brush:php;toolbar:false"><ul>
<li></li>
………..
</ul></pre>
<h4 id="Example">Example #1</h4>
<p>This shows how this short item list is implemented in a browser.</p>
<pre class="brush:php;toolbar:false"><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></pre>
<p><strong>Output:</strong></p>
<p>This will give you the result like</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543943484790.png" class="lazy" alt="HTML ??? ??" ></p>
<h4 id="Example">Example #2</h4>
<p>Unordered List with colors and for the positions.</p>
<pre class="brush:php;toolbar:false"><!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></pre>
<p><strong>Output:</strong></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543943575912.png" class="lazy" alt="HTML ??? ??" ></p>
<h3 id="Types-of-Attributes-for-HTML-Unordered-List">Types of Attributes for HTML Unordered List</h3>
<p>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.</p>
<p>This attribute gives the type of bullets to be used in the list.</p>
<ul>
<li>type =’disc’ – Gives default bullet structure</li>
<li>type =’square’ – Looks like solid box bullets</li>
<li>type =’circle’ – Gives Hollow box structure</li>
</ul>
<h4 id="Attribute-type-disc">1. Attribute type=’disc.’</h4>
<p>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.</p>
<p><strong>Example:</strong></p>
<pre class="brush:php;toolbar:false"><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></pre>
<p><strong>Output:</strong></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543943775985.png" class="lazy" alt="HTML ??? ??" ></p>
<h4 id="Attribute-type-square">2. Attribute type=’square.’</h4>
<p>Here the items are marked with Square bullets.</p>
<p><strong>Example:</strong></p>
<p>Demonstrating the HTML code with the square bullet embedded with style color and the position.</p>
<pre class="brush:php;toolbar:false"><!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></pre>
<p><strong>Output:</strong></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543943869827.png" class="lazy" alt="HTML ??? ??" ></p>
<h4 id="Attribute-type-circle">3. Attribute type=’circle.’</h4>
<p>This attribute gives hollow bullet values. Below are the example rendering circle and square attribute together with the nested lists.</p>
<p><strong>Example:</strong></p>
<pre class="brush:php;toolbar:false"><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></pre>
<p><strong>Output:</strong></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543944189565.png" class="lazy" alt="HTML ??? ??" ></p>
<h3 id="Replacing-HTML-list-Items-with-Customizable-Images">Replacing HTML list Items with Customizable Images</h3>
<p>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.</p>
<p>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.</p>
<p>In the below example, the examples are demonstrated by style properties between the list elements.</p>
<h4 id="Example-strong-strong-Style-properties-between-the-list-elements">Example <strong>#</strong>1 – Style properties between the list elements</h4>
<pre class="brush:php;toolbar:false"><!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></pre>
<p><strong>Output:</strong></p>
<p>This will give out the output like</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543944422472.png" class="lazy" alt="HTML ??? ??" ></p>
<h4 id="Example-With-image-style">Example #2 – With image style</h4>
<pre class="brush:php;toolbar:false"><!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></pre>
<p><strong>Output:</strong></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543944869330.png" class="lazy" alt="HTML ??? ??" ></p>
<h3 id="??">??</h3>
<p>?? HTML?? ???? ?? ??? ???? ??? ???????. ??? ??? ???? ?? ?? ??? ??? ??? ?? ? ???? ???? ? ??? ??? ??? ???? ?? ?? ??? ??????. ?? ????? ?? ???? ???? ??? ? ????. ??? ???? ?? ??? ??? ?? ?? ?????. ??? ?? ??? ?? ? ?? ??? ??? ??? ???? ?? ?????. ?, ??? ??? HTML ?? ??? ???? ?? ?????.</p><p>? ??? HTML ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">? ????? ??</div>
<div>? ?? ??? ????? ???? ??? ??????, ???? ?????? ????. ? ???? ?? ???? ?? ??? ?? ????. ???? ??? ???? ???? ??? ?? admin@php.cn?? ?????.</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>?? ??</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/1796821119.html" title="??? : ??? ???? ?? ??/?? ?? ??/??" class="phpgenera_Details_mainR4_bottom_title">??? : ??? ???? ?? ??/?? ?? ??/??</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 ? ? ?</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/1796827210.html" title="??? ? ?? ??? | ?? ?? ?? ?? (Derby Musume)" class="phpgenera_Details_mainR4_bottom_title">??? ? ?? ??? | ?? ?? ?? ?? (Derby Musume)</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 ? ? ?</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/1796828723.html" title="Agnes Tachyon ?? ??? | ?? ?? ?? ?? (Derby Musume)" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon ?? ??? | ?? ?? ?? ?? (Derby Musume)</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 ? ? ?</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/1796821436.html" title="Dune : ?? - ?? ?? ?? ??? ??" class="phpgenera_Details_mainR4_bottom_title">Dune : ?? - ?? ?? ?? ??? ??</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 ? ? ?</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/1796821278.html" title="?? ??? : Dirk and Harper ?? ???" class="phpgenera_Details_mainR4_bottom_title">?? ??? : Dirk and Harper ?? ???</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 ? ? ?</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ko/article.html">???</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>? AI ??</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>??? ???? ??</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>???? ?? ??? ??? ?? AI ?? ?</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>???? ?? ???? ??? AI ?????.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI ? ???</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>??? ??? AI ?? ?? ??? ???? ?? ???? ??? ?? ????!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ko/ai">???</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>?? ??</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/1796821119.html" title="??? : ??? ???? ?? ??/?? ?? ??/??" class="phpgenera_Details_mainR4_bottom_title">??? : ??? ???? ?? ??/?? ?? ??/??</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 ? ? ?</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/1796827210.html" title="??? ? ?? ??? | ?? ?? ?? ?? (Derby Musume)" class="phpgenera_Details_mainR4_bottom_title">??? ? ?? ??? | ?? ?? ?? ?? (Derby Musume)</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 ? ? ?</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/1796828723.html" title="Agnes Tachyon ?? ??? | ?? ?? ?? ?? (Derby Musume)" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon ?? ??? | ?? ?? ?? ?? (Derby Musume)</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 ? ? ?</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/1796821436.html" title="Dune : ?? - ?? ?? ?? ??? ??" class="phpgenera_Details_mainR4_bottom_title">Dune : ?? - ?? ?? ?? ??? ??</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 ? ? ?</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/1796821278.html" title="?? ??? : Dirk and Harper ?? ???" class="phpgenera_Details_mainR4_bottom_title">?? ??? : Dirk and Harper ?? ???</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 ? ? ?</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ko/article.html">???</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>??? ??</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ko/toolset/development-tools/92" title="???++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="???++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ko/toolset/development-tools/92" title="???++7.3.1" class="phpmain_tab2_mids_title">
<h3>???++7.3.1</h3>
</a>
<p>???? ?? ?? ?? ???</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ko/toolset/development-tools/93" title="SublimeText3 ??? ??" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 ??? ??" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ko/toolset/development-tools/93" title="SublimeText3 ??? ??" class="phpmain_tab2_mids_title">
<h3>SublimeText3 ??? ??</h3>
</a>
<p>??? ??, ???? ?? ????.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ko/toolset/development-tools/121" title="???? 13.0.1 ???" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="???? 13.0.1 ???" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ko/toolset/development-tools/121" title="???? 13.0.1 ???" class="phpmain_tab2_mids_title">
<h3>???? 13.0.1 ???</h3>
</a>
<p>??? PHP ?? ?? ??</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ko/toolset/development-tools/469" title="???? CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="???? CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ko/toolset/development-tools/469" title="???? CS6" class="phpmain_tab2_mids_title">
<h3>???? CS6</h3>
</a>
<p>??? ? ?? ??</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac ??" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac ??" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac ??" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac ??</h3>
</a>
<p>? ??? ?? ?? ?????(SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ko/ai">???</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>??? ??</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/gmailyxdlrkzn" title="Gmail ???? ??? ??? ??? ????" class="phpgenera_Details_mainR4_bottom_title">Gmail ???? ??? ??? ??? ????</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8638</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/java-tutorial" title="?? ????" class="phpgenera_Details_mainR4_bottom_title">?? ????</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1783</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/cakephp-tutor" title="Cakephp ????" class="phpgenera_Details_mainR4_bottom_title">Cakephp ????</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1729</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/laravel-tutori" title="??? ????" class="phpgenera_Details_mainR4_bottom_title">??? ????</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1579</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>28</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ko/faq/php-tutorial" title="PHP ????" class="phpgenera_Details_mainR4_bottom_title">PHP ????</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1444</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ko/faq/zt">???</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ko/faq/1796829177.html" title="? ???? ???? ? ???? HTML ??? ??????" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175148129241939.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="? ???? ???? ? ???? HTML ??? ??????" />
</a>
<a href="http://www.miracleart.cn/ko/faq/1796829177.html" title="? ???? ???? ? ???? HTML ??? ??????" class="phphistorical_Version2_mids_title">? ???? ???? ? ???? HTML ??? ??????</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:34 AM</span>
<p class="Articlelist_txts_p">? ??? ??? Core HTML ???? ???????. 1. ???? ?? ??? ?? ??? ???? ??? ???? ?? ?? ? ?? ??? ?????. 2. ??? ??? ?? ?? ? SEO? ???? ?? ?? (-), ?? () ? ?? ?? (? :)? ?????. 3. ?????? ???? ????, ????? ???? ??? ???? ????? ?? Aria-Current ??? ???? ?????. 4. ?? ?? ???? ?? ??? ?? ? ?? ??? ?????. ??? ??? ???? ???? ??? ???, ?? ?? ? ?? ?? ???? ?? ? ? ????.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ko/faq/1796829157.html" title="HTML5 ??-??? ???? ?? ?? ? ??? ?????." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175148089165625.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5 ??-??? ???? ?? ?? ? ??? ?????." />
</a>
<a href="http://www.miracleart.cn/ko/faq/1796829157.html" title="HTML5 ??-??? ???? ?? ?? ? ??? ?????." class="phphistorical_Version2_mids_title">HTML5 ??-??? ???? ?? ?? ? ??? ?????.</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:28 AM</span>
<p class="Articlelist_txts_p">HTML5SSE? ???? ?? ? ?? ? ??? ???? ???? ??? ?????. 1. ?? ? ?? ????? ??????. ??? ??? ????? ??? ?? ? ? 3 ? ?? ? ?????. ??? ??? ?? ??? ??? ?? ? ? ????. 2. ?? ???? ?? ?? ?? ?? ?? ?? ??? ???? ?? ??? ???? ?? ? ??? ???? ???? ??, ?? ?? ? ?? ?? ? ?? ?? TOKEN? ?? ?? ??? ?????. 3. ??? ???? ?? ????, ?? ??? ?? ?? ????, Navigator.online? ???? ??? ???? ?? ??? ????? ? ? ?? ??? ????? ??????. ??? ??? ?? ???? ???? ??? ??? ???? ? ????.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ko/faq/1796829178.html" title="?? ???? ?? ??? HTML5 DocType? ?????." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175148132111973.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="?? ???? ?? ??? HTML5 DocType? ?????." />
</a>
<a href="http://www.miracleart.cn/ko/faq/1796829178.html" title="?? ???? ?? ??? HTML5 DocType? ?????." class="phphistorical_Version2_mids_title">?? ???? ?? ??? HTML5 DocType? ?????.</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:35 AM</span>
<p class="Articlelist_txts_p">DocType? HTML ?? ????? ???? ?? ???? ? ???? ????? ???? ????. ?? ? ???? HTML ??? ?? ????? ???????. ? ??? ????? ??? ??? ?? ?? ??? ???? ????? ? ?? ?? ???????. ?? ?? ??? ??? ?? ??? ?? ???? ?? ??? ???? ?? ????. Charset, Viewport ?? ?? ?? ??? ????? ???????.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ko/faq/1796829167.html" title="HTML ??? ???? ????? ? ?? ??? ?? ??." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175148109151878.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML ??? ???? ????? ? ?? ??? ?? ??." />
</a>
<a href="http://www.miracleart.cn/ko/faq/1796829167.html" title="HTML ??? ???? ????? ? ?? ??? ?? ??." class="phphistorical_Version2_mids_title">HTML ??? ???? ????? ? ?? ??? ?? ??.</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:31 AM</span>
<p class="Articlelist_txts_p">htmlattributes.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ko/faq/1796829956.html" title="HTML? ???? ?? ?? ?? ??? ??? ????? ??? ??????" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175157020270129.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML? ???? ?? ?? ?? ??? ??? ????? ??? ??????" />
</a>
<a href="http://www.miracleart.cn/ko/faq/1796829956.html" title="HTML? ???? ?? ?? ?? ??? ??? ????? ??? ??????" class="phphistorical_Version2_mids_title">HTML? ???? ?? ?? ?? ??? ??? ????? ??? ??????</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 04, 2025 am 03:16 AM</span>
<p class="Articlelist_txts_p">?? ?? ???? HTML?? ??? ?? ???? ??????. ???? ??? ?? ??? ???? ??? ?? ??? ??? ?? ?? ??? ???? ????. 1. ??, ???, ??? ?? ?? ??? ???? ????. 2. ??, ???? ?? ?? ??? ???? ????. 3. ?? ?? ???? ?? ? ??? ???? ?? ?????. ?? ??? ??? ?????. ? ?? ??? ??? ??? ?? ???? ? ? ????. style ???? ???? ??? CSS ?? ?? ?????? ?? ???????. Select2? ?? ????? ??? ????? ? ??? ? ????.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ko/faq/1796835653.html" title="CSS ? JavaScript? HTML5 ??? ????? ?????." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175226046128038.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS ? JavaScript? HTML5 ??? ????? ?????." />
</a>
<a href="http://www.miracleart.cn/ko/faq/1796835653.html" title="CSS ? JavaScript? HTML5 ??? ????? ?????." class="phphistorical_Version2_mids_title">CSS ? JavaScript? HTML5 ??? ????? ?????.</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 12, 2025 am 03:01 AM</span>
<p class="Articlelist_txts_p">HTML5, CSS ? JavaScript? ??? ??, ???? ?? ?? ? ???? ??? ????? ????????. 1. SEO ? ????? ???? ????? ??? ??? ? ?? ??? ??? ?? HTML5 ??? ??? ??????. 2. CSS? ???? ?? ??? ???? ???? ???? ??? ???? ????? ??? ?????. 3. JavaScript? ??? ???? ?? ???? DEFER ?? ASYNC? ???? ?? ???? ??? ?? ??? ????????. 4. ??? ??? ??? ???? ??? ??? ?? ? ??? ?? ?? ??? ?? ??? ???? ?? ?? ?? ??? ?? ?? ???? ??????. ??? ??? ??? ??? ????? ????? ?? ?? ? ? ????.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ko/faq/1796831880.html" title="HTML ?? ??? ???? ?? ??? ?? ??" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175182671121571.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML ?? ??? ???? ?? ??? ?? ??" />
</a>
<a href="http://www.miracleart.cn/ko/faq/1796831880.html" title="HTML ?? ??? ???? ?? ??? ?? ??" class="phphistorical_Version2_mids_title">HTML ?? ??? ???? ?? ??? ?? ??</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 07, 2025 am 02:31 AM</span>
<p class="Articlelist_txts_p">HTML ?? ??? ???? ?? ??? ??? ???? ?? ?? ?? ? ???? ?? ??? ????????. 1. ????? ??? ??? ????? ?? ? ?? ?? (? : ??, ??, ???)? ?? ??? ?????. 2. JavaScript? ?? ?? ? ??? ???? ID? ?? ??? ?? ??? ??? ???? ?? ? ????. 3. CSS? ???? ???, ???, ?? ??? ? ??/?? ?? ??? ???? ???? ??? ???? ??? ??? ??????. 4. ???? ????????? : ???? ? ??? ????? ??? ???? JS ???? ???? ????? ???? ??? ???? ??? ??? ??? ???? ??? ?????. ??? ???????</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ko/faq/1796832574.html" title="??? html5 ??? (formdata)? ???? ?? ??? ??" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191288234525.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="??? html5 ??? (formdata)? ???? ?? ??? ??" />
</a>
<a href="http://www.miracleart.cn/ko/faq/1796832574.html" title="??? html5 ??? (formdata)? ???? ?? ??? ??" class="phphistorical_Version2_mids_title">??? html5 ??? (formdata)? ???? ?? ??? ??</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:28 AM</span>
<p class="Articlelist_txts_p">HTML5? FormData API? ???? ?? ???? ???? ?? ? ?????. 1. ?? ????? ?? ??? ???? ????? ???? ???? ?? ? ? ????. 2. ?? ???? ??? Fetch ?? Xmlhttprequest? ?? ?? ??/?? ??? ??? ??? ???????. 3. ??? ?? ? ? ??? FormData? ???? ??? ??????. 4. ??? ?? ??? ?? ?? JSON ?? ? ?? ??? ?? ? ??? ????.</p>
</div>
</div>
<a href="http://www.miracleart.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>???? ??? PHP ??，PHP ???? ?? ??? ?????！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/ko/about/us.html">?? ??</a>
<a href="http://www.miracleart.cn/ko/about/disclaimer.html">?? ??</a>
<a href="http://www.miracleart.cn/ko/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="0okio" class="pl_css_ganrao" style="display: none;"><small id="0okio"></small><wbr id="0okio"><pre id="0okio"></pre></wbr><xmp id="0okio"></xmp><li id="0okio"><object id="0okio"><tr id="0okio"></tr></object></li><ul id="0okio"></ul><strong id="0okio"><fieldset id="0okio"><acronym id="0okio"></acronym></fieldset></strong><input id="0okio"></input><sup id="0okio"></sup><abbr id="0okio"><small id="0okio"><tbody id="0okio"></tbody></small></abbr><tbody id="0okio"><noframes id="0okio"><fieldset id="0okio"></fieldset></noframes></tbody><li id="0okio"></li><bdo id="0okio"><source id="0okio"><sup id="0okio"></sup></source></bdo><rt id="0okio"><pre id="0okio"><optgroup id="0okio"></optgroup></pre></rt><input id="0okio"><source id="0okio"><ul id="0okio"></ul></source></input><pre id="0okio"></pre><source id="0okio"><strike id="0okio"><samp id="0okio"></samp></strike></source><wbr id="0okio"><blockquote id="0okio"><tbody id="0okio"></tbody></blockquote></wbr><pre id="0okio"></pre><dl id="0okio"><pre id="0okio"><menu id="0okio"></menu></pre></dl><blockquote id="0okio"></blockquote><cite id="0okio"></cite><object id="0okio"></object><strong id="0okio"></strong><tbody id="0okio"></tbody><fieldset id="0okio"></fieldset><tbody id="0okio"></tbody><abbr id="0okio"></abbr><delect id="0okio"></delect><tfoot id="0okio"><del id="0okio"><rt id="0okio"></rt></del></tfoot><center id="0okio"></center><abbr id="0okio"></abbr><dd id="0okio"></dd><small id="0okio"></small><abbr id="0okio"></abbr><td id="0okio"></td><samp id="0okio"><table id="0okio"><dfn id="0okio"></dfn></table></samp><input id="0okio"><s id="0okio"><ul id="0okio"></ul></s></input><rt id="0okio"></rt><kbd id="0okio"></kbd><nav id="0okio"></nav><option id="0okio"></option><del id="0okio"></del><option id="0okio"></option><abbr id="0okio"><center id="0okio"><xmp id="0okio"></xmp></center></abbr><button id="0okio"><code id="0okio"><dfn id="0okio"></dfn></code></button><small id="0okio"></small><small id="0okio"></small><small id="0okio"></small><kbd id="0okio"><nav id="0okio"><blockquote id="0okio"></blockquote></nav></kbd><rt id="0okio"></rt><tbody id="0okio"></tbody><delect id="0okio"><abbr id="0okio"><fieldset id="0okio"></fieldset></abbr></delect><rt id="0okio"></rt><button id="0okio"></button><source id="0okio"><ul id="0okio"><li id="0okio"></li></ul></source><samp id="0okio"></samp><abbr id="0okio"></abbr><rt id="0okio"></rt><bdo id="0okio"></bdo><small id="0okio"></small><abbr id="0okio"><center id="0okio"><samp id="0okio"></samp></center></abbr><kbd id="0okio"></kbd><dd id="0okio"><em id="0okio"><rt id="0okio"></rt></em></dd><xmp id="0okio"></xmp><samp id="0okio"></samp><rt id="0okio"><pre id="0okio"><abbr id="0okio"></abbr></pre></rt><center id="0okio"><nav id="0okio"><tfoot id="0okio"></tfoot></nav></center><kbd id="0okio"><abbr id="0okio"><strike id="0okio"></strike></abbr></kbd><delect id="0okio"></delect><center id="0okio"><tbody id="0okio"><tr id="0okio"></tr></tbody></center><xmp id="0okio"></xmp><pre id="0okio"></pre><button id="0okio"></button><strong id="0okio"></strong><button id="0okio"></button><td id="0okio"></td><table id="0okio"><th id="0okio"><li id="0okio"></li></th></table><td id="0okio"></td><sup id="0okio"></sup><button id="0okio"></button><tbody id="0okio"></tbody><td id="0okio"></td><cite id="0okio"></cite><pre id="0okio"></pre><blockquote id="0okio"></blockquote><noframes id="0okio"><fieldset id="0okio"><dd id="0okio"></dd></fieldset></noframes><em id="0okio"></em><pre id="0okio"></pre><table id="0okio"><input id="0okio"><blockquote id="0okio"></blockquote></input></table><pre id="0okio"></pre><delect id="0okio"><ul id="0okio"><fieldset id="0okio"></fieldset></ul></delect><cite id="0okio"></cite><sup id="0okio"><li id="0okio"><object id="0okio"></object></li></sup><noframes id="0okio"></noframes><ul id="0okio"></ul><tbody id="0okio"><wbr id="0okio"><kbd id="0okio"></kbd></wbr></tbody><center id="0okio"></center><kbd id="0okio"></kbd><menu id="0okio"><rt id="0okio"><del id="0okio"></del></rt></menu><pre id="0okio"></pre></div>
</html>
- \n
- Baking Powder<\/li>\n
- Flour<\/li>\n
- Sugar<\/li>\n
- Coco poder<\/li>\n<\/ul>\n
\n<\/body>\n<\/html><\/pre>\n
Output:<\/strong><\/p>\n
This will give you the result like<\/p>\n
<\/p>\nExample #2<\/h4>\n
Unordered List with colors and for the positions.<\/p>\n
\n\n\n
unordered list Demo2<\/title>\n<\/head>\n<body> <h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n<h1>Unordered Disc<\/h1>\n<ul>\n<li>Lion<\/li>\n<li>Tiger<\/li>\n<li>Giraffe<\/li>\n<li>Camel<\/li>\n<\/ul>\n<h1>Top Rhymes <\/h1>\n<ul type=\"square\">\n<li>Johny Johny Yes papa<\/li>\n<li>Wheels on the Bus<\/li>\n<li> Baa Baa Black Sheep<\/li>\n<\/ul>\n<h1>Fruits Name List<\/h1>\n<ul type=\"circle\" >\n<li > Avacado<\/li>\n<li> Orange<\/li>\n<li>Pears<\/li>\n<li> Banana<\/li>\n<\/ul>\n<\/body>\n<\/html><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543943575912.png\" alt=\"HTML ??? ??\" ><\/p>\n<h3>Types of Attributes for HTML Unordered List<\/h3>\n<p>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.<\/p>\n<p>This attribute gives the type of bullets to be used in the list.<\/p>\n<ul>\n<li>type =’disc’ – Gives default bullet structure<\/li>\n<li>type =’square’ – Looks like solid box bullets<\/li>\n<li>type =’circle’ – Gives Hollow box structure<\/li>\n<\/ul>\n<h4>1. Attribute type=’disc.’<\/h4>\n<p>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.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre><html>\n<head>\n<title> Demo on Unordered list Types<\/title><br>?? <\/head>\n<body bgcolor=\"pink\" text=\"blue\" order=\"\">\n<h1><u>Demo on Unordered list Types<\/u><\/h1>\n<UL>\n<LI>This is Program Agenda.\n<UL>\n<LI>First a Welcome Note\n<LI>Second We Start with the talks\n<\/UL>\n<LI type=\"square\">Opening Speech\n<LI>Mrs.Claria Winston from Ireland and Eyjolfur From Bank of America.\n<LI type=\"circle\"> Tea Break\n<LI type=\"disk\">Last part from the topic Data Lake By Surendran Thomas.\n<\/UL>\n<\/body>\n<\/html><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543943775985.png\" alt=\"HTML ??? ??\" ><\/p>\n<h4>2. Attribute type=’square.’<\/h4>\n<p>Here the items are marked with Square bullets.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p>Demonstrating the HTML code with the square bullet embedded with style color and the position.<\/p>\n<pre><!DOCTYPE html>\n<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.5\">\n<style>\nul {\nlist-style: square;\n}\nul li::before {\ncontent: \"\\1022\";\ncolor: pink;\nfont-weight: bold;\ndisplay: inline-block;\nwidth: 0.8em;\nmargin-left: -1em;\n}\n<\/style>\n<\/head>\n<body>\n<h2>List of top hollywood movies-Square<\/h2>\n<ul>\n<li>World Of the wars<\/li>\n<li>Mission Impossible<\/li>\n<li>Independence Day special<\/li>\n<li> Behind enemy lines<\/li>\n<\/ul>\n<\/body>\n<\/html><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543943869827.png\" alt=\"HTML ??? ??\" ><\/p>\n<h4>3. Attribute type=’circle.’<\/h4>\n<p>This attribute gives hollow bullet values. Below are the example rendering circle and square attribute together with the nested lists.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre><HTML>\n<HEAD>\n<TITLE> EDUCBA List Example <\/TITLE>\n;style>\nh3{\ncolor:orange;\n}\nul{\nlist-style: none;\n}\nul li::before {\ncontent: \"\\25AA\";\ncolor: brown;\ndisplay: inline-block;\nwidth: 1em;\nmargin-left: -0.8em;\nfont-weight: bold;\nfont-size:1rem;\n}\n<\/style>\n<\/HEAD>\n<BODY>\n<H1> List of Mobiles<\/h1>\n<UL>\n<LI> Redmi Xiami\n<LI> Iphone\n<LI> Samsung\n<LI> Nokia\n<\/UL>\n<H1>Mobile Operating System Supports<\/h1>\n<UL TYPE = \"circle\">\n<LI> Android\n<LI> Windows phone\n<LI TYPE = \"circle\"> Samsung\n<LI TYPE = \"square\"> Nokia\n<\/UL>\n<\/BODY>\n<\/HTML><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543944189565.png\" alt=\"HTML ??? ??\" ><\/p>\n\n\n<h3>Replacing HTML list Items with Customizable Images<\/h3>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>In the below example, the examples are demonstrated by style properties between the list elements.<\/p>\n<h4>Example <strong>#<\/strong>1 – Style properties between the list elements<\/h4>\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<title>HTML unordered list with Styles<\/title>\n<\/head>\n<body>\n<style>\nul li {\nbackground: red;\n}\nul.in.li {\nlist-style: circle inside none;\ncolor: red;\nleft: -20px;\nposition: inside;\ntext-align: left;\nwidth: 27px;\n}<\/style>\n<ul>\n<li><span> Finland is a Scandinavian Country<\/span><\/li>\n<li><span>Oslo is the capital city<\/span><\/li>\n<li><span>Iceland is known for its beauty , hiking, fishing<\/span><\/li>\n<li><span>Ranked among the chillness country in europe<\/span><\/li>\n<\/ul><br\/>\n<\/body><\/html><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>This will give out the output like<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543944422472.png\" alt=\"HTML ??? ??\" ><\/p>\n<h4>Example #2 – With image style<\/h4>\n<pre><!DOCTYPE html>\n<html>\n<head>\n<style>\nul {\nlist-style-image: url('sqpurple.gif');\n}\n<\/style>\n<\/head>\n<body>\n<h2>The list-style- Demo<\/h2>\n<p>Harry Potter Characters:<\/p>\n<ul id=\"circle\">\n<li> Harry<\/li>\n<li>Hermione<\/li>\n<li>Ron Weasely<\/li>\n<\/ul>\n<\/body>\n<\/html><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543944869330.png\" alt=\"HTML ??? ??\" ><\/p>\n<h3>??<\/h3>\n<p>?? HTML?? ???? ?? ??? ???? ??? ???????. ??? ??? ???? ?? ?? ??? ??? ??? ?? ? ???? ???? ? ??? ??? ??? ???? ?? ?? ??? ??????. ?? ????? ?? ???? ???? ??? ? ????. ??? ???? ?? ??? ??? ?? ?? ?????. ??? ?? ??? ?? ? ?? ??? ??? ??? ???? ?? ?????. ?, ??? ??? HTML ?? ??? ???? ?? ?????.<\/p>"} </script> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <script>var V_PATH="/";window.onerror=function(){ return true; };</script> </head> <body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2"> <link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css"> <header> <div id="377j5v51b" class="head"> <div id="377j5v51b" class="haed_left"> <div id="377j5v51b" class="haed_logo"> <a href="http://www.miracleart.cn/ko/" title="" class="haed_logo_a"> <img src="/static/imghw/logo.png" alt="" class="haed_logoimg"> </a> </div> <div id="377j5v51b" class="head_nav"> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="?? ??" class="head_nava head_nava-template1">?? ??</a> <div class="377j5v51b" id="dropdown-template1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/ko/article.html" title="??" class="languagechoosea on">??</a> <a href="http://www.miracleart.cn/ko/faq/zt" title="??" class="languagechoosea">??</a> <a href="http://www.miracleart.cn/ko/wenda.html" title="Q&A" class="languagechoosea">Q&A</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="???" class="head_nava head_nava-template1_1">???</a> <div class="377j5v51b" id="dropdown-template1_1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/ko/course.html" title="??" class="languagechoosea on">??</a> <a href="http://www.miracleart.cn/ko/dic/" title="????? ??" class="languagechoosea">????? ??</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="?? ?????" class="head_nava head_nava-template1_2">?? ?????</a> <div class="377j5v51b" id="dropdown-template1_2" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/ko/toolset/development-tools" title="?? ??" class="languagechoosea on">?? ??</a> <a href="http://www.miracleart.cn/ko/toolset/website-source-code" title="???? ?? ??" class="languagechoosea">???? ?? ??</a> <a href="http://www.miracleart.cn/ko/toolset/php-libraries" title="PHP ?????" class="languagechoosea">PHP ?????</a> <a href="http://www.miracleart.cn/ko/toolset/js-special-effects" title="JS ?? ??" class="languagechoosea on">JS ?? ??</a> <a href="http://www.miracleart.cn/ko/toolset/website-materials" title="???? ??" class="languagechoosea on">???? ??</a> <a href="http://www.miracleart.cn/ko/toolset/extension-plug-ins" title="?? ????" class="languagechoosea on">?? ????</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="http://www.miracleart.cn/ko/ai" title="AI ??" class="head_nava head_nava-template1_3">AI ??</a> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="??" class="head_nava head_nava-template1_3">??</a> <div class="377j5v51b" id="dropdown-template1_3" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/ko/game" title="?? ????" class="languagechoosea on">?? ????</a> <a href="http://www.miracleart.cn/ko/mobile-game-tutorial/" title="?? ????" class="languagechoosea">?? ????</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="head_search"> <input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ko')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value=""> <a href="javascript:;" title="??" onclick="searchs('ko')"><img src="/static/imghw/find.png" alt="??"></a> </div> <div id="377j5v51b" class="head_right"> <div id="377j5v51b" class="haed_language"> <a href="javascript:;" class="layui-btn haed_language_btn">???<i class="layui-icon layui-icon-triangle-d"></i></a> <div class="377j5v51b" id="dropdown-template" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a> <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a> <a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a> <a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a> <a href="javascript:;" title="???" class="languagechoosea">???</a> <a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a> <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a> <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a> </div> </div> </div> <span id="377j5v51b" class="head_right_line"></span> <div style="display: block;" id="login" class="haed_login "> <a href="javascript:;" title="Login" class="haed_logina ">Login</a> </div> <div style="display: block;" id="reg" class="head_signup login"> <a href="javascript:;" title="singup" class="head_signupa">singup</a> </div> </div> </div> </header> <main> <div id="377j5v51b" class="Article_Details_main"> <div id="377j5v51b" class="Article_Details_main1"> <div id="377j5v51b" class="Article_Details_main1L"> <div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain"> <div id="377j5v51b" class="Article_Details_main1L1">??</div> <div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2"> <!-- 左側(cè)懸浮，文章定位標題1 id="Article_Details_main1L2s_1"--> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#Syntax-of-HTML-Unordered-List" title="Syntax of?HTML Unordered List" >Syntax of?HTML Unordered List</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#Example" title="Example #2" >Example #2</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#Types-of-Attributes-for-HTML-Unordered-List" title="Types of Attributes for HTML Unordered List" >Types of Attributes for HTML Unordered List</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#Attribute-type-disc" title="1. Attribute type=’disc.’" >1. Attribute type=’disc.’</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#Attribute-type-square" title="2. Attribute type=’square.’" >2. Attribute type=’square.’</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#Attribute-type-circle" title="3. Attribute type=’circle.’" >3. Attribute type=’circle.’</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#Replacing-HTML-list-Items-with-Customizable-Images" title="Replacing HTML list Items with Customizable Images" >Replacing HTML list Items with Customizable Images</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#Example-strong-strong-Style-properties-between-the-list-elements" title="Example <strong>#</strong>1 – Style properties between the list elements" >Example <strong>#</strong>1 – Style properties between the list elements</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#Example-With-image-style" title="Example #2 – With image style" >Example #2 – With image style</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#??" title="??" >??</a> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main1M"> <div id="377j5v51b" class="phpgenera_Details_mainL1"> <a href="http://www.miracleart.cn/ko/" title="?" class="phpgenera_Details_mainL1a">?</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://www.miracleart.cn/ko/web-designer.html" class="phpgenera_Details_mainL1a">? ?????</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://www.miracleart.cn/ko/div-tutorial.html" class="phpgenera_Details_mainL1a">HTML ????</a> <img src="/static/imghw/top_right.png" alt="" /> <span>HTML ??? ??</span> </div> <div id="377j5v51b" class="Articlelist_txts"> <div id="377j5v51b" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">HTML ??? ??</h1> <div id="377j5v51b" class="Articlelist_txts_info_head"> <div id="377j5v51b" class="author_info"> <a href="http://www.miracleart.cn/ko/member/887227.html" class="author_avatar"> <img class="lazy" data-src="https://img.php.cn/upload/avatar/000/887/227/63bb7851c9547215.jpg" src="/static/imghw/default1.png" alt="WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB"> </a> <div id="377j5v51b" class="author_detail"> <a href="http://www.miracleart.cn/ko/member/887227.html" class="author_name">WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB</a> </div> </div> </div> <span id="377j5v51b" class="Articlelist_txts_time">Sep 04, 2024 pm 04:43 PM</span> <div id="377j5v51b" class="Articlelist_txts_infos"> <span id="377j5v51b" class="Articlelist_txts_infoss on">html</span> <span id="377j5v51b" class="Articlelist_txts_infoss ">html5</span> <span id="377j5v51b" class="Articlelist_txts_infoss ">HTML Tutorial</span> <span id="377j5v51b" class="Articlelist_txts_infoss ">HTML Properties</span> <span id="377j5v51b" class="Articlelist_txts_infoss ">HTML tags</span> </div> </div> </div> <hr /> <div id="377j5v51b" class="article_main php-article"> <div id="377j5v51b" class="article-list-left detail-content-wrap content"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3461856641"> </ins> <p>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 <ul><li></li>………..</ul>, where <ul> is the tag that indicates the unordered list type.</p> <p>The three types of lists we could use to bring order to the web pages. Below are the different types:</p> <ol> <li>Ordered List</li> <li>Unordered list</li> <li>Definition List</li> </ol> <p>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.</p> <h3 id="Syntax-of-HTML-Unordered-List">Syntax of?HTML Unordered List</h3> <p>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 <ul> element and ends with</ul> tag. The list item is embedded inside the <ul> element.</p> <pre class="brush:php;toolbar:false"><ul> <li></li> ……….. </ul></pre> <h4 id="Example">Example #1</h4> <p>This shows how this short item list is implemented in a browser.</p> <pre class="brush:php;toolbar:false"><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></pre> <p><strong>Output:</strong></p> <p>This will give you the result like</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543943484790.png" class="lazy" alt="HTML ??? ??" ></p> <h4 id="Example">Example #2</h4> <p>Unordered List with colors and for the positions.</p> <pre class="brush:php;toolbar:false"><!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></pre> <p><strong>Output:</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543943575912.png" class="lazy" alt="HTML ??? ??" ></p> <h3 id="Types-of-Attributes-for-HTML-Unordered-List">Types of Attributes for HTML Unordered List</h3> <p>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.</p> <p>This attribute gives the type of bullets to be used in the list.</p> <ul> <li>type =’disc’ – Gives default bullet structure</li> <li>type =’square’ – Looks like solid box bullets</li> <li>type =’circle’ – Gives Hollow box structure</li> </ul> <h4 id="Attribute-type-disc">1. Attribute type=’disc.’</h4> <p>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.</p> <p><strong>Example:</strong></p> <pre class="brush:php;toolbar:false"><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></pre> <p><strong>Output:</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543943775985.png" class="lazy" alt="HTML ??? ??" ></p> <h4 id="Attribute-type-square">2. Attribute type=’square.’</h4> <p>Here the items are marked with Square bullets.</p> <p><strong>Example:</strong></p> <p>Demonstrating the HTML code with the square bullet embedded with style color and the position.</p> <pre class="brush:php;toolbar:false"><!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></pre> <p><strong>Output:</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543943869827.png" class="lazy" alt="HTML ??? ??" ></p> <h4 id="Attribute-type-circle">3. Attribute type=’circle.’</h4> <p>This attribute gives hollow bullet values. Below are the example rendering circle and square attribute together with the nested lists.</p> <p><strong>Example:</strong></p> <pre class="brush:php;toolbar:false"><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></pre> <p><strong>Output:</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543944189565.png" class="lazy" alt="HTML ??? ??" ></p> <h3 id="Replacing-HTML-list-Items-with-Customizable-Images">Replacing HTML list Items with Customizable Images</h3> <p>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.</p> <p>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.</p> <p>In the below example, the examples are demonstrated by style properties between the list elements.</p> <h4 id="Example-strong-strong-Style-properties-between-the-list-elements">Example <strong>#</strong>1 – Style properties between the list elements</h4> <pre class="brush:php;toolbar:false"><!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></pre> <p><strong>Output:</strong></p> <p>This will give out the output like</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543944422472.png" class="lazy" alt="HTML ??? ??" ></p> <h4 id="Example-With-image-style">Example #2 – With image style</h4> <pre class="brush:php;toolbar:false"><!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></pre> <p><strong>Output:</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543944869330.png" class="lazy" alt="HTML ??? ??" ></p> <h3 id="??">??</h3> <p>?? HTML?? ???? ?? ??? ???? ??? ???????. ??? ??? ???? ?? ?? ??? ??? ??? ?? ? ???? ???? ? ??? ??? ??? ???? ?? ?? ??? ??????. ?? ????? ?? ???? ???? ??? ? ????. ??? ???? ?? ??? ??? ?? ?? ?????. ??? ?? ??? ?? ? ?? ??? ??? ??? ???? ?? ?????. ?, ??? ??? HTML ?? ??? ???? ?? ?????.</p><p>? ??? HTML ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!</p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">? ????? ??</div> <div>? ?? ??? ????? ???? ??? ??????, ???? ?????? ????. ? ???? ?? ???? ?? ??? ?? ????. ???? ??? ???? ???? ??? ?? admin@php.cn?? ?????.</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <div id="377j5v51b" class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <!-- <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>?? ??</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/1796821119.html" title="??? : ??? ???? ?? ??/?? ?? ??/??" class="phpgenera_Details_mainR4_bottom_title">??? : ??? ???? ?? ??/?? ?? ??/??</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 ? ? ?</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/1796827210.html" title="??? ? ?? ??? | ?? ?? ?? ?? (Derby Musume)" class="phpgenera_Details_mainR4_bottom_title">??? ? ?? ??? | ?? ?? ?? ?? (Derby Musume)</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 ? ? ?</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/1796828723.html" title="Agnes Tachyon ?? ??? | ?? ?? ?? ?? (Derby Musume)" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon ?? ??? | ?? ?? ?? ?? (Derby Musume)</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 ? ? ?</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/1796821436.html" title="Dune : ?? - ?? ?? ?? ??? ??" class="phpgenera_Details_mainR4_bottom_title">Dune : ?? - ?? ?? ?? ??? ??</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 ? ? ?</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/1796821278.html" title="?? ??? : Dirk and Harper ?? ???" class="phpgenera_Details_mainR4_bottom_title">?? ??? : Dirk and Harper ?? ???</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 ? ? ?</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/ko/article.html">???</a> </div> </div> </div> --> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>? AI ??</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>??? ???? ??</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>???? ?? ??? ??? ?? AI ?? ?</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>???? ?? ???? ??? AI ?????.</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI ? ???</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>??? ??? AI ?? ?? ??? ???? ?? ???? ??? ?? ????!</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/ko/ai">???</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>?? ??</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/1796821119.html" title="??? : ??? ???? ?? ??/?? ?? ??/??" class="phpgenera_Details_mainR4_bottom_title">??? : ??? ???? ?? ??/?? ?? ??/??</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 ? ? ?</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/1796827210.html" title="??? ? ?? ??? | ?? ?? ?? ?? (Derby Musume)" class="phpgenera_Details_mainR4_bottom_title">??? ? ?? ??? | ?? ?? ?? ?? (Derby Musume)</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 ? ? ?</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/1796828723.html" title="Agnes Tachyon ?? ??? | ?? ?? ?? ?? (Derby Musume)" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon ?? ??? | ?? ?? ?? ?? (Derby Musume)</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 ? ? ?</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/1796821436.html" title="Dune : ?? - ?? ?? ?? ??? ??" class="phpgenera_Details_mainR4_bottom_title">Dune : ?? - ?? ?? ?? ??? ??</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 ? ? ?</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/1796821278.html" title="?? ??? : Dirk and Harper ?? ???" class="phpgenera_Details_mainR4_bottom_title">?? ??? : Dirk and Harper ?? ???</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 ? ? ?</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/ko/article.html">???</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>??? ??</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ko/toolset/development-tools/92" title="???++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="???++7.3.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ko/toolset/development-tools/92" title="???++7.3.1" class="phpmain_tab2_mids_title"> <h3>???++7.3.1</h3> </a> <p>???? ?? ?? ?? ???</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ko/toolset/development-tools/93" title="SublimeText3 ??? ??" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 ??? ??" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ko/toolset/development-tools/93" title="SublimeText3 ??? ??" class="phpmain_tab2_mids_title"> <h3>SublimeText3 ??? ??</h3> </a> <p>??? ??, ???? ?? ????.</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ko/toolset/development-tools/121" title="???? 13.0.1 ???" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="???? 13.0.1 ???" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ko/toolset/development-tools/121" title="???? 13.0.1 ???" class="phpmain_tab2_mids_title"> <h3>???? 13.0.1 ???</h3> </a> <p>??? PHP ?? ?? ??</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ko/toolset/development-tools/469" title="???? CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="???? CS6" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ko/toolset/development-tools/469" title="???? CS6" class="phpmain_tab2_mids_title"> <h3>???? CS6</h3> </a> <p>??? ? ?? ??</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac ??" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac ??" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac ??" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac ??</h3> </a> <p>? ??? ?? ?? ?????(SublimeText3)</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/ko/ai">???</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>??? ??</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/gmailyxdlrkzn" title="Gmail ???? ??? ??? ??? ????" class="phpgenera_Details_mainR4_bottom_title">Gmail ???? ??? ??? ??? ????</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>8638</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>17</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/java-tutorial" title="?? ????" class="phpgenera_Details_mainR4_bottom_title">?? ????</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1783</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>16</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/cakephp-tutor" title="Cakephp ????" class="phpgenera_Details_mainR4_bottom_title">Cakephp ????</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1729</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>56</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/laravel-tutori" title="??? ????" class="phpgenera_Details_mainR4_bottom_title">??? ????</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1579</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>28</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ko/faq/php-tutorial" title="PHP ????" class="phpgenera_Details_mainR4_bottom_title">PHP ????</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1444</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>31</span> </div> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/ko/faq/zt">???</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main2"> <div id="377j5v51b" class="phpgenera_Details_mainL4"> <div id="377j5v51b" class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div id="377j5v51b" class="phpgenera_Details_mainL4_info"> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ko/faq/1796829177.html" title="? ???? ???? ? ???? HTML ??? ??????" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175148129241939.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="? ???? ???? ? ???? HTML ??? ??????" /> </a> <a href="http://www.miracleart.cn/ko/faq/1796829177.html" title="? ???? ???? ? ???? HTML ??? ??????" class="phphistorical_Version2_mids_title">? ???? ???? ? ???? HTML ??? ??????</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:34 AM</span> <p class="Articlelist_txts_p">? ??? ??? Core HTML ???? ???????. 1. ???? ?? ??? ?? ??? ???? ??? ???? ?? ?? ? ?? ??? ?????. 2. ??? ??? ?? ?? ? SEO? ???? ?? ?? (-), ?? () ? ?? ?? (? :)? ?????. 3. ?????? ???? ????, ????? ???? ??? ???? ????? ?? Aria-Current ??? ???? ?????. 4. ?? ?? ???? ?? ??? ?? ? ?? ??? ?????. ??? ??? ???? ???? ??? ???, ?? ?? ? ?? ?? ???? ?? ? ? ????.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ko/faq/1796829157.html" title="HTML5 ??-??? ???? ?? ?? ? ??? ?????." class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175148089165625.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5 ??-??? ???? ?? ?? ? ??? ?????." /> </a> <a href="http://www.miracleart.cn/ko/faq/1796829157.html" title="HTML5 ??-??? ???? ?? ?? ? ??? ?????." class="phphistorical_Version2_mids_title">HTML5 ??-??? ???? ?? ?? ? ??? ?????.</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:28 AM</span> <p class="Articlelist_txts_p">HTML5SSE? ???? ?? ? ?? ? ??? ???? ???? ??? ?????. 1. ?? ? ?? ????? ??????. ??? ??? ????? ??? ?? ? ? 3 ? ?? ? ?????. ??? ??? ?? ??? ??? ?? ? ? ????. 2. ?? ???? ?? ?? ?? ?? ?? ?? ??? ???? ?? ??? ???? ?? ? ??? ???? ???? ??, ?? ?? ? ?? ?? ? ?? ?? TOKEN? ?? ?? ??? ?????. 3. ??? ???? ?? ????, ?? ??? ?? ?? ????, Navigator.online? ???? ??? ???? ?? ??? ????? ? ? ?? ??? ????? ??????. ??? ??? ?? ???? ???? ??? ??? ???? ? ????.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ko/faq/1796829178.html" title="?? ???? ?? ??? HTML5 DocType? ?????." class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175148132111973.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="?? ???? ?? ??? HTML5 DocType? ?????." /> </a> <a href="http://www.miracleart.cn/ko/faq/1796829178.html" title="?? ???? ?? ??? HTML5 DocType? ?????." class="phphistorical_Version2_mids_title">?? ???? ?? ??? HTML5 DocType? ?????.</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:35 AM</span> <p class="Articlelist_txts_p">DocType? HTML ?? ????? ???? ?? ???? ? ???? ????? ???? ????. ?? ? ???? HTML ??? ?? ????? ???????. ? ??? ????? ??? ??? ?? ?? ??? ???? ????? ? ?? ?? ???????. ?? ?? ??? ??? ?? ??? ?? ???? ?? ??? ???? ?? ????. Charset, Viewport ?? ?? ?? ??? ????? ???????.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ko/faq/1796829167.html" title="HTML ??? ???? ????? ? ?? ??? ?? ??." class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175148109151878.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML ??? ???? ????? ? ?? ??? ?? ??." /> </a> <a href="http://www.miracleart.cn/ko/faq/1796829167.html" title="HTML ??? ???? ????? ? ?? ??? ?? ??." class="phphistorical_Version2_mids_title">HTML ??? ???? ????? ? ?? ??? ?? ??.</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:31 AM</span> <p class="Articlelist_txts_p">htmlattributes.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ko/faq/1796829956.html" title="HTML? ???? ?? ?? ?? ??? ??? ????? ??? ??????" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175157020270129.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML? ???? ?? ?? ?? ??? ??? ????? ??? ??????" /> </a> <a href="http://www.miracleart.cn/ko/faq/1796829956.html" title="HTML? ???? ?? ?? ?? ??? ??? ????? ??? ??????" class="phphistorical_Version2_mids_title">HTML? ???? ?? ?? ?? ??? ??? ????? ??? ??????</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 04, 2025 am 03:16 AM</span> <p class="Articlelist_txts_p">?? ?? ???? HTML?? ??? ?? ???? ??????. ???? ??? ?? ??? ???? ??? ?? ??? ??? ?? ?? ??? ???? ????. 1. ??, ???, ??? ?? ?? ??? ???? ????. 2. ??, ???? ?? ?? ??? ???? ????. 3. ?? ?? ???? ?? ? ??? ???? ?? ?????. ?? ??? ??? ?????. ? ?? ??? ??? ??? ?? ???? ? ? ????. style ???? ???? ??? CSS ?? ?? ?????? ?? ???????. Select2? ?? ????? ??? ????? ? ??? ? ????.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ko/faq/1796835653.html" title="CSS ? JavaScript? HTML5 ??? ????? ?????." class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175226046128038.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS ? JavaScript? HTML5 ??? ????? ?????." /> </a> <a href="http://www.miracleart.cn/ko/faq/1796835653.html" title="CSS ? JavaScript? HTML5 ??? ????? ?????." class="phphistorical_Version2_mids_title">CSS ? JavaScript? HTML5 ??? ????? ?????.</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 12, 2025 am 03:01 AM</span> <p class="Articlelist_txts_p">HTML5, CSS ? JavaScript? ??? ??, ???? ?? ?? ? ???? ??? ????? ????????. 1. SEO ? ????? ???? ????? ??? ??? ? ?? ??? ??? ?? HTML5 ??? ??? ??????. 2. CSS? ???? ?? ??? ???? ???? ???? ??? ???? ????? ??? ?????. 3. JavaScript? ??? ???? ?? ???? DEFER ?? ASYNC? ???? ?? ???? ??? ?? ??? ????????. 4. ??? ??? ??? ???? ??? ??? ?? ? ??? ?? ?? ??? ?? ??? ???? ?? ?? ?? ??? ?? ?? ???? ??????. ??? ??? ??? ??? ????? ????? ?? ?? ? ? ????.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ko/faq/1796831880.html" title="HTML ?? ??? ???? ?? ??? ?? ??" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175182671121571.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML ?? ??? ???? ?? ??? ?? ??" /> </a> <a href="http://www.miracleart.cn/ko/faq/1796831880.html" title="HTML ?? ??? ???? ?? ??? ?? ??" class="phphistorical_Version2_mids_title">HTML ?? ??? ???? ?? ??? ?? ??</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 07, 2025 am 02:31 AM</span> <p class="Articlelist_txts_p">HTML ?? ??? ???? ?? ??? ??? ???? ?? ?? ?? ? ???? ?? ??? ????????. 1. ????? ??? ??? ????? ?? ? ?? ?? (? : ??, ??, ???)? ?? ??? ?????. 2. JavaScript? ?? ?? ? ??? ???? ID? ?? ??? ?? ??? ??? ???? ?? ? ????. 3. CSS? ???? ???, ???, ?? ??? ? ??/?? ?? ??? ???? ???? ??? ???? ??? ??? ??????. 4. ???? ????????? : ???? ? ??? ????? ??? ???? JS ???? ???? ????? ???? ??? ???? ??? ??? ??? ???? ??? ?????. ??? ???????</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ko/faq/1796832574.html" title="??? html5 ??? (formdata)? ???? ?? ??? ??" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191288234525.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="??? html5 ??? (formdata)? ???? ?? ??? ??" /> </a> <a href="http://www.miracleart.cn/ko/faq/1796832574.html" title="??? html5 ??? (formdata)? ???? ?? ??? ??" class="phphistorical_Version2_mids_title">??? html5 ??? (formdata)? ???? ?? ??? ??</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:28 AM</span> <p class="Articlelist_txts_p">HTML5? FormData API? ???? ?? ???? ???? ?? ? ?????. 1. ?? ????? ?? ??? ???? ????? ???? ???? ?? ? ? ????. 2. ?? ???? ??? Fetch ?? Xmlhttprequest? ?? ?? ??/?? ??? ??? ??? ???????. 3. ??? ?? ? ? ??? FormData? ???? ??? ??????. 4. ??? ?? ??? ?? ?? JSON ?? ? ?? ??? ?? ? ??? ????.</p> </div> </div> <a href="http://www.miracleart.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div id="377j5v51b" class="footer"> <div id="377j5v51b" class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>???? ??? PHP ??，PHP ???? ?? ??? ?????！</p> </div> <div id="377j5v51b" class="footermid"> <a href="http://www.miracleart.cn/ko/about/us.html">?? ??</a> <a href="http://www.miracleart.cn/ko/about/disclaimer.html">?? ??</a> <a href="http://www.miracleart.cn/ko/update/article_0_1.html">Sitemap</a> </div> <div id="377j5v51b" class="footerbottom"> <p> ? php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="0okio" class="pl_css_ganrao" style="display: none;"><small id="0okio"></small><wbr id="0okio"><pre id="0okio"></pre></wbr><xmp id="0okio"></xmp><li id="0okio"><object id="0okio"><tr id="0okio"></tr></object></li><ul id="0okio"></ul><strong id="0okio"><fieldset id="0okio"><acronym id="0okio"></acronym></fieldset></strong><input id="0okio"></input><sup id="0okio"></sup><abbr id="0okio"><small id="0okio"><tbody id="0okio"></tbody></small></abbr><tbody id="0okio"><noframes id="0okio"><fieldset id="0okio"></fieldset></noframes></tbody><li id="0okio"></li><bdo id="0okio"><source id="0okio"><sup id="0okio"></sup></source></bdo><rt id="0okio"><pre id="0okio"><optgroup id="0okio"></optgroup></pre></rt><input id="0okio"><source id="0okio"><ul id="0okio"></ul></source></input><pre id="0okio"></pre><source id="0okio"><strike id="0okio"><samp id="0okio"></samp></strike></source><wbr id="0okio"><blockquote id="0okio"><tbody id="0okio"></tbody></blockquote></wbr><pre id="0okio"></pre><dl id="0okio"><pre id="0okio"><menu id="0okio"></menu></pre></dl><blockquote id="0okio"></blockquote><cite id="0okio"></cite><object id="0okio"></object><strong id="0okio"></strong><tbody id="0okio"></tbody><fieldset id="0okio"></fieldset><tbody id="0okio"></tbody><abbr id="0okio"></abbr><delect id="0okio"></delect><tfoot id="0okio"><del id="0okio"><rt id="0okio"></rt></del></tfoot><center id="0okio"></center><abbr id="0okio"></abbr><dd id="0okio"></dd><small id="0okio"></small><abbr id="0okio"></abbr><td id="0okio"></td><samp id="0okio"><table id="0okio"><dfn id="0okio"></dfn></table></samp><input id="0okio"><s id="0okio"><ul id="0okio"></ul></s></input><rt id="0okio"></rt><kbd id="0okio"></kbd><nav id="0okio"></nav><option id="0okio"></option><del id="0okio"></del><option id="0okio"></option><abbr id="0okio"><center id="0okio"><xmp id="0okio"></xmp></center></abbr><button id="0okio"><code id="0okio"><dfn id="0okio"></dfn></code></button><small id="0okio"></small><small id="0okio"></small><small id="0okio"></small><kbd id="0okio"><nav id="0okio"><blockquote id="0okio"></blockquote></nav></kbd><rt id="0okio"></rt><tbody id="0okio"></tbody><delect id="0okio"><abbr id="0okio"><fieldset id="0okio"></fieldset></abbr></delect><rt id="0okio"></rt><button id="0okio"></button><source id="0okio"><ul id="0okio"><li id="0okio"></li></ul></source><samp id="0okio"></samp><abbr id="0okio"></abbr><rt id="0okio"></rt><bdo id="0okio"></bdo><small id="0okio"></small><abbr id="0okio"><center id="0okio"><samp id="0okio"></samp></center></abbr><kbd id="0okio"></kbd><dd id="0okio"><em id="0okio"><rt id="0okio"></rt></em></dd><xmp id="0okio"></xmp><samp id="0okio"></samp><rt id="0okio"><pre id="0okio"><abbr id="0okio"></abbr></pre></rt><center id="0okio"><nav id="0okio"><tfoot id="0okio"></tfoot></nav></center><kbd id="0okio"><abbr id="0okio"><strike id="0okio"></strike></abbr></kbd><delect id="0okio"></delect><center id="0okio"><tbody id="0okio"><tr id="0okio"></tr></tbody></center><xmp id="0okio"></xmp><pre id="0okio"></pre><button id="0okio"></button><strong id="0okio"></strong><button id="0okio"></button><td id="0okio"></td><table id="0okio"><th id="0okio"><li id="0okio"></li></th></table><td id="0okio"></td><sup id="0okio"></sup><button id="0okio"></button><tbody id="0okio"></tbody><td id="0okio"></td><cite id="0okio"></cite><pre id="0okio"></pre><blockquote id="0okio"></blockquote><noframes id="0okio"><fieldset id="0okio"><dd id="0okio"></dd></fieldset></noframes><em id="0okio"></em><pre id="0okio"></pre><table id="0okio"><input id="0okio"><blockquote id="0okio"></blockquote></input></table><pre id="0okio"></pre><delect id="0okio"><ul id="0okio"><fieldset id="0okio"></fieldset></ul></delect><cite id="0okio"></cite><sup id="0okio"><li id="0okio"><object id="0okio"></object></li></sup><noframes id="0okio"></noframes><ul id="0okio"></ul><tbody id="0okio"><wbr id="0okio"><kbd id="0okio"></kbd></wbr></tbody><center id="0okio"></center><kbd id="0okio"></kbd><menu id="0okio"><rt id="0okio"><del id="0okio"></del></rt></menu><pre id="0okio"></pre></div> </html>