HTML 自用学习笔记（三）

明芫
251 阅读3分钟

图像标签

  1. <img src="" art=""/>

    属性：

  • ismap 服务器端图像映射（鼠标单击某处，浏览器会把单击位置(x，y)发送到服务器，只有当 <img /> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许 ismap 属性。）
<a href="">
  <img src="" ismap />
</a>
  • longdesc 指向一个包含图像描述信息的页面 与art类似
  • usemap 与<map></map>的id关联
  1. <map></map> 定义一个客户端图像映射
  2. <area /> 可点击区域的图像映射,嵌套在 <map>
  <img src="" usemap="#planetmap" />
  <map name="planetmap" id="planetmap">
      <area shape="circle" coords="100,100,50" href="" alt="Venus" />
  </map>
  1. <canvas></canvas> 图形容器,画布
  2. <figure></figure> 作文档中插图的图像
  3. <figcaption></figcaption> 标签定义<figure></figure>元素的标题,
     <p>一段文章内容.</p>
    <figure>
      <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b3c0ee9b2674647883e88b5ca411999~tplv-k3u1fbpfcp-zoom-1.image" width="304" height="228">
      <figcaption>粉色图片</figcaption>
    </figure>

一段文章内容.

粉色图片

音频/视频

  1. <audio></audio> 定义声音 属性：
  • autoplay="autoplay" 加载完自动播放
  • controls="controls" 浏览器默认控件
  • loop="loop" 结束之后从头播放
  • muted 默认静音
  • preload="auto" 页面加载载入音频
  1. <source /> 定义媒介源，规定可替换的视频/音频文件
<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
</audio>
  1. <track /> 媒体播放器中的文本轨道（字幕） kind：文本类型
  • captions 显示的简短说明
  • chapters 章节，导航媒介资源
  • descriptions 内容不可播放或不可见时
  • metadata 脚本使用的内容
  • subtitles 视频中显示字幕 srclang：当设置了kind="subtitles"，必须设置srclang
<video width="320" height="240" controls="controls">
  <source src="" type="video/mp4" />
  <track kind="subtitles" src="" srclang="zh" label="Chinese">
</video>
  1. <video></video> 定义视频
  • autoplay="autoplay" 加载完自动播放
  • controls="controls" 浏览器默认控件
  • loop="loop" 结束之后从头播放
  • muted 默认静音
  • preload="auto" 页面加载载入

链接标签

  1. <a></a> 超链接 属性：
  • download 被下载的超链接目标
  • hreflang="" 表示链接打开的是什么语言
  • target="view_window" 单独的窗口
    target="_blank" 在新窗口中打开被链接文档
    target="_self" 在相同的框架中打开被链接文档。
  1. <link /> 定义文档与外部资源的关系
  2. <nav></nav> 定义导航链接
<nav>
<a href="">Home</a> |
<a href="">Previous</a> |
<a href="">Next</a> |
</nav>
Home | Previous | Next |

列表标签

  1. <ol></ol> 有序列表
<ol>
  <li>Coffee</li>
  <li>Tea</li>
</ol>
  1. Coffee
  2. Tea
  3. Milk
  1. <ul></ul> 无序列表
<ul>
  <li>Coffee</li>
  <li>Tea</li>
</ul>
  • Coffee
  • Tea
  • Milk
  1. <li></li> 列表项目
  2. <dl></dl> 列表
  3. <dt></dt> 列表项目
  4. <dd></dd> 列表项目描述
<dl>
  <dt>计算机</dt>
   <dd>用来计算的仪器1</dd>
   <dd>用来计算的仪器2</dd>
</dl>
计算机
用来计算的仪器1
用来计算的仪器2

表格

  1. <table></table> 定义表格
  2. <caption></caption>定义表格标题
  3. <th></th> 定义表格表头单元格
  4. <tr></tr> 定义表格行
  5. <td></td> 定义表格单元格 属性：
  • colspan="number" 跨单元格数
  • rowspan="number" 横跨的行数
  • valign="top" 单元格内容的垂直排列方式（top middle bottom baseline）
  1. <thead></thead> 定义表格头
  2. <tbody></tbody> 定义表格体
  3. <tfoot></tfoot> 定义表格脚注
  4. <col /> 一个或多个列的属性值
  5. <colgroup></colgroup> 表格中供格式化的列组
     <table border="1" style="height:200px">
        <caption>我的标题</caption>
        <colgroup>
            <col span="1" style="background-color:pink" />
            <col span="1" style="background-color:yellow" />
        </colgroup>
        <thead>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td valign="top">January</td>
                <td valign="bottom">$100</td>
            </tr>
            <tr>
                <td valign="top">February</td>
                <td valign="bottom">$80</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">Sum $180</td>
            </tr>
        </tfoot>
    </table>

image.png

样式和语义标签

  1. <style></style> 文档的样式信息
  2. <div></div> 文档中的节
  3. <span></span> 文档中的节(行内元素)
  4. <header></header> 定义 section 或 page 的页眉
  5. <footer></footer> 定义 section 或 page 的页脚
  6. <main></main> 文档的主要内容
  7. <section></section> 定义 section
  8. <article></article> 定义文章,规定独立的自包含内容
  9. <aside></aside> 定义页面内容之外文章,可用作文章的侧栏
  10. <details></details> 元素的细节
  11. <dialog></dialog> 对话框或窗口
  12. <summary></summary> 为 <details> 元素定义可见的标题
  13. <data></data> 添加给定内容的机器可读翻译
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
    
    <div style="border: 1px solid black;width: 200px; height:200px;">
        <header style="background:green;width: 200px; height:20px">
            <span>我是span</span>
        </header>
        <main style="height: 160px;width: 200px;">
            <aside style="width: 30px;height: 160px;float: left;background-color:pink">侧边</aside>
            <article>
                <p>article</p>
                <details>
                    <summary>查看细节</summary>
                    <p>details,summary</p>
                </details>
                <dialog open>这是打开的对话窗口</dialog>
            </article>

        </main>
        <footer style="background:yellow;width: 200px; height:20px;">
            footer
        </footer>
    </div>

image.png

image.png

元信息标签

  1. <head></head> 关于文档的信息
  2. <meta /> HTML 文档的元信息
  3. <base></base> 页面中所有链接的默认地址或默认目标

编程

  1. <script></script> 客户端脚本
  2. <noscript></noscript> 脚本未被执行时的替代内容
<noscript>Your browser does not support VBScript!</noscript>
avatar
文章
阅读
粉丝