1, Tag:
<style>: 样式定义 <link>: 资源引用
2. Attribute:
rel="stylesheet": 外部样式表 type="text/css": 引入文档的类型 margin-left:边距
3. Drei Methoden zum Einfügen von Stylesheets
Externe Stylesheets:
<link rel="stylesheet" type="text/css" href="mystyle.css">
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>
MyStyle-CSS-Code:
h1{ color: red; }
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>
<!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>
<p style="color:red">
<!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>
1. Verbindungsdaten:
TextverbindungVerbindung
2. Attribut: href-Attribut: Ich möchte nur einen Link zu einem anderen Dokument
Namensattribut: Erstellen Sie einen Link innerhalb des Dokuments
3.
img-TagAttribut:
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
连接 点击我进入南心芭比的博客 <!--name属性-->
hello 跳转到hello
Tabellen werden durch das 示例代码: 练习: 1. 没有边框的表格: 2. 表格中的表头: 3. 空单元格: 4. 带有标题的表格 5. 表格内的标签 6. 单元格边距 7. 单元格间距 8. 表格内的背景颜色和图像 9. 单元格内容排列 10. 跨行和跨列单元格 以上例子阅读者可复制到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!-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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
Tabelle zum Einfügen von Wörtern
Tabellendurchschnitt
Über Seiten verteilte Worttabelle
Löschen Sie redundante Tabellen in der Tabelle
Apple Pay kann keine Karte hinzufügen
Die Webseite kann nicht geöffnet werden
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
So lösen Sie das Problem, dass Dateien auf dem Computer nicht gelöscht werden