您好,登录后才能下订单哦!
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>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。