HTML 标签大全
样式/节
- <style> 文档的样式信息。
- <div> 文档中的节。
- <span> 文档中的节。
- <header> 一个文档头部部分
- <footer> 一个文档底部
- <section> 了文档的某个区域
- <article> 一个文章内容
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码示例</title>
<!-- 定义文档的样式信息。 -->
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<hr>
<!-- 文档中的一个区域将显示为绿色： -->
<div style="color:#00ff22">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
<hr>
<!-- 使用 <span> 元素对文本中的一部分进行着色： -->
<p>我有一条<span style="color:rgb(0, 255, 110)">群子</span> </p>
<hr>
<!-- 定义一个文档头部部分 -->
<article>
<header>
<h1>文档头部部分</h1>
<p><time pubdate datetime="2023-06-15"></time></p>
</header>
<p>这里写文档的内容</p>
</article>
<hr>
<!-- 定义一个文档底部 -->
<footer>
<p>文档底部部分</p>
<p><time pubdate datetime="2023-06-15"></time></p>
</footer>
<hr>
<!-- 文档的某个区域 -->
<section>
<h1>区域标题</h1>
<p>区域段落</p>
</section>
<hr>
<!-- 定义一个文章内容 -->
<article>
<h1>文章标题</h1>
<p> 文章内容内容。</p>
</article>
<hr>
<!-- 定义其所处内容之外的内容。 -->
<article>
<h1>文章标题</h1>
<p> 文章内容内容。</p>
</article>
</body>
</html>
元信息
- <head> 关于文档的信息
- <meta> 关于 HTML 文档的元信息。
- <base> 页面中所有链接的默认地址或默认目标。
代码示例
<!DOCTYPE html>
<html>
<!-- head 定义关于文档的信息 -->
<head>
<!-- meta定义关于 HTML 文档的元信息。 -->
<meta charset="utf-8">
<title>代码示例</title>
<base href="https://www.baidu.com/img/" target="_blank">
</head>
<body>
<p>
<img src="PCgkdoodle_293edff43c2957071d2f6bfa606993ac.gif" >
<br>
- 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "https://www.baidu.com/img/PCgkdoodle_293edff43c2957071d2f6bfa606993ac.gif"
</p>
<hr>
<p>
<a href="https://www.baidu.com/">baidu.com</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</p>
</body>
</html>
程序
- <script> 客户端脚本。
- <noscript> 针对不支持客户端脚本的用户的替代内容。
- <embed> 一个容器，用来嵌入外部应用或者互动程序。
- <object> 嵌入的对象。
- <param> 对象的参数。
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码示例</title>
</head>
<body>
<!-- script定义客户端脚本。 -->
<script>
document.write("Hello World!")
</script>
<!--noscript 定义针对不支持客户端脚本的用户的替代内容。 -->
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
<hr>
<!-- 定义了一个容器，用来嵌入外部应用或者互动程序（插件）。 src里换成 嵌入的网址即可-->
<!-- 嵌入图片 -->
<embed type="image/jpg" src="https://www.baidu.com/img/PCgkdoodle_293edff43c2957071d2f6bfa606993ac.gif" width="500" height="250">
<!-- 嵌入 HTML 页面： -->
<embed type="text/html" src="https://image.baidu.com/search/detail?z=0&word=%E5%9F%8E%E5%B8%82%E5%BB%BA%E7%AD%91%E6%91%84%E5%BD%B1%E4%B8%93%E9%A2%98&hs=0&pn=0&spn=0&di=&pi=3977&rn=&tn=baiduimagedetail&is=&ie=utf-8&oe=utf-8&cs=1595072465%2C3644073269&os=&simid=&adpicid=0&lpn=0&fr=albumsdetail&fm=&ic=0&sme=&cg=&bdtype=&oriquery=&objurl=https%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D1595072465%2C3644073269%26fm%3D193%26f%3DGIF&fromurl=ipprf_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bev2_z%26e3Bv54AzdH3Fv6jwptejAzdH3Fb88cc0c0a&gsm=&islist=&querylist=&album_tab=%E5%BB%BA%E7%AD%91&album_id=7" width="500" height="200">
<!-- 嵌入视频： -->
<embed type="video/webm" src="https://vd7.bdstatic.com/mda-pf8mtg5bf97e7s6b/sc/cae_h264/1686345374591054654/mda-pf8mtg5bf97e7s6b.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1686369392-0-0-55f62ff6cb03aeb944ea210398e1dccd&bcevod_channel=searchbox_feed&cd=0&pd=1&pt=3&logid=1592555959&vid=9976622329928819720&abtest=109432_2-110193_1&klogid=1592555959&sdk_xcdn=1" width="400" height="300">
<hr>
<!-- object定义嵌入的对象 param定义对象的参数 设置参数 "autoplay" 为 "true"，<object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。 -->
<object data="https://vd7.bdstatic.com/mda-pf8mtg5bf97e7s6b/sc/cae_h264/1686345374591054654/mda-pf8mtg5bf97e7s6b.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1686369392-0-0-55f62ff6cb03aeb944ea210398e1dccd&bcevod_channel=searchbox_feed&cd=0&pd=1&pt=3&logid=1592555959&vid=9976622329928819720&abtest=109432_2-110193_1&klogid=1592555959&sdk_xcdn=1">
<param name="autoplay" value="true">
</object>
</body>
</html>
7222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
