文本元素学习总结

常用文本元素有:

名称	描述
`<p>`	段落内容
`<pre>`	按源码格式原样显示
`<br>`	源码里的换行（代码里的换行会解析用来空格）
`<span>`	与`<div>`类似,无语义,主要用作内容的样式钩子
`<time>`	描述日期或者时间
`<abbr>`	缩写
`<sub>`	上标
`<sup>`	下标
`<address>`	地址,通常用在`<footer>`中
`<s>/<del>`	删除线, `<s>`无语义
`<code>`	显示代码块,通常与代码格式化插件配合,才能高亮关键字
`<rogress>`	进度条
`<b>/<strong>`	加粗, `<b>`无语义
`<i>/<em>`	斜体, `<i>`无语义
`<mark>`	高亮标记, 默认为内容添加黄色背景
<q>/<blockquote>`	引用, 内容加双引号

链接元素

指向页面的链接：
<a href="url" traget="_self/_black/_top/_parent" title="内容">文本内容</a>

target="__self"是在当前窗口打开链接
target="_blank"是另外打开一个新窗口
target="_parent"是在父窗口打开链接
target="_top" 是在顶层窗口打开链接
target="name"指定名称的窗口，和与<iframe>元素配合
target="#anchor"跳转到设置了锚点的元素所在位置

图片链接：
<img scr="图片地址" alt="图片描述">

发送邮件：

<a href="emilto：192383@qq.com"></a>

意思是打开邮箱给192383@qq.com发送一封邮件；

拨打电话：

<a href="tel:1732016****">电话咨询</a>

点击后会询问是否用手机给这个手机号码拨打电话；

下载文件：

<a href="url" download="名称">点击下载</a>

点击后会自动下载设定地址的文件；

html表格标签属性介绍及合并案例展示

常用标签

序号	标签	描述
1	`<table>`	定义表格
2	`<tbody>`	定义表格主体, 允许定义多次
3	`<tr>`	定义表格中的行
4	`<td>`	定义表格主体与底部的的单元格
5	`<th>`	定义表格头部中的单元格,默认加粗居中
6	`<caption>`	定义表格标题
7	`<thead>`	定义表格头格, 只需定义一次
8	`<tfoot>`	定义表格底, 只需定义一次
9	`<col>`	为一个/多个列设置属性,仅限
10	`<colgroup>`	将多个`<col>`元素分组管理

常用属性

序号	标签	适用元素	描述
1	`border`	`<table>`	添加表格框
2	`cellpadding`	`<table>`	设置单元格内边距
3	`cellspacing`	`<table>`	设置单元格边框间隙
4	`align`	不限	设置单元格内容水平居中
5	`bgcolor`	不限	设置背景色
6	`width`	不限	设置宽度
7	`height`	不限	设置高度

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品表单</title>
  </head>
  <body>
    <table
      border="1"
      width="700"
      cellspacing="0"
      cellpadding="20"
      align="center"
    >
      <caption>
        课程表
      </caption>
      <!-- 一共六行六列 -->
      <thead>
        <tr bgcolor="red">
          <th colspan="2">商品\序号</th>
          <th>数量</th>
          <th>单价(元)</th>
          <th>总额(元)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td bgcolor="orange">手机</td>
          <td>1</td>
          <td>10</td>
          <td>5000</td>
          <td>50000</td>
        </tr>
        </tr>
        <tr>
          <td bgcolor="orange">电脑</td>
          <td>2</td>
          <td >5</td>
          <td>7000</td>
          <td>35000</td>
        </tr>
        <tr>
          <!-- <td>12</td> -->
          <td bgcolor="orange">电视</td>
          <td>3</td>
          <td>20</td>
          <td>4000</td>
          <td>80000</td>
        </tr>
        <tr>
            <td bgcolor="orange">饮水机</td>
            <td>4</td>
            <td>5</td>
            <td>1000</td>
            <td>5000</td>
            >
        </tr>
        <tr>
          <td bgcolor="orange">空调</td>
          <td>5</td>
          <td >2</td>
          <td>15000</td>
          <td>35000</td>
        </tr>
        <tr>
            <td colspan="4" align="right">总计:</td>
            <td>205000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

截图

<td clospan="5">

clospan是用于列之间合并，数字5意思是从当前单元格起向右五个单元格合并；

<td rowspan="5"></td>

rowsapn是用于行之间合并，数字5代表从本单元格起向下5行合并；

文本、链接和表格元素学习总结及实例展示