html语义化结构标签
1.HTML页面语义化结构
<h1>-<h6>:划分段落<header>：页眉<main>:主体<aside>:边栏<section>:展示<footer>:页脚<nav>:导航<div>:通用容器
2.文本元素
<a>标签
- href属性可用于链接、文件下载、发邮件、打电话、设置锚点等功能的实现，如下：
| 描述 | 举例 |
|---|---|
<a href="https://wwww.baidu.com target="_black"">点我百度</a> |
点击链接后打开新窗口页面 |
<a href="demo.php" download="php的demo文件">点我下载文件</a> |
下载文件，可预定义文件名称 |
<a href="tel:136100*****>点我打电话</a> |
打电话（需要安装打电话插件） |
<a href="mailto:123455@qq.com">点我发邮件</a> |
发邮件（需要安装邮件插件） |
<a href="#top">跳到锚点</a><h1 id="top" style="margin-top: 800px;">我是锚点</h1> |
设置锚点（类似于网页的当中的”回到顶部“功能） |
3.列表
- 无序列表：
<ul> 有序列表：
<ol>(start=”3”属性表示从”3“开始排序显示)自定义列表：
<dl><dt><dd></dd><dd></dd><dd></dd></dt></dl>
4.示例效果图
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>语义化结构-html页面结构</title><style>html,body,header,aside,main,section,footer,td {/* 给元素添加边框 */border: 1px solid skyblue;}</style></head><body><h1 id="top" style="margin-top: 800px;">我是锚点</h1><!-- 页头header --><header><tr><td>首页</td><td>视频</td><td>手册</td><td>工具</td><td>联系我们</td></tr></header><!-- 主体区main --><!-- 边栏aside --><aside style="border: 1px soild red;"><nav>html5</nav><nav>css3</nav><nav>php7</nav><nav>mysql5</nav></aside><main><section><h2></h2><!-- href值为URL，则跳转到地址页面 --><a href="https://www.baidu.com">百度咨询</a><ul><li>我是谁</li><li>我在哪</li><li>我要去哪里</li></ul><button type="submit">提交</button></section><section><h2></h2><!-- href值为文件名，则用来下载文件 --><a href="demo.php" download="php的demo文件">下载文件</a><ol start="4"><li>我在学什么</li><li>为什么要学</li><li>学了能干嘛</li></ol></section><section><h2></h2><!-- href值为电话号码，则用来打电话（需要安装打电话插件） --><a href="tel:1361008****">打电话给我</a></section><section><h2></h2><!-- href值为邮件地址，则用来发邮件（需要安装发邮件插件） --><a href="maito:123456@qq.com">给我发邮件</a><form action="1.html" method="get"><textarea name="" id="" cols="30" rows="10" required></textarea><button type="submit">提交</button></form></section><!-- 锚点演示 a标签中的href属性值为"#+锚点id名"--><a href="#top">跳到锚点</a><!-- <h1 id="top" style="margin-top: 1000px;">我是锚点</h1> --></main><!-- 页脚footer --><footer style="text-align: center;"><tr><td>首页</td><td>备案号：sifsj</td><td>联系我们：1361008****</td></tr></footer></body></html>
HTML语义化标签总结
- HTML语义化结构重新定义了HTML标签，方便了开发中的使用，对网页结构有更明显的理解
- 标签的不同属性值决定了其不同的功能