recherche

Maison >interface Web >Tutoriel H5 >Notes d'étude HTML5 (3) - Explication détaillée des styles HTML5, des connexions et des codes de table

Notes d'étude HTML5 (3) - Explication détaillée des styles HTML5, des connexions et des codes de table

黄舟
黄舟original
2017-03-16 15:37:201609parcourir

Style HTML

　1, balise :

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

　2. Attributs :

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

　3. Trois méthodes d'insertion de feuilles de style

Feuilles de style externes : 

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

Remarque : La feuille de style externe doit créer un fichier CSS. Cliquez avec le bouton droit sur le répertoire du projet Nouveau->Fichier et nommez-le : MyStyle.css. doit être précisé.

Les fichiers .html doivent être placés dans le même répertoire que .css.

Exemple de code :

Code 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. code css : 

h1{
    color: red;
}

Plusieurs attributs peuvent être définis entre les accolades de MyStyle.css

Feuille de style interne : 

　<style type="text/css">
　　body {background-color:red}
　　p {nargin-left:20px}
　　</style>
<.> Remarque : code de style interne Il doit être placé dans la balise head. Plusieurs attributs peuvent être définis dans la balise de style

Exemple de code : 

<!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>
Feuille de style en ligne : <.>

Remarque : les styles internes peuvent également définir plusieurs attributs entre guillemets doubles. Ils sont séparés par des points-virgules ";" >
　　<p style="color:red">

Connexion HTML

<!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. Données de connexion :

Connexion texteImage

Connexion

2. Attribut :

Attribut href : Je veux juste un lien vers un autre document

Attribut name : Créer un lien dans le document 3.

balise img

Attribut :

alt : Remplace l'attribut de texte Lorsque l'image ne peut pas être affichée normalement, le texte attribué par l'attribut alt est affiché

　

largeur.

 : Largeur

hauteur

 : haut

Exemple de code :

Tableau HTML

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

Les tableaux sont définis par la balise f5d188ed2c074f8b944552db028f98a1 Chaque tableau comporte plusieurs lignes (définies par la balise a34de1251f0d9fe1e645927f19a896e8). est divisé en plusieurs cellules (définies par la définition de l'étiquette b6c5a531a458a2e790c1fd6421739d1c). La lettre td fait référence aux données du tableau, c'est-à-dire que le contenu des cellules de données peut contenir du texte, des images, des listes, des paragraphes, des lignes horizontales, des tableaux. , etc. >　Balise de table

表格 描述
f5d188ed2c074f8b944552db028f98a1 定义表格
63bd76834ec05ac1f4c0ebbeaafb0994 定义表格标题。
b4d429308760b6c2d20d6300079ed38e 定义表格的表头。
a34de1251f0d9fe1e645927f19a896e8 定义表格的行。
b6c5a531a458a2e790c1fd6421739d1c 定义表格单元。
ae20bdd317918ca68efdc799512a9b39 定义表格的页眉。
92cee25da80fac49f6fb6eec5fd2c22a 定义表格的主体。
06669983c3badb677f993a8c29d18845 定义表格的页脚。
581cdb59a307ca5d1e365becba940e05 定义用于表格列的属性。
879b49175114808d868f5fe5e24c4e0b 定义表格列的组。

示例代码:

<!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中试试.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Notes d'étude HTML5 (2) - introduction détaillée aux éléments, attributs et formatageArticle suivant：Notes d'étude HTML5 (2) - introduction détaillée aux éléments, attributs et formatage

Articles Liés

Voir plus