HTMLスタイル
1、タグ:
<style>: 样式定义
<link>: 资源引用
ログイン後にコピー
2. 属性:
rel="stylesheet": 外部样式表
type="text/css": 引入文档的类型
margin-left:边距
ログイン後にコピー
3. スタイルシートを挿入する3つの方法
シート:
<link rel="stylesheet" type="text/css" href="mystyle.css">
ログイン後にコピー
注: 外部スタイル シートは、プロジェクト ディレクトリ New->File を作成し、MyStyle.css という名前を付ける必要があります。サフィックス名
を指定する必要があります。ファイルは .css と同じディレクトリに配置する必要があります。
コード例:
HTML コード:
<!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 コード:
h1{
color: red;
}ログイン後にコピー
MyStyle.css の中括弧内に複数の属性を設定できます。内部スタイルシート:
<style type="text/css">
body {background-color:red}
p {nargin-left:20px}
</style>ログイン後にコピー
注意: 内部スタイルのコードはheadタグ内に配置する必要があります。
スタイルタグには複数の属性を設定できます。 コード例:
<!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>ログイン後にコピー
HTML接続
1.接続データ:テキスト接続
画像
接続
2. プロパティ:
href属性: 別のドキュメントへのリンクが欲しいだけ
name属性: ドキュメント内にリンクを作成
3.
imgタグ
属性:
alt: text属性を置き換える、画像は正常に表示できません、alt が表示されます 属性
width: width に割り当てられたテキストはそれぞれ
タグによって定義され、各テーブルには複数の行 ( タグによって定義) が含まれます。各行は複数のセルに分割されます (| タグで定義) 文字 td はテーブル データを指します。つまり、データ セルの内容にはテキスト、画像、リスト、段落、フォームなどが含まれます。水平線、表など 表ラベル。 | 表格 | 描述 |
|---|
| 定义表格 | | 定义表格标题。 | | | 定义表格的表头。 |
|---|
| | 定义表格的行。 | | | 定义表格单元。 | | 定义表格的页眉。 | | | 定义表格的主体。 | | 定义表格的页脚。 | | 定义用于表格列的属性。 | | 定义表格列的组。 |
示例代码: <!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>ログイン後にコピー ログイン後にコピー 练习: 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>ログイン後にコピー ログイン後にコピー 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>ログイン後にコピー 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>ログイン後にコピー 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>ログイン後にコピー 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>ログイン後にコピー 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>ログイン後にコピー 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>ログイン後にコピー 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>ログイン後にコピー 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>ログイン後にコピー 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>ログイン後にコピー 以上例子阅读者可复制到IntelliJ IDEA中试试. 以上がHTML5学習ノート(3) - HTML5のスタイル、接続、テーブルコードを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2023-03-15 16:54:01
-
2023-03-15 12:26:02
-
2023-03-14 18:58:01
-
2023-03-14 11:30:01
-
1970-01-01 08:00:00
-
2023-03-16 15:20:01
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
|
|
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
