本文为RUNOOB.COM、尚学堂网络课程和W3school我的笔记,其中有大量内容原引自他们,只作我的学习交流之用,文章组织方式为排版加原理的标题顺序,并非新学者的学习过程,如是新学者,可参考上面进行学习。php
当打开了一个项目的时候,WebStorm会显示主窗口,包含有六个部分,分别是菜单栏 、工具栏 、导航栏、状态栏 、编辑器、WebStorm 工具窗口,以下图所示,图中已用红色标示css
file-->new project-->指定路径-->点击上面的新建按钮建立一个文件夹,而后ok,建立好项目后,项目文件夹中会带有.idea这样一个文件
html
右击项目-->new-->html file-->输入文件名-->下面的下拉框能够选择h5仍是h4或是xhtml类型的文档,咱们选择h5,也就是默认的。写名字的时候不用加html后缀,webstrom会自动为咱们加。
web
右击html文件-->refactor-->rename---改好后回车
编程
右击html文件-->delete-->ok(或者直接按电脑上的del键,回车)canvas
FILE下(一般操做关于文件、工程) windows
file->setting->editor->colors&fonts->scheme选择你的主题(darcula) 浏览器
file->settings->Appearance&Behavior->System settings 去掉reopen last project on startup(在启动的时候老是打开最后的工程) 安全
file->settings->appearance中勾选override default fonts by(not recommended),设置name:NsimSum,Size:12
(appearance外观选项,选中“重写默认字体”,设置名字为NsimSum,它是windows下的宋体字,字号12)。这里设置的是整个IDE显示的文字,包括菜单列表的字。你能够试着把它改为英文,那样再在菜单项中看,中文有的会不正常显示,变成小方块了。
ruby
在代码显示区的左边右击选择“show line number”。
file-settings-editor->general-> "use soft wraps in editor" 打上钩,代码就自动换行了。
1.HTML用于描述功能的符号成为“标签”
<标签>内容</标签>
2.标签都封装在一对尖括号“<...>”之中,由尖括号包围的关键词,如<html>就是一个标签
3.封闭类型标记(也叫双标记),必须成对出现,如<p></p>,标签对中的第一个标签是开始标签/开放标签,第二个标签是结束标签/闭合标签
4.非封闭类型标记,也叫做空标记,或者单标记,如<br/>
5.Web 浏览器的做用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容
6.使用小写标签
HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在将来 (X)HTML 版本中强制使用小写。
7.标签可嵌套,标签之间能够相互嵌套,但要注意嵌套顺序
8.语义化标签语义化:明白每一个标签的用途(在什么状况下使用此标签合理)好比,网页上文章的标题就能够用标题标签 h1-h6,段落用p,地址用address等
好处:1. 更容易被搜索引擎收录 2. 更容易让屏幕阅读器读出网页内容
HTML 连接由 <a> 标签订义。连接的地址在 href 属性中指定: <a href="http://www.runoob.com">这是一个连接</a>
使用小写 属性和属性值对大小写不敏感
不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
<p align = "center">段落一</P> <!-- 属性 属性值-->
属性 | 描述 |
---|---|
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的惟一id, class 属性能够多用 class=" " (引号里面能够填入多个class属性) |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息 (做为工具条使用) |
<!-- 注释的文本内容 -->
从初期的网络诞生后,已经出现了许多HTML版本:
版本 | 发布时间 |
---|---|
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2012 |
XHTML5 | 2013 |
下面是一个可视化的HTML页面结构:
只有 <body> 区域 (白色部分) 才会在浏览器中显示
<!DOCTYPE html> <!--文档类型声明--> <html lang="en"> <head> <meta charset="utf-8"> <title>网页标题</title> <!--文档标题,一个网页只能有一个标题--> </head> <body> <h1>第一个标题</h1> <p>第一个段落</p> </body> </html>
例子
<!DOCTYPE html>
定义
什么是DTD文档模型,为何写在HTML当中?
DTD文档模型也称DOCTYPE文档声明,它是Document Type Definition的英文缩写,意思是文档类型定义,在HTML文档中,用来指定页面所使用的HTML(或者XHTML)的版本。要想制做符合标准的页面,一个必不可少的关键组成部分就 是DOCTYPE声明。只有肯定了一个正确的DOCTYPE,HTML里的标识和CSS才能正常生效。它通常被定义在页面的第一行,html标签以前。
DTD文档模型=DOCTYPE=DOCTYPE文档声明
做用
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有不少不一样的文件,若是可以正确声明HTML的版本,浏览器就能正确显示网页内容。
<!DOCTYPE> 声明不是一个 HTML 标签;可是是一个标签,标签保护HTML标签和其余标签,<!DOCTYPE> 标签没有结束标签;它是用来告知 Web 浏览器页面使用了哪一种 HTML 版本。
位置
<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签以前。
写法
doctype 声明是不区分大小写
通用声明
<!DOCTYPE html> T
<!DOCTYPE html> T <!DOCTYPE HTML> T <!doctype html> T <!Doctype Html> T
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
这个 DTD 包含全部 HTML 元素和属性,包括表象或过期的元素(如 font )。框架集是不容许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
这个 DTD 包含全部 HTML 元素和属性,但不包括表象或过期的元素(如 font )。框架集是不容许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
这个 DTD 与 HTML 4.01 Transitional 相同,可是容许使用框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这个 DTD 包含全部 HTML 元素和属性,包括表象或过期的元素(如 font )。框架集是不容许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
这个 DTD 包含全部 HTML 元素和属性,但不包括表象或过期的元素(如 font )。框架集是不容许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
这个 DTD 与 XHTML 1.0 Transitional 相同,可是容许使用框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
这个 DTD 与 XHTML 1.0 Strict 相同,可是容许您添加模块(例如为东亚语言提供 ruby 支持)。
xhtml和html的区别
XHTML是HTML向XML的一个过渡语言,在最初W3C组织但愿把HTML变成更为严谨的标记语言(好比XML),但HTML的已经应用的太为普遍,所有换掉不太现实。所以产生了XHTML这样一种过分形式。它比HTML更严谨,基本标签都仍是沿用了HTML,但废除了“表现层”的标签,同时要求标签的严格嵌套,标签结束等等。
定义 HTML 文档,这个元素咱们浏览器看到后就明白这是个HTML文档了,因此你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。
<html> <head> <title>个人第一个 HTML 页面</title> </head> <body> <p>body 元素的内容会显示在浏览器中。</p> </body> </html>
标签用于定义文档的头部,它是全部头部元素的容器。<head> 中的元素能够引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各类属性和信息,包括文档的标题、在 Web 中的位置以及和其余文档的关系等。绝大多数文档头部包含的数据都不会真正做为内容显示给读者。
<html> <head> <title>个人第一个 HTML 页面</title> </head> <body> <p>body 元素的内容会显示在浏览器中。</p> </body> </html>
位置
文档的头部常常会包含一些 <meta> 标签,用来告诉浏览器关于文档的附加信息。
成分
<title>、<meta>、<link>、<style>、 <script>。
<body> 元素包含了可见的页面内容
<html> <head> <title>个人第一个 HTML 页面</title> </head> <body> <p>body 元素的内容会显示在浏览器中。</p> </body> </html>
lang是language的意思,lang=”en”属性对每张页面中的主要语言进行声明,en表明了英文,只是个声明,声明了它,对搜索引擎和浏览器更友好,并不会更改显示内容。它还有常见的值是zh-CN,表明了中文。(搜索引擎不会判断该站点是中文仍是英文,它让搜索引擎知道你的站点是中文站,这些都是html规范,越规范,越容易被收录)
<head> 元素包含了全部的头部标签元素。在 <head>元素中你能够插入脚本(scripts), 样式文件(CSS),及各类meta信息。
能够添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
标签 | 描述 |
---|---|
<head> | 定义了文档的信息 |
<title> | 定义了文档的标题 |
<base> | 定义了页面连接标签的默认连接地址 |
<link> | 定义了一个文档和外部资源之间的关系 |
<meta> | 定义了HTML文档中的元数据 |
<script> | 定义了客户端的脚本文件 |
<style> | 定义了HTML文档的样式文件 |
1.可定义文档的标题。
2.它显示在浏览器窗口的标题栏或状态栏上。
3.当把文档加入用户的收藏夹或书签列表时,标题将成为该文档的默认名称。
4.<title> 标签是 <head> 标签中惟一必需要求包含的东西,就是说写head必定要写title,不是说其它的不加,而是title必定要加。
5.title写和你网页相关的关键词有利于SEO优化
<html> <head> <title>我会显示标题栏状态栏收藏栏里</title> </head> <body> ... </body> </html>
*SEO是搜索引擎优化的英文缩写。
经过对网站内容调整,知足搜索引擎的排名需求,从而提升本身网站被搜索引擎平台录取的概率,从而把精准用户带到网站。
网站都有目标群体,经过title、meta标签可让目标群体经过关键词找到你的网站,因此你定义的关键词决定了会吸引什么样的群体。
HTML<title>元素不只能够显示文本,也能够在左侧显示logo等图片。
显示时,要将<link>标签放入<head>里。
举例:
<!doctype HTML> <html> <head> <link rel="shortcut icon" href="图片url"> <title>这是一个带图片的标签</title> </head> <body> …… …… …… </body> </html>
用来向浏览器或搜索引擎描述页面。好比文档的描述和关键词。它只能够放在head中。属于元信息标签。
<meta charset="UTF-8">
META标签用来描述一个HTML网页文档的属性,此处的charset=”utf-8”是说当前使用的是utf-8编码格式,在开发中咱们常常会看到utf-8,或是gbk,这些都是编码格式。国外通常会用gbk、gb2312,国内一般使用utf-8。
属性值有
keywords用来告诉搜索引擎你网页的关键字是什么。
<meta name="keywords" content="我的,博客">
description用来告诉搜索引擎你的网站主要内容。
<meta name="description" content="web学习,经验分享">
标注网页的做者
<meta name="author" content="xxxx,xxxx@xxxx.com">
<base> 标签描述了基本的连接地址/连接目标,该标签做为HTML文档中全部的连接标签的默认连接:
<head> <base href="http://www.cmaker.tech/images/" target="_blank"> </head>
<link> 标签订义了文档与外部资源之间的关系。
<link> 标签一般用于连接到样式表:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
<style> 标签订义了HTML文档的样式文件引用地址.
在<style> 元素中你也能够直接添加样式来渲染 HTML 文档:
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
<script>标签用于加载脚本文件,如: JavaScript。
HTML 标题(Heading)是经过 <h1> - <h6> 标签进行定义的
<h1> 定义最大的标题 <h6> 定义最小的标题 <h7>按照正文显示
<h1>这是一级标题。</h1> <h2>这是二级标题。</h2> <h3>这是三级标题。</h3> <h4>这是四级标题。</h4> <h5>这是五级标题。</h5> <h6>这是六级标题。</h6>
注意:浏览器会自动地在标题的先后添加空行
标题很重要
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。
由于用户能够经过标题来快速浏览您的网页,因此用标题来呈现文档结构是很重要的。
应该将 h1 用做主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
段落是经过 <p> 标签订义的。
<p>这是一个段落 </p> <p>这是另外一个段落</p>
浏览器会自动地在段落的先后添加空行。(</p> 是块级元素)
使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它
<p>这个<br>段落<br>演示了分行的效果</p>
<br> 是没有关闭标签的空元素(<br> 标签订义换行)。
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。空元素在开始标签中进行关闭(以开始标签的结束而结束)
在 XHTML、XML 以及将来版本的 HTML 中,全部元素都必须被关闭。
在开始标签中添加斜杠,好比 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即便 <br> 在全部浏览器中都是有效的,但使用 <br /> 实际上是更长远的保障。
不产生一个新段落的状况下进行换行(新行),使用 <br /> 标签
<hr /> 标签在 HTML 页面中建立水平线。
hr 元素可用于分隔内容。
<p>这是一个段落。</p> <hr /> <p>这是一个段落。</p> <hr /> <p>这是一个段落。</p>
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
对于 HTML,没法经过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。全部连续的空格或空行都会被算做一个空格。须要注意的是,HTML 代码中的全部连续的空行(换行)也被显示为一个空格。
HTML提供了5种空格实体(space entity),它们拥有不一样的宽度,非断行空格( )是常规空格的宽度,可运行于全部主流浏览器。其余几种空格( )在不一样浏览器中宽度各异。 | |
| 它叫不换行空格,全称No-Break Space,它是最多见和咱们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格。在HTML中,若是你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加,该空格占据宽度受字体影响明显而强烈。 |
  | 它叫“半角空格”,全称是En Space,en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一向的特性:透明的,此空格有个至关稳健的特性,就是其占据的宽度正好是1/2个中文宽度,并且基本上不受字体影响。两个普通空格 |
  | 它叫“全角空格”,全称是Em Space,em是字体排印学的计量单位,至关于当前指定的点数。例如,1 em在16px的字体中就是16px。此空格也传承空格家族一向的特性:透明的,此空格也有个至关稳健的特性,就是其占据的宽度正好是1个中文宽度,并且基本上不受字体影响。四个普通空格 |
  | 它叫窄空格,全称是Thin Space。咱们不妨称之为“瘦弱空格”,就是该空格长得比较瘦弱,身体单薄,占据的宽度比较小。它是em之六分之一宽。 |
