HTML-Studiennotizen 2

HTML-Studiennotizen 2

Apr 19, 2018 pm 02:32 PM

html学习笔记

Dieser Artikel stellt HTML-Studiennotizen 2 vor, die einen gewissen Referenzwert haben. Freunde in Not können darauf verweisen

1, Tabelle

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

......Zeilen definieren, ......Spalten definieren

Die Kopfzeile stellt Folgendes dar:

<tr>
<th>heading</th>
</tr>

Wenn Sie eine Leerzeile darstellen möchten, können Sie diese mit einem Leerzeichen-Platzhalter füllen.

2. Liste

Erster Typ: Keine Sequenz Auflistung –

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

oder verwenden Sie

Der zweite Typ: geordnete Liste –

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Oder verwenden Sie

Dritter Typ: Benutzerdefinierte Liste –

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Erklärung:

stellt das Listenelement dar

stellt die Definition des Listenelements dar

Beachten Sie, dass Absätze, Zeilenumbrüche, Bilder, Links, andere Listen usw. innerhalb von Listenelementen verwendet werden können.

3. HTML-Klasse

klassifiziert HTML und kann die Klasse eines Elements sein definiert den CSS-Stil.

Legen Sie den gleichen Stil für die gleiche Klasse fest.

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<p class="cities">
<h2 id="London">London</h2>
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</p> 

</body>
</html>

ist ein Element auf Blockebene, das zum Festlegen derselben Klasse verwendet wird.

<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1 id="My-nbsp-span-nbsp-class-red-Important-span-nbsp-Heading">My <span class="red">Important</span> Heading</h1>

</body>
</html>

4. HTML-Website-Layout

(1) Verwenden Sie

<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>
</head>

mit

( 2) Die von HTML5 bereitgestellten neuen semantischen Elemente

definieren den Header des Dokuments oder Abschnitts

Definieren Sie einen Abschnitt im Dokument

Definieren Sie einen eigenständigen Artikel

Definieren Sie die Fußzeile des Dokuments oder Abschnitts

Definieren Sie zusätzliche Details

Definieren Sie den Titel des Detailelements

5. Frames

Durch die Verwendung von Frames können Sie mehr als eine Seite im selben Browserfenster anzeigen. Jedes HTML-Dokument wird zu einem Frame, und jeder Frame ist unabhängig von anderen Frames.

(1) Frame-Struktur-Tag

Jedes

definiert eine Reihe von Spalten Zeilen und Spalten

Der Wert von Zeilen/Spalten gibt den Bereich des Bildschirms an, der von jeder Zeile oder Spalte eingenommen wird

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

(2) Andere

Im Allgemeinen hat ein Rahmen einen sichtbaren Rand, und der Benutzer kann den Rand ziehen, um seine Größe zu ändern. Wenn Sie dies vermeiden möchten, können Sie noresize="noresize" zu hinzufügen.

Sie können das

-Tag nicht gleichzeitig verwenden. Wenn Sie jedoch ein -Tag hinzufügen, das einen Text enthält, muss der Text innerhalb des -Tags verschachtelt sein. Das Namensankerattribut kann in <pre class='brush:php;toolbar:false;'><html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的浏览器无法处理框架！</body> </noframes> </frameset> </html></pre><p><frame> verwendet werden, um zum angegebenen Abschnitt zu springen. <br></p> <p><br></p> <p><br></p> <p><iframe> Wird zum Anzeigen von Webseiten innerhalb von Webseiten verwendet </iframe></p> <p> Verwendung: <iframe src="%E2%80%9EURL%E2%80%9C" width="„200“" height="„200“" frameborder="„0“"></iframe></p> <p><br></p> <p><br></p> <p>iframe可用作链接的目标（target），该链接的target属性必须引用iframe的name属性。</p><pre class='brush:php;toolbar:false;'><iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p></pre><p><br></p> <p>注意，由于链接的目标匹配iframe的名称，所以链接会在iframe中打开。</p> <p>相关推荐：</p> <p><a href="http://www.php.cn/div-tutorial-393431.html" target="_self">HTML学习笔记一</a></p>

Das obige ist der detaillierte Inhalt vonHTML-Studiennotizen 2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

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

Verwandter Artikel

Was ist der Zweck von HTML -Tags?

Was ist der Zweck von HTML -Tags?Apr 28, 2025 am 12:02 AM

Htmltagsareessentialstruktururingwebpages, Enhancing Accesessibility, SEO und Performance.1) IHREENCLOSEDINANGLEBRAKNETSANDINPAIRSTOCRATEAHIRACHICAL STRUCTURE.2) SemantictagagslikeAndimProveSexperiencaNDSEO.3) KreativetagslikeNeenNexperienceNDSEO.

Was sind selbstklingende Tags? Geben Sie ein Beispiel an.

Was sind selbstklingende Tags? Geben Sie ein Beispiel an.Apr 27, 2025 am 12:04 AM

SelfclosingTagsinhtmlandxmlaretagSthatclosethemselveswithoutneedingaseparateclosingTag, vereinfachte markupstructureAndenhancingCodingffizienz) Sie sindareessentialinxMlForelementsWhoutcontent, sichergestellt wurden

Jenseits von HTML: Wesentliche Technologien für die Webentwicklung

