HTML القوائم الوصف
قائمة الوصف، الذي يتكون من مجموعة اسم القيمة، وكان يعرف باسم قائمة تعريف قبل HTML5. والمقصود الوصف قوائم لمجموعات من "المصطلحات والتعاريف، والموضوعات البيانات الوصفية والقيم، والأسئلة والأجوبة، أو أي مجموعة أخرى من البيانات اسم القيمة".
وجدت DL في HTML الكلمات، وكانت موحدة في HTML 2.0؛ لا يزال التيار.
مثال على قائمة غير مرتبة وقائمة مرتبة في HTML:
قائمة غير مرتبة:
- بند
- بند
- بند
- بند
قائمة أمر:
- البند الأول
- البند الثاني
- البند الثالث
- البند الرابع
غير مرقمة قوائم HTML
تبدأ قائمة غير مرتبة مع <ul> العلامة. كل عنصر بالقائمة يبدأ مع <li> العلامة.
سوف يتم وضع علامة على عناصر القائمة بوابل من الرصاص (small black circles) :
غير مرقمة قوائم HTML - إن Style السمة
و style يمكن إضافة السمة إلى قائمة غير مرتبة، لتحديد نمط علامة:
| قلم المدقة | وصف |
|---|---|
| list-style-type:disc | سوف يتم وضع علامة على عناصر القائمة بوابل من الرصاص (default) |
| list-style-type:circle | سوف يتم وضع علامة على عناصر القائمة مع الدوائر |
| list-style-type:square | سوف يتم وضع علامة على عناصر القائمة مع مربعات |
| list-style-type:none | لن يتم وضع علامة على عناصر القائمة |
Disc :
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> انها محاولة لنفسك » Circle :
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> انها محاولة لنفسك » Square :
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> انها محاولة لنفسك » None :
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> انها محاولة لنفسك » أمر قوائم HTML
تبدأ قائمة مرتبة مع <ol> العلامة. كل عنصر بالقائمة يبدأ مع <li> العلامة.
سوف يتم وضع علامة على عناصر القائمة مع الأرقام:
قوائم HTML أمر - و Type السمة
A type يمكن إضافة السمة إلى قائمة مرتبة، لتحديد نوع علامة:
| اكتب | وصف |
|---|---|
| type="1" | سوف يتم ترقيم عناصر القائمة مع الأرقام (default) |
| type="A" | سوف يتم ترقيم عناصر القائمة مع الأحرف الكبيرة |
| type="a" | سوف يتم ترقيم عناصر القائمة مع أحرف صغيرة |
| type="I" | سوف يتم ترقيم عناصر القائمة مع الأرقام الرومانية الكبيرة |
| type="i" | سوف يتم ترقيم عناصر القائمة مع الأرقام الرومانية الصغيرة |
أرقام الأحرف الكبيرة الروم:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> انها محاولة لنفسك » الأرقام الرومانية الصغيرة:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> انها محاولة لنفسك » HTML الوصف قوائم
كما يدعم HTML قوائم الوصف.
هي قائمة وصف قائمة المصطلحات، مع وصف كل فصل دراسي.
و <dl> تحدد العلامة قائمة الوصف، و <dt> تحدد العلامة مصطلح (name) ، و <dd> يصف العلامة كل مصطلح:
مثال
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> انها محاولة لنفسك » متداخلة قوائم HTML
قائمة يمكن أن تتداخل (lists inside lists) :
مثال
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul> انها محاولة لنفسك » يمكن أن تحتوي قائمة وحدات جديدة، وعناصر HTML الأخرى، مثل الصور والروابط، الخ
قوائم الأفقي
قوائم HTML يمكن نصب في العديد من الطرق المختلفة مع CSS.
طريقة واحدة الشعبية، هو أسلوب قائمة للظهور أفقيا:
مثال
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html> انها محاولة لنفسك » مع نمط بقليل، يمكنك جعلها تبدو وكأنها قائمة:
مثال
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
} انها محاولة لنفسك » ملخص الفصل
- استخدام HTML <ul> عنصر لتحديد قائمة غير مرتبة
- استخدام HTML style السمة لتحديد نمط التعداد النقطي
- استخدام HTML <ol> عنصر لتحديد قائمة مرتبة
- استخدام HTML type السمة لتحديد نوع الترقيم
- استخدام HTML <li> عنصر لتحديد عنصر قائمة
- استخدام HTML <dl> عنصر لتحديد قائمة وصف
- استخدام HTML <dt> عنصر لتعريف مصطلح وصف
- استخدام HTML <dd> عنصر لتحديد وصف البيانات
- قوائم يمكن أن تتداخل داخل القوائم
- قائمة البنود يمكن أن تحتوي على عناصر HTML أخرى
- استخدام شاشة عرض الممتلكات CSS: مضمنة لعرض قائمة أفقيا
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 » التمرين 6»
HTML قائمة الكلمات
| بطاقة | وصف |
|---|---|
| <ul> | يحدد قائمة غير مرتبة |
| <ol> | يحدد قائمة مرتبة |
| <li> | يحدد عنصر قائمة |
| <dl> | تعرف على قائمة وصف |
| <dt> | يعرف هذا المصطلح في قائمة وصف |
| <dd> | يحدد الوصف في قائمة وصف |