以上表格内容引自坐在那边看天空 |
HTML使用标签 <a>来设置超文本连接。超连接能够是一个字,一个词,或者一组词,也能够是一幅图像,您能够点击这些内容来跳转到新的文档或者当前文档中的某个部分。当把鼠标指针移动到网页中的某个连接上时,箭头会变为一只小手。
默认状况下,连接将以如下形式出如今浏览器中:
注意:
在标签<a> 中使用了href属性来描述连接的地址。
<a href="url">连接文本</a>
href 属性描述了连接的目标。
实例
<a href="https://www.cnblogs.com/ZanderZhao/">个人主页</a>
<a href="https://www.cnblogs.com/ZanderZhao/">个人主页</a>
<a> 标签的 target 属性规定在何处打开连接文档。
<a target="value">
值 | 描述 |
---|---|
_blank | 在新窗口中打开被连接文档。 |
_self | 默认。在相同的框架中打开被连接文档。 |
_parent | 在父框架集中打开被连接文档。 |
_top | 在整个窗口中打开被连接文档。 |
framename | 在指定的框架中打开被连接文档。 |
若是在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。若是这个指定名称或 id 的框架或者窗口不存在,浏览器将打开一个新的窗口,给这个窗口一个指定的标记,而后将新的文档载入那个窗口。今后之后,超连接文档就能够指向这个新的窗口。
被指向的超连接使得建立高效的浏览工具变得很容易。例如,一个简单的内容文档的列表,能够将文档重定向到一个单独的窗口:
<h3>Table of Contents</h3> <ul> <li><a href="pref.html" target="view_window">Preface</a></li> <li><a href="chap1.html" target="view_window">Chapter 1</a></li> <li><a href="chap2.html" target="view_window">Chapter 2</a></li> <li><a href="chap3.html" target="view_window">Chapter 3</a></li> </ul>
当用户第一次选择内容列表中的某个连接时,浏览器将打开一个新的窗口,将它标记为 "view_window",而后在其中显示但愿显示的文档内容。若是用户从这个内容列表中选择另外一个连接,且这个 "view_window" 仍处于打开状态,浏览器就会再次将选定的文档载入那个窗口,取代刚才的那些文档。
在整个过程当中,这个包含了内容列表的窗口是用户能够访问的。经过单击窗口中的一个链接,可以使另外一个窗口的内容发生变化。
不用打开一个完整的浏览器窗口,使用 target 更一般的方法是在一个 <frameset> 显示中将超连接内容定向到一个或者多个框架中。能够将这个内容列表放入一个带有两个框架的文档的其中一个框架中,并用这个相邻的框架来显示选定的文档:
<frameset cols="100,*"> <frame src="toc.html"> <frame src="pref.html" name="view_frame"> </frameset>
当浏览器最初显示这两个框架的时候,左边这个框架包含目录,右边这个框架包含前言。
这是 "toc.html" 的源代码:
<h3>Table of Contents</h3> <ul> <li><a href="pref.html" target="view_frame">Preface</a></li> <li><a href="chap1.html" target="view_frame">Chapter 1</a></li> <li><a href="chap2.html" target="view_frame">Chapter 2</a></li> <li><a href="chap3.html" target="view_frame">Chapter 3</a></li> </ul>
请注意,在文档 "toc.html" 中,每一个连接的目标都是 "view_frame",也就是右边的框架。
当用户从左边框架中的目录中选择一个连接时,浏览器会将这个关联的文档载入并显示在右边这个 "view_frame" 框架中。当其余连接被选中时,右边这个框架中的内容也会发生变化,而左边这个框架始终保持不变。
有 4 个保留的目标名称用做特殊的文档重定向操做:
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对全部没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中做为源文档。这个目标是多余且没必要要的,除非和文档标题 <base> 标签中的 target 属性一块儿使用。
_parent
这个目标使得文档载入父窗口或者包含来超连接引用的框架的框架集。若是这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超连接的窗口,用 _top 目标将会清除全部被包含的框架并将文档载入整个浏览器窗口。
提示:这些 target 的全部 4 个值都如下划线开始。任何其余用一个下划线做为开头的窗口或者目标都会被浏览器忽略,所以,不要将下划线做为文档中定义的任何框架 name 或 id 的第一个字符。
id属性可用于建立在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,因此对于读者来讲是隐藏的。
实例
<!--在HTML文档中插入ID:--> <a id="tips">有用的提示部分</a> <!--在HTML文档中建立一个连接到"有用的提示部分(id="tips")":--> <a href="#tips">访问有用的提示部分</a> <!--或者,从另外一个页面建立一个连接到"有用的提示部分(id="tips")":--> <a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>
基本的注意事项
注释: 请始终将正斜杠添加到子文件夹。假如这样书写连接:href="https://i.cnblogs.com",就会向服务器产生两次 HTTP 请求。这是由于服务器会添加正斜杠到这个地址,而后建立一个新的请求,就像这样:href="https://i.cnblogs.com/"。
标签 | 描述 |
---|---|
<img> | 定义图像 |
<map> | 定义图像地图 |
<area> | 定义图像地图中的可点击区域 |
在 HTML 中,图像由<img> 标签订义。
<img> 是空标签,意思是说,它只包含属性,而且没有闭合标签。
<img src="url" alt="some_text">
要在页面上显示图像,你须要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
表格由 <table> 标签来定义。每一个表格均有若干行(由 <tr> 标签订义),每行被分割为若干单元格(由 <td> 标签订义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格能够包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
标签 | 描述 |
---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<caption> | 定义表格标题 |
<colgroup> | 定义表格列的组 |
<col> | 定义用于表格列的属性 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
html列表标签 | |
---|---|
标签 | 描述 |
<ol> | 定义有序列表 |
<ul> | 定义无序列表 |
<li> | 定义列表项 |
<dl> | 定义列表 |
<dt> | 自定义列表项目 |
<dd> | 定义自定列表项的描述 |
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表使用 <ul> 标签
<ul> <li>Coffee</li> <li>Milk</li> </ul>
有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每一个列表项始于 <li> 标签。
列表项使用数字来标记
<ol> <li>Coffee</li> <li>Milk</li> </ol>
自定义列表不只仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每一个自定义列表项以 <dt> 开始。每一个自定义列表项的定义以 <dd> 开始。
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
列表项内部可使用段落、换行符、图片、连接以及其余列表等等。
HTML 文本格式化标签
标签 | 描述 |
---|---|
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号字 |
<strong> | 定义加剧语气 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
HTML "计算机输出" 标签
标签 | 描述 |
---|---|
<code> | 定义计算机代码 |
<kbd> | 定义键盘码 |
<samp> | 定义计算机代码样本 |
<var> | 定义变量 |
<pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签订义
标签 | 描述 |
---|---|
<abbr> | 定义缩写 |
<address> | 定义地址 |
<bdo> | 定义文字方向 |
<blockquote> | 定义长的引用 |
<q> | 定义短的引用语 |
<cite> | 定义引用、引证 |
<dfn> | 定义一个定义项目。 |
HTML5 Audio 标签
标签 | 描述 |
---|---|
<audio> | 定义了声音内容 |
<source> | 规定了多媒体资源, 能够是多个,在 <video> 与 <audio>标签中使用 |
音频格式的MIME类型
Format | MIME-type |
---|---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
HTML5 Video 标签 | |
---|---|
标签 | 描述 |
<video> | 定义一个视频 |
<source> | 定义多种媒体资源,好比 <video> 和<audio> |
<track> | 定义在媒体播放器文本轨迹 |
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.若是设置的高度和宽度,所需的视频空间会在页面加载时保留。若是没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素能够连接不一样的视频文件。
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 </video>
视频格式
格式 | MIME-type | |
---|---|---|
MP4 | MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 |
video/mp4 |
WebM | WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 |
video/webm |
Ogg | Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 |
video/ogg |
表单是一个包含表单元素的区域。
表单元素是容许用户在表单中输入内容,好比:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form> . input 元素 . </form>
HTML 表单用于收集不一样类型的用户输入。
html表单标签 | |
---|---|
标签 | 描述 |
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义了 <input> 元素的标签,通常为输入标题 |
<fieldset> | 定义了一组相关的表单元素,并使用外框包含起来 |
<legend> | 定义了 <fieldset> 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist>New | 指定一个预先定义的输入控件选项列表 |
<keygen>New | 定义了表单的密钥对生成器字段 |
<output>New | 定义一个计算结果 |
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 能够经过如下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是经过外部引用CSS文件.
HTML 脚本标签 | |
---|---|
标签 | 描述 |
<script> | 定义了客户端脚本 |
<noscript> | 定义了不支持脚本浏览器输出的文本 |
<script> 标签用于定义客户端脚本,好比 JavaScript。
<script> 元素既可包含脚本语句,也可经过 src 属性指向外部脚本文件。
JavaScript 最经常使用于图片操做、表单验证以及内容动态更新。
HTML<noscript> 标签
<noscript> 标签提供没法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中可以找到的全部元素。
只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容:
<script> document.write("Hello World!") </script> <noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>
使用HTML5能够在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。可是Web 存储须要更加的安全与快速. 这些数据不会被保存在服务器上,可是这些数据只用于用户请求网站数据上.它也能够存储大量的数据,而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只容许该网页访问使用。
localStorage 和 sessionStorage
客户端存储数据的两个对象为:
localStorage - 用于长久保存整个网站的数据,保存的数据没有过时时间,直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页以后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}
localStorage 对象存储的数据没有时间限制。次日、第二周或下一年以后,数据依然可用。
localStorage.sitename="个人主页";
document.getElementById("result").innerHTML="网站名:" + localStorage.sitename;
实例解析:
使用 key="sitename" 和 value="菜鸟教程" 建立一个 localStorage 键/值对。
检索键值为"sitename" 的值而后将数据插入 id="result"的元素中。
以上实例也能够这么写:
// 存储
localStorage.sitename = "个人主页";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;
移除 localStorage 中的 "sitename" :
localStorage.removeItem("sitename");
无论是 localStorage,仍是 sessionStorage,可以使用的API都相同,经常使用的有以下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除全部数据:localStorage.clear();
获得某个索引的key:localStorage.key(index);
提示: 键/值对一般以字符串存储,你能够按本身的须要转换该格式。
下面的实例展现了用户点击按钮的次数。
代码中的字符串值转换为数字类型:
实例
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
如何建立并访问一个 sessionStorage:
实例
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,一般会以新行来开始(和结束)。
实例: <h1>, <p>, <ul>, <table>
内联元素在显示时一般不会以新行开始。
实例: <b>, <td>, <a>, <img>
html分组标签 | |
---|---|
标签 | 描述 |
<div> | 定义了文档的区域,块级 (block-level) |
<span> | 用来组合文档中的行内元素, 内联元素(inline) |
HTML <div> 元素
HTML <div> 元素是块级元素,它可用于组合其余 HTML 元素的容器。
<div> 元素没有特定的含义。除此以外,因为它属于块级元素,浏览器会在其先后显示折行。
若是与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另外一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的做用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素,可用做文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
标签 | 描述 |
---|---|
<div> | 定义文档区块,块级(block-level) |
<span> | 定义 span,用来组合文档中的行内元素。 |
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来建立多列布局:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>个人主页</title> </head> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的网页标题</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 内容在这里</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版权 © cmaker.tech</div> </div> </body> </html>
使用 HTML <table> 标签是建立布局的一种简单的方式。
大多数站点可使用 <div> 或者 <table> 元素来建立多列。CSS 用于对元素进行定位,或者为页面建立背景以及色彩丰富的外观。
lamp 即便可使用 HTML 表格来建立漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具。
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>个人主页</title> </head> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>主要的网页标题</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;"> 内容在这里</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> 版权 © cmaker.tech</td> </tr> </table> </body> </html>
HTML 布局 - 有用的提示
Tip: 使用 CSS 最大的好处是,若是把 CSS 代码存放到外部样式表中,那么站点会更易于维护。经过编辑单一的文件,就能够改变全部页面的布局。如需学习更多有关 CSS 的知识
Tip: 因为建立高级的布局很是耗时,使用模板是一个快速的选项。经过搜索引擎能够找到不少免费的网站模板(您可使用这些预先构建好的网站布局,并优化它们)
经过使用框架,你能够在同一个浏览器窗口中显示不止一个页面。
iframe语法:
<iframe src="URL"></iframe>
该URL指向不一样的网页。
HTML iframe 标签 | |
---|---|
标签 | 说明 |
<iframe> | 定义一个内联的iframe |
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 可是你能够指定其按比例显示 (如:"80%")。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用iframe来显示目标连接页面
iframe能够显示一个目标连接的页面
目标连接的属性必须使用iframe的属性,以下实例:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.baidu.com" target="iframe_a">Baidu.COM</a></p>
HTML 颜色由红色、绿色、蓝色混合而成。
HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。
每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。
1600万种不一样颜色,三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不一样颜色(256 x 256 x 256)。
数年之前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色做为 Web 标准被建议使用。其中的缘由是,微软和 Mac 操做系统使用了 40 种不一样的保留的固定系统颜色(双方大约各使用 20 种)。
咱们不肯定现在这么作的意义有多大,由于愈来愈多的计算机有能力处理数百万种颜色,不过作选择仍是你本身。
最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,全部的计算机可以正确地显示全部的颜色
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
RGBA 的意思是(Red-Green-Blue-Alpha)它是在 RGB 上扩展包括了 “alpha” 通道,运行对颜色值设置透明度。
div {
background:rgba(255,0,0,0.5);
}
相对于使用 rgb(255,255,0),使用 rgba(255,255,0,0.5) 能够实现设置颜色透明度的功能,这里的 0.5 表示透明度,范围 0~1,0 表示全透明。
一般咱们为了省略一个 0:
div {
background:rgba(255,0,0,.5);
}
实例:
<p style="background-color:rgb(255,255,0)"> 经过 rbg 值设置背景颜色 </p> <p style="background-color:rgba(255,255,0,0.25)"> 经过 rbg 值设置背景颜色 </p> <p style="background-color:rgba(255,255,0,0.5)"> 经过 rbg 值设置背景颜色 </p> <p style="background-color:rgba(255,255,0,0.75)"> 经过 rbg 值设置背景颜色 </p>
按颜色名排序
单击一个颜色名或者 16 进制值,就能够查看与不一样文字颜色搭配的背景颜色。
颜色由红(R)、绿(G)、蓝(B)组成。
颜色值
颜色值由十六进制来表示红、绿、蓝(RGB)。
每一个颜色的最低值为 0(十六进制为 00),最高值为 255(十六进制为FF)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。
三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。
颜色实例
颜色 | 3位十六进制颜色值 | 6位十六进制颜色值 | RGB |
---|---|---|---|
#000 | #000000 | rgb(0,0,0) | |
#F00 | #FF0000 | rgb(255,0,0) | |
#0F0 | #00FF00 | rgb(0,255,0) | |
#00F | #0000FF | rgb(0,0,255) | |
#FF0 | #FFFF00 | rgb(255,255,0) | |
#0FF | #00FFFF | rgb(0,255,255) | |
#F0F | #FF00FF | rgb(255,0,255) | |
#888 | #888888 | rgb(136,136,136) | |
#FFF | #FFFFFF | rgb(255,255,255) |
经过十六进制(Hex)的颜色值排序
简介:
在 HTML 中,某些字符是预留的。
在 HTML 中不能使用小于号(<)和大于号(>),这是由于浏览器会误认为它们是标签。
若是但愿正确地显示预留字符,咱们必须在 HTML 源代码中使用字符实体(character entities)。 字符实体相似这样:
&entity_name; 或 &#entity_number;
如需显示小于号,咱们必须这样写:< 或 < 或 <
提示: 使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持全部实体名称(对实体数字的支持却很好)。
应用场景:
HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可使用字符实体来替换。
结合音标符
发音符号是加到字母上的一个"glyph(字形)"。
一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。
变音符号能够出现字母的上面和下面,或者字母里面,或者两个字母间。
变音符号能够与字母、数字字符的组合来使用。
如下是一些实例:
音标符 | 字符 | Construct | 输出结果 |
---|---|---|---|
̀ | a | à | à |
́ | a | á | á |
̂ | a | â | â |
̃ | a | ã | ã |
̀ | O | Ò | Ò |
́ | O | Ó | Ó |
̂ | O | Ô | Ô |
̃ | O | Õ | Õ |
HTML字符实体
实体名称对大小写敏感,虽然 html 不区分大小写,但实体字符对大小写敏感。
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | ' (IE不支持) | ' |
¢ | 分 | ¢ | ¢ |
£ | 镑 | £ | £ |
¥ | 人民币/日元 | ¥ | ¥ |
€ | 欧元 | € | € |
§ | 小节 | § | § |
© | 版权 | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
现代的浏览器支持的字符集:
ISO-8859-1
ISO-8859-1 是大多数浏览器默认的字符集。
ISO-8859-1 的较低部分(从 1 到 127 之间的代码)是最初的 ASCII 字符集(0-9 的数字,大写和小写英文字母表,以及一些特殊字符)。
ISO-8859-1 的较高部分(从 160 到 255 之间的代码)包含了一些西欧国家使用的字符和一些被普遍使用的特殊字符,它们全都有实体名称。
这些符号中的大多数均可以在不进行实体引用的状况下使用,可是实体名称或实体编号为那些不容易经过键盘键入的符号提供了表达的方法。
HTML 预留字符
HTML and XHTML 预留了一些字符。好比,您不能使用包含这些字符的文本,由于浏览器可能会误觉得是 HTML 标签。
HTML and XHTML 中央处理器必须识别如下表格所列举的五种特殊字符:
字符 | 实体编号 | 实体名称 | 描述 |
---|---|---|---|
  | | 非间断空格(non-breaking space) | |
