コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5学習ノート(3) - HTML5のスタイル、接続、テーブルコードを詳しく解説

HTML5学習ノート(3) - HTML5のスタイル、接続、テーブルコードを詳しく解説

黄舟
リリース： 2017-03-16 15:37:20
オリジナル
1576 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル：
HTML5样式，连接，表格
ソース：php.cn
前の記事：HTML5 学習メモ (2) - 要素、属性、書式設定の詳細な紹介 次の記事：HTML5学習メモ(4) - リスト、ブロック、レイアウトのコード例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
DocuSign のシンプルなボタンを使用してアカウントに接続し、トークンを簡単に取得します 私はSDKバージョンを使用しており、ほぼ望むものを手に入れていますが、まだ明確ではありません。フォームなどを使用せずに、ワンクリックでドキュメント アカウントに接続するにはどうすれ...
から 2024-04-04 15:46:02
0
1
396
PHP で深夜を機能させて時間を切り捨てるにはどうすればよいですか? これは時刻を午前 0 時に設定しません。newDateTime('firstdayof-1monthmidnight') は午前 0 時が存在しないかのように動作します。 PHP7...
から 2024-04-03 13:48:12
0
1
332
テーブルに接続してその内容を表示するにはどうすればよいですか? (MySQL と PHP) 2 つの mysql テーブル (製品とカテゴリ) があります。両方のテーブルに模擬データがあります。次に、何らかの方法でカテゴリを製品に添付する必要があります。たとえば、ID 1...
から 2024-04-03 09:55:31
0
1
350
CSS スタイルシートが機能しなくなり、HTML ファイルにリンクしなくなりました。原因は何でしょうか? 多くのフォーラムで答えを探し、約 50 の Google リンクを調べましたが、有効なものが見つかりませんでした。CSS が HTML に表示されません。私のコードは、フレックスボ...
から 2024-04-03 09:49:45
0
1
402
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート