HTML5样式链接表格

2025-03-01 技术教程

HTML样式

1.标签：

<style>样式定义

<link>资源引用

2.属性：

rel = "stylesheet" 外部样式表

type = "text/css"引用文档的类型

margin-left边距

外部样式表：

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

内部样式表：

内联样式表：

<p>

HTML链接

1.链接数据：

文本链接

<ahref="www.baidu.com">百度</a>

图片链接

<ahref="<imgsrc="1.jpg"></a>

2.属性：

href属性：指向另一个文档的链接

name属性：创建文档内的链接

<aname="tips">hello</a><ahref="#tips">跳转到hello</a>//在百度百科里面使用的非常多

3.img标签属性：

alt:替换文本属性（在图片不能正常显示时替换为文本"1.jpg_logo"）

<imgsrc="1.jpg"width="500px"height="500px"alt="1.jpg_logo">

HTML表格

<table>定义表格

<caption>定义表格标题

<th>定义表格表头

<tr>定义表格的行

<td>定义表格的单元

<thead> 定义表格的页眉

<tbody> 定义表格的主体

<tfoot> 定义表格的页脚

<col> 定义表格的列属性

1.表格的表头

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>表格的表头</title></head><body><tableborder="1"><tr><th>单元1</th><th>单元2</th><th>单元3</th></tr><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.没有边框的表格

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>没有边框的表格</title></head><body><table><tr><th>单元1</th><th>单元2</th><th>单元3</th></tr><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.空单元格

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>空单元格</title></head><body><tableborder="1"><tr><th>单元1</th><th>单元2</th><th>单元3</th></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></body></html>

4.带有标题的表格

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>带有标题的表格------加p元素</title></head><body><p>带标题的表格</p><tableborder="1"><tr><th>单元1</th><th>单元2</th><th>单元3</th></tr><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>

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>带有标题的表格------加caption</title></head><body><tableborder="1"><caption>带标题的表格</caption><tr><th>单元1</th><th>单元2</th><th>单元3</th></tr><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>

5.表格的内标签

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>表格的内标签</title></head><body><tableborder="1"><tr><td>表格1</td><td>表格2</td></tr><tr><td><ul><li>苹果</li><li>菠萝</li><li>香蕉</li></ul></td><td>好想吃啊</td></tr></table></body></html>

6.单元格边距（cellpadding）

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>单元格边距</title></head><body><tableborder="1"><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr><tr><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr><br/></table><tableborder="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.单元格间距（cellspacing）

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>单元格间距</title></head><body><tableborder="1"><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr><tr><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr><br/></table><tableborder="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.表格内的背景颜色和图像

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>表格的背景颜色</title></head><body><tableborder="1"bgcolor="aqua"><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>

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>表格的背景图像</title></head><body><tableborder="1"background="1.jpg"cellpadding="100"><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>