HTML5中样式 链接 表格
发布时间：2023-10-28 11:00:55 所属栏目：教程 来源：转载
导读： HTML样式
1.标签：
<style> 样式定义
<link> 资源引用
2.属性：
rel = "stylesheet" 外
1.标签：
<style> 样式定义
<link> 资源引用
2.属性：
rel = "stylesheet" 外
|
HTML样式 1.标签： <style> 样式定义 <link> 资源引用 2.属性： rel = "stylesheet" 外部样式表 type = "text/css" 引用文档的类型 margin-left 边距 外部样式表： <link rel="stylesheet" type="text/css" href="mystyle.css"> 复制代码 内部样式表： <style> body{ background-color:red; } p{ margin-left:20px; } </style> 复制代码 内联样式表： <p > 复制代码 HTML链接 1.链接数据： 文本链接 <a href="www.baidu.com">百度</a> 复制代码 图片链接 <a href=" <img src="1.jpg"> </a> 复制代码 2.属性： href属性：指向另一个文档的链接 name属性：创建文档内的链接 <a name="tips">hello</a> <a href="#tips">跳转到hello</a> //在百度百科里面使用的非常多 复制代码 3.img标签属性： alt:替换文本属性（在图片不能正常显示时替换为文本"1.jpg_logo"） <img src="1.jpg" width="500px" height="500px" alt="1.jpg_logo"> 复制代码 HTML表格 <table> 定义表格 <caption> 定义表格标题 <th> 定义表格表头 <tr> 定义表格的行 <td> 定义表格的单元 <thead> 定义表格的页眉 <tbody> 定义表格的主体 <tfoot> 定义表格的页脚 <col> 定义表格的列属性 1.表格的表头 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格的表头</title> </head> <body> <table border="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.没有边框的表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="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.空单元格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>空单元格</title> </head> <body> <table border="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.带有标题的表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带有标题的表格------加p元素</title> </head> <body> <p>带标题的表格</p> <table border="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> 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带有标题的表格------加caption</title> </head> <body> <table border="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.表格的内标签 <!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>苹果</li> <li>菠萝</li> <li>香蕉</li> </ul> </td> <td> 好想吃啊 </td> </tr> </table> </body> </html> 复制代码 6.单元格边距（cellpadding） <!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><br/> </table> <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.单元格间距（cellspacing） <!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><br/> </table> <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" 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> 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格的背景图像</title> </head> <body> <table border="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> （编辑：航空爱好网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
