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>