communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
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

黄舟
Libérer： 2017-03-16 15:37:20
original
1579 Les gens l'ont consulté

Style HTML

　1, balise :

<style>: 样式定义
　　<link>: 资源引用
Copier après la connexion

　2. Attributs :

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

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

Feuilles de style externes : 

　　<link rel="stylesheet" type="text/css" href="mystyle.css">
Copier après la connexion

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>
Copier après la connexion

MyStyle. code css : 

h1{
    color: red;
}
Copier après la connexion

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>
Copier après la connexion
<. 🎜> 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>
Copier après la connexion
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">
Copier après la connexion

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>
Copier après la connexion
　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属性-->
Copier après la connexion
hello        
 
跳转到hello
Copier après la connexion

Les tableaux sont définis par la balise

Chaque tableau comporte plusieurs lignes (définies par la balise ). est divisé en plusieurs cellules (définies par la définition de l'étiquette
). 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
表格描述
定义表格
定义表格标题。
定义表格的表头。
定义表格的行。
定义表格单元。
定义表格的页眉。
定义表格的主体。
定义表格的页脚。
定义用于表格列的属性。
定义表格列的组。

示例代码:

<!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>
Copier après la connexion
Copier après la connexion

　　练习:

　　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>
Copier après la connexion
Copier après la connexion

　　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>
Copier après la connexion

　　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>
Copier après la connexion

　　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>
Copier après la connexion

　　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>
Copier après la connexion

　　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>
Copier après la connexion

　　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>
Copier après la connexion

　　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>
Copier après la connexion

　　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>
Copier après la connexion

　　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>
Copier après la connexion

　　以上例子阅读者可复制到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!

Étiquettes associées：
HTML5样式，连接，表格
source：php.cn
Article précédent：Notes d'étude HTML5 (2) - introduction détaillée aux éléments, attributs et formatage Article suivant：Notes d'étude HTML5 (4) - exemples de codes de liste, de bloc et de mise en page
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Calculer la somme des champs dans une autre table à l'aide d'une requête MySQL SQL J'ai un schéma comme celui-ci : Table utilisateur avec les attributs "user_id" e...
Depuis 2024-04-06 19:39:29
0
1
441
Connectez votre compte et obtenez vos tokens facilement avec le simple bouton de DocuSign J'utilise la version SDK et j'obtiens presque ce que je veux, mais ce n'est pas encore cla...
Depuis 2024-04-04 15:46:02
0
1
396
Comment faire fonctionner minuit en PHP pour tronquer l'heure ? Cela ne définit pas l'heure sur minuit : newDateTime('firstdayof-1monthmidnight') agit com...
Depuis 2024-04-03 13:48:12
0
1
332
Comment puis-je me connecter à une table et afficher son contenu ? (MySQL et PHP) J'ai deux tables MySQL (produit et catégorie). J'ai des données fictives dans les deux tab...
Depuis 2024-04-03 09:55:31
0
1
350
Ma feuille de style CSS ne fonctionne plus/lien vers mon fichier HTML - quelle pourrait en être la raison ? J'ai cherché des réponses sur de nombreux forums et consulté environ 50 liens Google, mais...
Depuis 2024-04-03 09:49:45
0
1
402
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal