HTML5-Studiennotizen (3) – Detaillierte Erläuterung der HTML5-Stile, Verbindungen und Tabellencodes-H5-Tutorial-php.cn

　1, Tag:

<style>: 样式定义
　　<link>: 资源引用

Nach dem Login kopieren

　2. Attribute:

　rel="stylesheet": 外部样式表
　　type="text/css": 引入文档的类型
　　margin-left:边距

Nach dem Login kopieren

　3. Drei Methoden zum Einfügen von Stylesheets

Externe Stylesheets:

　　<link rel="stylesheet" type="text/css" href="mystyle.css">

Nach dem Login kopieren

Hinweis: Das externe Stylesheet muss eine CSS-Datei erstellen. Klicken Sie mit der rechten Maustaste auf das Projektverzeichnis Neu->Datei und benennen Sie es: Das Suffix muss angegeben werden.

.html-Dateien müssen im selben Verzeichnis wie .css abgelegt werden.

Codebeispiel:

HTML-Code:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="MyStyle.css"></head><body>
    <h1>标题h1</h1></body></html>

Nach dem Login kopieren

MyStyle-CSS-Code:

h1{
    color: red;
}

Nach dem Login kopieren

In den geschweiften Klammern von MyStyle.css können mehrere Attribute festgelegt werden:

Hinweis: Interner Style-Code. Er muss im Head-Tag platziert werden. Im Style-Tag können mehrere Attribute festgelegt werden:

　<style type="text/css">
　　body {background-color:red}
　　p {nargin-left:20px}
　　</style>

Nach dem Login kopieren

Inline-Stylesheet:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>样式</title>
    <style type="text/css">
        p {
            color: blueviolet;
        }
    </style></head><body>
    <P>欢迎来到南心芭比的博客:www.cnblogs.com/winsoncheung/</P></body></html>

Nach dem Login kopieren

Hinweis: Interne Stile können auch mehrere Attribute in doppelten Anführungszeichen festlegen.

　　<p style="color:red">

Nach dem Login kopieren

Codebeispiel:

HTML-Verbindung

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>样式</title></head><body>
    <P style="color: burlywood; margin-left: 20px">欢迎来到南心芭比的博客:www.cnblogs.com/winsoncheung/</P>
    </body>
    </html>

Nach dem Login kopieren

　1. Verbindungsdaten:

Textverbindung

Bild

Verbindung

2. Attribut: href-Attribut: Ich möchte nur einen Link zu einem anderen Dokument

Namensattribut: Erstellen Sie einen Link innerhalb des Dokuments

img-Tag

Attribut:

alt: Ersetzen Sie das Textattribut. Wenn das Bild nicht normal angezeigt werden kann, wird der durch das Alt-Attribut zugewiesene Text in der 　

Breite angezeigt

: Breite

Höhe: hoch

Beispielcode:

    
    连接
    
    点击我进入南心芭比的博客
    
        
        
    
    　　<!--name属性-->

Nach dem Login kopieren

hello        
 
跳转到hello

Nach dem Login kopieren

HTML-Tabelle

Tabellen werden durch das

-Tag definiert. Jede Tabelle hat mehrere Zeilen (definiert durch das -Tag). ist in mehrere Zellen unterteilt (definiert durch die

Label-Definition). Der Buchstabe td bezieht sich auf Tabellendaten, d. h. der Inhalt von Datenzellen kann Text, Bilder, Listen, Absätze, horizontale Linien und Tabellen enthalten usw. >　Tabellen-Tag

表格

描述


定义表格

定义表格标题。
		定义表格的表头。

定义表格的行。
		定义表格单元。

定义表格的页眉。

定义表格的主体。

定义表格的页脚。

定义用于表格列的属性。

定义表格列的组。

示例代码:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body>
    <!--定义表格-->
    <table>
        <!--定义表格的行-->
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table></body></html>

Nach dem Login kopieren

　　练习:

　　1. 没有边框的表格:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body>
    <!--定义表格-->
    <table>
        <!--定义表格的行-->
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table></body></html>

Nach dem Login kopieren

　　2. 表格中的表头:　　

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body>
    <!--定义表格-->
    <table border="1">
        <!--定义表头-->
        <th>单元</th>
        <th>单元</th>
        <th>单元</th>
        <!--定义表格的行-->
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table></body></html>

Nach dem Login kopieren

　　3. 空单元格:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body>
    <!--定义表格-->
    <table border="1">
        <!--定义表头-->
        <th>单元</th>
        <th>单元</th>
        <th>单元</th>
        <!--定义表格的行-->
        <tr>
            <!--定义表格的单元-->
            <td></td>
            <td></td>
            <td>单元格3</td>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td></td>
            <td></td>
        </tr>
    </table></body></html>

Nach dem Login kopieren

　　4. 带有标题的表格

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body>
    <p>表格</p>
    <!--定义表格-->
    <table border="1">
        <!--带标题的表格-->
        <caption>重要表格</caption>
        <tr>
        <!--定义表头-->
        <th>单元</th>
        <th>单元</th>
        <th>单元</th>
        </tr>
        <!--定义表格的行-->
        <tr>
            <!--定义表格的单元-->
            <td></td>
            <td></td>
            <td>单元格3</td>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td></td>
            <td></td>
        </tr>
    </table></body></html>

Nach dem Login kopieren

　　5. 表格内的标签

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body><table border="1">
    <tr>
        <td>
            表格1        </td>
        <td>
            表格2        </td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>apple</li>
                <li>bananer</li>
                <li>polo</li>
            </ul>
        </td>
        <td>
            我想吃        </td>
    </tr></table></body></html>

