博主信息

博文 2

粉丝 0

访问量 2153

专题推荐

HTML5 入门：文档结构、元素和语义化元素

HTML5 简介

HTML5是超文本标记语言HTML的最新一代标准。相比旧标准，HTML5提高了浏览器的兼容性（支持除 IE 外的大部分主流浏览器），增加了一些新特性（基于javascript、HTML、css、DOM），减少了对外部插件的依赖，这个新标准仍在不断完善之中。

HTML5 文档结构

HTML5 文档的结构与旧标准都为树形结构，一般包括标记（html）、头部（head）、主体（body），还有一个放在最前面的声明（<!DOCTYPE html>）。其中声明为 HTML5 与 HTML4 的最大差别，它指示 web 浏览器使用哪个版本的 HTML 进行编写。

声明、标记、头部、主体的定义和用法

1.声明

//html4的三种声明方法,因为基于SGML规则，需要声明引用DTD。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">//
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
//html5的声明方法只有一种，因为不基于SGML，所以不用引用DTD。
<!DOCTYPE HTML>

2.标记（html）

HTML 文档的标记主要规定了文档的开头和结尾，头部（head）和主体(body)都被包含在内，通过<html></html>根元素标签包含。

<!DOCTYPE html>
<!-- lang属性表示文档所用主要语言 -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body></body>
</html>

3.头部（head）

通过<head></head>标签用于定义文档的头部，它是所有头部元素的容器，其中内容不在页面中显示。可以存放脚本（javascript）、样式表(css)。部分标签也适合存放在 head 里面：<style></style>、<title></title>、<meta>、<script></script>、<link>、<base>。其中 title 为 head 唯一必须元素。

<head>
  <!-- meta 元素可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。 -->
  <meta charset="UTF-8" />
  <!-- charset定义了字符编码格式为utf8 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- name为自由定义名称/值对中的名称，content定义与name相关的元信息 -->
  <!-- viewport：视口/视窗 ，定义当前浏览器可以被看到的部分 -->
  <title>Document</title>
  <!-- title定义了页面的标题 -->
</head>

4.主体（body）

<body></body>是显示内容页面的标签，元素包含文档的所有实际显示内容（比如文本、超链接、图像、表格和列表等等。），是用户真正浏览的区域

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PHP中文</title>
  </head>
  <body>
    <!-- 利用div标签元素的传统布局 -->
    <div id="header">
      <h3>可视内容头部</h3>
    </div>
    <div id="main">
      <h3>可视内容主体</h3>
      <h3>hello world!</h3>
    </div>
    <div id="footer">可视内容页脚</div>
  </body>
</html>

运行结果：

运行结果

元素和属性

元素

HTML 文档是由 HTML 元素定义的，HTML 元素指的是开始标签到结束标签的所有代码。例如<p>标签/元素</p>，所以元素也可以叫做标签。实际使用中标签不区分大小写，但最好统一规范用小写，大部分标签有结束标签，记得补全。元素按照显示形式分类，可以分为块元素、内联元素、可变元素（内联块元素）

块元素

独占一行
宽度默认 100%，垂直排列
宽度高度都可控制
可以包含块元素和内联元素

内联元素

和相邻的内联元素在同一行
宽度和高度不可控
宽高就是内容的大小
能包含内联元素和块元素但会被块元素的宽高撑大

属性

元素的属性提供了对元素的信息的描述和控制，通过定义和修改元素属性为网页提供更丰富的内容和样式。所有元素都有三大通用属性：style class id，而个别元素会有自己的专属属性例如<a href="">标签</a>中的href。元素标准格式<element name1="value1" name2="value2"></element>其中 element 为元素的名称，属性可选且允许有多个属性，name 是属性的名称，value 是属性的值。

演示代码：

