领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

Html5 标签常用参考（html5各种标签的应用方法）

nixiaole 2024-11-17 14:26:56 知识剖析 18 ℃

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>H5标签常用参考</title>

</head>

<body style="display: grid">

<!-- 页面按显示元素分为，行元素： 水平排例； 块元素：垂直排列；行内块元素：既有块元素，又有行元素； -->

<!-- 标签有两种,双标签:用在可替换元素中，内容写到二个标签之间，单标签 :用在不可替换元素中，内容由标签属性指定-->

<!-- Html4以前布局标签 -->

<div class="header">Html4页眉</div>

<div class="main">Html4主体</div>

<div class="footer">Html4页脚</div>

<!-- 不利与SEO的优化 -->

<!-- Html5语化布局标签 -->

<header>Html5页眉</header>

<main>这里是Html5主体</main>

<footer>这里是Html5页脚</footer>

<address>我代表的是地址</address>

<mark>我是高亮标签</mark>

<!-- 常用标签 -->

<!-- 没有任何标签包裹的文本：匿名文本 -->

<strong>大家好啊。</strong>

<em>大家好啊。</em>

<span style="color: red">大家好啊！！</span>

<p style="color: slategray">-----我是分切线-----</p>

<!-- 链接元素标签 a -->

<a href="https://www.toutiao.com">默认当前窗口打开</a>

<a href="https://www.toutiao.com" target="_self">当前窗口打开</a>

<a href="https://www.toutiao.com" target="_blank">新窗口打开</a>

<p style="color: slategray">-----我是分切线-----</p>

<!-- 框架方式指定打开 使用target中对应iframe name参数-->

<a href="https://www.baidu.com" target="content"

>点我会在下方框架标签中打开</a

>

<a href="https://www.qq.com" target="content">点我会在下方框架标签中打开</a>

<iframe src="" frameborder="1" name="content"></iframe>

<p style="color: slategray">-----我是分切线-----</p>

<!-- 长用的A标签属性 -->

<a href="mailto:qqqq@qq.com">点我会调出发邮箱</a>

<a href="tel:15777777777">点我会打电话</a>

<p style="color: slategray">-----我是分切线-----</p>

<!-- 列表 -->

<!-- 无序列表 type="circle" 可修改列表前点样式-->

<ul type="circle">

<li><a href="">首页</a></li>

<li><a href="">关于我们</a></li>

<li><a href="">产品中心</a></li>

<li><a href="">在线地址</a></li>

</ul>

<!-- 有序列表 start="5" 可定义从5开始排序样式-->

<ol start="5">

<li><input type="checkbox" name="" id="" /><a href="">首页</a></li>

<li><input type="checkbox" name="" id="" /><a href="">关于我们</a></li>

<li><input type="checkbox" name="" id="" /><a href="">产品中心</a></li>

<li><input type="checkbox" name="" id="" /><a href="">在线地址</a></li>

</ol>

<!-- 有序列表 start="5" 可定义从5开始排序样式-->

<dl>

<dt>联系方式</dt>

<dd><a href="mailto:qqqq@qq.com">点我会调出发邮箱</a></dd>

<dd><a href="tel:15777777777">点我会打电话</a></dd>

<dd>

<a href=""> <address>我代表的是地址</address></a>

</dd>

<dt>备案号</dt>

<dd>京IPC备：xxxxx</dd>

</dl>

</body>

</html>


Tags：

猜你喜欢

最近发表
标签列表