HTML文档结构及常见元素 - PHP学习

首页 > 博客列表 > HTML文档结构及常见元素

博主信息

博文 5

粉丝 0

访问量 4283

专题推荐

更多>

HTML 文档结构

<!-- 指明文件类型为HTML -->
<!DOCTYPE html>
<!-- 根标签，也叫根元素，当前语言设定为英文 -->
<html lang="en">
  <!-- 头元素，其内容不在浏览器页面中显示，只给浏览器和搜索引擎使用 -->
  <head>
    <!-- 指明当前文档使用的字符集 -->
    <meta charset="UTF-8" />
    <!-- viewport 视口 :当前文档在浏览器中可以被用户看到的部分，width=设备宽度，initial-casle 缩放比例=1.0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 文档标题，是html文档必备元素 -->
    <title>标题</title>
  </head>
  <!-- 主体元素，浏览器中显示，是用户能够看到的内容 -->
  <body></body>
</html>

元素与属性的关系

格式

<标签属性=“属性值”></标签>

语义化的结构元素

页眉：<header>

通常包括网站标志、主导航、全站链接以及搜索框。
页脚：<footer>

只有当父级是 body 时，才是整个页面的页脚。
页面主要内容：<main>

一个页面只能使用一次。如果是 web 应用，则包围其主要功能。
导航：<nav>

标记导航，仅对文档中重要的链接群使用。
定义外部的内容：<article>

其中的内容独立于文档的其余部分。
定义文档中的节：<section>

比如章节、页眉、页脚或文档中的其他部分。
定义其所处内容之外的内容：<aside>

如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

语义化的文本元素

<small> ：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong> ：用于强调文本，但它强调的程度更强一些。
<time> ：定义日期/时间，文本内容必须是合法的日期或者时间格式。
<address> ：定义地址元素。
<sup> ：定义上标文本。
<sub> ：定义下标文本。

链接元素

经典用法

<a href="https://www.baidu.com" target="_blank">百度</a>

文件下载

<a href="webfile.zip" download="downfile.zip">下载</a>

打电话
```
<a href="tel:139012345678">电话</a>
```

发邮件

<a href="mailto:123456789@qq.com">邮件</a>

锚点

<a href="#here">查找</a>
<h2 id="here">在这里</h2>

列表元素

无序列表

<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
  <li>列表4</li>
  <li>列表5</li>
</ul>

有序列表

<ol>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
  <li>列表4</li>
  <li>列表5</li>
</ol>

自定义列表

<dl>
  <dt>列表1</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
  <dt>列表2</dt>
    <dd>内容</dd>
</dl>

批改老师：

天蓬老师

批改状态：合格

老师批语：不错, 下次附上图

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML文档结构及常见元素

2020-07-26 09:47:46