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

Heim

Web-Frontend

H5-Tutorial

HTML5-Studiennotizen (4) – Beispiele für Listen-, Block- und Layout-Code

黄舟

Mar 16, 2017 pm 03:41 PM

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Mehr anzeigen

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung
3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben
2 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden
3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt
4 Wochen vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps
4 Wochen vor By DDD

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7653

15

CakePHP-Tutorial

1393

52

Wie lautet das Format des Kontonamens von Steam?

91

11

Win11 -Aktivierungsschlüssel dauerhaft

73

19

NYT Mini Kreuzworträtsel Antworten

37

110

Mehr anzeigen

Related knowledge

Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles

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

Über uns Haftungsausschluss Sitemap

© php.cn All rights reserved