Jenseits von HTML: Wesentliche Technologien für die WebentwicklungApr 26, 2025 am 12:04 AM

Um eine Website mit leistungsstarken Funktionen und guten Benutzererfahrungen zu erstellen, reicht HTML allein nicht aus. Die folgende Technologie ist auch erforderlich: JavaScript verleiht Webseiten dynamisch und interaktiv, und Echtzeitänderungen werden durch den Betrieb von DOM erreicht. CSS ist für den Stil und das Layout der Webseite verantwortlich, um die Ästhetik und die Benutzererfahrung zu verbessern. Moderne Frameworks und Bibliotheken wie React, Vue.js und Angular verbessern die Entwicklungseffizienz und die Struktur der Codeorganisation.

Was sind Boolesche Attribute in HTML? Geben Sie einige Beispiele an.

Was sind Boolesche Attribute in HTML? Geben Sie einige Beispiele an.Apr 25, 2025 am 12:01 AM

Boolesche Attribute sind spezielle Attribute in HTML, die ohne Wert aktiviert werden. 1. Das boolesche Attribut steuert das Verhalten des Elements dadurch, ob es existiert oder nicht, z. B. deaktiviert das Eingabefeld. 2. Das Arbeitsprinzip besteht darin, das Elementverhalten gemäß der Existenz von Attributen zu ändern, wenn sich der Browser analysiert. 3. Die grundlegende Verwendung besteht darin, Attribute direkt hinzuzufügen, und die erweiterte Verwendung kann über JavaScript dynamisch gesteuert werden. 4. Häufige Fehler denken fälschlicherweise, dass Werte festgelegt werden müssen, und die richtige Schreibmethode sollte präzise sein. 5. Die beste Praxis ist es, den Code präzise zu halten und boolesche Eigenschaften vernünftig zu verwenden, um die Leistung und Benutzererfahrung von Webseiten zu optimieren.

Wie können Sie Ihren HTML -Code validieren?

Wie können Sie Ihren HTML -Code validieren?Apr 24, 2025 am 12:04 AM

HTML -Code kann mit Online -Validatoren, integrierten Tools und automatisierten Prozessen sauberer sein. 1) Verwenden Sie W3CmarkupValidationService, um den HTML -Code online zu überprüfen. 2) Installieren und konfigurieren Sie die HTMLHINT-Erweiterung in VisualStudioCode zur Echtzeitüberprüfung. 3) Verwenden Sie HTMLTIDY, um HTML -Dateien im Bauprozess automatisch zu überprüfen und zu reinigen.

HTML vs. CSS und JavaScript: Vergleich von Webtechnologien

HTML vs. CSS und JavaScript: Vergleich von WebtechnologienApr 23, 2025 am 12:05 AM

HTML, CSS und JavaScript sind die Kerntechnologien zum Erstellen moderner Webseiten: 1. HTML Definiert die Webseitenstruktur, 2. CSS ist für das Erscheinen der Webseite verantwortlich.

HTML als Markup -Sprache: seine Funktion und ihren Zweck

HTML als Markup -Sprache: seine Funktion und ihren ZweckApr 22, 2025 am 12:02 AM

Die Funktion von HTML besteht darin, die Struktur und den Inhalt einer Webseite zu definieren, und der Zweck besteht darin, eine standardisierte Möglichkeit zur Anzeige von Informationen bereitzustellen. 1) HTML organisiert verschiedene Teile der Webseite über Tags und Attribute wie Titel und Absätze. 2) Es unterstützt die Trennung von Inhalten und Leistung und verbessert die Wartungseffizienz. 3) HTML ist erweiterbar, sodass benutzerdefinierte Tags SEO verbessern können.

Die Zukunft von HTML, CSS und JavaScript: Webentwicklungstrends

Die Zukunft von HTML, CSS und JavaScript: WebentwicklungstrendsApr 19, 2025 am 12:02 AM

Die zukünftigen Trends von HTML sind Semantik und Webkomponenten, die zukünftigen Trends von CSS sind CSS-in-JS und CssShudini, und die zukünftigen Trends von JavaScript sind WebAssembly und serverlos. 1. HTML -Semantik verbessern die Zugänglichkeits- und SEO -Effekte sowie Webkomponenten die Entwicklungseffizienz, aber der Browserkompatibilität sollte die Aufmerksamkeit geschenkt werden. 2. CSS-in-JS verbessert die Flexibilität des Stilmanagements, kann jedoch die Dateigröße erhöhen. CssShudini ermöglicht den direkten Betrieb des CSS -Renderings. 3.Webassembly optimiert die Browser -Anwendungsleistung, verfügt jedoch über eine steile Lernkurve, und serverloses vereinfacht die Entwicklung, erfordert jedoch eine Optimierung von Kaltstartproblemen.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

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

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Monate vorByDDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vorByDDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

1 Monate vorByDDD

Wie kann ich KB5055523 in Windows 11 nicht installieren?

2 Wochen vorByDDD

Inzoi: Wie man sich für Schule und Universität bewerbt

3 Wochen vorByDDD

Heiße Werkzeuge

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

Heiße Themen

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

7779

15

1644

14

CakePHP-Tutorial

1399

52

Laravel-Tutorial

1296

25

1234

29