HTML5-Studiennotizen (4) – Beispiele für Listen-, Block- und Layout-Code-H5-Tutorial-php.cn

HTML-Liste

Listen-Tags

标签	描述
	定义有序列表。
	定义无序列表。
	定义列表项。
<dl>	定义定义列表。
	定义定义项目。
	定义定义的描述。
<dir>	已废弃。使用代替它。
	已废弃。使用代替它。

Häufig verwendete Listen

1. Ungeordnete Liste

verwendet Tags:

Attribute: Scheibe, Kreis, Quadrat

Beispiel:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>聊表</title></head><body>
    <!--无序列表, 列表项为li-->
    <!--disc 实心圆, circle 空心圆, square 实行正方形, 依次更改运行看下--><ul type="disc">
    <li>apple</li>
    <li>orange</li>
    <li>bananer</li>
    <li>Berry</li></ul></body></html>

Nach dem Login kopieren

2. Geordnete Liste

verwendet Tags

Attribute: A, a, I, i, start

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>列表</title></head><body><!--有序列表, 列表项为li--><!--A: 以A,B,C...排序
    a: 以a,b,c...排序
    I: 以I, II, III...排序
    i: 以i,ii,iii...排序
    start: 自己定义排序的第一个--><ol type="i">
    <li>iOS</li>
    <li>Android</li>
    <li>Java</li>
    <li>Swift</li>
    <li>Objective-C</li></ol></body></html>

Nach dem Login kopieren

　3. Verschachtelte Listen (einschließlich geordneter Listenverschachtelung und ungeordneter Listenverschachtelung)

Verwenden Sie Tags

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>列表</title></head><body><!----><ul type="square">
    <li>iOS</li>
        <ul>
            <li>iPhone</li>
            <li>iWatch</li>
            <li>iPod</li>
            <li>iPad</li>
        </ul>
    <li>Android</li>
        <ul>
            <li>Any Call</li>
            <li>Oppo</li>
            <li>Vivio</li>
            <li>Huawei</li>
        </ul>
    <li>Objective-C</li></ul></body></html>

Nach dem Login kopieren

　4. Passen Sie die an Liste

Verwenden Sie die Tags

,

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>自定义列表</title></head><body><!--定义自定义列表--><dl>
    <!--定义自定义项目-->
    <dt>cast:</dt>
    <!--定义自定义描述-->
        <dd>vi. 1投掷扔抛, 2丢弃, 抛弃 3把...投向, 抛射, 4分派..., 扮演角色 5铸造, 浇铸 n. 全体演员</dd>
    <dt>forecast:</dt>
        <dd>v. 预测, 预报, /dd>        <dd>n. 预测, 预报<</dd>
    <dt>insight:</dt>
     <dd>n. 洞察力, 领悟 v. 洞悉, 了解</dd></dl></body></html>

Nach dem Login kopieren

HTML-Block

　1. HTML-Blockelement

Wenn ein Blockelement angezeigt wird, beginnt es normalerweise mit einer neuen Zeile

Zum Beispiel :

2. HTMLInline-Elemente

Inline-Elemente enden normalerweise nicht mit „Neue Zeile beginnt“

Zum Beispiel: , ,

3. HTML

-Element

-Element Element, es ist hauptsächlich ein Container zum Kombinieren von HTML

4. HTML -Element

Das span-Element ist ein Inline-Element und kann als Container für Text

< verwendet werden 🎜> Beispiel: Sie können es einfügen und ausführen, um den Effekt zu sehen (Entwicklungstool IntelliJ IDEA)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>块元素</title>  <style type="text/css"> #wraper p{ color: blueviolet; } #span span{ color: indianred; } </style></head><body><h1>visual:</h1><p>视力的, 视觉的</p> <b>vision:</b><a>1视力, 2眼光,远见, 洞察力 3幻想 4设想, 念头</a> <p id="wraper"> <p>prospective</p> <a>1可能的,有望的 2未来的, 即将发生的</a></p><p id="span"> <p>respective: <span>分别的,</span> 各自的</p></p></body></html>
Nach dem Login kopieren
HTML-Layout
Zwei Methoden werden empfohlen:
1. Verwenden Sie das
-Elementlayout
Beispiel: Tatsächlich ist es nicht erforderlich, p in den CSS-Code einzufügen , und normalerweise ist es nicht erforderlich,

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>p布局</title> <style type="text/css"> body{margin: 0px} p#container{ /*可以充满全屏*/ width: 100%; height: 950px; background-color: darkgray; } p#heading{ width: 100%; height: 10%; background-color: aqua; } p#menu{ width: 30%; height: 80%; background-color: darkorange; float: left; } p#mainbody{ width: 70%; height: 80%; background-color: brown; float: left; } p#footing{ width: 100%; height: 10%; background-color: cornflowerblue; clear: both; } </style></head><body><p id="container"> <p id="heading">头部</p> <p id="menu">内容菜单</p> <p id="mainbody">内容主体</p> <p id="footing">底部</p></p></body></html>
Nach dem Login kopieren
　2 hinzuzufügen. Verwenden Sie das -Elementlayout
Beispiel:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table布局</title></head><body marginheight="0px" marginwidth="0px"> <table width="100%" height="950" style="background-color: darkgray"> <tr> <td colspan="3" width="100%" height="10%" style="background-color: aqua"> 头部 </td> </tr> <tr> <td width="20%" height="80%" style="background-color: cornflowerblue"> <ul> <li>diktatet</li> <li>diktator</li> <li>diktation</li> </ul> </td> <td width="60%" height="80%" style="background-color: cadetblue">中间部分</td> <td width="20%" height="80%" style="background-color: crimson">右菜单</td> </tr> <tr> <td width="100%" height="10%" colspan="3" style="background-color: coral">底部</td> </tr></table></body></html>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonHTML5-Studiennotizen (4) – Beispiele für Listen-, Block- und Layout-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
HTML5，布局，列表

