nqkk58 发表于 2024-10-3 11:02:21

把握前端新趋势:HTML5 新标签全解析


    <h1 style="color: black; text-align: left; margin-bottom: 10px;">HTML5 新标签</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/sz_mmbiz_png/ygdXubopVYD4gaPRyGA8uDmf5MaFV1kfDXibzuVCiaYK7NKkgdibAebQGXNvpw3Wn4l1NLaPaVuiaGATZSpmTk0NIQ/640?wx_fmt=png&amp;from=appmsg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1. 语义化标签</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这些标签<span style="color: black;">帮忙</span>更好地定义网页的结构,<span style="color: black;">加强</span>网页的可读性和可<span style="color: black;">拜访</span>性:</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;header&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:<span style="color: black;">一般</span><span style="color: black;">安置</span>在页面的顶部,<span style="color: black;">包括</span>网站的标题和导航链接。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;role:定义该元素的角色(例如,banner)。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">header</span></span><span style="color: black;"><span style="color: black;">role</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"banner"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">h1</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">我的网站</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">h1</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">nav</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">ul</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;"><span style="color: black;">href</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"#home"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">首页</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;"><span style="color: black;">href</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"#about"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">关于</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">ul</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">nav</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">header</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;main&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:<span style="color: black;">做为</span>页面的<span style="color: black;">重点</span>内容容器,排除其他部分。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;role:定义该元素的角色(例如,main)。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">main</span></span><span style="color: black;"><span style="color: black;">role</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"main"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">h1</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">重点</span>内容</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">h1</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">这儿</span>是网站的<span style="color: black;">重点</span>内容部分。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">main</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;footer&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:定义页面或部分的底部内容。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;role:定义该元素的角色(例如,contentinfo)。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">footer</span></span><span style="color: black;"><span style="color: black;">role</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"contentinfo"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">©&nbsp;2024&nbsp;我的<span style="color: black;">机构</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">footer</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;nav&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:用于定义网站的导航部分,<span style="color: black;">包括</span>导航链接。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;role:定义该元素的角色(例如,navigation)。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">nav</span></span><span style="color: black;"><span style="color: black;">role</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"navigation"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">ul</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;"><span style="color: black;">href</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"#home"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">首页</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;"><span style="color: black;">href</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"#services"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">服务</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">ul</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">nav</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;section&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:用来划分页面中的<span style="color: black;">区别</span>内容块,<span style="color: black;">一般</span>带有标题。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;id:为该部分定义<span style="color: black;">独一</span>标识符。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">section</span></span><span style="color: black;"><span style="color: black;">id</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"about"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">h2</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">关于<span style="color: black;">咱们</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">h2</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">这是关于<span style="color: black;">咱们</span><span style="color: black;">机构</span>的描述。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">section</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;article&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:<span style="color: black;">暗示</span>独立的内容,如<span style="color: black;">文案</span>或博客。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;lang:定义内容的语言。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">article</span></span><span style="color: black;"><span style="color: black;">lang</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"zh"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">h2</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">一篇有趣的<span style="color: black;">文案</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">h2</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">这是<span style="color: black;">文案</span>的内容。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">article</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;aside&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:用于侧边栏或附加信息。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;role:定义该元素的角色(例如,complementary)。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">aside</span></span><span style="color: black;"><span style="color: black;">role</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"complementary"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">h2</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">关联</span>信息</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">h2</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">有些</span>额外的内容。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">aside</span></span><span style="color: black;">&gt;</span></span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 多<span style="color: black;">媒介</span>标签</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML5 <span style="color: black;">增多</span>了对音频和视频的原生支持:</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;audio&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:嵌入音频文件。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;src:音频文件的 URL。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;controls:<span style="color: black;">表示</span>播放控件。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">audio</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"audio.mp3"</span></span><span style="color: black;"><span style="color: black;">controls</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">您的浏览器不支持音频元素。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">audio</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;video&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:嵌入视频文件。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;src:视频文件的 URL。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;controls:<span style="color: black;">表示</span>播放控件。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;width、height:定义视频的宽度和高度。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">video</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video.mp4"</span></span><span style="color: black;"><span style="color: black;">controls</span></span><span style="color: black;"><span style="color: black;">width</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"600"</span></span><span style="color: black;"><span style="color: black;">height</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"400"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">&nbsp;&nbsp;您的浏览器不支持视频元素。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">video</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;source&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:为音频或视频元素<span style="color: black;">供给</span>多个文件<span style="color: black;">源自</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;src:<span style="color: black;">媒介</span>文件的 URL。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;type:<span style="color: black;">媒介</span>文件的 MIME 类型。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">video</span></span><span style="color: black;"><span style="color: black;">controls</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">source</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video.webm"</span></span><span style="color: black;"><span style="color: black;">type</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video/webm"</span></span><span style="color: black;">/&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">source</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video.mp4"</span></span><span style="color: black;"><span style="color: black;">type</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video/mp4"</span></span><span style="color: black;">/&gt;</span></span><span style="color: black;">&nbsp;&nbsp;您的浏览器不支持视频元素。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">video</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;track&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:为视频或音频元素添加字幕或文本轨道。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;kind:定义轨道类型(如&nbsp;subtitles、captions)。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;src:轨道文件的 URL。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">video</span></span><span style="color: black;"><span style="color: black;">controls</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">source</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video.mp4"</span></span><span style="color: black;"><span style="color: black;">type</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video/mp4"</span></span><span style="color: black;">/&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">track</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"subtitles_en.vtt"</span></span><span style="color: black;"><span style="color: black;">kind</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"subtitles"</span></span><span style="color: black;"><span style="color: black;">srclang</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"en"</span></span><span style="color: black;"><span style="color: black;">label</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"English"</span></span><span style="color: black;">/&gt;</span></span><span style="color: black;">&nbsp;&nbsp;您的浏览器不支持视频元素。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">video</span></span><span style="color: black;">&gt;</span></span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">3. 表单<span style="color: black;">关联</span>标签</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML5 <span style="color: black;">加强</span>了表单的功能,引入了多个新元素和属性:</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;datalist&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:<span style="color: black;">供给</span>预定义的选项供用户<span style="color: black;">选取</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;id:为&lt;input&gt;元素<span style="color: black;">供给</span>的选项列表标识符。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">input</span></span><span style="color: black;"><span style="color: black;">list</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"browsers"</span></span><span style="color: black;"><span style="color: black;">name</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"browser"</span></span><span style="color: black;"><span style="color: black;">id</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"browser"</span></span><span style="color: black;">/&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">datalist</span></span><span style="color: black;"><span style="color: black;">id</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"browsers"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">option</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"Chrome"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">option</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">option</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"Firefox"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">option</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">option</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"Safari"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">option</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">datalist</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;keygen&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:用于生成公钥的表单字段(已被弃用)。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;output&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:<span style="color: black;">表示</span>计算结果或用户操作的结果。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;for:指定与之<span style="color: black;">相关</span>的输入元素。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">form</span></span><span style="color: black;"><span style="color: black;">oninput</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"</span><span style="color: black;">result</span><span style="color: black;">.</span><span style="color: black;">value</span><span style="color: black;">=</span><span style="color: black;">parseInt</span><span style="color: black;">(</span><span style="color: black;">a</span><span style="color: black;">.</span><span style="color: black;">value</span><span style="color: black;">)+</span><span style="color: black;">parseInt</span><span style="color: black;">(</span><span style="color: black;">b</span><span style="color: black;">.</span><span style="color: black;">value</span><span style="color: black;">)</span><span style="color: black;">"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">input</span></span><span style="color: black;"><span style="color: black;">type</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"range"</span></span><span style="color: black;"><span style="color: black;">id</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"a"</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"50"</span></span><span style="color: black;">/&gt;</span></span><span style="color: black;">+</span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">input</span></span><span style="color: black;"><span style="color: black;">type</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"number"</span></span><span style="color: black;"><span style="color: black;">id</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"b"</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"50"</span></span><span style="color: black;">/&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">output</span></span><span style="color: black;"><span style="color: black;">name</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"result"</span></span><span style="color: black;"><span style="color: black;">for</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"a&nbsp;b"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">100</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">output</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">form</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;progress&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:<span style="color: black;">表示</span>任务进度,<span style="color: black;">暗示</span>任务的进度,<span style="color: black;">一般</span>用于进度条,例如文件上传进度、下载进度等</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;value:当前进度值。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;max:进度的最大值。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">progress</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"70"</span></span><span style="color: black;"><span style="color: black;">max</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"100"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">70%</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">progress</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;meter&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:<span style="color: black;">暗示</span>范围内的度量值,<span style="color: black;">暗示</span>在一个已知范围内的数值,<span style="color: black;">例如</span><span style="color: black;">暗示</span>分数、投票结果、带宽<span style="color: black;">运用</span>量等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;value:当前值。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;min、max:值的范围。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">meter</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"0.6"</span></span><span style="color: black;"><span style="color: black;">min</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"0"</span></span><span style="color: black;"><span style="color: black;">max</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"1"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">60%</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">meter</span></span><span style="color: black;">&gt;</span></span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">4. 图形和脚本标签</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为了支持更现代的网页应用和功能,HTML5 引入了<span style="color: black;">有些</span>绘图和脚本的标签:</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;canvas&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:用于绘制图像和动画,<span style="color: black;">经过</span> JavaScript <span style="color: black;">掌控</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;width:画布的宽度。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;height:画布的高度。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">canvas</span></span><span style="color: black;"><span style="color: black;">id</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"myCanvas"</span></span><span style="color: black;"><span style="color: black;">width</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"200"</span></span><span style="color: black;"><span style="color: black;">height</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"100"</span></span><span style="color: black;"><span style="color: black;">style</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"</span><span style="color: black;">border</span><span style="color: black;">:</span><span style="color: black;">1px</span><span style="color: black;">&nbsp;solid&nbsp;</span><span style="color: black;">#000000;</span><span style="color: black;">"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">canvas</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">script</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;"><span style="color: black;">var</span></span><span style="color: black;">&nbsp;canvas&nbsp;</span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">document</span></span><span style="color: black;">.</span><span style="color: black;"><span style="color: black;">getElementById</span></span><span style="color: black;">(</span><span style="color: black;"><span style="color: black;">"myCanvas"</span></span><span style="color: black;">);</span><span style="color: black;"><span style="color: black;">var</span></span><span style="color: black;">&nbsp;ctx&nbsp;</span><span style="color: black;">=</span><span style="color: black;">&nbsp;canvas</span><span style="color: black;">.</span><span style="color: black;"><span style="color: black;">getContext</span></span><span style="color: black;">(</span><span style="color: black;"><span style="color: black;">"2d"</span></span><span style="color: black;">);</span><span style="color: black;">&nbsp;&nbsp;ctx</span><span style="color: black;">.</span><span style="color: black;"><span style="color: black;">fillStyle</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"#FF0000"</span></span><span style="color: black;">;</span><span style="color: black;">&nbsp;&nbsp;ctx</span><span style="color: black;">.</span><span style="color: black;"><span style="color: black;">fillRect</span></span><span style="color: black;">(</span><span style="color: black;"><span style="color: black;">20</span></span><span style="color: black;">,</span><span style="color: black;"><span style="color: black;">20</span></span><span style="color: black;">,</span><span style="color: black;"><span style="color: black;">150</span></span><span style="color: black;">,</span><span style="color: black;"><span style="color: black;">50</span></span><span style="color: black;">);</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">script</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;svg&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:用于定义矢量图形(Scalable Vector Graphics)。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">svg</span></span><span style="color: black;"><span style="color: black;">width</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"100"</span></span><span style="color: black;"><span style="color: black;">height</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"100"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">circle</span></span><span style="color: black;"><span style="color: black;">cx</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"50"</span></span><span style="color: black;"><span style="color: black;">cy</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"50"</span></span><span style="color: black;"><span style="color: black;">r</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"40"</span></span><span style="color: black;"><span style="color: black;">stroke</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"black"</span></span><span style="color: black;"><span style="color: black;">stroke-width</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"2"</span></span><span style="color: black;"><span style="color: black;">fill</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"red"</span></span><span style="color: black;">/&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">svg</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;mark&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:<span style="color: black;">暗示</span>高亮<span style="color: black;">表示</span>或<span style="color: black;">明显</span>的文本。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">这是<span style="color: black;">有些</span>&nbsp;</span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">mark</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">高亮<span style="color: black;">表示</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">mark</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">&nbsp;的文本。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;time&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:用于<span style="color: black;">暗示</span><span style="color: black;">详细</span>时间或日期。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•&nbsp;datetime:时间的<span style="color: black;">设备</span>可读格式。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">time</span></span><span style="color: black;"><span style="color: black;">datetime</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"2024-09-22"</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">2024年9月22日</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">time</span></span><span style="color: black;">&gt;</span></span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">5. 新功能标签</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;figure&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:<span style="color: black;">暗示</span>独立的图示、照片、代码或其他可自<span style="color: black;">包括</span>的内容。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">figure</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">img</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"image.jpg"</span></span><span style="color: black;"><span style="color: black;">alt</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"示例图像"</span></span><span style="color: black;">/&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">figcaption</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">这是一幅示例图像的说明。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">figcaption</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">figure</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;figcaption&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:为&lt;figure&gt;元素<span style="color: black;">供给</span>图示的标题或说明。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>&nbsp;:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">figure</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">img</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"image.jpg"</span></span><span style="color: black;"><span style="color: black;">alt</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"示例图像"</span></span><span style="color: black;">/&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">figcaption</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">这是一幅示例图像的说明。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">figcaption</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">figure</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;details&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:用于<span style="color: black;">表示</span>或<span style="color: black;">隐匿</span>额外的内容。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">details</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">summary</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">点击查看详情</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">summary</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">这儿</span>是<span style="color: black;">隐匿</span>的<span style="color: black;">仔细</span>内容。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">details</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;summary&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:为&lt;details&gt;元素定义一个可点击的标题。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">details</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">summary</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">更加多</span>信息</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">summary</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">这是<span style="color: black;">有些</span>额外的信息。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">details</span></span><span style="color: black;">&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;embed&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:用于嵌入<span style="color: black;">外边</span>资源,如插件、视频、音频等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">embed</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"external-content.swf"</span></span><span style="color: black;"><span style="color: black;">width</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"300"</span></span><span style="color: black;"><span style="color: black;">height</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"200"</span></span><span style="color: black;">/&gt;</span></span>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">-&nbsp;&lt;wbr&gt;</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>:<span style="color: black;">意见</span>在指定位置进行换行。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>:</p><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span><span style="color: black;">这是一个长单词:supercalifragilisticexpialidocious</span><span style="color: black;"><span style="color: black;">&lt;</span><span style="color: black;"><span style="color: black;">wbr</span></span><span style="color: black;">/&gt;</span></span><span style="color: black;">,<span style="color: black;">这里</span>处<span style="color: black;">意见</span>换行。</span><span style="color: black;"><span style="color: black;">&lt;/</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">&gt;</span></span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这些新标签<span style="color: black;">加强</span>了 HTML5 的语义化功能,使得网页结构更清晰、功能更丰富,<span style="color: black;">亦</span>减少了对额外插件的依赖。</p>




wrjc1hod 发表于 2024-10-7 04:53:53

软文发布平台 http://www.fok120.com/

j8typz 发表于 2024-10-25 12:23:41

哈哈、笑死我了、太搞笑了吧等。
页: [1]
查看完整版本: 把握前端新趋势:HTML5 新标签全解析