Nach dem Login kopieren

　　6. 单元格边距

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body><table border="1">
    <tr>
        <td>单元1</td>
        <td>单元2 </td>
        <td>单元3</td>
    </tr>
    <tr>
        <td>单元4</td>
        <td>单元5</td>
        <td>单元6</td>
    </tr></table><br/>
    <!--单元格边距--><table border="1" cellpadding="10">
    <tr>
        <td>单元1</td>
        <td>单元2 </td>
        <td>单元3</td>
    </tr>
    <tr>
        <td>单元4</td>
        <td>单元5</td>
        <td>单元6</td>
    </tr></table></body></html>

Nach dem Login kopieren

　　7. 单元格间距

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body><table border="1">
    <tr>
        <td>单元1</td>
        <td>单元2 </td>
        <td>单元3</td>
    </tr>
    <tr>
        <td>单元4</td>
        <td>单元5</td>
        <td>单元6</td>
    </tr></table><br/>
    <!--单元格间距--><table border="1" cellspacing="10">
    <tr>
        <td>单元1</td>
        <td>单元2 </td>
        <td>单元3</td>
    </tr>
    <tr>
        <td>单元4</td>
        <td>单元5</td>
        <td>单元6</td>
    </tr></table></body></html>

Nach dem Login kopieren

　　8. 表格内的背景颜色和图像

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title>
    </head>
    <body>
    <!--表格内的背景图像-->
    <table border="1" backgroud="http://popup.freep.cn/images/freepupload.jpg">
    <tr>
        <td>单元1</td>
        <td>单元2 </td>
        <td>单元3</td>
    </tr>
    <tr>
        <td>单元4</td>
        <td>单元5</td>
        <td>单元6</td>
    </tr></table><br/>
    <!--表格内的背景颜色--><table border="1" bgcolor="#ff7f50">
    <tr>
        <td>单元1</td>
        <td>单元2 </td>
        <td>单元3</td>
    </tr>
    <tr>
        <td>单元4</td>
        <td>单元5</td>
        <td>单元6</td>
    </tr></table></body></html>

Nach dem Login kopieren

　　9. 单元格内容排列

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body><table width="400" border="1">
    <tr>
        <th align="left">消费项目....</th>
        <th align="right">一月</th>
        <th align="right">二月</th>
    </tr>
    <tr>
        <td align="left">衣服</td>
        <td align="right">$241.10</td>
        <td align="right">$50.20</td>
    </tr>
    <tr>
        <td align="left">化妆品</td>
        <td align="right">$30.00</td>
        <td align="right">$44.45</td>
    </tr>
    <tr>
        <td align="left">食物</td>
        <td align="right">$730.40</td>
        <td align="right">$650.00</td>
    </tr>
    <tr>
        <th align="left">总计</th>
        <th align="right">$1001.50</th>
        <th align="right">$744.65</th>
    </tr></table></body></html>

Nach dem Login kopieren

　　10. 跨行和跨列单元格

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body><h4>横跨两列的单元格：</h4><table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr></table><h4>横跨两行的单元格：</h4><table border="1">
    <tr>
        <th>姓名</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th rowspan="2">电话</th>
        <td>555 77 854</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr></table></html>

Nach dem Login kopieren

　　以上例子阅读者可复制到IntelliJ IDEA中试试.

Das obige ist der detaillierte Inhalt vonHTML5-Studiennotizen (3) – Detaillierte Erläuterung der HTML5-Stile, Verbindungen und Tabellencodes. 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 (2) – detaillierte Einführung in Elemente, Attribute und Formatierung Nächster Artikel：HTML5-Studiennotizen (4) – Beispiele für Listen-, Block- und Layout-Code

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

Formatierung der Chat-GPT-Antwort Ich verwende Chat-Gptapi in meiner React-Anwendung. Das Problem, mit dem ich konfrontiert ...

Aus 2023-10-25 14:53:41

241

Wie aktualisiere ich die JSON-Datentypspalte in MySQL 5.7.10? Ich habe vor kurzem angefangen, MySQL5.7.10 zu verwenden, und der native JSON-Datentyp gef...

Aus 2023-10-16 19:03:34

307

Warum sollten wir in Sass-Stylesheets @use zum Importieren von Code verwenden, anstatt @import direkt zu verwenden? Ich implementiere ein Projekt und soweit ich weiß, importiert @use Code nur in das Stylesh...

Aus 2023-09-15 21:45:03

455

Wie kann ich eine Beziehung zu diesen beiden Tabellen hinzufügen, wenn der Primärschlüssel eine ID und ein Präfix enthält? Ich weiß nicht, wie ich diese beiden Tabellen verknüpfen soll. Kann jemand helfen? Ich möc...

Aus 2023-09-15 15:03:48

273

So rufen Sie mit PHP Eingabe-Tags ab, die dem numerischen Eingabetyp aus einem HTML-Formular entsprechen Ich habe ein Formular, das Eingabefelder vom Typ Nummer enthält, von denen jedes eine ents...

Aus 2023-09-14 16:49:06

321

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

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

1403053
php入门教程之一周学会PHP

4230846
JAVA 初级入门视频教程

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

498135
PHP 零基础入门教程

833964

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

Über uns Haftungsausschluss Sitemap: Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

HTML5-Studiennotizen (3) – Detaillierte Erläuterung der HTML5-Stile, Verbindungen und Tabellencodes