HTML 概述
一。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 概述的更多相关文章
- 【AR实验室】ARToolKit之概述篇
0x00 - 前言 我从去年就开始对AR(Augmented Reality)技术比较关注,但是去年AR行业一直处于偶尔发声的状态,丝毫没有其"异姓同名"的兄弟VR(Virtual ...
- Recurrent Neural Network系列1--RNN（循环神经网络）概述
作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 本文翻译自 RECURRENT NEURAL NETWORKS T ...
- Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置（服务端+iOS端）
本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...
- .Net 大型分布式基础服务架构横向演变概述
一. 业务背景 构建具备高可用,高扩展性,高性能,能承载高并发,大流量的分布式电子商务平台,支持用户,订单,采购,物流,配送,财务等多个项目的协作,便于后续运营报表,分析,便于运维及监控. 二. 基础 ...
- [C#] 进阶 - LINQ 标准查询操作概述
LINQ 标准查询操作概述 序 “标准查询运算符”是组成语言集成查询 (LINQ) 模式的方法.大多数这些方法都在序列上运行,其中的序列是一个对象,其类型实现了IEnumerable<T> ...
- 【基于WinForm+Access局域网共享数据库的项目总结】之篇一：WinForm开发总体概述与技术实现
篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...
- Java消息队列--JMS概述
1.什么是JMS JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送 ...
- [AlwaysOn Availability Groups]健康模型 Part 1——概述
健康模型概述 在成功部署AG之后,跟踪和维护健康状况是很重要的. 1.AG健康模型概述 AG的健康模型是基于策略管理(Policy Based Management PBM)的.如果不熟悉这个特性,可 ...
- μCos-ii学习笔记1_概述
一.μCos-ii _概述 网上关于μCosii的文章多不胜数,本人学习的过程中也参考了很多人的理解和想法,看的是卢有亮老师的<嵌入式实时操作系统-μC/OS原理与实践>(第2版),同时也 ...
- Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录
一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
随机推荐
- jQuery中的ajax使用详解
$.ajax({ type : "get", url : "http://www.w3school.com.cn/jquery/ajax_ajax.asp&quo ...
- Mysql登录后看不到数据库
进入数据库后,只能看到information_schema/test这两个库,其他的数据库都看不到,这是权限出了问题. 关闭Mysql /usr/local/mysql/support-files/m ...
- Vimperator技巧
Vimperator技巧 什么是Vimperator?Firefox的一个插件,模拟vim操作. 1. 用]]打开"下一页"链接,[[打开"上一页"Vimper ...
- 在GNU/Linux下设置与定时更换桌面壁纸
1 简介 在电脑桌面设置一组可以定时更换的壁纸已经不是什么新奇的功能了.比如,Windows 7.KDE桌面环境都可以实现这样的效果.可是,自己目前使用的Debian系统并未安装KDE.GNOME这样 ...
- JDK7 LinkedList源代码分析
transient int size = 0; /** * Pointer to first node. * Invariant: (first == null && last == ...
- 【系统设计】论文总结之：Butler W. Lampson. Hints for computer system design
Butler W. Lampson. Hints for computer system design. ACM Operating Systems Rev. 15, 5 (Oct. 1983), p ...
- PyCharm 安装指南
一.官网下载最新版的PyCharm,根据平台选择版本(Liunx,Windows) 地址:https://www.jetbrains.com/pycharm/download/#section=win ...
- linux安装bind with DLZ <NIOT>
2015年6月11日 1.sudo wget ftp://ftp.isc.org/isc/bind9/9.10.1/bind-9.10.1.tar.gz 或者 使用“rz”命令 2.tar -zxv ...
- iOS 打包上传AppStore相关(3)-iTunes相应配置以及使用蒲公英网站进行应用托管分发(链接/二维码)
上一篇讲到我们最终生成了一个格式为 .xcarchive 的文件(可以右键并Show in Finder)查看.本篇我们就进行最后的设置,打包上传.另外,还有一个小福利,那就是打测试包分发链接测试. ...
- C# lesson3
一.局部变量和成员变量 1.程序入口(Main)要调用非静态成员(变量或方法)的话,是需要通过对象去调用的: 2.普通方法里面去调用变量或方法的话可以直接调用 成员变量(全局变量):放在Main方法之 ...