超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
下面对html的一些主要标签进行简单介绍
先来看一个简单的实例:
<!DOCTYPE html> ——声明
<html>
<head>
<meta charset="utf-8">
<title>教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
-
标签 | 意义 |
<head> | <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. |
<title> | <title> 元素:
|
<base> | <base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接: <head> <base href="http://www.runoob.com/images/" target="_blank"> </head> |
<link> | <link> 标签定义了文档与外部资源之间的关系。 <link> 标签通常用于链接到样式表: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
<style> | 定义了html文档的样式,一般与css混合使用 |
<meta> | meta标签描述了一些基本的元数据。 <meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。 META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。 元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服 <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> |
<script> | <script> 标签用于定义客户端脚本,比如 JavaScript。 <script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。 JavaScript 最常用于图片操作、表单验证以及内容动态更新。 下面的脚本会向浏览器输出"Hello World!": 实例
<
script
>
document
.
write
(
"
Hello World!
"
)
;</
script
>
|
<body> | html页面主体 |
<h> | 定义 HTML 标题 |
<p> | 定义html段落 |
<br> | 插入单个折行(换行) |
<a> (链接) | HTML使用标签 <a>来设置超文本链接。 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。 在标签<a> 中使用了href属性来描述链接的地址。 默认情况下,链接将以以下形式出现在浏览器中:
|
<img> (图像) | 在 HTML 中,图像由<img> 标签定义。 <img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。 要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。 定义图像的语法是:
<img src="
url" alt="
some_text">
URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中,那么其 URL 为http://www.runoob.com/images/pulpit.jpg。 alt 属性用来为图像定义一串预备的可替换的文本。 替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。 |
<table> (表格) | 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 |
<ul> (无序列表) | 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表使用 <ul> 标签
<ul>
<li>Coffee</li> <li>Milk</li> </ul> 浏览器显示如下:
|
<ol> (有序列表) | 同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。 列表项项使用数字来标记。
<ol>
<li>Coffee</li> <li>Milk</li> </ol> 浏览器中显示如下:
|
<div> | HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。 如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。 r如<div calss="xxx"></div> |
<span> | HTML <span> 元素是内联元素,可用作文本的容器 <span> 元素也没有特定的含义。 当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性 |
<form> | 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 <form> 来设置:
<form>
. input 元素 . </form> 文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> <input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> <input type="submit"> 定义了提交按钮. 当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> |
class属性和id 属性定义了各种标签要引用的样式表,如<a class="样式类"></a>,其中样式类可以在别处定义。
区别是class类是用.来标识,class=a表明引用样式类.a,而id 用#a来标识,id=a,表示引用了样式类#a
html中的特殊字符需要转义;ru
字符 | 十进制 | 转义字符 |
---|---|---|
" | " | " |
& | & | & |
< | < | < |
> | > | > |
不断开空格(non-breaking space) |   | |
Html最新技术----Html5
HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。
HTML5 中的一些有趣的新特性:
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素,比如 article、footer、header、nav、section
- 新的表单控件,比如 calendar、date、time、email、url、search
HTML5提供了一些非常强大的JavaScript和HTML API,来帮助开发者构建精彩的桌面和移动应用程序。本文将介绍5个新型的API,希望对你的开发工作有所帮助。
1. 全屏API(Fullscreen API)
该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。
- // 找到适合浏览器的全屏方法
- function launchFullScreen(element) {
- if(element.requestFullScreen) {
- element.requestFullScreen();
- } else if(element.mozRequestFullScreen) {
- element.mozRequestFullScreen();
- } else if(element.webkitRequestFullScreen) {
- element.webkitRequestFullScreen();
- }
- }
- // 启动全屏模式
- launchFullScreen(document.documentElement); // the whole page
- launchFullScreen(document.getElementById("videoElement")); // any individual element
教程 / 演示
2. 页面可见性API(Page Visibility API)
该API可以用来检测页面对于用户的可见性,即返回用户当前浏览的页面或标签的状态变化。
- // 设置隐藏属性和可见改变事件的名称,属性需要加浏览器前缀
- // since some browsers only offer vendor-prefixed support
- var hidden, state, visibilityChange;
- if (typeof document.hidden !== "undefined") {
- hidden = "hidden";
- visibilityChange = "visibilitychange";
- state = "visibilityState";
- } else if (typeof document.mozHidden !== "undefined") {
- hidden = "mozHidden";
- visibilityChange = "mozvisibilitychange";
- state = "mozVisibilityState";
- } else if (typeof document.msHidden !== "undefined") {
- hidden = "msHidden";
- visibilityChange = "msvisibilitychange";
- state = "msVisibilityState";
- } else if (typeof document.webkitHidden !== "undefined") {
- hidden = "webkitHidden";
- visibilityChange = "webkitvisibilitychange";
- state = "webkitVisibilityState";
- }
- // 添加一个标题改变的监听器
- document.addEventListener(visibilityChange, function(e) {
- // 开始或停止状态处理
- }, false);
教程 / 演示
3. getUserMedia API
该API允许Web应用程序访问摄像头和麦克风,而无需使用插件。
- // 设置事件监听器
- window.addEventListener("DOMContentLoaded", function() {
- // 获取元素
- var canvas = document.getElementById("canvas"),
- context = canvas.getContext("2d"),
- video = document.getElementById("video"),
- videoObj = { "video": true },
- errBack = function(error) {
- console.log("Video capture error: ", error.code);
- };
- // 设置video监听器
- if(navigator.getUserMedia) { // Standard
- navigator.getUserMedia(videoObj, function(stream) {
- video.src = stream;
- video.play();
- }, errBack);
- } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
- navigator.webkitGetUserMedia(videoObj, function(stream){
- video.src = window.webkitURL.createObjectURL(stream);
- video.play();
- }, errBack);
- }
- }, false);
教程 / 演示
4. 电池API(Battery API)
这是一个针对移动设备应用程序的API,主要用于检测设备电池信息。
- var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
- // 电池属性
- console.warn("Battery charging: ", battery.charging); // true
- console.warn("Battery level: ", battery.level); // 0.58
- console.warn("Battery discharging time: ", battery.dischargingTime);
- // 添加事件监听器
- battery.addEventListener("chargingchange", function(e) {
- console.warn("Battery charge change: ", battery.charging);
- }, false);
教程
5. Link Prefetching
预加载网页内容,为浏览者提供一个平滑的浏览体验。
- <!-- full page -->
- <link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />
- <!-- just an image -->
- <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />