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 無(wú)序列表\" ><\/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 無(wú)序列表\" ><\/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 無(wú)序列表\" ><\/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 無(wú)序列表\" ><\/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 無(wú)序列表\" ><\/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 無(wú)序列表\" ><\/p>\n<h3>結(jié)論<\/h3>\n<p>現(xiàn)在我們了解了如何在 HTML 中構(gòu)建無(wú)序列表。我們已經(jīng)通過(guò)不同的示例了解了無(wú)序塊元素如何在創(chuàng)建網(wǎng)頁(yè)中發(fā)揮作用，并探索了一些列表功能。即使這也可以用在導(dǎo)航菜單中垂直顯示。無(wú)序列表的創(chuàng)建非常簡(jiǎn)單；考慮在哪里修復(fù)此方法以獲得最佳位非常重要。換句話(huà)說(shuō)，完美的文檔更喜歡使用 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/zh/" 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="社區(qū)" class="head_nava head_nava-template1">社區(qū)</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/zh/article.html" title="文章" class="languagechoosea on">文章</a>
<a href="http://www.miracleart.cn/zh/faq/zt" title="合集" class="languagechoosea">合集</a>
<a href="http://www.miracleart.cn/zh/wenda.html" title="問(wèn)答" class="languagechoosea">問(wèn)答</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/zh/course.html" title="課程" class="languagechoosea on">課程</a>
<a href="http://www.miracleart.cn/zh/dic/" title="編程詞典" class="languagechoosea">編程詞典</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="工具庫(kù)" class="head_nava head_nava-template1_2">工具庫(kù)</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/zh/toolset/development-tools" title="開(kāi)發(fā)工具" class="languagechoosea on">開(kāi)發(fā)工具</a>
<a href="http://www.miracleart.cn/zh/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a>
<a href="http://www.miracleart.cn/zh/toolset/php-libraries" title="PHP 庫(kù)" class="languagechoosea">PHP 庫(kù)</a>
<a href="http://www.miracleart.cn/zh/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a>
<a href="http://www.miracleart.cn/zh/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a>
<a href="http://www.miracleart.cn/zh/toolset/extension-plug-ins" title="擴(kuò)展插件" class="languagechoosea on">擴(kuò)展插件</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/zh/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/zh/game" title="游戲下載" class="languagechoosea on">游戲下載</a>
<a href="http://www.miracleart.cn/zh/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('zh')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="搜索" onclick="searchs('zh')"><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">簡(jiǎn)體中文<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:;" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</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="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a>
<a href="javascript:setlang('ko');" 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è)懸浮，文章定位標(biāo)題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="#結(jié)論" title="結(jié)論" >結(jié)論</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/zh/" title="首頁(yè)"
class="phpgenera_Details_mainL1a">首頁(yè)</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/zh/web-designer.html"
class="phpgenera_Details_mainL1a">web前端</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/zh/div-tutorial.html"
class="phpgenera_Details_mainL1a">html教程</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>HTML 無(wú)序列表</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">HTML 無(wú)序列表</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/zh/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/zh/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 無(wú)序列表" ></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 無(wú)序列表" ></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 無(wú)序列表" ></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 無(wú)序列表" ></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 無(wú)序列表" ></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 無(wú)序列表" ></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 無(wú)序列表" ></p>
<h3 id="結(jié)論">結(jié)論</h3>
<p>現(xiàn)在我們了解了如何在 HTML 中構(gòu)建無(wú)序列表。我們已經(jīng)通過(guò)不同的示例了解了無(wú)序塊元素如何在創(chuàng)建網(wǎng)頁(yè)中發(fā)揮作用，并探索了一些列表功能。即使這也可以用在導(dǎo)航菜單中垂直顯示。無(wú)序列表的創(chuàng)建非常簡(jiǎn)單；考慮在哪里修復(fù)此方法以獲得最佳位非常重要。換句話(huà)說(shuō)，完美的文檔更喜歡使用 HTML 列表格式。</p><p>以上是HTML 無(wú)序列表的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">本站聲明</div>
<div>本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請(qǐng)聯(lián)系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>熱門(mén)文章</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/zh/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</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/zh/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</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/zh/faq/1796821436.html" title="沙丘：覺(jué)醒 - 高級(jí)行星學(xué)家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘：覺(jué)醒 - 高級(jí)行星學(xué)家Quest演練</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/zh/faq/1796821278.html" title="約會(huì)一切：德克和哈珀關(guān)系指南" class="phpgenera_Details_mainR4_bottom_title">約會(huì)一切：德克和哈珀關(guān)系指南</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 個(gè)月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/zh/faq/1796821868.html" title="Palia：Rasquellywag的Riches Quest演練" class="phpgenera_Details_mainR4_bottom_title">Palia：Rasquellywag的Riches Quest演練</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 周前</span>
<span>By DDD</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/zh/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/zh/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/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>免費(fèi)脫衣服圖片</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/zh/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/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/zh/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/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>用于從照片中去除衣服的在線(xiàn)人工智能工具。</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/zh/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/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI脫衣機(jī)</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/zh/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/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/zh/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>熱門(mén)文章</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/zh/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</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/zh/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</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/zh/faq/1796821436.html" title="沙丘：覺(jué)醒 - 高級(jí)行星學(xué)家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘：覺(jué)醒 - 高級(jí)行星學(xué)家Quest演練</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/zh/faq/1796821278.html" title="約會(huì)一切：德克和哈珀關(guān)系指南" class="phpgenera_Details_mainR4_bottom_title">約會(huì)一切：德克和哈珀關(guān)系指南</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 個(gè)月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/zh/faq/1796821868.html" title="Palia：Rasquellywag的Riches Quest演練" class="phpgenera_Details_mainR4_bottom_title">Palia：Rasquellywag的Riches Quest演練</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 周前</span>
<span>By DDD</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/zh/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/zh/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/zh/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title">
<h3>記事本++7.3.1</h3>
</a>
<p>好用且免費(fèi)的代碼編輯器</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/zh/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/zh/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/zh/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/zh/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title">
<h3>禪工作室 13.0.1</h3>
</a>
<p>功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/zh/toolset/development-tools/469" title="Dreamweaver 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="Dreamweaver CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/zh/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/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac版</h3>
</a>
<p>神級(jí)代碼編輯軟件(SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/zh/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>熱門(mén)話(huà)題</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/zh/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>8639</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/zh/faq/java-tutorial" title="Java教程" class="phpgenera_Details_mainR4_bottom_title">Java教程</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>1786</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/zh/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/zh/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</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>1581</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/zh/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>1445</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/zh/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/zh/faq/1796829177.html" title="構(gòu)建網(wǎng)頁(yè)的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="構(gòu)建網(wǎng)頁(yè)的HTML元素是什么？" />
</a>
<a href="http://www.miracleart.cn/zh/faq/1796829177.html" title="構(gòu)建網(wǎng)頁(yè)的HTML元素是什么？" class="phphistorical_Version2_mids_title">構(gòu)建網(wǎng)頁(yè)的HTML元素是什么？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:34 AM</span>
<p class="Articlelist_txts_p">網(wǎng)頁(yè)結(jié)構(gòu)需核心HTML元素支撐，1.頁(yè)面整體結(jié)構(gòu)由、、構(gòu)成，其中為根元素，存放元信息，展示內(nèi)容；2.內(nèi)容組織依賴(lài)標(biāo)題（-）、段落（）及區(qū)塊標(biāo)簽（如、）以提升條理與SEO；3.導(dǎo)航通過(guò)與實(shí)現(xiàn)，常用組織鏈接并輔以aria-current屬性增強(qiáng)可訪(fǎng)問(wèn)性；4.表單交互涉及、、與，確保用戶(hù)輸入與提交功能完整。正確使用這些元素能提升頁(yè)面清晰度、維護(hù)性及搜索引擎優(yōu)化。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/zh/faq/1796829157.html" title="使用HTML5服務(wù)器序列事件處理重新連接和錯(cuò)誤。" 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服務(wù)器序列事件處理重新連接和錯(cuò)誤。" />
</a>
<a href="http://www.miracleart.cn/zh/faq/1796829157.html" title="使用HTML5服務(wù)器序列事件處理重新連接和錯(cuò)誤。" class="phphistorical_Version2_mids_title">使用HTML5服務(wù)器序列事件處理重新連接和錯(cuò)誤。</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:28 AM</span>
<p class="Articlelist_txts_p">使用HTML5SSE時(shí)，處理重連和錯(cuò)誤的方法包括：1.了解默認(rèn)重連機(jī)制，EventSource默認(rèn)在連接中斷后3秒重試，可通過(guò)retry字段自定義間隔；2.監(jiān)聽(tīng)error事件以應(yīng)對(duì)連接失敗或解析錯(cuò)誤，區(qū)分錯(cuò)誤類(lèi)型并執(zhí)行相應(yīng)邏輯，如網(wǎng)絡(luò)問(wèn)題依賴(lài)自動(dòng)重連、服務(wù)器錯(cuò)誤手動(dòng)延遲重連、認(rèn)證失效刷新token；3.主動(dòng)控制重連邏輯，如手動(dòng)關(guān)閉并重建連接、設(shè)置最大重試次數(shù)、結(jié)合navigator.onLine判斷網(wǎng)絡(luò)狀態(tài)以?xún)?yōu)化重試策略。這些措施可提升應(yīng)用穩(wěn)定性與用戶(hù)體驗(yàn)。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/zh/faq/1796829178.html" title="為現(xiàn)代頁(yè)面宣布正確的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="為現(xiàn)代頁(yè)面宣布正確的HTML5 Doctype。" />
</a>
<a href="http://www.miracleart.cn/zh/faq/1796829178.html" title="為現(xiàn)代頁(yè)面宣布正確的HTML5 Doctype。" class="phphistorical_Version2_mids_title">為現(xiàn)代頁(yè)面宣布正確的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標(biāo)準(zhǔn)解析頁(yè)面的聲明，現(xiàn)代網(wǎng)頁(yè)只需在HTML文件最開(kāi)頭寫(xiě)。其作用是確保瀏覽器以標(biāo)準(zhǔn)模式而非怪異模式渲染頁(yè)面，且必須位于第一行，前面不能有空格或注釋?zhuān)徽_寫(xiě)法僅有一種，不推薦使用舊版本或其他變體；其他如charset、viewport等應(yīng)放在部分。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/zh/faq/1796829167.html" title="使用HTML屬性實(shí)現(xiàn)客戶(hù)端表單驗(yàn)證。" 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屬性實(shí)現(xiàn)客戶(hù)端表單驗(yàn)證。" />
</a>
<a href="http://www.miracleart.cn/zh/faq/1796829167.html" title="使用HTML屬性實(shí)現(xiàn)客戶(hù)端表單驗(yàn)證。" class="phphistorical_Version2_mids_title">使用HTML屬性實(shí)現(xiàn)客戶(hù)端表單驗(yàn)證。</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:31 AM</span>
<p class="Articlelist_txts_p">client-sideformvalidationCanbedOnewithOutJavaScriptbyusinghtmlattributes.1）useRequiredToEnforCemandatoryField.2）validateMailsAndUrllSwithTyPeatTributesLikeEmailOrurl，orusepatternwithRegegexforCustomAlorurl</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/zh/faq/1796829956.html" title="如何使用HTML將選項(xiàng)分組？" 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將選項(xiàng)分組？" />
</a>
<a href="http://www.miracleart.cn/zh/faq/1796829956.html" title="如何使用HTML將選項(xiàng)分組？" class="phphistorical_Version2_mids_title">如何使用HTML將選項(xiàng)分組？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 04, 2025 am 03:16 AM</span>
<p class="Articlelist_txts_p">在HTML中使用標(biāo)簽可以對(duì)下拉菜單中的選項(xiàng)進(jìn)行分組。具體方法是用包裹一組元素，并通過(guò)label屬性定義組名，如：1.包含蘋(píng)果、香蕉、橙子等選項(xiàng)；2.包含胡蘿卜、西蘭花等選項(xiàng)；3.每個(gè)為一個(gè)獨(dú)立分組，組內(nèi)選項(xiàng)自動(dòng)縮進(jìn)。注意事項(xiàng)包括：①不支持嵌套；②可通過(guò)disabled屬性禁用整個(gè)組；③樣式受限需結(jié)合CSS或第三方庫(kù)美化；可使用Select2等插件增強(qiáng)功能。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/zh/faq/1796835653.html" title="將CSS和JavaScript與HTML5結(jié)構(gòu)有效整合。" 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結(jié)構(gòu)有效整合。" />
</a>
<a href="http://www.miracleart.cn/zh/faq/1796835653.html" title="將CSS和JavaScript與HTML5結(jié)構(gòu)有效整合。" class="phphistorical_Version2_mids_title">將CSS和JavaScript與HTML5結(jié)構(gòu)有效整合。</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 12, 2025 am 03:01 AM</span>
<p class="Articlelist_txts_p">HTML5、CSS和JavaScript應(yīng)通過(guò)語(yǔ)義化標(biāo)簽、合理加載順序與解耦設(shè)計(jì)高效結(jié)合。1.使用HTML5語(yǔ)義化標(biāo)簽如、提升結(jié)構(gòu)清晰度與可維護(hù)性，利于SEO和無(wú)障礙訪(fǎng)問(wèn)；2.CSS應(yīng)置于中，使用外部文件并按模塊拆分，避免內(nèi)聯(lián)樣式與延遲加載問(wèn)題；3.JavaScript推薦放在前引入，使用defer或async異步加載以避免阻塞渲染；4.減少三者間強(qiáng)依賴(lài)，通過(guò)data-*屬性驅(qū)動(dòng)行為、類(lèi)名控制狀態(tài)，統(tǒng)一命名規(guī)范提升協(xié)作效率。這些方法能有效優(yōu)化頁(yè)面性能與團(tuán)隊(duì)協(xié)作。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/zh/faq/1796831880.html" title="使用HTML按鈕元素實(shí)現(xiàn)可點(diǎn)擊按鈕" 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按鈕元素實(shí)現(xiàn)可點(diǎn)擊按鈕" />
</a>
<a href="http://www.miracleart.cn/zh/faq/1796831880.html" title="使用HTML按鈕元素實(shí)現(xiàn)可點(diǎn)擊按鈕" class="phphistorical_Version2_mids_title">使用HTML按鈕元素實(shí)現(xiàn)可點(diǎn)擊按鈕</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 07, 2025 am 02:31 AM</span>
<p class="Articlelist_txts_p">要使用HTML的button元素實(shí)現(xiàn)可點(diǎn)擊按鈕，首先需掌握其基本用法與常見(jiàn)注意事項(xiàng)。1.使用標(biāo)簽創(chuàng)建按鈕，并通過(guò)type屬性定義行為（如button、submit、reset），默認(rèn)為submit；2.通過(guò)JavaScript添加交互功能，可內(nèi)聯(lián)寫(xiě)法或通過(guò)ID綁定事件監(jiān)聽(tīng)器以提升維護(hù)性；3.利用CSS自定義樣式，包括背景色、邊框、圓角及hover/active狀態(tài)效果，增強(qiáng)用戶(hù)體驗(yàn)；4.注意常見(jiàn)問(wèn)題：確保未啟用disabled屬性、正確綁定JS事件、避免布局遮擋，并借助開(kāi)發(fā)者工具排查異常。掌握這</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/zh/faq/1796832574.html" title="使用新的HTML5方法（FormData）提交表單數(shù)據(jù)" 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）提交表單數(shù)據(jù)" />
</a>
<a href="http://www.miracleart.cn/zh/faq/1796832574.html" title="使用新的HTML5方法（FormData）提交表單數(shù)據(jù)" class="phphistorical_Version2_mids_title">使用新的HTML5方法（FormData）提交表單數(shù)據(jù)</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:28 AM</span>
<p class="Articlelist_txts_p">使用HTML5的FormDataAPI提交表單數(shù)據(jù)更方便，1.它可自動(dòng)收集帶name屬性的表單字段或手動(dòng)添加數(shù)據(jù)；2.支持通過(guò)fetch或XMLHttpRequest以multipart/form-data格式提交，適合文件上傳；3.處理文件時(shí)只需將文件附加到FormData并發(fā)送請(qǐng)求即可；4.注意同名字段會(huì)被覆蓋、需處理JSON轉(zhuǎn)換及無(wú)嵌套結(jié)構(gòu)等問(wèn)題。</p>
</div>
</div>
<a href="http://www.miracleart.cn/zh/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>公益在線(xiàn)PHP培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/zh/about/us.html">關(guān)于我們</a>
<a href="http://www.miracleart.cn/zh/about/disclaimer.html">免責(zé)聲明</a>
<a href="http://www.miracleart.cn/zh/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="zwck4" class="pl_css_ganrao" style="display: none;"><samp id="zwck4"><thead id="zwck4"><listing id="zwck4"></listing></thead></samp><label id="zwck4"></label><tr id="zwck4"><abbr id="zwck4"></abbr></tr><small id="zwck4"></small><optgroup id="zwck4"></optgroup><dfn id="zwck4"><u id="zwck4"></u></dfn><cite id="zwck4"><sub id="zwck4"><b id="zwck4"><abbr id="zwck4"></abbr></b></sub></cite><var id="zwck4"></var><legend id="zwck4"><menuitem id="zwck4"></menuitem></legend><xmp id="zwck4"></xmp><pre id="zwck4"><strike id="zwck4"><center id="zwck4"></center></strike></pre><tbody id="zwck4"><tt id="zwck4"></tt></tbody><label id="zwck4"><th id="zwck4"></th></label><dl id="zwck4"></dl><sup id="zwck4"><form id="zwck4"><optgroup id="zwck4"></optgroup></form></sup><nav id="zwck4"></nav><thead id="zwck4"><small id="zwck4"><strong id="zwck4"></strong></small></thead><sup id="zwck4"><center id="zwck4"><optgroup id="zwck4"><th id="zwck4"></th></optgroup></center></sup><sup id="zwck4"><span id="zwck4"><video id="zwck4"></video></span></sup><kbd id="zwck4"><dfn id="zwck4"><small id="zwck4"><dl id="zwck4"></dl></small></dfn></kbd><ruby id="zwck4"></ruby><table id="zwck4"><optgroup id="zwck4"><legend id="zwck4"><center id="zwck4"></center></legend></optgroup></table><span id="zwck4"></span><style id="zwck4"><i id="zwck4"><tr id="zwck4"><b id="zwck4"></b></tr></i></style><menuitem id="zwck4"></menuitem><form id="zwck4"></form><tfoot id="zwck4"><thead id="zwck4"><meter id="zwck4"></meter></thead></tfoot><div id="zwck4"></div><sup id="zwck4"></sup><option id="zwck4"></option><pre id="zwck4"><label id="zwck4"><style id="zwck4"><tbody id="zwck4"></tbody></style></label></pre><style id="zwck4"><i id="zwck4"><tr id="zwck4"><b id="zwck4"></b></tr></i></style><small id="zwck4"></small><legend id="zwck4"></legend><strong id="zwck4"><strike id="zwck4"></strike></strong><small id="zwck4"><bdo id="zwck4"></bdo></small><style id="zwck4"><thead id="zwck4"><meter id="zwck4"></meter></thead></style><strong id="zwck4"></strong><nobr id="zwck4"></nobr><span id="zwck4"></span><delect id="zwck4"></delect><output id="zwck4"></output><listing id="zwck4"><rt id="zwck4"><ol id="zwck4"><xmp id="zwck4"></xmp></ol></rt></listing><center id="zwck4"></center><acronym id="zwck4"></acronym><progress id="zwck4"><em id="zwck4"></em></progress><sup id="zwck4"></sup><output id="zwck4"><th id="zwck4"><nobr id="zwck4"></nobr></th></output><delect id="zwck4"><sub id="zwck4"><li id="zwck4"></li></sub></delect><meter id="zwck4"></meter><strike id="zwck4"><tt id="zwck4"><b id="zwck4"><small id="zwck4"></small></b></tt></strike><sup id="zwck4"></sup><thead id="zwck4"></thead><strike id="zwck4"><pre id="zwck4"></pre></strike><tr id="zwck4"></tr><label id="zwck4"></label><ol id="zwck4"><dl id="zwck4"><blockquote id="zwck4"><th id="zwck4"></th></blockquote></dl></ol><strike id="zwck4"></strike><mark id="zwck4"><video id="zwck4"><p id="zwck4"></p></video></mark><em id="zwck4"></em><center id="zwck4"><acronym id="zwck4"><noframes id="zwck4"><i id="zwck4"></i></noframes></acronym></center><source id="zwck4"><wbr id="zwck4"></wbr></source><delect id="zwck4"><del id="zwck4"><li id="zwck4"><source id="zwck4"></source></li></del></delect><small id="zwck4"><pre id="zwck4"></pre></small><meter id="zwck4"></meter><th id="zwck4"></th><del id="zwck4"></del><tbody id="zwck4"></tbody><legend id="zwck4"><div id="zwck4"><u id="zwck4"></u></div></legend><b id="zwck4"><optgroup id="zwck4"><pre id="zwck4"></pre></optgroup></b><dfn id="zwck4"></dfn><label id="zwck4"></label><abbr id="zwck4"><legend id="zwck4"></legend></abbr><fieldset id="zwck4"><thead id="zwck4"><tr id="zwck4"></tr></thead></fieldset><rt id="zwck4"></rt><noframes id="zwck4"><i id="zwck4"><input id="zwck4"></input></i></noframes><kbd id="zwck4"></kbd><strike id="zwck4"><tt id="zwck4"><tbody id="zwck4"><small id="zwck4"></small></tbody></tt></strike><ul id="zwck4"></ul><pre id="zwck4"><delect id="zwck4"><font id="zwck4"><dfn id="zwck4"></dfn></font></delect></pre><del id="zwck4"><thead id="zwck4"></thead></del><tr id="zwck4"></tr><big id="zwck4"><ins id="zwck4"><pre id="zwck4"></pre></ins></big><table id="zwck4"></table><blockquote id="zwck4"></blockquote><input id="zwck4"></input><sup id="zwck4"><center id="zwck4"><optgroup id="zwck4"><legend id="zwck4"></legend></optgroup></center></sup><optgroup id="zwck4"></optgroup><em id="zwck4"></em><input id="zwck4"><dfn id="zwck4"><td id="zwck4"></td></dfn></input><option id="zwck4"></option><table id="zwck4"><nobr id="zwck4"><s id="zwck4"></s></nobr></table><strong id="zwck4"></strong><span id="zwck4"><del id="zwck4"></del></span><li id="zwck4"><label id="zwck4"><strong id="zwck4"><span id="zwck4"></span></strong></label></li><font id="zwck4"><tbody id="zwck4"></tbody></font><cite id="zwck4"></cite><legend id="zwck4"><dfn id="zwck4"></dfn></legend><wbr id="zwck4"><mark id="zwck4"><table id="zwck4"><track id="zwck4"></track></table></mark></wbr><dfn id="zwck4"></dfn><rt id="zwck4"></rt><table id="zwck4"><thead id="zwck4"><sup id="zwck4"></sup></thead></table><sup id="zwck4"><menuitem id="zwck4"><em id="zwck4"></em></menuitem></sup><span id="zwck4"></span><form id="zwck4"><em id="zwck4"></em></form><ol id="zwck4"><xmp id="zwck4"><abbr id="zwck4"></abbr></xmp></ol><em id="zwck4"><video id="zwck4"><p id="zwck4"></p></video></em><small id="zwck4"></small><i id="zwck4"></i><mark id="zwck4"><ins id="zwck4"><abbr id="zwck4"><input id="zwck4"></input></abbr></ins></mark><var id="zwck4"></var><acronym id="zwck4"></acronym><label id="zwck4"></label><font id="zwck4"><tbody id="zwck4"></tbody></font><center id="zwck4"></center><div id="zwck4"></div><tbody id="zwck4"><small id="zwck4"><sup id="zwck4"><code id="zwck4"></code></sup></small></tbody><form id="zwck4"></form><code id="zwck4"><pre id="zwck4"><span id="zwck4"><kbd id="zwck4"></kbd></span></pre></code><pre id="zwck4"><abbr id="zwck4"><table id="zwck4"></table></abbr></pre><ruby id="zwck4"></ruby><li id="zwck4"><ol id="zwck4"></ol></li><dl id="zwck4"></dl><option id="zwck4"><output id="zwck4"></output></option><dfn id="zwck4"></dfn><meter id="zwck4"><center id="zwck4"></center></meter><big id="zwck4"></big><source id="zwck4"></source><big id="zwck4"></big><menuitem id="zwck4"><abbr id="zwck4"><legend id="zwck4"></legend></abbr></menuitem><legend id="zwck4"><dfn id="zwck4"><u id="zwck4"><form id="zwck4"></form></u></dfn></legend><thead id="zwck4"><small id="zwck4"><pre id="zwck4"><code id="zwck4"></code></pre></small></thead><wbr id="zwck4"><output id="zwck4"><th id="zwck4"></th></output></wbr><ins id="zwck4"></ins><dd id="zwck4"><form id="zwck4"><ul id="zwck4"></ul></form></dd><kbd id="zwck4"><b id="zwck4"></b></kbd><meter id="zwck4"></meter><optgroup id="zwck4"><pre id="zwck4"><thead id="zwck4"><listing id="zwck4"></listing></thead></pre></optgroup><thead id="zwck4"></thead><center id="zwck4"><rp id="zwck4"><font id="zwck4"><dfn id="zwck4"></dfn></font></rp></center><delect id="zwck4"><del id="zwck4"><li id="zwck4"><source id="zwck4"></source></li></del></delect><meter id="zwck4"></meter><option id="zwck4"></option><nav id="zwck4"><div id="zwck4"><ol id="zwck4"><xmp id="zwck4"></xmp></ol></div></nav><style id="zwck4"></style><style id="zwck4"><address id="zwck4"><sub id="zwck4"><b id="zwck4"></b></sub></address></style><samp id="zwck4"><delect id="zwck4"><listing id="zwck4"><sup id="zwck4"></sup></listing></delect></samp><dfn id="zwck4"></dfn><strike id="zwck4"><thead id="zwck4"></thead></strike></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 無(wú)序列表\" ><\/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 無(wú)序列表\" ><\/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 無(wú)序列表\" ><\/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 無(wú)序列表\" ><\/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 無(wú)序列表\" ><\/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 無(wú)序列表\" ><\/p>\n<h3>結(jié)論<\/h3>\n<p>現(xiàn)在我們了解了如何在 HTML 中構(gòu)建無(wú)序列表。我們已經(jīng)通過(guò)不同的示例了解了無(wú)序塊元素如何在創(chuàng)建網(wǎng)頁(yè)中發(fā)揮作用，并探索了一些列表功能。即使這也可以用在導(dǎo)航菜單中垂直顯示。無(wú)序列表的創(chuàng)建非常簡(jiǎn)單；考慮在哪里修復(fù)此方法以獲得最佳位非常重要。換句話(huà)說(shuō)，完美的文檔更喜歡使用 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/zh/" 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="社區(qū)" class="head_nava head_nava-template1">社區(qū)</a> <div class="377j5v51b" id="dropdown-template1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/zh/article.html" title="文章" class="languagechoosea on">文章</a> <a href="http://www.miracleart.cn/zh/faq/zt" title="合集" class="languagechoosea">合集</a> <a href="http://www.miracleart.cn/zh/wenda.html" title="問(wèn)答" class="languagechoosea">問(wèn)答</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a> <div class="377j5v51b" id="dropdown-template1_1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/zh/course.html" title="課程" class="languagechoosea on">課程</a> <a href="http://www.miracleart.cn/zh/dic/" title="編程詞典" class="languagechoosea">編程詞典</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="工具庫(kù)" class="head_nava head_nava-template1_2">工具庫(kù)</a> <div class="377j5v51b" id="dropdown-template1_2" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/zh/toolset/development-tools" title="開(kāi)發(fā)工具" class="languagechoosea on">開(kāi)發(fā)工具</a> <a href="http://www.miracleart.cn/zh/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a> <a href="http://www.miracleart.cn/zh/toolset/php-libraries" title="PHP 庫(kù)" class="languagechoosea">PHP 庫(kù)</a> <a href="http://www.miracleart.cn/zh/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a> <a href="http://www.miracleart.cn/zh/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a> <a href="http://www.miracleart.cn/zh/toolset/extension-plug-ins" title="擴(kuò)展插件" class="languagechoosea on">擴(kuò)展插件</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="http://www.miracleart.cn/zh/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/zh/game" title="游戲下載" class="languagechoosea on">游戲下載</a> <a href="http://www.miracleart.cn/zh/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('zh')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value=""> <a href="javascript:;" title="搜索" onclick="searchs('zh')"><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">簡(jiǎn)體中文<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:;" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</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="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a> <a href="javascript:setlang('ko');" 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è)懸浮，文章定位標(biāo)題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="#結(jié)論" title="結(jié)論" >結(jié)論</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/zh/" title="首頁(yè)" class="phpgenera_Details_mainL1a">首頁(yè)</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://www.miracleart.cn/zh/web-designer.html" class="phpgenera_Details_mainL1a">web前端</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://www.miracleart.cn/zh/div-tutorial.html" class="phpgenera_Details_mainL1a">html教程</a> <img src="/static/imghw/top_right.png" alt="" /> <span>HTML 無(wú)序列表</span> </div> <div id="377j5v51b" class="Articlelist_txts"> <div id="377j5v51b" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">HTML 無(wú)序列表</h1> <div id="377j5v51b" class="Articlelist_txts_info_head"> <div id="377j5v51b" class="author_info"> <a href="http://www.miracleart.cn/zh/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/zh/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 無(wú)序列表" ></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 無(wú)序列表" ></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 無(wú)序列表" ></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 無(wú)序列表" ></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 無(wú)序列表" ></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 無(wú)序列表" ></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 無(wú)序列表" ></p> <h3 id="結(jié)論">結(jié)論</h3> <p>現(xiàn)在我們了解了如何在 HTML 中構(gòu)建無(wú)序列表。我們已經(jīng)通過(guò)不同的示例了解了無(wú)序塊元素如何在創(chuàng)建網(wǎng)頁(yè)中發(fā)揮作用，并探索了一些列表功能。即使這也可以用在導(dǎo)航菜單中垂直顯示。無(wú)序列表的創(chuàng)建非常簡(jiǎn)單；考慮在哪里修復(fù)此方法以獲得最佳位非常重要。換句話(huà)說(shuō)，完美的文檔更喜歡使用 HTML 列表格式。</p><p>以上是HTML 無(wú)序列表的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！</p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">本站聲明</div> <div>本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請(qǐng)聯(lián)系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>熱門(mén)文章</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</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/zh/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</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/zh/faq/1796821436.html" title="沙丘：覺(jué)醒 - 高級(jí)行星學(xué)家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘：覺(jué)醒 - 高級(jí)行星學(xué)家Quest演練</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/zh/faq/1796821278.html" title="約會(huì)一切：德克和哈珀關(guān)系指南" class="phpgenera_Details_mainR4_bottom_title">約會(huì)一切：德克和哈珀關(guān)系指南</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個(gè)月前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh/faq/1796821868.html" title="Palia：Rasquellywag的Riches Quest演練" class="phpgenera_Details_mainR4_bottom_title">Palia：Rasquellywag的Riches Quest演練</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 周前</span> <span>By DDD</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/zh/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/zh/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/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>免費(fèi)脫衣服圖片</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/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/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/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/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>用于從照片中去除衣服的在線(xiàn)人工智能工具。</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/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/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI脫衣機(jī)</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/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/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/zh/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>熱門(mén)文章</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</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/zh/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</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/zh/faq/1796821436.html" title="沙丘：覺(jué)醒 - 高級(jí)行星學(xué)家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘：覺(jué)醒 - 高級(jí)行星學(xué)家Quest演練</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/zh/faq/1796821278.html" title="約會(huì)一切：德克和哈珀關(guān)系指南" class="phpgenera_Details_mainR4_bottom_title">約會(huì)一切：德克和哈珀關(guān)系指南</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個(gè)月前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh/faq/1796821868.html" title="Palia：Rasquellywag的Riches Quest演練" class="phpgenera_Details_mainR4_bottom_title">Palia：Rasquellywag的Riches Quest演練</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 周前</span> <span>By DDD</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/zh/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/zh/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/zh/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title"> <h3>記事本++7.3.1</h3> </a> <p>好用且免費(fèi)的代碼編輯器</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/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/zh/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/zh/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/zh/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title"> <h3>禪工作室 13.0.1</h3> </a> <p>功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/toolset/development-tools/469" title="Dreamweaver 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="Dreamweaver CS6" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/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/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神級(jí)代碼編輯軟件(SublimeText3)</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/zh/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>熱門(mén)話(huà)題</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh/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>8639</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/zh/faq/java-tutorial" title="Java教程" class="phpgenera_Details_mainR4_bottom_title">Java教程</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>1786</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/zh/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/zh/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</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>1581</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh/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>1445</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/zh/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/zh/faq/1796829177.html" title="構(gòu)建網(wǎng)頁(yè)的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="構(gòu)建網(wǎng)頁(yè)的HTML元素是什么？" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796829177.html" title="構(gòu)建網(wǎng)頁(yè)的HTML元素是什么？" class="phphistorical_Version2_mids_title">構(gòu)建網(wǎng)頁(yè)的HTML元素是什么？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:34 AM</span> <p class="Articlelist_txts_p">網(wǎng)頁(yè)結(jié)構(gòu)需核心HTML元素支撐，1.頁(yè)面整體結(jié)構(gòu)由、、構(gòu)成，其中為根元素，存放元信息，展示內(nèi)容；2.內(nèi)容組織依賴(lài)標(biāo)題（-）、段落（）及區(qū)塊標(biāo)簽（如、）以提升條理與SEO；3.導(dǎo)航通過(guò)與實(shí)現(xiàn)，常用組織鏈接并輔以aria-current屬性增強(qiáng)可訪(fǎng)問(wèn)性；4.表單交互涉及、、與，確保用戶(hù)輸入與提交功能完整。正確使用這些元素能提升頁(yè)面清晰度、維護(hù)性及搜索引擎優(yōu)化。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796829157.html" title="使用HTML5服務(wù)器序列事件處理重新連接和錯(cuò)誤。" 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服務(wù)器序列事件處理重新連接和錯(cuò)誤。" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796829157.html" title="使用HTML5服務(wù)器序列事件處理重新連接和錯(cuò)誤。" class="phphistorical_Version2_mids_title">使用HTML5服務(wù)器序列事件處理重新連接和錯(cuò)誤。</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:28 AM</span> <p class="Articlelist_txts_p">使用HTML5SSE時(shí)，處理重連和錯(cuò)誤的方法包括：1.了解默認(rèn)重連機(jī)制，EventSource默認(rèn)在連接中斷后3秒重試，可通過(guò)retry字段自定義間隔；2.監(jiān)聽(tīng)error事件以應(yīng)對(duì)連接失敗或解析錯(cuò)誤，區(qū)分錯(cuò)誤類(lèi)型并執(zhí)行相應(yīng)邏輯，如網(wǎng)絡(luò)問(wèn)題依賴(lài)自動(dòng)重連、服務(wù)器錯(cuò)誤手動(dòng)延遲重連、認(rèn)證失效刷新token；3.主動(dòng)控制重連邏輯，如手動(dòng)關(guān)閉并重建連接、設(shè)置最大重試次數(shù)、結(jié)合navigator.onLine判斷網(wǎng)絡(luò)狀態(tài)以?xún)?yōu)化重試策略。這些措施可提升應(yīng)用穩(wěn)定性與用戶(hù)體驗(yàn)。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796829178.html" title="為現(xiàn)代頁(yè)面宣布正確的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="為現(xiàn)代頁(yè)面宣布正確的HTML5 Doctype。" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796829178.html" title="為現(xiàn)代頁(yè)面宣布正確的HTML5 Doctype。" class="phphistorical_Version2_mids_title">為現(xiàn)代頁(yè)面宣布正確的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標(biāo)準(zhǔn)解析頁(yè)面的聲明，現(xiàn)代網(wǎng)頁(yè)只需在HTML文件最開(kāi)頭寫(xiě)。其作用是確保瀏覽器以標(biāo)準(zhǔn)模式而非怪異模式渲染頁(yè)面，且必須位于第一行，前面不能有空格或注釋?zhuān)徽_寫(xiě)法僅有一種，不推薦使用舊版本或其他變體；其他如charset、viewport等應(yīng)放在部分。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796829167.html" title="使用HTML屬性實(shí)現(xiàn)客戶(hù)端表單驗(yàn)證。" 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屬性實(shí)現(xiàn)客戶(hù)端表單驗(yàn)證。" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796829167.html" title="使用HTML屬性實(shí)現(xiàn)客戶(hù)端表單驗(yàn)證。" class="phphistorical_Version2_mids_title">使用HTML屬性實(shí)現(xiàn)客戶(hù)端表單驗(yàn)證。</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 03, 2025 am 02:31 AM</span> <p class="Articlelist_txts_p">client-sideformvalidationCanbedOnewithOutJavaScriptbyusinghtmlattributes.1）useRequiredToEnforCemandatoryField.2）validateMailsAndUrllSwithTyPeatTributesLikeEmailOrurl，orusepatternwithRegegexforCustomAlorurl</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796829956.html" title="如何使用HTML將選項(xiàng)分組？" 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將選項(xiàng)分組？" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796829956.html" title="如何使用HTML將選項(xiàng)分組？" class="phphistorical_Version2_mids_title">如何使用HTML將選項(xiàng)分組？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 04, 2025 am 03:16 AM</span> <p class="Articlelist_txts_p">在HTML中使用標(biāo)簽可以對(duì)下拉菜單中的選項(xiàng)進(jìn)行分組。具體方法是用包裹一組元素，并通過(guò)label屬性定義組名，如：1.包含蘋(píng)果、香蕉、橙子等選項(xiàng)；2.包含胡蘿卜、西蘭花等選項(xiàng)；3.每個(gè)為一個(gè)獨(dú)立分組，組內(nèi)選項(xiàng)自動(dòng)縮進(jìn)。注意事項(xiàng)包括：①不支持嵌套；②可通過(guò)disabled屬性禁用整個(gè)組；③樣式受限需結(jié)合CSS或第三方庫(kù)美化；可使用Select2等插件增強(qiáng)功能。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796835653.html" title="將CSS和JavaScript與HTML5結(jié)構(gòu)有效整合。" 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結(jié)構(gòu)有效整合。" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796835653.html" title="將CSS和JavaScript與HTML5結(jié)構(gòu)有效整合。" class="phphistorical_Version2_mids_title">將CSS和JavaScript與HTML5結(jié)構(gòu)有效整合。</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 12, 2025 am 03:01 AM</span> <p class="Articlelist_txts_p">HTML5、CSS和JavaScript應(yīng)通過(guò)語(yǔ)義化標(biāo)簽、合理加載順序與解耦設(shè)計(jì)高效結(jié)合。1.使用HTML5語(yǔ)義化標(biāo)簽如、提升結(jié)構(gòu)清晰度與可維護(hù)性，利于SEO和無(wú)障礙訪(fǎng)問(wèn)；2.CSS應(yīng)置于中，使用外部文件并按模塊拆分，避免內(nèi)聯(lián)樣式與延遲加載問(wèn)題；3.JavaScript推薦放在前引入，使用defer或async異步加載以避免阻塞渲染；4.減少三者間強(qiáng)依賴(lài)，通過(guò)data-*屬性驅(qū)動(dòng)行為、類(lèi)名控制狀態(tài)，統(tǒng)一命名規(guī)范提升協(xié)作效率。這些方法能有效優(yōu)化頁(yè)面性能與團(tuán)隊(duì)協(xié)作。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796831880.html" title="使用HTML按鈕元素實(shí)現(xiàn)可點(diǎn)擊按鈕" 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按鈕元素實(shí)現(xiàn)可點(diǎn)擊按鈕" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796831880.html" title="使用HTML按鈕元素實(shí)現(xiàn)可點(diǎn)擊按鈕" class="phphistorical_Version2_mids_title">使用HTML按鈕元素實(shí)現(xiàn)可點(diǎn)擊按鈕</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 07, 2025 am 02:31 AM</span> <p class="Articlelist_txts_p">要使用HTML的button元素實(shí)現(xiàn)可點(diǎn)擊按鈕，首先需掌握其基本用法與常見(jiàn)注意事項(xiàng)。1.使用標(biāo)簽創(chuàng)建按鈕，并通過(guò)type屬性定義行為（如button、submit、reset），默認(rèn)為submit；2.通過(guò)JavaScript添加交互功能，可內(nèi)聯(lián)寫(xiě)法或通過(guò)ID綁定事件監(jiān)聽(tīng)器以提升維護(hù)性；3.利用CSS自定義樣式，包括背景色、邊框、圓角及hover/active狀態(tài)效果，增強(qiáng)用戶(hù)體驗(yàn)；4.注意常見(jiàn)問(wèn)題：確保未啟用disabled屬性、正確綁定JS事件、避免布局遮擋，并借助開(kāi)發(fā)者工具排查異常。掌握這</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796832574.html" title="使用新的HTML5方法（FormData）提交表單數(shù)據(jù)" 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）提交表單數(shù)據(jù)" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796832574.html" title="使用新的HTML5方法（FormData）提交表單數(shù)據(jù)" class="phphistorical_Version2_mids_title">使用新的HTML5方法（FormData）提交表單數(shù)據(jù)</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:28 AM</span> <p class="Articlelist_txts_p">使用HTML5的FormDataAPI提交表單數(shù)據(jù)更方便，1.它可自動(dòng)收集帶name屬性的表單字段或手動(dòng)添加數(shù)據(jù)；2.支持通過(guò)fetch或XMLHttpRequest以multipart/form-data格式提交，適合文件上傳；3.處理文件時(shí)只需將文件附加到FormData并發(fā)送請(qǐng)求即可；4.注意同名字段會(huì)被覆蓋、需處理JSON轉(zhuǎn)換及無(wú)嵌套結(jié)構(gòu)等問(wèn)題。</p> </div> </div> <a href="http://www.miracleart.cn/zh/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>公益在線(xiàn)PHP培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！</p> </div> <div id="377j5v51b" class="footermid"> <a href="http://www.miracleart.cn/zh/about/us.html">關(guān)于我們</a> <a href="http://www.miracleart.cn/zh/about/disclaimer.html">免責(zé)聲明</a> <a href="http://www.miracleart.cn/zh/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="zwck4" class="pl_css_ganrao" style="display: none;"><samp id="zwck4"><thead id="zwck4"><listing id="zwck4"></listing></thead></samp><label id="zwck4"></label><tr id="zwck4"><abbr id="zwck4"></abbr></tr><small id="zwck4"></small><optgroup id="zwck4"></optgroup><dfn id="zwck4"><u id="zwck4"></u></dfn><cite id="zwck4"><sub id="zwck4"><b id="zwck4"><abbr id="zwck4"></abbr></b></sub></cite><var id="zwck4"></var><legend id="zwck4"><menuitem id="zwck4"></menuitem></legend><xmp id="zwck4"></xmp><pre id="zwck4"><strike id="zwck4"><center id="zwck4"></center></strike></pre><tbody id="zwck4"><tt id="zwck4"></tt></tbody><label id="zwck4"><th id="zwck4"></th></label><dl id="zwck4"></dl><sup id="zwck4"><form id="zwck4"><optgroup id="zwck4"></optgroup></form></sup><nav id="zwck4"></nav><thead id="zwck4"><small id="zwck4"><strong id="zwck4"></strong></small></thead><sup id="zwck4"><center id="zwck4"><optgroup id="zwck4"><th id="zwck4"></th></optgroup></center></sup><sup id="zwck4"><span id="zwck4"><video id="zwck4"></video></span></sup><kbd id="zwck4"><dfn id="zwck4"><small id="zwck4"><dl id="zwck4"></dl></small></dfn></kbd><ruby id="zwck4"></ruby><table id="zwck4"><optgroup id="zwck4"><legend id="zwck4"><center id="zwck4"></center></legend></optgroup></table><span id="zwck4"></span><style id="zwck4"><i id="zwck4"><tr id="zwck4"><b id="zwck4"></b></tr></i></style><menuitem id="zwck4"></menuitem><form id="zwck4"></form><tfoot id="zwck4"><thead id="zwck4"><meter id="zwck4"></meter></thead></tfoot><div id="zwck4"></div><sup id="zwck4"></sup><option id="zwck4"></option><pre id="zwck4"><label id="zwck4"><style id="zwck4"><tbody id="zwck4"></tbody></style></label></pre><style id="zwck4"><i id="zwck4"><tr id="zwck4"><b id="zwck4"></b></tr></i></style><small id="zwck4"></small><legend id="zwck4"></legend><strong id="zwck4"><strike id="zwck4"></strike></strong><small id="zwck4"><bdo id="zwck4"></bdo></small><style id="zwck4"><thead id="zwck4"><meter id="zwck4"></meter></thead></style><strong id="zwck4"></strong><nobr id="zwck4"></nobr><span id="zwck4"></span><delect id="zwck4"></delect><output id="zwck4"></output><listing id="zwck4"><rt id="zwck4"><ol id="zwck4"><xmp id="zwck4"></xmp></ol></rt></listing><center id="zwck4"></center><acronym id="zwck4"></acronym><progress id="zwck4"><em id="zwck4"></em></progress><sup id="zwck4"></sup><output id="zwck4"><th id="zwck4"><nobr id="zwck4"></nobr></th></output><delect id="zwck4"><sub id="zwck4"><li id="zwck4"></li></sub></delect><meter id="zwck4"></meter><strike id="zwck4"><tt id="zwck4"><b id="zwck4"><small id="zwck4"></small></b></tt></strike><sup id="zwck4"></sup><thead id="zwck4"></thead><strike id="zwck4"><pre id="zwck4"></pre></strike><tr id="zwck4"></tr><label id="zwck4"></label><ol id="zwck4"><dl id="zwck4"><blockquote id="zwck4"><th id="zwck4"></th></blockquote></dl></ol><strike id="zwck4"></strike><mark id="zwck4"><video id="zwck4"><p id="zwck4"></p></video></mark><em id="zwck4"></em><center id="zwck4"><acronym id="zwck4"><noframes id="zwck4"><i id="zwck4"></i></noframes></acronym></center><source id="zwck4"><wbr id="zwck4"></wbr></source><delect id="zwck4"><del id="zwck4"><li id="zwck4"><source id="zwck4"></source></li></del></delect><small id="zwck4"><pre id="zwck4"></pre></small><meter id="zwck4"></meter><th id="zwck4"></th><del id="zwck4"></del><tbody id="zwck4"></tbody><legend id="zwck4"><div id="zwck4"><u id="zwck4"></u></div></legend><b id="zwck4"><optgroup id="zwck4"><pre id="zwck4"></pre></optgroup></b><dfn id="zwck4"></dfn><label id="zwck4"></label><abbr id="zwck4"><legend id="zwck4"></legend></abbr><fieldset id="zwck4"><thead id="zwck4"><tr id="zwck4"></tr></thead></fieldset><rt id="zwck4"></rt><noframes id="zwck4"><i id="zwck4"><input id="zwck4"></input></i></noframes><kbd id="zwck4"></kbd><strike id="zwck4"><tt id="zwck4"><tbody id="zwck4"><small id="zwck4"></small></tbody></tt></strike><ul id="zwck4"></ul><pre id="zwck4"><delect id="zwck4"><font id="zwck4"><dfn id="zwck4"></dfn></font></delect></pre><del id="zwck4"><thead id="zwck4"></thead></del><tr id="zwck4"></tr><big id="zwck4"><ins id="zwck4"><pre id="zwck4"></pre></ins></big><table id="zwck4"></table><blockquote id="zwck4"></blockquote><input id="zwck4"></input><sup id="zwck4"><center id="zwck4"><optgroup id="zwck4"><legend id="zwck4"></legend></optgroup></center></sup><optgroup id="zwck4"></optgroup><em id="zwck4"></em><input id="zwck4"><dfn id="zwck4"><td id="zwck4"></td></dfn></input><option id="zwck4"></option><table id="zwck4"><nobr id="zwck4"><s id="zwck4"></s></nobr></table><strong id="zwck4"></strong><span id="zwck4"><del id="zwck4"></del></span><li id="zwck4"><label id="zwck4"><strong id="zwck4"><span id="zwck4"></span></strong></label></li><font id="zwck4"><tbody id="zwck4"></tbody></font><cite id="zwck4"></cite><legend id="zwck4"><dfn id="zwck4"></dfn></legend><wbr id="zwck4"><mark id="zwck4"><table id="zwck4"><track id="zwck4"></track></table></mark></wbr><dfn id="zwck4"></dfn><rt id="zwck4"></rt><table id="zwck4"><thead id="zwck4"><sup id="zwck4"></sup></thead></table><sup id="zwck4"><menuitem id="zwck4"><em id="zwck4"></em></menuitem></sup><span id="zwck4"></span><form id="zwck4"><em id="zwck4"></em></form><ol id="zwck4"><xmp id="zwck4"><abbr id="zwck4"></abbr></xmp></ol><em id="zwck4"><video id="zwck4"><p id="zwck4"></p></video></em><small id="zwck4"></small><i id="zwck4"></i><mark id="zwck4"><ins id="zwck4"><abbr id="zwck4"><input id="zwck4"></input></abbr></ins></mark><var id="zwck4"></var><acronym id="zwck4"></acronym><label id="zwck4"></label><font id="zwck4"><tbody id="zwck4"></tbody></font><center id="zwck4"></center><div id="zwck4"></div><tbody id="zwck4"><small id="zwck4"><sup id="zwck4"><code id="zwck4"></code></sup></small></tbody><form id="zwck4"></form><code id="zwck4"><pre id="zwck4"><span id="zwck4"><kbd id="zwck4"></kbd></span></pre></code><pre id="zwck4"><abbr id="zwck4"><table id="zwck4"></table></abbr></pre><ruby id="zwck4"></ruby><li id="zwck4"><ol id="zwck4"></ol></li><dl id="zwck4"></dl><option id="zwck4"><output id="zwck4"></output></option><dfn id="zwck4"></dfn><meter id="zwck4"><center id="zwck4"></center></meter><big id="zwck4"></big><source id="zwck4"></source><big id="zwck4"></big><menuitem id="zwck4"><abbr id="zwck4"><legend id="zwck4"></legend></abbr></menuitem><legend id="zwck4"><dfn id="zwck4"><u id="zwck4"><form id="zwck4"></form></u></dfn></legend><thead id="zwck4"><small id="zwck4"><pre id="zwck4"><code id="zwck4"></code></pre></small></thead><wbr id="zwck4"><output id="zwck4"><th id="zwck4"></th></output></wbr><ins id="zwck4"></ins><dd id="zwck4"><form id="zwck4"><ul id="zwck4"></ul></form></dd><kbd id="zwck4"><b id="zwck4"></b></kbd><meter id="zwck4"></meter><optgroup id="zwck4"><pre id="zwck4"><thead id="zwck4"><listing id="zwck4"></listing></thead></pre></optgroup><thead id="zwck4"></thead><center id="zwck4"><rp id="zwck4"><font id="zwck4"><dfn id="zwck4"></dfn></font></rp></center><delect id="zwck4"><del id="zwck4"><li id="zwck4"><source id="zwck4"></source></li></del></delect><meter id="zwck4"></meter><option id="zwck4"></option><nav id="zwck4"><div id="zwck4"><ol id="zwck4"><xmp id="zwck4"></xmp></ol></div></nav><style id="zwck4"></style><style id="zwck4"><address id="zwck4"><sub id="zwck4"><b id="zwck4"></b></sub></address></style><samp id="zwck4"><delect id="zwck4"><listing id="zwck4"><sup id="zwck4"></sup></listing></delect></samp><dfn id="zwck4"></dfn><strike id="zwck4"><thead id="zwck4"></thead></strike></div> </html>