Quelle：php.cn

Vorheriger Artikel：HTML5-Studiennotizen (3) – Detaillierte Erläuterung der HTML5-Stile, Verbindungen und Tabellencodes Nächster Artikel：Ausführliche Erläuterung der HTML5-Vorhersagen, dass es möglich sein wird, lokale Apps zu ersetzen

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Videomaterial zum Aufbau Ihres eigenen PHP-Frameworks von Grund auf

2023-03-15 16:54:01

Beispielanalyse, wie PHPMailer das QQ-Postfach verwendet, um die E-Mail-Versandfunktion abzuschließen

2023-03-15 12:26:02

Einführung in den Empfang von E-Mails in IMAP in PHP

2023-03-14 18:58:01

Beispiel für die schnelle Implementierung der Array-Deduplizierung in PHP

2023-03-14 11:30:01

Zusammenfassung der Verwendung aller Attribute des -Tags in HTML

1970-01-01 08:00:00

Zusammenfassung der PHP-Grundkenntnisse (notwendig für Anfänger zum Einstieg)

2023-03-16 15:20:01

Einführung in die Verwendung von typeof in JavaScript

1970-01-01 08:00:00

Einführung in die Verwendung der Bestätigungsmethode () in JavaScript

1970-01-01 08:00:00

Eine detaillierte Einführung in das HTML5-Platzhalterattribut

1970-01-01 08:00:00

So implementieren Sie Einzelauswahl, Mehrfachauswahl und Rückwärtsauswahl in Formularen in ReactJS

1970-01-01 08:00:00

Aktuelle Ausgaben

Der Container vergrößert seine Breite nicht, wenn das Flexbox-Element im Spaltenmodus umbrochen wird Ich entwickle ein verschachteltes Flexbox-Layout, das wie folgt funktioniert: Die äußerste...

Aus 2023-10-17 22:05:01

0

2

176

Ist es möglich, das bei kleineren Auflösungen angezeigte Layout über MediaQueries zu ändern, ohne das Standardlayout zu ändern? Ich verwende bei der Standardauflösung ein „Rastervorlagenspalten“-Layout, damit die Eleme...

Aus 2023-09-16 14:17:29

0

1

521

Kartenbearbeitung in Echtzeit: Tipps und Methoden zum Erkunden vonseatchart.js Ich versuche, mit Seatchart.js ein Veranstaltungsort-Layout zu entwerfen. Ist eine Live-Be...

Aus 2023-09-16 10:26:07

0

1

218

Mischen Sie das automatische Rasterlayout mit festen Spalten und Spaltenpositionen Ich habe den folgenden HTML-Code mit CSS: grid<divid="grid"><divclass=&...

Aus 2023-09-15 16:01:55

0

1

180

Umbenennung: feste Div-Spalten und verbleibende Breite Ich versuche, ein 5-Spalten-Layout zu erstellen, bei dem alle Spalten die volle Höhe des B...

Aus 2023-09-14 17:17:47

0

1

299

verwandte Themen
Mehr>

Was sind die Produktionsmethoden der HTML5-Animationsproduktion?

Der Unterschied zwischen HTML und HTML5

Was ist C#?

Der Computer friert ein. Der Bildschirm bleibt hängen

Der Programmeingabepunkt konnte in der Dynamic Link Library nicht gefunden werden

Java-Export Excel

ppt Seitenzahl einfügen

Verwendung der Excel-Suchfunktion

Beliebte Empfehlungen

was ist h5

Wie erstelle ich eine H5-Seite, wenn man den Code nicht versteht? Empfohlene H5-Seitenproduktionsplattform

Was sind die neuen Funktionen von HTML5?

Was ist die Produktion von H5-Seiten?

Was ist der Unterschied zwischen h5 und Miniprogramm?

Beliebte Tutorials
Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1403060

php入门教程之一周学会PHP

4230850

JAVA 初级入门视频教程

2418282

小甲鱼零基础入门学习Python视频教程

498144

PHP 零基础入门教程

833967

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1403060 Lernzeiten

JAVA 初级入门视频教程

2418282 Lernzeiten

小甲鱼零基础入门学习Python视频教程

498144 Lernzeiten

Web前端开发极速入门

214170 Lernzeiten

零基础精通 PS 视频教程

858872 Lernzeiten

【web前端】Node.js快速入门

4671 Lernzeiten

国外Web开发全栈课程全集

3620 Lernzeiten

Go语言实战之 GraphQL

3109 Lernzeiten

550W粉丝大佬手把手从零学JavaScript

559 Lernzeiten

python大神Mosh，零基础小白6小时完全入门

16077 Lernzeiten

Neueste Downloads
Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

[表单按钮] jQuery企业留言表单联系代码

[播放器特效] HTML5 MP3音乐盒播放特效

[菜单导航] HTML5炫酷粒子动画导航菜单特效

[表单按钮] jQuery可视化表单拖拽编辑代码

[播放器特效] VUE.JS仿酷狗音乐播放器代码

[html5特效] 经典html5推箱子小游戏

[图片特效] jQuery滚动添加或减少图片特效

[相册特效] CSS3个人相册封面悬停放大特效

[Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen

[Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben

[Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer

[Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens

[Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen

[Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren

[Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen

[Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

[PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)

[PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)

[banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)

[PNG素材] 金色的毕业帽矢量素材(EPS+PNG)

[PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)

[PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)

[banner图] 扁平风格的植树节banner矢量素材(AI+EPS)

[PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

[Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen

[Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben

[Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer

[Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens

[Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen

[Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren

[Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen

[Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

Über uns Haftungsausschluss Sitemap

Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！