样式、链接、表格

最新推荐文章于 2023-03-27 13:08:55 发布

封遥七

最新推荐文章于 2023-03-27 13:08:55 发布

阅读量112

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_43791925/article/details/90728419

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、样式

标签

<link> 资源引用

引入方法

外部样式表（就是从外部引入，相当于新建一个文件B，然后引入到当前文件A里，从而给A穿上衣服）

示例：<link rel="stylesheet"type="text/css"href="mystyle.css">

rel="stylesheet" 外部样式表

type="text/css" 引入文档类型，斜杠后面的css，是真的建立了一个css文件，html相当于裸体，css相当于衣服

内部样式表（直接在A文件中给A穿衣服，在head头文件中填写）

示例：<style type="text/css">
      p{
      color: darkturquoise;
      }
     </style>

内联样式（跟上一个差不多，在body身体中填写）

示例：<a href="初学.html" style="color: darkred">(～￣▽￣)～</a>

2、链接

  <a href="初学.html" style="color: darkred"name="tips">(～￣▽￣)～</a> <!--让文字成为链接按钮-->
  <a href="初学.html">
    <img src="图片/狙击枪.PNG" height="100" width="100"alt="(～￣▽￣)～">
  </a>
<!--让图片成为链接按钮,后面alt="(～￣▽￣)～"的作用是，就算图加载不出来，有名称提示这是个什么图-->
  <a href="#tips">回到顶端</a> <!--这个和前方 name=“tips”配套使用-->

3、表格

表格示例：

<body>
<table border="5">  <!--table定义表格,border定义边框粗细-->
  <caption>成绩表</caption> <!--给表格添加标题-->
  <tr>
    <th>微积分</th>  <!--添加表头-->
    <th>概率论</th>
    <th>线代</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>

在表格中增加列表

<table border="1">  <!--table定义表格,border定义边框粗细-->
  <tr>  <!--第一行-->
    <td>单元格1</td>   <!--第一个单元格-->
    <td>单元格2</td>   <!--第二个单元格-->
    <td>单元格3</td>   <!--第三个单元格-->
  </tr>
  <tr>   <!--第二行-->
    <td>
      <ul>  <!--定义列表-->
        <li>语文</li>  <!--列表里的每一条-->
        <li>数学</li>
        <li>英语</li>
      </ul>
    </td>
    <td>我爱学习</td>
    <td>学习使我快乐</td>
  </tr>
</table>

单元格边距（表格大小）

<table border="1">  <!--table定义表格,border定义边框粗细-->
  <tr>
    <td>单元1</td>
    <td>单元1</td>
    <td>单元1</td>
  </tr>
  <tr>
    <td>单元1</td>
    <td>单元1</td>
    <td>单元1</td>
  </tr>
</table>

<br/>

<table border="1" cellpadding="20">  <!--table定义表格,border定义边框粗细,cellpadding定义表格边距-->
  <tr>
    <td>单元1</td>
    <td>单元1</td>
    <td>单元1</td>
  </tr>
  <tr>
    <td>单元1</td>
    <td>单元1</td>
    <td>单元1</td>
  </tr>
</table>

单元格间距（单元格和单元格之间的间距）

就是把上面的cellpadding改成

cellspacing

<table border="1" bgcolor="#7fffd4">  <!--bgcolor给表格添加背景颜色-->

<table border="1" background="狙击枪.PNG">  <!--background给表格添加背景图片-->

封遥七

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
样式、链接、表格

1、样式标签<style> 样式定义<link> 资源引用引入方法外部样式表（就是从外部引入，相当于新建一个文件B，然后引入到当前文件A里，从而给A穿上衣服）示例：<link rel="stylesheet"type="text/css"href="mystyle.css"> rel="stylesheet" 外部样式表...
复制链接

扫一扫

专栏目录