HTML5 Study Notes (3) - Detailed explanation of HTML5 styles, connections and table codes-H5 Tutorial-php.cn

#　1, Tag:

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

Copy after login

Attribute:

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

Copy after login

3. Inserting methods of three style sheets

External style sheet:

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

Copy after login

Note : The external style sheet needs to create a css file. Right-click the project directory

New->File and name it: MyStyle.css. The suffix must be specified.

The .html file must be placed in the same directory as the .css.

Code example:

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>

Copy after login

MyStyle.css code:

h1{
    color: red;
}

Copy after login

Multiple attributes can be set within the curly brackets of MyStyle.css.

Internal style sheet:

　<style type="text/css">
　　body {background-color:red}
　　p {nargin-left:20px}
　　</style>

Copy after login

Note: The internal style code needs to be placed in the head tag, and can be set in the style tag Multiple attributes.

Code example:

<!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>

Copy after login

Inline style sheet:

　　<p style="color:red">

Copy after login

Note: Internal styles can also set multiple attributes, multiple attributes within double quotes Separate with semicolon ";"

Code example:

<!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>

Copy after login

HTML connection

1. Connection data:

Text connection

PictureConnection

2. Attribute:

href attribute: Just want another Document connection

Name attribute: Create a connection within the document

img tag attribute:

alt: Replace text attribute, when the image cannot When displayed normally, the text assigned to the alt attribute is displayed

width: width

height: height

Sample code:

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

Copy after login

hello        
 
跳转到hello

Copy after login

HTML table

# Tables are defined by the tag. There are several rows (defined by the tag), and each row is divided into several cells (defined by the

tag). The letters td refer to table data, which is the content of the data cell. Grids can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, etc.

Table 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>

Copy after login

　　练习:

　　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>

Copy after login

　　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>

Copy after login

　　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>

Copy after login

　　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>

Copy after login

　　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>

Copy after login

　　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>

Copy after login

　　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>

Copy after login

　　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>

Copy after login

　　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>

Copy after login

　　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>

Copy after login

　　以上例子阅读者可复制到IntelliJ IDEA中试试.

The above is the detailed content of HTML5 Study Notes (3) - Detailed explanation of HTML5 styles, connections and table codes. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

HTML5样式，连接，表格

source：php.cn

Previous article：HTML5 study notes (2) - detailed introduction to elements, attributes, and formatting Next article：HTML5 study notes (4) - list, block and layout code examples

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn