찾다

집 >웹 프론트엔드 >H5 튜토리얼 >HTML5 연구 노트(3) - HTML5 스타일, 연결 및 테이블 코드에 대한 자세한 설명

HTML5 연구 노트(3) - HTML5 스타일, 연결 및 테이블 코드에 대한 자세한 설명

黄舟
黄舟원래의
2017-03-16 15:37:201573검색

HTML 스타일

　1, 태그:

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

2. 속성:

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

3. 세 가지 스타일 시트 삽입 방법

외부 스타일 시트: 

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

참고: 외부 스타일 시트는 CSS 파일을 생성해야 합니다. New->File을 마우스 오른쪽 버튼으로 클릭하고 이름을 MyStyle.css로 지정해야 합니다. >

　.html 파일은 .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

　

height: 높이

샘플 코드: 

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

HTML 테이블

각 테이블은 정의됩니다. f5d188ed2c074f8b944552db028f98a1 태그에 의해 여러 행(a34de1251f0d9fe1e645927f19a896e8 태그로 정의됨)이 있으며, 각 행은 (b6c5a531a458a2e790c1fd6421739d1c 태그로 정의됨) 여러 셀로 나누어집니다. 이는 데이터 셀의 내용입니다. 그리드에는 텍스트, 그림, 목록, 단락, 양식, 가로선, 표 등이 포함될 수 있습니다.

　표 태그.

表格 描述
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中试试.

위 내용은 HTML5 연구 노트(3) - HTML5 스타일, 연결 및 테이블 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5 연구 노트(2) - 요소, 속성 및 서식에 대한 자세한 소개다음 기사：HTML5 연구 노트(2) - 요소, 속성 및 서식에 대한 자세한 소개

관련 기사

더보기