内联元素

<a href="https://www.baidu.com" target="_blank">链接</a>

<img src="https://yuhuo520.gitee.io/vuepress/img/favicon.jpg" alt="图片" usemap="#myMap">

<!-- 根据屏幕像素密度决定图片路径 -->
<img srcset="foo-320w.jpg,
             foo-480w.jpg 1.5x,
             foo-640w.jpg 2x"
     src="foo-640w.jpg">

<!-- 根据屏幕宽度决定图片宽度，根据图片宽度决定图片路径 -->
<img
     srcset="example-320w.jpg 320w, 
             example-480w.jpg 480w, 
             example-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="example-800w.jpg"
/>

<map name="myMap">
	<area shape="rect" coords="10,10,40,40" href="https://www.baidu.com" target ="_blank" />
</map>

<img src="./demo.jpg" usemap="#myMap"/>
<map name="myMap">
    <!-- 矩形区域，coords="x1, y1, x2, y2"，即对角坐标 -->
    <area shape="rect" coords="100,100,200,200" href="./1.html"/>
    <!-- 圆形区域，coords="x, y, r"，即圆心坐标和半径 -->
	<area shape="circle" coords="150,150,50" href="./2.html"/>
    <!-- 多边形区域，coords="x1, y1, x2, y2, x3, y3"，即每个顶点坐标 -->
	<area shape="poly" coords="100,100,200,200,100,200" href="./3.html"/>
<map>

<label for="myInput">标签</label>

<input type="text" placeholder="输入框" id="myInput" list="fruitList"/>

<textarea>文本域</textarea>

<select>
    <option>米饭</option>
    <option>零食</option>
    <optgroup label="水果" disabled>
        <option>苹果</option>
        <option>香蕉</option>
    </optgroup>
    <optgroup label="蔬菜">
        <option>菠菜</option>
        <option>白菜</option>
    </optgroup>
</select>

<button>按钮</button>

<iframe src="https://www.runoob.com"></iframe>

<!-- 一种播放格式 -->
<video src="https://tinify.com/static/videos/tinifycdn.mp4" width="400px" controls>
    <!-- 指定字幕 -->
   	<track label="中文" kind="subtitles" src="subtitles_cn.vtt" srclang="cn" default>
    <track label="英文" kind="captions" src="subtitles_en.vtt" srclang="en">
</video>
<!-- 多种播放格式（浏览器遇到支持的格式，就会忽略后面的格式） -->
<video>
    <source src="https://tinify.com/static/videos/tinifycdn.mp4">
    <source src="https://tinify.com/static/videos/tinifycdn.mov">
</video>

<!-- 一种播放格式 -->
<audio src="https://yuhuo520.gitee.io/practice/static/audio/ringing.mp3"></audio>
<!-- 多种播放格式（浏览器遇到支持的格式，就会忽略后面的格式） -->
<audio>
    <source src="https://yuhuo520.gitee.io/practice/static/audio/ringing.mp3">
    <source src="https://yuhuo520.gitee.io/practice/static/audio/ringing.ogg">
</audio>

<object width="100" data="https://yuhuo520.gitee.io/practice/static/svg/firefox.svg">
    <param name="参数名" value="参数值">
</object>

<embed width="100" src="https://yuhuo520.gitee.io/practice/static/svg/firefox.svg" />

<!-- 根据屏幕尺寸和像素密度决定图片路径 -->
<picture>
  <source srcset="homepage-person@desktop.png,
                  homepage-person@desktop-2x.png 2x"
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png,
                  homepage-person@tablet-2x.png 2x"
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png,
               homepage-person@mobile-2x.png 2x"
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

<!-- 图像格式的兼容选择 -->
<picture>
  <!-- 设置type属性，浏览器不用请求对应文件便知是否支持该格式，节省请求 -->
  <source type="image/svg+xml" srcset="logo.xml">
  <source type="image/webp" srcset="logo.webp"> 
  <img src="logo.png">
</picture>

<span>普通文本</span>

<datalist id="fruitList">
    <option value="apple">苹果</option>
    <option value="banana"></option>
    <option>芒果</option>
</datalist>

<b>加粗</b>

<strong>加粗</strong>

<em>斜体</em>

<i>斜体</i>

<s>删除线</s>

<del>删除线</del>

<u>下划线</u>

<ins>下划线</ins>

<small>小号字体</small>

<big>大号字体</big>

前端小羊村<sub>下标</sub>

前端小羊村<sup>上标</sup>

换行<br />换行

安全换行<wbr/>建议位置

<var>编程变量</var>

<code>代码片段</code>

<kbd>用户输入</kbd>

<samp>程序输出</samp>

<mark>标记</mark>

<time>时间</time>

<data>数据</data>

<abbr title="完整词语">缩写</abbr>

<dfn>术语</dfn>

<q>引用内容</q>

<cite>引用标题</cite>

<ruby>
    <rb>注</rb>
    <rp>(</rp><rt>zhu</rt><rp>)</rp>
    <rb>音</rb>
    <rp>(</rp><rt>yin</rt><rp>)</rp>
</ruby>

<bdo dir="rtl">一二三<bdi>隔离文字方向</bdi>四五</bdo>