一。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. MongoDB1： 环境安装

    1. 环境准备,不支持XP系统,需要在Windows7及以上和windows server 2008 系统上安装. 2. 下载安装包:http://www.mongodb.org/downloads, ...

  2. win8.1和centos6.5 双系统启动问题

    笔记本系统为centos 6.5,由grub引导启动,安装了win 8.1后,开机直接进入win 8.1,没有出现centos6.5 引导项,解决办法: 一.开机按ESC键进入启动顺序菜单,选择cen ...

  3. wcf测试工具

    WCF测试工具-WcfStorm WCF测试工具-WcfStorm  http://www.wcfstorm.com/wcf/home.aspx WcfStorm is a dead-simple, ...

  4. yii2.0 面包屑的使用

    yii2中面包屑是yii2自带的小部件,类似本网站的导航栏应该就是采用面包屑来完成的 例子如下,需要引入 yii\widgets\Breadcrumbs echo Breadcrumbs::widge ...

  5. 第七十七节，CSS3前缀和rem长度单位

    CSS3前缀和rem长度单位 学习要点: 1.CSS3前缀 2.长度单位rem 本章主要探讨HTML5中CSS在发展中实行标准化的一些问题,重点探讨CSS3中新属性前缀问题和新的单位rem. 一 CS ...

  6. JavaScript中的window对象

    JavaScript中的window对象:http://www.cnblogs.com/kissdodog/archive/2013/01/01/2841464.html

  7. 《Javascript网页经典特性300例》

    <Javascript网页经典特性300例> 基础篇 第1章:网页特性 刷新.后退.前进.关闭.标题.跳转禁止网页放入框架动态加载js避免浏览器使用缓存加载页面 第2章:DOM操作 根据n ...

  8. php日期转时间戳,指定日期转换成时间戳

    写过PHP+MySQL的程序员都知道有时间差,UNIX时间戳和格式化日期是我们常打交道的两个时间表示形式,Unix时间戳存储.处理方便,但 是不直观,格式化日期直观,但是处理起来不如Unix时间戳那么 ...

  9. 删除putty的session 以及 putty的颜色设置值

    HKEY_CURRENT_USER\Software\SimonTatham\PuTTY 将sessions里面的内容清空即可 ==================================== ...

  10. 字符串匹配—KMP 扩展KMP Manacher

    kuangbin字符串专题传送门--http://acm.hust.edu.cn/vjudge/contest/view.action?cid=70325#overview 算法模板: KMP: ; ...