¡ | ¡ | ¡ | 倒置感叹号(inverted exclamation mark) |
¢ | ¢ | ¢ | 美分符号(cent) |
£ | £ | £ | 英镑符号(pound) |
¤ | ¤ | ¤ | 货币符号(currency) |
¥ | ¥ | ¥ | 日元符号(yen) |
¦ | ¦ | ¦ | 间断的竖杠(broken vertical bar) |
§ | § | § | 小节号(section) |
¨ | ¨ | ¨ | 分音符号(spacing diaeresis) |
© | © | © | 版权全部(copyright) |
ª | ª | ª | 阴性序数记号(feminine ordinal indicator) |
« | « | « | 左双角引号(angle quotation mark (left)) |
¬ | ¬ | ¬ | 否认符号(negation) |
| ­ | ­ | 软连字符(soft hyphen) |
® | ® | ® | 注册商标(registered trademark) |
¯ | ¯ | ¯ | 长音符号(spacing macron) |
° | ° | ° | 度符号(degree) |
± | ± | ± | 加减号/正负号(plus-or-minus) |
² | ² | ² | 上标 2(superscript 2) |
³ | ³ | ³ | 上标 3(superscript 3) |
´ | ´ | ´ | 尖音符号(spacing acute) |
µ | µ | µ | 微米符号(micro) |
¶ | ¶ | ¶ | 段落符号(paragraph) |
· | · | · | 中间点(middle dot) |
¸ | ¸ | ¸ | 变音符号(spacing cedilla) |
¹ | ¹ | ¹ | 上标 1(superscript 1) |
º | º | º | 阳性序数记号(masculine ordinal indicator) |
» | » | » | 右双角引号(angle quotation mark (right)) |
¼ | ¼ | ¼ | 1/4 分数(fraction 1/4) |
½ | ½ | ½ | 1/2 分数(fraction 1/2) |
¾ | ¾ | ¾ | 3/4 分数(fraction 3/4) |
¿ | ¿ | ¿ | 倒置问号(inverted question mark) |
ISO 8859-1 字符实体
字符 | 实体编号 | 实体名称 | 描述 |
---|---|---|---|
À | À | À | 大写字母 A,重音(grave accent) |
Á | Á | Á | 大写字母 A,尖音(acute accent) |
 |  |  | 大写字母 A,抑扬音(circumflex accent) |
