• 初识html5


    html5基本结构

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>

    </body>
    </html>

    下面开始讲页面结构的划分的标签:

    Header Footer Nav Hgroup Section Article aside

    <header></header>    用在页面的头部或者版块的头部 也可用于板块头部

     <footer></footer>    用在页面的头部或者版块的底部

    <nav></nav>      导航

    <nav>

      <a href=“#”>链接</a>

       <a href=“#”>链接</a>

    </nav>

    <hgroup></hgroup>    一个标题和一个子标题,或者标语的组合

    <hgroup>

      <h1>新闻主体</h1>

      <h2>这是附标题</h2>

    </hgroup>

    <section><section>    页面上的版块用于划分页面上的不同区域,或者划分 文章里不同的节

    <article></ article >     用来在页面中表示一套结构完整且独立的内容部分 可以用来呈现论坛的一个帖子,杂志或报纸中的一 篇文章,一篇博客,用户提交的评论内容,可互动 的页面模块挂件等。

    <aside></ aside>    

    和主体相关的附属信息可以包含与当前页面或主要 内容相关的引用、侧边栏、广告、nav元素组,以 及其他类似的有别与主要内容的部分 aside 的内容应该与 article 的内容相关。 被包含在<article>中作为主要内容的附属信息部分,其中的内容 以是与当前文章有关的引用、词汇列表等 在<article>之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。

    <figure> < figure >     用于对元素进行组合。 一般用于图片或视频

    <figure>

      <img src="001.jpg" />

      <figcaption>这里是和图片有关联的文字</figcaption>

    </figure>

    <time></time>用来表现时间或日期

    <datalist></datalist>选项列表。与 input 元素配合使用,来定义 input 可能的值。

    <input type= "text" list= "valList" />

    <datalist id="valList">

      <option value="javascript">javascript</option>

      <option value="html">html</option>

      <option value="css">css</option>

    </datalist>

    <details></details>

    用于描述文档或文档某个部分的细节

    该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容

    Open 属性默认展开

    < summary></summary>

    details 元素的标题

    <details open>

      <summary>元素的标题</summary>chrom

      <p>国内知名的IT培训机构</p>

    </details>

    <dialog></dialog>定义一段对话(没什么用处看一眼知道就行,)

    <address></address> 定义文章 或页面作 者的详细联系信息,样式是斜体

    <mark></mark> 需要标记的词或句子

    <keygen>给表单添加一个公钥,对前端用处不大,主要 是后端用于加密

    <progress><progress>定义进度条

    IE兼容要引入<script src="html5shiv.js"></script>

    引入这个插件,再打开ie浏览器,可以看到低版本兼容性问题已经解决

    最后注意:那些语意功能化的标签,在低版本下,是没有效果的需要js去实现

  • 相关阅读:
    yaml简单模板
    goland之基础使用 X
    redis之性能优化 X
    定时任务管理之qinglong X
    golang数据库操作之gorm X
    低代码平台汇总 X
    kafka之介绍 X
    ClickHouse之基础 X
    gitlab安装与基本使用 X
    ClickHouse之物化MySQL X
  • 原文地址:https://www.cnblogs.com/txf-123/p/10868135.html
Copyright © 2020-2023  润新知