지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > HTML5 연구 노트(3) - HTML5 스타일, 연결 및 테이블 코드에 대한 자세한 설명

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

黄舟
풀어 주다： 2017-03-16 15:37:20
원래의
1605명이 탐색했습니다.

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 테이블

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

　표 태그.

表格描述
定义表格
定义表格标题。
定义表格的表头。
定义表格的行。
定义表格单元。
定义表格的页眉。
定义表格的主体。
定义表格的页脚。
定义用于表格列的属性。
定义表格列的组。

示例代码:

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
HTML5样式，连接，表格
원천：php.cn
이전 기사：HTML5 연구 노트(2) - 요소, 속성 및 서식에 대한 자세한 소개 다음 기사：HTML5 연구 노트(4) - 목록, 블록 및 레이아웃 코드 예
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다. 다음과 같은 스키마가 있습니다. "user_id" 및 "username" 속성이 있는 사용자 테이블과 "custome...
에서 2024-04-06 19:39:29
0
1
441
DocuSign의 간단한 버튼으로 계정을 연결하고 쉽게 토큰을 받으세요 SDK 버전을 사용하고 있는데 원하는 것을 거의 얻었지만 아직 명확하지 않습니다. 양식 등을 사용하지 않고 어떻게 단 한 번의 클릭으로 문서 계정을 연결할 수 있...
에서 2024-04-04 15:46:02
0
1
396
시간을 자르기 위해 PHP에서 자정 작업을 수행하는 방법은 무엇입니까? 이는 시간을 자정으로 설정하지 않습니다. newDateTime('firstdayof-1monthmidnight') 은 마치 자정이 존재하지 않는 것처럼 작동합니다...
에서 2024-04-03 13:48:12
0
1
332
테이블에 연결하고 해당 내용을 표시하려면 어떻게 해야 합니까? (MySQL 및 PHP) 두 개의 mysql 테이블(제품 및 카테고리)이 있습니다. 두 테이블 모두에 모의 데이터가 있습니다. 이제 어떻게든 제품에 카테고리를 첨부해야 합니다. 예를 들어...
에서 2024-04-03 09:55:31
0
1
350
내 CSS 스타일시트가 더 이상 작동하지 않거나 HTML 파일에 대한 링크가 작동하지 않습니다. 이유가 무엇일까요? 답변을 찾기 위해 많은 포럼을 검색했고 약 50개의 Google 링크를 살펴봤지만 작동하는 항목을 찾지 못했습니다. 내 CSS가 내 HTML에 표시되지 않습니다....
에서 2024-04-03 09:49:45
0
1
402
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