个人自学前端4-HTML标签2

目录

文本相关

标签名 描述
<h1> ... <h6> 标题标签
<div> 文档中的节
<span> 文档中的节
<p> 段落
<br> 换行
<hr> 水平线
<b> 粗体文本
<strong> 定义语气更为强烈的强调文本
<i> 斜体文本
<em> 强调文本
<ins> 被插入文本
<u> 下划线文本。不赞成使用。使用样式（style）代替。
<s> 加删除线的文本。不赞成使用。使用 <del> 代替。
<del> 被删除文本
<sub> 下标文本
<sup> 上标文本
<pre> 预格式文本
<code> 计算机代码文本

在文本中插入一些特殊字符像空格等,可以使用字符实体。字符实体查询

“计算机输出”标签

标签名 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。

个人用的少

引用、引用和术语定义

标签名 描述
<abbr> 定义缩写。
<address> 定义地址。通常连同其他信息被包含在 <footer> 元素中。
<bdo> 定义文字方向。rtl 为从右向左输出。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。

列表

标签名 描述
<ul> 无序列表
<ol> 有序列表
<li> 列表项,<ul><ol>列表的子级标签
<dl> 自定义列表
<dt> 自定义列表中项
<dd> 自定义列表项的描述

ol

  • reversed：对列表顺序进行降序。H5新属性，支持浏览器不多。
  • start：有序列表的开始点。不建议使用，但浏览器都支持。
  • type：规定有序列表的项目符号的类型。默认为数字。不建议使用，但浏览器都支持。
<ul>
    <li>red</li>
    <li>blue</li>
    <li>green</li>
</ul>

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

<ol start="1" reversed type="1">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

表格

标签名 描述
<table> 定义一个表格
<caption> 定义表格标题
<thead> 定义表格中的表头内容
<tbody> 定义表格中的主体内容
<tfoot> 定义表格中的表注内容（脚注）
<tr> 定义表格中的行
<th> 定义表格中的表头单元格
<td> 定义表格中的单元

在表格中<thead>和<tfoot>只能有一个但<tbody>可以有多个

<table border="8" cellpadding="10" cellspacing="10" >
    <caption>通讯录</caption>
    <thead>
        <tr abbr="Company" align="center" colspan="1">
            <th>姓名</th>
            <th>职位</th>
            <th>手机</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>班长</td>
            <td>15800099987</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>班长</td>
            <td>15800099987</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>小红</td>
            <td>组长</td>
            <td>075500998877</td>
        </tr>
    </tfoot>
</table>

通常情况下，在写表格时不写<thead>，<tbody>，<tfoot>标签而是直接在<table>中写<tr>,<td>。代码在浏览器中执行时会自动补全<tbody>。

<table>
    <tr>
        <th>姓名</th>
        <th>职位</th>
        <th>手机</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>班长</td>
        <td>15800099987</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>组长</td>
        <td>075500998877</td>
    </tr>
</table>

  • 为表格设置边框：<table border="1"> </table>

  • 合并表格边框

    • <table border="1" cellspacing='0'>

表格中属性除border外其它在H5中都不再支持，要修改表格样式可以使用CSS

  • 合并单元格：通过设置 属性可以合并单元格

    • 属性 描述
      colspan 设置单元格可横跨的列数
      rowspan 设置单元格可横跨的行数

table

  • border :属性规定规定围绕表格的边框的宽度。
  • cellpadding :属性规定单元边沿与其内容之间的空白。
  • cellspacing: 属性规定单元格之间的空间。
  • frame :属性规定外侧边框的哪个部分是可见的。建议使用css。
  • rules ：属性规定内侧边框的哪个部分是可见的。建议使用css。
  • summary ：属性规定表格内容的摘要。没啥用。
  • width ：属性规定表格的宽度。建议使用css。

th，tr，td，thead，tbody，tfoot，col，colgroup

  • abbr ：属性规定表头单元格中内容的缩写版本。
  • align ：属性规定表格的表头单元格中内容的水平对齐方式。默认左对齐。
  • colspan： 属性规定表头单元格可横跨的列数。colspan="0" 指示浏览器横跨到列组的最后一列。
  • rowspan ：属性规定表头单元格可横跨的行数。rowspan="0" 指示浏览器横跨到表格部分的最后一行（thead、tbody 或者 tfoot）。
  • valign：属性规定单元格中内容的垂直排列方式。

链接

  • <a> 定义一个链接

    • 属性 描述
      href 规定链接的目标 URL
      target 规定在何处打开目标 URL。仅在 href 属性存在时使用。常用取值 _blank、_self
      download 规定被下载的超链接目标,该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件。必须在服务器环境中运行。

a链接可以打开一个新的页面也可以跳转到当前页面中的指定位置。

  • <base> 定义页面中所有链接的默认地址或默认目标。
    <head>
    <base href="https://www.timeitself.cn" target="_blank">
</head>
    • target 常用取值
      • _blank 在新窗口中打开被链接文档。
      • _self 默认。在相同的框架中打开被链接文档。

图片

  • <img> 定义图片

    属性 描述
    alt 图片不显示时的替代文本
    src 要显示图片的 URL
    height 以像素为单位的高度或宽度值。以包含元素的百分比计的高度或宽度值。
    width 同上
    ismap 当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。主要用于地图。
    usemap 将图像定义为客户端图像映射。主要用于地图。

    src属性的值可以是本地图片,网络图片,或者是base64格式的文本。

<img src="/i/eg_mouse.jpg" width="128" height="128" />
posted @ 2021-06-24 09:39  暗鸦08  阅读(57)  评论(0)    收藏  举报