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属性-->로그인 후 복사
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
-
2023-03-15 16:54:01
-
2023-03-15 12:26:02
-
2023-03-14 18:58:01
-
2023-03-14 11:30:01
-
1970-01-01 08:00:00
-
2023-03-16 15:20:01
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
|
|
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
