《HTMLCSS JavaScript 网页制作》第七章-移动开发基础HTML5新增特性

一、新增的主体结构元素

1、article元素

表示页面中的一块与上下文不相关的独立内容,如博客中的一篇文章

<article>article>
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主体结构title>
head>
<body>
<header>
    <h1>星时代h1>
header>
<section>
    <article>
        <h2><a href=" ">1a>h2>
    article>
section>
body>
html>

2、section元素

用于对网站或应用程序中页面上的内容进行分块,一个section元素通常由内容及其标题组成。

3、nav元素

用于包裹一个导航链接组,用于说明这是一个导航组在同一个页面中可以同时存在多个nav。并不是所有的链接组都要被放进nav元素,只需要将主要的、基本的连接组放进nav元素。
nav元素可以用在:顶部传统导航条、侧边导航、页内导航

<nav>
    <ul>
        <li><a href="index.html">homea>li>
        <li><a href="#">abouta>li>
    ul>
nav>

4、aside元素

用来表示当前页面或文章的附属信息,可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等。
使用方法:
(1)包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的参考资料、名词解释。

<article>
    <h1>h1>
    <aside>aside>
article>

(2)在article之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,内容可以是友情链接、文章列表、广告单元等。

<aside>
    <h2>新闻资讯h2>
    <ul>
        <li>企业新闻li>
        <li>行业信息li>
    ul>
    <h2>经营产品h2>
    <ul>
        <li>衣服li>
        <li>鞋子li>
    ul>
aside>

《HTMLCSS JavaScript 网页制作》第七章-移动开发基础HTML5新增特性_第1张图片

5、time元素

用于定义时间或日期,可以代表24小时中的某个时刻

<time datetime="2022-4-26">2022年4月26日time>

6、progress属性

用于表示页面中的某个任务完成的进度。例如下载文件时,文件下载的进度值,可以通过该元素动态地展示在页面中,方式可以使用整数(1~100)或者百分比(10% ~100%)。
实现动态,要使用JavaScript编写一个定时事件(后面会学)。

二、新增的非主体结构元素

1、header元素

是一种具有引导或导航作用的结构元素,通常用来放置整个页面或页面中的一个内容区块的标题,也可以包含其他内容,如表格、表单或相关的图片。

<header>
    <h1>标题1h1>
    <h2>标题2h2>
header>

2、hgroup元素

将标题及其子标题进行分组的元素。通常会将h1~h6元素进行分组,一个内容区块的标题及其子标题视为一组。

<article>
    <header>
        <hgroup>
            <h1>主标题h1>
            <h4>副标题h4>
        hgroup>
    header>
article>

3、footer元素

页脚footer一般包含版权数据、导航信息、备案信息、联系方式等内容。
footer可以用作页面整体的页脚,也可以作为一个内容区块的结尾。

<footer>
    <ul>
        <li>版权声明li>
        <li>站点地图li>
        <li>联系我们li>
    ul>
footer>

4、address元素

通常位于文档的末尾,用来在文档中呈现联系信息,包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等等。
字体会自动斜体

<footer>
    <div>
        <address>
            <a title="文章作者:张三">张三a>
        address>
        发表于<time datetime="2022-4-26">2022-4-26time>
    div>
footer>

在这里插入图片描述

你可能感兴趣的:(html5,css,javascript)