<!-- 元素p -->
<p>我是p标签也是p元素</p>
<!-- 常见块元素 -->
<h1>独占一行的块元素</h1>
<div>我是通用块元素div</div>
<p>可以独自设置宽与高</p>
<!-- 常见内联元素/行内元素 -->
<a href="">内联元素都在同一行</a>
<strong>宽高都跟随内容大小</strong>
<span>内联元素包含<em>内联元素</em></span>
<span>内联元素中的<p>块元素</p></span>
<!-- 属性：元素都有三大通用属性 -->
<p style="color:red">style定义样式</p>
<div id="a1">id定义元素在当前页面的唯一性</div>
<div class="a2">class定义具有共同特征的元素集合</div>
<!-- 元素专属属性 href、src、alt-->
<a href="">超链接</a>
<img src="样式等级.png" alt="图片不存在或加载失败" width="100" />

效果图：

元素与属性

语义化的结构元素

结构元素分为两种，一种为传统的元素结构，另一种是 HTML5 新增的语义化的结构元素。

传统元素结构

主要是通用块元素 div 通过定义不同的id或者class类划分不同定义出不同的文档内容，从逻辑上进行组织划分。

传统结构代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PHP中文</title>
  </head>
  <body>
    <!-- 利用div标签元素的传统布局 -->
    <div id="header">
      <h3>可视内容头部</h3>
    </div>
    <div id="main">
      <h3>可视内容主体</h3>
      <h3>hello world!</h3>
    </div>
    <div id="footer">可视内容页脚</div>
  </body>
</html>

语义化结构元素

语义化结构是 HTML55 里新增了一些结构话元素标签，例如：<nav></nav>、<header></header>、<main></main>、<footer></footer>，用来取代传统结构，更好地向开发者和浏览器描述其意义，总结就是用最恰当的标签来标记内容。

优点：

更好的呈现出 HTML 文档结构，有利于维护和添加样式
方便其它设备（浏览器）解析
便于搜索引擎（SEO）优化
便于团队开发和维护，减少页面差异化，优化页面加载速度

示例代码：

<!-- header头部标签一般用于介绍性内容，logo，标题、图片或者导航元素 -->
<header>
  头部
  <nav>导航</nav>
</header>
<!-- main：文档主体功能部分，主要内容存放在此 -->
<main>
  <!-- aside：表示和页面内容几乎无关的部分例如广告、引用、侧边栏，即使被单独拆分也不影响整体 -->
  <aside>广告或侧边栏</aside>
  <!-- section:用于将页面内容划分为多个独立区域，例如章节段落，通常还带有标题 -->
  <section>
    <h3>标题1</h3>
    <!-- article:特殊的section，
    表示文档中的独立结构，其意在成为可独立分配的或可复用的结构，例如论坛的帖子，博客的文章。 -->
    <article>
      <h3>标题2</h3>
      <p>段落1</p>
      <section>
        <h4>标题3</h4>
        <p>段落2</p>
      </section>
    </article>
  </section>
</main>
<!-- footer:表示最近的一个章节或者根元素的页脚，主要放版权数据、作者信息、相关链接 -->
<footer>页脚</footer>

语义化的文本元素

语义化文本元素都有其自身的意义，通常可以通过元素字面上的意思得知其内容。

<!-- 通常存放个人或组织的联系信息 -->
<address>地址：中国广东广州</address>
<!-- time:表示时间日期 -->
<time>2020/07/25</time>
<!-- sup:定义文本区域与主要文本相比更高更小，例如数字上标 -->
3<sup>3</sup>=9
<!-- del：表示文档被删除的内容 -->
<!-- ins:表示文档新增的内容 -->
<!-- strong：强调文本中的一段内容，会加粗文本内容 -->
原价：￥<del>200.00</del>&nbsp;现价：￥<strong>99.00</strong>
<ins>促销中</ins>
<!-- code:一般表示一段计算机代码，默认使用等宽字体样式 -->
<code>$config::show(); </code>

语义化文本结构元素效果图：

链接元素`<a></a>`

链接元素（锚元素） 通过 href 属性创建指向另一个文档的超链接，也可以实现下载文件，打电话，发邮件，定位同一页面内容（锚点）等功能。

示例代码：

<!-- 传统用法，转跳页面的超链接 -->
<!-- target属性:定义链接的文档在何处显示，_blank新标签页，_self默认当前页面加载， -->
<a href="demo4.html" target="_blank">这是一个链接</a>
<!-- 下载文件 download:指示浏览器下载而不是导航到超链接，并预命名下载文件名-->
<a href="笔记.md" download="下载文件名">笔记下载</a>
<!-- 发送邮件 -->
<a href="mailto:exmple@1123.com">邮件</a>
<!-- 打电话 -->
<a href="tel:13800000000">联系人</a>
<!-- 锚点：在当前页面转跳 -->
<a href="#header">返回头部</a>

列表元素

列表分为三种：无序列表（<ul></ul>），有序列表(<ol></ol>)和自定义列表(<dt><dl></dl></dt>)，不同情景按需选择。可以在一个列表中其他另外一个或者多个列表，并且，一种类型的列表可以与任意类型的列表相互嵌套。列表的表项可以与任何 HTML 元素（如段落、图片、链接等）交叉定义。所有的列表都是由父元素和子元素构成，父元素用于指定要创建的列表类型，子元素用于指定要创建的列表项。

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>html5结构标签</title>
  </head>
  <body>
    <div id="header">
      <!-- 无序列表 -->
      <ul>
        <li><a href="http://">导航</a></li>
        <li><a href="http://">首页</a></li>
        <li><a href="http://">新闻</a></li>
        <li><a href="http://">关于</a></li>
      </ul>
      <!-- 列表都可互相嵌套 -->
      <!-- 有序列表 -->
      <ol>
        <li>开始</li>
        <li>
          行进
          <ul>
            <li>css</li>
            <li>html</li>
            <li>javascript</li>
          </ul>
        </li>
        <li>暂停</li>
        <li>结束</li>
      </ol>
    </div>
    <div id="main">
      <!-- 通用行内元素span -->
      <img src="样式等级.png" />
      <span>hello world</span>
    </div>
    <main style="margin-top: 50px;">
      <!-- 语义化的文本元素 方便搜索引擎识别-->
      <section class="ads">ad</section>
      <article class="content">content</article>
      <time>yy/dd/YY</time>
      <address>地址</address>
      <code type="javascript">
        function study(e){ }
      </code>
      <progress value="70" max="100">进度条</progress>
      <!-- 传统用法，转跳页面的超链接 -->
      <!-- target属性:定义链接的文档在何处显示，_blank新标签页，_self默认当前页面加载， -->
      <a href="demo4.html" target="_blank">这是一个链接</a>
      <!-- 下载文件 download:指示浏览器下载而不是导航到超链接，并预命名下载文件名-->
      <a href="笔记.md" download="下载文件名">笔记下载</a>
      <!-- 发送邮件 -->
      <a href="mailto:exmple@1123.com">邮件</a>
      <!-- 打电话 -->
      <a href="tel:13800000000">联系人</a>
      <!-- 锚点：在当前页面转跳 -->
      <a href="#header">返回头部</a>
    </main>
    <div id="footer">
      <!-- 自定义列表 -->
      <dt>
        <dl>首页</dl>
        <dl>友情链接</dl>
        <dl>网站地图</dl>
      </dt>
    </div>
  </body>
</html>

效果图：

列表元素

批改老师：

天蓬老师

批改状态：合格

老师批语：非常认真

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

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

0条评论

作者最新博文

HTML5入门：文档结构、元素和语义化元素

2020-08-07 16:57:23

HTML5 入门：文档结构、元素和语义化元素

HTML5 简介

HTML5 文档结构

声明、标记、头部、主体的定义和用法

1.声明

2.标记（html）

3.头部（head）

4.主体（body）

元素和属性

元素

块元素

内联元素

属性

语义化的结构元素

传统元素结构

语义化结构元素

语义化的文本元素

链接元素<a></a>

列表元素

链接元素`<a></a>`