一。hello world
<!--根标签-->
<html>
    <!--头部-->
    <head>
        <!--标题标签-->
        <title>中国好声音</title>
        <!--设置编码-->
        <meta charset="utf-8">
    </head>
    <!--主要内容-->
    <body>
        <div>你好,中国好声音</div>
    </body>

</html>

二。HTML中创建的标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见的HTML中的标签</title>
</head>
<body>
    <!--标题标签-->
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
    <!--线条标签-->
    <hr>

    <!--1.表单标签(输入框)-->
    <input placeholder="请输入你的名字"><br>
    <input value="我是默认的文字"><br>
    <input type="date"><br>
    <input type="button"><br>
    <input type="file"><br>
    <input type="color"><br>
    <input type="radio"><br>
    <input type="checkbox"><br>

    <!--练习-->
    <form action="form_action.asp" method="get">
        First name:<input type="text" name="fname" />
        last name:<input type="text" name="lname" />
        <input type="submit" value="Submit" />
    </form>

    <!--2.段落标签-->
    <p>我是段落标签,我是段落标签,我是段落标签,我是段落标签,我是段落标签
    <p>我是段落标签,我是段落标签,我是段落标签,我是段落标签,我是段落标签
    <p>我是段落标签,我是段落标签,我是段落标签,我是段落标签,我是段落标签
    <p>我是段落标签,我是段落标签,我是段落标签,我是段落标签,我是段落标签

    <!--3.图像标签-->
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="这是一张图片">
    <!--
        相对路径:资源在当前的项目中 ./   ..// ././
        绝对路径:资源不在当前的项目中,网络上.本地 http:/  /https://  file://
    -->
    <img src="data:image/1.png" alt="记得记得记得记得" height="100" width="150">

    <!--4.换行标签-->
    <br>

    <!--5.容器地 :div , span-->

    <!--6.表格:table,  tr , td (现在几乎不用)-->

    <!--7.列表:ul ,  ol  ,  li (包括有序列表和无序列表)-->
    <!--无序列表-->
    <ul>
        <li>我是一个无序列表</li>
        <li>我是一个无序列表</li>
        <li>我是一个无序列表</li>
        <li>我是一个无序列表</li>
        <li>我是一个无序列表</li>
    </ul>
    <!--有序列表-->
    <ol type="i">
        <li>我是一个有序列表</li>
        <li>我是一个有序列表</li>
        <li>我是一个有序列表</li>
        <li>我是一个有序列表</li>
        <li>我是一个有序列表</li>
    </ol>

    <!--界面直接的调整-->
    <!--超链接标签(#表示跳到当前的界面(刷新)), targer(超链接打开的方式)-->
    <a href="#">我是超链接</a><br>
    <a href="http://www.baidu.com" target="_blank">百度一下你就知道</a>
    <a href="http://www.baidu.com" target="_blank">
        <img src="data:image/1.png" alt="记得记得记得记得" height="100" width="150">
    </a>

    <!--8.div标签(容器标签)-->
    <div>我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>
    <div>我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>
    <div>我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>
    <div>我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>
    <div>
        <div>
            <p>我是容器标签</p>
        </div>
    </div>

</body>
</html>

三。HTML5中新增的标签
<!--HTML5新增的标签
    HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签,级块性标签,行内语义性标签,交互性标签
        1.结构性标签:负责Web上下文结构的定义,确保HTML文档
            包括:article:文章主体内容(一篇博客,一段论坛帖子,一段用户评论,插件)
                header:标记头部区域的内容
                footer:标记脚步区域的内容
                section:区域章节表述
                nav:菜单导航,链接导航

        2.级块性标签:完成Web页面区域的划分,确保内容的有效分隔,(不常用)
            包括:aside:注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
                figure:对多个元素组合并展示的元素,常与figcaption联合使用
                code:表示一段代码块
                dialog:人与人之间的对话,

        3.行内语义性标签:完成Web页面具体内容的引用和表述,丰富展示的内容,
            包括:meter:特定范围内的数值,如工资,数量,百分比,电池的用量
                time:表示的时间(但是现在所有的游览器都不支持 )
                progress:进度跳,可用做max, min,step进行控制,完成对进度跳的表示和监听
                video:视屏元素,用于对视屏的播放,支持缓冲预加载和视屏媒体格式
                audio:音频元素,用于音频播放,支持缓冲预加载和音频播放格式

        4.交互性标签:功能性内容的表达,有一定的内容和数据的关联,是各种事件的基础(用的不多)
            包括:details:表示一段具体的内容,默认不显示,通过某种方式(单击)和legend交互才会显示
                datagrid:控制客户端的数据和显示,可用于动态脚本及时更新
                menu:用于交互菜单
                command:用来处理命令按钮

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国好声音</title>
</head>
<body>
    <!--文章-->
    <article>
        <!--头部-->
        <header>
            <h2>人生若只如初见</h2>
            <h4>何事秋风悲画扇</h4>
            <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/12541d052e91cd0e4689dfeb0c32d266_121_121.jpg">
        </header>
        <!--主要章节-->
        <section>
            <h3>61 个回答</h3>
            <p>年9月份，一个算不上华丽的转身，我们暂停了 EC [1] 这个项目，全面转向「简书」。简书的诞生其实非常意外，自我喜欢上 Markdown 起，我就发现，这个世界上还没有一个支持 Markdown 的笔记本产品，于是我就打算自己做一个，当时正好有个实习生刚刚加入我们团队，于是我做了第一个设计稿，就让实习生去做开发了。当时这个产品还不叫简书，我们给它起了一个自认为很好的名字，叫 Maleskine，是 Markdown 和 Moleskine 的整合。

                作者：简叔
                链接：http://www.zhihu.com/question/21151468/answer/17968032
                来源：知乎
                著作权归作者所有，转载请联系作者获得授权。</p>
            <p>年9月份，一个算不上华丽的转身，我们暂停了 EC [1] 这个项目，全面转向「简书」。简书的诞生其实非常意外，自我喜欢上 Markdown 起，我就发现，这个世界上还没有一个支持 Markdown 的笔记本产品，于是我就打算自己做一个，当时正好有个实习生刚刚加入我们团队，于是我做了第一个设计稿，就让实习生去做开发了。当时这个产品还不叫简书，我们给它起了一个自认为很好的名字，叫 Maleskine，是 Markdown 和 Moleskine 的整合。

                作者：简叔
                链接：http://www.zhihu.com/question/21151468/answer/17968032
                来源：知乎
                著作权归作者所有，转载请联系作者获得授权。</p>
        </section>
        <section>
            <h3>百度云官方网站——云上的日子 你我共享</h3>
            <p>百度云是由百度公司出品的一款云服务产品,不仅为用户提供免费存储空间,还可以将视频、照片、文档、通讯录数据在移动设备和PC端之间跨平台同步、备份等,百度云还支持添加好友、创建群组,和伙伴们快乐分享, 目前已上线:Android、iPhone、iPad、百度云管家、网页端等.</p>
            <p>百度云是由百度公司出品的一款云服务产品,不仅为用户提供免费存储空间,还可以将视频、照片、文档、通讯录数据在移动设备和PC端之间跨平台同步、备份等,百度云还支持添加好友、创建群组,和伙伴们快乐分享, 目前已上线:Android、iPhone、iPad、百度云管家、网页端等.。</p>
        </section>
        <!--尾部-->
        <footer>
            <h3>郑科宁苦逼IT男
                25 人赞同
                又是软文，笔记功能不及印象笔记的百分之一，团队自问自答的演戏能力不错啊，至于美文，呵呵呵呵</h3>
            <p>发布于 2013-10-02 4 条评论 感谢 分享 收藏 • 没有帮助 • 举报 • 作者保留权利
            </p>
        </footer>
    </article>

</body>

四。HTML5常用的标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <meter value="60" max="100" min="0">浏览器兼容</meter><br>
    <progress value="30" max="100"></progress>

    <!--音频-->
    <audio src="source/刘德华%20-%2017岁.mp3" controls = @"controls"></audio>
    <!--ship-->
    <video src="source/04.全局队列.mp4" controls = @"controls"></video>
</body>
</html>

HTML 概述的更多相关文章

  1. 【AR实验室】ARToolKit之概述篇

    0x00 - 前言 我从去年就开始对AR(Augmented Reality)技术比较关注,但是去年AR行业一直处于偶尔发声的状态,丝毫没有其"异姓同名"的兄弟VR(Virtual ...

  2. Recurrent Neural Network系列1--RNN（循环神经网络）概述

    作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 本文翻译自 RECURRENT NEURAL NETWORKS T ...

  3. Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置（服务端+iOS端）

    本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...

  4. .Net 大型分布式基础服务架构横向演变概述

    一. 业务背景 构建具备高可用,高扩展性,高性能,能承载高并发,大流量的分布式电子商务平台,支持用户,订单,采购,物流,配送,财务等多个项目的协作,便于后续运营报表,分析,便于运维及监控. 二. 基础 ...

  5. [C#] 进阶 - LINQ 标准查询操作概述

    LINQ 标准查询操作概述 序 “标准查询运算符”是组成语言集成查询 (LINQ) 模式的方法.大多数这些方法都在序列上运行,其中的序列是一个对象,其类型实现了IEnumerable<T> ...

  6. 【基于WinForm+Access局域网共享数据库的项目总结】之篇一：WinForm开发总体概述与技术实现

    篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...

  7. Java消息队列--JMS概述

    1.什么是JMS JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送 ...

  8. [AlwaysOn Availability Groups]健康模型 Part 1——概述

    健康模型概述 在成功部署AG之后,跟踪和维护健康状况是很重要的. 1.AG健康模型概述 AG的健康模型是基于策略管理(Policy Based Management PBM)的.如果不熟悉这个特性,可 ...

  9. μCos-ii学习笔记1_概述

    一.μCos-ii _概述 网上关于μCosii的文章多不胜数,本人学习的过程中也参考了很多人的理解和想法,看的是卢有亮老师的<嵌入式实时操作系统-μC/OS原理与实践>(第2版),同时也 ...

  10. Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录

    一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...

随机推荐

  1. Spring Security（19）——对Acl的支持

    目录 1.1           准备工作 1.2           表功能介绍 1.2.1     表acl_sid 1.2.2     表acl_class 1.2.3     表acl_obj ...

  2. linux内核之链表操作解析

    本文只是对linux内核中的链表进行分析.内核版本是linux-2.6.32.63.文件在:linux内核/linux-2.6.32.63/include/linux/list.h.本文对list.h ...

  3. Java 并发 线程属性

    Java 并发 线程属性 @author ixenos 线程优先级 1.每当线程调度器有机会选择新线程时,首先选择具有较高优先级的线程 2.默认情况下,一个线程继承它的父线程的优先级 当在一个运行的线 ...

  4. cocos2d-js引擎学习笔记

    cocos2d-js3.0实用语法 /*初始化继承类*/ var Enemy = cc.Sprite.extend({ hp: 0, fileName: "enemy.png", ...

  5. set， list 和map知识总结

    set就是集,无序,不可重复 举例:HashSet,LinkedHashSet List是映射,通过键值对存储,无序,不可重复 举例:HashMap,HashTable,LinkedHashMap 在 ...

  6. 编写简单的爬虫从流行的Scrapy 框架讲起

    到目前为止,我们已经完成了向站点添加搜索和过滤的功能,并且我们已经可以向站点添加一些分类和产品信息.下面我们将考虑当尝试删除实体信息时会发生什么事情. 首先,向站点添加一个名为Test的新分类,然后再 ...

  7. Linux下TFTP的安装,配置和操作

    注:转载他人,仅供自己研究学习使用 TFTP是用来下载远程文件的最简单网络协议,它其于UDP协议而实现.嵌入式linux的tftp开发环境包括两个方面:一是linux服务器端的tftp-server支 ...

  8. 通过HttpModule管道，帮助api对接开发

    我们公司的技术以.net为主,最近公司的项目需要和其它以java为主的公司搞对接.   .net提供webapi由java请求调用. 目前出现java说调用了,但是.net一直接收不到数据.两方开发人 ...

  9. Linux入门（六）ubuntu下vim编辑器安装与使用

    原文链接:http://jingyan.baidu.com/article/219f4bf7d03187de452d3862.html 一.安装 vim 控制台版本的vim随ubuntu一起发行,因此 ...

  10. ActiveMQ in Action(4) - Security

    关键字: activemq 2．4 Security    ActiveMQ支持可插拔的安全机制,用以在不同的provider之间切换.2．4．1 Simple Authentication Plug ...