à | à | à | 大写字母 A,腭化(tilde) |
Ä | Ä | Ä | 大写字母 A,带有变音符号标记(umlaut mark) |
Å | Å | Å | 大写字母 A,带有上圆圈(ring) |
Æ | Æ | Æ | 大写字母 AE |
Ç | Ç | Ç | 大写字母 C,变音(cedilla) |
È | È | È | 大写字母 E,重音(grave accent) |
É | É | É | 大写字母 E,尖音(acute accent) |
Ê | Ê | Ê | 大写字母 E,抑扬音(circumflex accent) |
Ë | Ë | Ë | 大写字母 E,带有变音符号标记(umlaut mark) |
Ì | Ì | Ì | 大写字母 I,重音(grave accent) |
Í | Í | Í | 大写字母 I,尖音(acute accent) |
Î | Î | Î | 大写字母 I,抑扬音(circumflex accent) |
Ï | Ï | Ï | 大写字母 I,带有变音符号标记(umlaut mark) |
Ð | Ð | Ð | 冰岛语大写字母 eth |
Ñ | Ñ | Ñ | 大写字母 N,腭化(tilde) |
Ò | Ò | Ò | 大写字母 O,重音(grave accent) |
Ó | Ó | Ó | 大写字母 O,尖音(acute accent) |
Ô | Ô | Ô | 大写字母 O,抑扬音(circumflex accent) |
Õ | Õ | Õ | 大写字母 O,腭化(tilde) |
Ö | Ö | Ö | 大写字母 O,带有变音符号标记(umlaut mark) |
× | × | × | 乘号(multiplication) |
Ø | Ø | Ø | 大写字母 O,带有斜线(slash) |
Ù | Ù | Ù | 大写字母 U,重音(grave accent) |
Ú | Ú | Ú | 大写字母 U,尖音(acute accent) |
Û | Û | Û | 大写字母 U,抑扬音(circumflex accent) |
Ü | Ü | Ü | 大写字母 U,带有变音符号标记(umlaut mark) |
Ý | Ý | Ý | 大写字母 Y,尖音(acute accent) |
Þ | Þ | Þ | 冰岛语大写字母 THORN |
ß | ß | ß | 德语小写字母 sharp s |
à | à | à | 小写字母 a,重音(grave accent) |
á | á | á | 小写字母 a,尖音(acute accent) |
â | â | â | 小写字母 a,抑扬音(circumflex accent) |
ã | ã | ã | 小写字母 a,腭化(tilde) |
ä | ä | ä | 小写字母 a,带有变音符号标记(umlaut mark) |
å | å | å | 小写字母 a,带有上圆圈(ring) |
æ | æ | æ | 小写字母 ae |
ç | ç | ç | 小写字母 c,变音(cedilla) |
è | è | è | 小写字母 e,重音(grave accent) |
é | é | é | 小写字母 e,尖音(acute accent) |
ê | ê | ê | 小写字母 e,抑扬音(circumflex accent) |
ë | ë | ë | 小写字母 e,带有变音符号标记(umlaut mark) |
ì | ì | ì | 小写字母 i,重音(grave accent) |
í | í | í | 小写字母 i,尖音(acute accent) |
î | î | î | 小写字母 i,抑扬音(circumflex accent) |
ï | ï | ï | 小写字母 i,带有变音符号标记(umlaut mark) |
ð | ð | ð | 冰岛语小写字母 eth |
ñ | ñ | ñ | 小写字母 n,腭化(tilde) |
ò | ò | ò | 小写字母 o,重音(grave accent) |
ó | ó | ó | 小写字母 o,尖音(acute accent) |
ô | ô | ô | 小写字母 o,抑扬音(circumflex accent) |
õ | õ | õ | 小写字母 o,腭化(tilde) |
ö | ö | ö | 小写字母 o,带有变音符号标记(umlaut mark) |
÷ | ÷ | ÷ | 除号(division) |
ø | ø | ø | 小写字母 o,带有斜线(slash) |
ù | ù | ù | 小写字母 u,重音(grave accent) |
ú | ú | ú | 小写字母 u,尖音(acute accent) |
û | û | û | 小写字母 u,抑扬音(circumflex accent) |
ü | ü | ü | 小写字母 u,带有变音符号标记(umlaut mark) |
ý | ý | ý | 小写字母 y,尖音(acute accent) |
þ | þ | þ | 冰岛语小写字母 thorn |
ÿ | ÿ | ÿ | 小写字母 y,带有变音符号标记(umlaut mark) |
<!DOCTYPE html> 是 HTML5 中惟一的 doctype,也被视做将网页 "升级" 到 HTML5 的第一步。
不少国外网站的 <!DOCTYPE html> 和 <HEAD> 之间都会有一段注释,如:
<!—[if IE 6 ]><html class="ie ielt9 ielt8 ielt7 ie6" lang="en-US"><![endif]—> <!—[if IE 7 ]><html class="ie ielt9 ielt8 ie7" lang="en-US"><![endif]—> <!—[if IE 8 ]><html class="ie ielt9 ie8" lang="en-US"><![endif]—> <!—[if IE 9 ]><html class="ie ie9" lang="en-US"><![endif]—> <!—[if (gt IE 9)|!(IE)]><!—><html lang="en-US"><!—<![endif]—>
改代码做用于 css,来写一些针对 IE 各版本的样式差别。
先判断用户用的哪一个 IE 版本,而后在标签上加上该版本的 class,这样能够方便 hack。
css 文件是这样写的:
.ie6 xxx {};
.ie7 xxx {};
这是目前最好的 hack 方式之一。
标签 | 描述 |
---|---|
<!--...--> | 定义注释 |
<!DOCTYPE> | 定义文档类型 |
<a> | 定义超文本连接 |
<abbr> | 定义缩写 |
<acronym> | 定义只取首字母的缩写,不支持HTML5 |
<address> | 定义文档做者或拥有者的联系信息 |
<applet> | HTML5中不同意使用。定义嵌入的 applet。 |
<area> | 定义图像映射内部的区域 |
<article>New | 定义一个文章区域 |
<aside>New | 定义页面的侧边栏内容 |
<audio>New | 定义音频内容 |
<b> | 定义文本粗体 |
<base> | 定义页面中全部连接的默认地址或默认目标。 |
<basefont> | HTML5不支持,不同意使用。定义页面中文本的默认字体、颜色或尺寸。 |
<bdi>New | 容许您设置一段文本,使其脱离其父元素的文本方向设置。 |
<bdo> | 定义文字方向 |
<big> | 定义大号文本,HTML5不支持 |
<blockquote> | 定义长的引用 |
<body> | 定义文档的主体 |
<br> | 定义换行 |
<button> | 定义一个点击按钮 |
<canvas>New | 定义图形,好比图表和其余图像,标签只是图形容器,您必须使用脚原本绘制图形 |
<caption> | 定义表格标题 |
<center> | HTML5不支持,不同意使用。定义居中文本。 |
<cite> | 定义引用(citation) |
<code> | 定义计算机代码文本 |
<col> | 定义表格中一个或多个列的属性值 |
<colgroup> | 定义表格中供格式化的列组 |
<command>New | 定义命令按钮,好比单选按钮、复选框或按钮 |
<datalist>New | 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 |
<dd> | 定义定义列表中项目的描述 |
<del> | 定义被删除文本 |
<details>New | 用于描述文档或文档某个部分的细节 |
<dfn> | 定义定义项目 |
<dialog>New | 定义对话框,好比提示框 |
<dir> | HTML5不支持,不同意使用。定义目录列表。 |
<div> | 定义文档中的节 |
<dl> | 定义列表详情 |
<dt> | 定义列表中的项目 |
<em> | 定义强调文本 |
<embed>New | 定义嵌入的内容,好比插件。 |
<fieldset> | 定义围绕表单中元素的边框 |
<figcaption>New | 定义<figure> 元素的标题 |
<figure>New | 规定独立的流内容(图像、图表、照片、代码等等)。 |
<font> | HTML5不支持,不同意使用。定义文字的字体、尺寸和颜色。 |
<footer>New | 定义 section 或 document 的页脚。 |
<form> | 定义了HTML文档的表单 |
<frame> | 定义框架集的窗口或框架 |
<frameset> | 定义框架集 |
<h1> to <h6> | 定义 HTML 标题 |
<head> | 定义关于文档的信息 |
<header>New | 定义了文档的头部区域 |
<hr> | 定义水平线 |
<html> | 定义 HTML 文档 |
<i> | 定义斜体字 |
<iframe> | 定义内联框架 |
<img> | 定义图像 |
<input> | 定义输入控件 |
<ins> | 定义被插入文本 |
<kbd> | 定义键盘文本 |
<keygen>New | 规定用于表单的密钥对生成器字段。 |
<label> | 定义 input 元素的标注 |
<legend> | 定义 fieldset 元素的标题。 |
<li> | 定义列表的项目 |
<link> | 定义文档与外部资源的关系 |
<map> | 定义图像映射 |
<mark>New | 定义带有记号的文本。请在须要突出显示文本时使用 <m> 标签。 |
<menu> | 不同意使用。定义菜单列表。 |
<meta> | 定义关于 HTML 文档的元信息。 |
<meter>New | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav>New | 定义导航连接的部分 |
<noframes> | 定义针对不支持框架的用户的替代内容。HTML5不支持 |
<noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
<object> | 定义内嵌对象 |
<ol> | 定义有序列表。 |
<optgroup> | 定义选择列表中相关选项的组合。 |
<option> | 定义选择列表中的选项。 |
<output>New | 定义不一样类型的输出,好比脚本的输出。 |
<p> | 定义段落。 |
<param> | 定义对象的参数。 |
<pre> | 定义预格式文本。 |
<progress>New | 定义运行中的进度(进程)。 |
<q> | 定义短的引用。 |
<rp>New | <rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。 |
<rt>New | <rt> 标签订义字符(中文注音或字符)的解释或发音。 |
<ruby>New | <ruby> 标签订义 ruby 注释(中文注音或字符)。 |
<s> | 不同意使用。定义加删除线的文本。 |
<samp> | 定义计算机代码样本。 |
<script> | 定义客户端脚本。 |
<section>New | <section> 标签订义文档中的节(section、区段)。好比章节、页眉、页脚或文档中的其余部分。 |
<select> | 定义选择列表(下拉列表)。 |
<small> | 定义小号文本。 |
<source>New | <source> 标签为媒介元素(好比 <video> 和 <audio>)定义媒介资源。 |
<span> | 定义文档中的节。 |
<strike> | HTML5不支持,不同意使用。定义加删除线文本。 |
<strong> | 定义强调文本。 |
<style> | 定义文档的样式信息。 |
<sub> | 定义下标文本。 |
<summary>New | <summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片断的详细信息。 |
<sup> | 定义上标文本。 |
<table> | 定义表格。 |
<tbody> | 定义表格中的主体内容。 |
<td> | 定义表格中的单元。 |
<textarea> | 定义多行的文本输入控件。 |
<tfoot> | 定义表格中的表注内容(脚注)。 |
<th> | 定义表格中的表头单元格。 |
<thead> | 定义表格中的表头内容。 |
<time>New | 定义日期或时间,或者二者。 |
<title> | 定义文档的标题。 |
<tr> | 定义表格中的行。 |
<track>New | <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。 |
<tt> | 定义打字机文本。 |
<u> | 不同意使用。定义下划线文本。 |
<ul> | 定义无序列表。 |
<var> | 定义文本的变量部分。 |
<video>New | <video> 标签订义视频,好比电影片断或其余视频流。 |
<wbr>New | 规定在文本中的何处适合添加换行符。 |
标签 | 描述 |
---|---|
基础 | |
<!DOCTYPE> | 定义文档类型。 |
<html> | 定义一个 HTML 文档 |
<title> | 为文档定义一个标题 |
<body> | 定义文档的主体 |
<h1> to <h6> | 定义 HTML 标题 |
<p> | 定义一个段落 |
<br> | 定义简单的折行。 |
<hr> | 定义水平线。 |
<!--...--> | 定义一个注释 |
格式 | |
<acronym> | HTML5再也不支持。 定义只取首字母的缩写。 |
<abbr> | 定义一个缩写。 |
<address> | 定义文档做者或拥有者的联系信息。 |
<b> | 定义粗体文本。 |
<bdi>New | 容许您设置一段文本,使其脱离其父元素的文本方向设置。 |
<bdo> | 定义文本的方向。 |
<big> | HTML5再也不支持。 定义大号文本。 |
<blockquote> | 定义块引用。 |
<center> | HTML5再也不支持。 HTML 4.01 已废弃。定义居中文本。 |
<cite> | 定义引用(citation)。 |
<code> | 定义计算机代码文本。 |
<del> | 定义被删除文本。 |
<dfn> | 定义定义项目。 |
<em> | 定义强调文本。 |
<font> | HTML5再也不支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色 |
<i> | 定义斜体文本。 |
<ins> | 定义被插入文本。 |
<kbd> | 定义键盘文本。 |
<mark>New | 定义带有记号的文本。 |
<meter>New | 定义度量衡。仅用于已知最大和最小值的度量。 |
<pre> | 定义预格式文本 |
<progress>New | 定义运行中的任务进度(进程)。 |
<q> | 定义短的引用。 |
<rp>New | 定义不支持 ruby 元素的浏览器所显示的内容。 |
<rt>New | 定义字符(中文注音或字符)的解释或发音。 |
<ruby>New | 定义 ruby 注释(中文注音或字符)。 |
<s> | 定义加删除线的文本。 |
<samp> | 定义计算机代码样本。 |
<small> | 定义小号文本。 |
<strike> | HTML5再也不支持。 HTML 4.01 已废弃。 定义加删除线的文本。 |
<strong> | 定义语气更为强烈的强调文本。 |
<sub> | 定义下标文本。 |
<sup> | 定义上标文本。 |
<time>New | 定义一个日期/时间 |
<tt> | HTML5再也不支持。 定义打字机文本。 |
<u> | 定义下划线文本。 |
<var> | 定义文本的变量部分。 |
<wbr>New | 规定在文本中的何处适合添加换行符。 |
表单 | |
<form> | 定义一个 HTML 表单,用于用户输入。 |
<input> | 定义一个输入控件 |
<textarea> | 定义多行的文本输入控件。 |
<button> | 定义按钮。 |
<select> | 定义选择列表(下拉列表)。 |
<optgroup> | 定义选择列表中相关选项的组合。 |
<option> | 定义选择列表中的选项。 |
<label> | 定义 input 元素的标注。 |
<fieldset> | 定义围绕表单中元素的边框。 |
<legend> | 定义 fieldset 元素的标题。 |
<datalist>New | 规定了 input 元素可能的选项列表。 |
<keygen>New | 规定用于表单的密钥对生成器字段。 |
<output>New | 定义一个计算的结果 |
框架 | |
<frame> | HTML5再也不支持。 定义框架集的窗口或框架。 |
<frameset> | HTML5再也不支持。定义框架集。 |
<noframes> | HTML5再也不支持。 定义针对不支持框架的用户的替代内容。 |
<iframe> | 定义内联框架。 |
图像 | |
<img> | 定义图像。 |
<map> | 定义图像映射。 |
<area> | 定义图像地图内部的区域。 |
<canvas>New | 经过脚本(一般是 JavaScript)来绘制图形(好比图表和其余图像)。 |
<figcaption>New | 定义一个 caption for a <figure> element |
<figure>New | figure 标签用于对元素进行组合。 |
Audio/Video | |
<audio>New | 定义声音,好比音乐或其余音频流。 |
<source>New | 定义media元素 (<video> 和 <audio>)的媒体资源。media |
<track>New | 为媒体(<video> 和 <audio>)元素定义外部文本轨道。 |
<video>New | 定义一个音频或者视频 |
连接 | |
<a> | 定义一个连接 |
<link> | 定义文档与外部资源的关系。 |
<nav>New | 定义导航连接 |
列表 | |
<ul> | 定义一个无序列表 |
<ol> | 定义一个有序列表 |
<li> | 定义一个列表项 |
<dir> | HTML5再也不支持。 HTML 4.01 已废弃。 定义目录列表。 |
<dl> | 定义一个定义列表 |
<dt> | 定义一个定义定义列表中的项目。 |
<dd> | 定义定义列表中项目的描述。 |
<menu> | 定义菜单列表。 |
<command>New | 定义用户可能调用的命令(好比单选按钮、复选框或按钮)。 |
表格 | |
<table> | 定义一个表格 |
<caption> | 定义表格标题。 |
<th> | 定义表格中的表头单元格。 |
<tr> | 定义表格中的行。 |
<td> | 定义表格中的单元。 |
<thead> | 定义表格中的表头内容。 |
<tbody> | 定义表格中的主体内容。 |
<tfoot> | 定义表格中的表注内容(脚注)。 |
<col> | 定义表格中一个或多个列的属性值。 |
<colgroup> | 定义表格中供格式化的列组。 |
样式/节 | |
<style> | 定义文档的样式信息。 |
<div> | 定义文档中的节。 |
<span> | 定义文档中的节。 |
<header>New | 定义一个文档头部部分 |
<footer>New | 定义一个文档底部 |
<section>New | 定义了文档的某个区域 |
<article>New | 定义一个文章内容 |
<aside>New | 定义其所处内容以外的内容。 |
<details>New | 定义了用户可见的或者隐藏的需求的补充细节。 |
<dialog>New | 定义一个对话框或者窗口 |
<summary>New | 定义一个可见的标题。 当用户点击标题时会显示出详细信息。 |
元信息 | |
<head> | 定义关于文档的信息 |
<meta> | 定义关于 HTML 文档的元信息。 |
<base> | 定义页面中全部连接的默认地址或默认目标。 |
<basefont> | HTML5再也不支持。 HTML 4.01 已废弃。 定义页面中文本的默认字体、颜色或尺寸。 |
程序 | |
<script> | 定义客户端脚本。 |
<noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
<applet> | HTML5再也不支持。 HTML 4.01 已废弃。 定义嵌入的 applet。 |
<embed>New | 定义了一个容器,用来嵌入外部应用或者互动程序(插件)。 |
<object> | 定义嵌入的对象。 |
<param> | 定义对象的参数。 |
属性 | 描述 |
---|---|
accesskey | 设置访问元素的键盘快捷键。 |
class | 规定元素的类名(classname) |
contenteditableNew | 规定是否可编辑元素的内容。 |
contextmenuNew | 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单 |
data-*New | 用于存储页面的自定义数据 |
dir | 设置元素中内容的文本方向。 |
draggableNew | 指定某个元素是否能够拖动 |
dropzoneNew | 指定是否将数据复制,移动,或连接,或删除 |
hiddenNew | hidden 属性规定对元素进行隐藏。 |
id | 规定元素的惟一 id |
lang | 设置元素中内容的语言代码。 |
spellcheckNew | 检测元素是否拼写错误 |
style | 规定元素的行内样式(inline style) |
tabindex | 设置元素的 Tab 键控制次序。 |
title | 规定元素的额外信息(可在工具提示中显示) |
translateNew | 指定是否一个元素的值在页面载入时是否须要翻译 |