【HTML学习】——样式和表格了解一下

HTML样式和表格



【1】HTML样式


【1.1】样式

  • 样式:定义格式、对文档进行格式化
  • 通过<style>标签定义样式
<#HTML样式#>
<html charset="utf-8">
    <head>
        <style type="text/css">
        h1 {color: red;}
        p {color: blue;}
        </style>
    </head>

    <body>
        <h1>header</h1>
        <p>paragraph</p>
    </body>
</html>

在这里插入图片描述


【1.2】外部样式表(全局样式表)

  • 定义全局可用的样式
<#外部样式#>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

(1)rel:告诉浏览器引用的是一个样式表
(2)href:文件地址


【1.3】内部样式表(局部)

  • 单个文件需要特殊的样式时,使用内部样式表
  • <style>标签中使用属性 type
<#内部样式#>
<head>
    <style type="text/css">
    body {background-color: red}
    p {margin-left: 20px}
    </style>
</head>


【1.4】内联样式

  • 针对个别元素,(例如:某个段落、某个元素……)
  • 在标签中通过属性<style>使用
<#内联样式#>
<p style="color: red; margin-left:20px">
This is a paragraph
</p>

(1)margin-left:左边距


【1.5】优先级说明

内联样式 > 内部样式 > 外部样式



【2】HTML表格

  • 表格由<table>标签定义
  • 每个表格有若干——由<tr>标签定义(table row
  • 每行被分割成若干单元格——由<td>标签定义(table data

数据单元格可以包含图片、列表、段落、表单、水平线、表格……

<#表格#>
<html>
    <head>
        <table border="1">
            <tr>
                <td>row1, cell1</td>
                <td>row1, cell2</td>
            </tr>
            <tr>
                <td>row2, cell1</td>
                <td>row2, cell2</td>
            </tr>
        </table>
    </head>
</html>

<border>属性:边框属性,显示表格边框

在这里插入图片描述


【2.1】表格—表头

  • 表格的表头用<th>标签定义(table head)

大多数浏览器会将表头显示为粗体居中的文本

<#表头#>
<html>
    <head>
        <table border="1">
            <tr>
                <th>Heading</th>
                <th>Another Heading</th>
            </tr>
            <tr>
                <td>row1, cell1</td>
                <td>row1, cell2</td>
            </tr>
            <tr>
                <td>row2, cell1</td>
                <td>row2, cell2</td>
            </tr>
        </table>
    </head>
</html>

在这里插入图片描述


【2.2】表格——空单元格

  • 当某个单元格需要无内容时——利用空格
<#空格占位符#>
<html>
    <head>
        <table border="1">
            <tr>
                <th>Heading</th>
                <th>Another Heading</th>
            </tr>
            <tr>
                <td>row1, cell1</td>
                <td>row1, cell2</td>
            </tr>
            <tr>
                <td> </td>
                <td>row2, cell2</td>
            </tr>
        </table>
    </head>
</html>

在这里插入图片描述


【2.3】表格——标题

  • 利用<caption>标签定义表格标题

(1)一个表格只能一个标题
(2)标题会居中显示在表格之上

<#表格标题#>
<html>
    <head>
        <table border="1">
            <caption>我的标题</caption>
            <tr>
                <th>Heading</th>
                <th>Another Heading</th>
            </tr>
            <tr>
                <td>row1, cell1</td>
                <td>row1, cell2</td>
            </tr>
            <tr>
                <td> </td>
                <td>row2, cell2</td>
            </tr>
        </table>
    </head>
</html>

在这里插入图片描述


【2.4】表格——合并单元格

  • colspan属性:横向合并单元格(column span)
  • rowspan属性:纵向合并单元格(row span)

span跨度

【2.4.1】colspan横向合并单元格

<html>
    <head>
        <table border="1">
            <tr align="center">
               <td colspan="2">姓名</td>
            </tr>
            <tr>
               <td>yzy</td>
               <td>tdq</td>
            </tr>
    </head>
</html>

在这里插入图片描述


【2.4.2】rowspan纵向合并单元格

<html>
    <head>
        <table border="1">
            <tr align="center">
               <td rowspan="2">姓名</td>
               <td>yzy</td>
            </tr>
            <tr>
               <td>tdq</td>
            </tr>
    </head>
</html>

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读