概述html
标记语言(也称置标语言),是一种将文本及文本相关的其余信息结合起来,展示出关于文档结构和数据处理细节的计算机编码。与文本相关的其余信息(包括例如文本的结构和表示信息等)与原来的文本结合在一块儿,可是使用标记进行表示。标记语言经常使用于网页和网络应用程序。当今普遍使用的标记语言是:超文本标记语言(HTML)和 可扩展标记语言(XML)。
HTML(HyperText Markup Language)是一种用于建立网页的标准标记语言。常与 CSS、JavaScript 一块儿被用于设计使人赏心悦目的网页、网页应用程序以及移动应用程序的界面。 HTML 元素(如:<p>这是一个段落</p>)是构建网站的基石。一个元素一般包含文本信息和两个 HTML 标签,即:一个开标签(如:<p>),一个闭合标签(如:</p>)。浏览器使用 HTML 标签和脚原本诠释网页内容,但不会将它们显示在页面上。 HTML 文档(又称 web 页面)由 HTML 元素组成,即由 HTML 标签及文本信息组成。 HTML 能够嵌入脚本语言 JavaScript,其会影响 HTML 网页的行为;网页浏览器也能够引用层叠样式表(CSS)来定义文本和其余元素的外观与布局。
编写 HTML 的工具备不少,普通的文本编辑器就能够。若你尚未选择编辑器,那么推荐你使用 sublime text,相信你会爱上它。如下是官网连接:
sublime textweb
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
如图:canvas
注意:图中灰色的部分,是不会显示在网页上的,只有白色部分才会真正显示到网页上。该图是经过 HTML 标记后,显示在浏览器中的效果,下边贴出 HTML 代码。
浏览器
代码ruby
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> </body> <div id="html" style="border: 1px solid black; background-color: rgb(233, 233, 233); width: 500px; height: 400px; margin: 60px; padding: 6px;"><htlm> <div id="head" style="border: 1px solid black; margin: 25px; height: 100px; padding: 6px;"><head> <div id="title" style="border: 1px solid black; margin: 16px; padding: 6px;"><htlm>页面标题</htlm></div> </head></div> <div id="body" style="border: 1px solid black; background-color: white; margin: 25px; margin-top: 0px; height: 160px; padding: 6px;"><body> <div id="h1" style="border: 1px solid black; margin: 20px; padding: 6px;"><H1>这是一个标题</H1></div> <div id="p" style="border: 1px solid black; margin: 20px; padding: 6px;"><p>这是一个段落</p></div> </body></div> </html></div> </body> </html>
注意:对于以上的代码,你是否是看的想吐???对,我写的也想吐;不过,请不伤心难过。在接下来的日子里,你会渐渐地学会如何优雅地书写代码。
网络
段落app
<p>这是一个段落</p>
链接框架
<a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/">这是一个链接</a>
换行编辑器
<br/>
概述ide
属性老是以 键/值 对的形式出如今开标签中,为元素添加附加信息。一些 Boolean 类型的属性,也能够只包含属性名表示:"property": "true"。尽管属性对大小写不敏感,可是推荐使用小写。
经常使用的属性
属性 | 描述 | 是否为 HTML5 新增 |
---|---|---|
accesskey | 设置访问元素的键盘快捷键 | |
class | 规定元素的类名 | |
contenteditable | 规定元素内容是否可编辑 | 是 |
contextmenu | 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单 | 是 |
data-* | 用于存储页面的自定义数据 | 是 |
dir | 设置元素中内容的文本方向 | |
draggable | 指定某个元素是否可拖动 | 是 |
dropzone | 指定是否将数据复制,移动,或连接,或删除 | 是 |
hidden | 对元素进行隐藏 | 是 |
id | 规定元素的惟一 id | |
lang | 设置元素中内容的语言代码 | |
spellcheck | 检测元素是否拼写错误 | 是 |
style | 规定元素的行内样式(inline style) | |
tabindex | 设置元素的 Tab 键控制次序 | |
title | 规定元素的额外信息(可在工具提示中显示) | |
translate | 指定是否一个元素的值在页面载入时是否须要翻译 | 是 |
关于属性
在此,再也不详细叙述每个属性的用法,在后续的内容中,会逐渐地阐述这些属性的使用方法及对元素的影响。
基础
属性 | 描述 | 是否为 HTML5 新增 | HTML5 中已不支持 |
---|---|---|---|
<!DOCTYPE> | 定义文档类型 | ||
<html> | 定义一个 HTML 文档 | ||
<title> | 为文档定义一个标题 | ||
<body> | 定义文档的主体 | ||
<h1> 到 <h6> | 定义 HTML 标题 | ||
<p> | 定义一个段落 | ||
<br> | 定义简单的拆行 | ||
<hr> | 定义水平线 | ||
<!--...--> | 定义一个注释 |
格式
属性 | 描述 | 是否为 HTML5 新增 | HTML5 中已不支持 |
---|---|---|---|
<pre> | 定义预格式文本 | ||
<bdo> | 定义文本的方向 | ||
<center> | 定义居中文本 | 是 | |
<big> | 定义大号文本 | 是 | |
<small> | 定义小号文本 | ||
<b> | 定义粗体文本 | ||
<em> | 定义强调文本 | ||
<strong> | 定义语气更为强烈的强调文本 | ||
<i> | 定义斜体文本 | ||
<u> | 定义下划线文本 | ||
<del> | 定义被删除文本 | ||
<s> | 定义加删除线的文本 | ||
<strike> | 定义加删除线的文本 | 是 | |
<ins> | 定义被插入文本 | ||
<kbd> | 定义键盘文本 | ||
<samp> | 定义计算机代码样本 | ||
<sub> | 定义下标文本 | ||
<sup> | 定义上标文本 | ||
<abbr> | 定义一个缩写 | ||
<acronym> | 定义只取首字母的缩写 | 是 | |
<blockquote> | 定义块引用 | ||
<cite> | 定义引用(citation) | ||
<q> | 定义短的引用 | ||
<address> | 定义文档做者或拥有者的联系信息 | ||
<bdi> | 容许您设置一段文本,使其脱离其父元素的文本方向设置 | 是 | |
<code> | 定义计算机代码文本 | ||
<dfn> | 定义项目 | ||
<font> | 定义文本的字体、尺寸和颜色 | ||
<mark> | 定义带有记号的文本 | 是 | |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量 | 是 | |
<progress> | 定义运行中的任务进度(进程) | 是 | |
<rp> | 定义不支持 ruby 元素的浏览器所显示的内容 | 是 | |
<rt> | 定义字符(中文注音或字符)的解释或发音 | 是 | |
<ruby> | 定义 ruby 注释(中文注音或字符 | 是 | |
<time> | 定义一个日期/时间 | 是 | |
<tt> | 定义打字机文本 | 是 | |
<var> | 定义文本的变量部分 | ||
<wbr> | 规定在文本中的何处适合添加换行符 | 是 |
表单
属性 | 描述 | 是否为 HTML5 新增 | HTML5 中已不支持 |
---|---|---|---|
<form> | 定义一个 HTML 表单,用于用户输入 | ||
<input> | 定义一个输入控件 | ||
<label> | 定义 input 元素的标注 | ||
<output> | 定义一个计算的结果 | 是 | |
<select> | 定义选择列表(下拉列表) | ||
<optgroup> | 定义选择列表中相关选项的组合 | ||
<option> | 定义选择列表中的选项 | ||
<datalist> | 规定了 input 元素可能的选项列表 | 是 | |
<fieldset> | 定义围绕表单中元素的边框 | ||
<legend> | 定义 fieldset 元素的标题 | ||
<button> | 定义按钮 | ||
<textarea> | 定义多行的文本输入控件 | ||
<keygen> | 规定用于表单的密钥对生成器字段 | 是 |
框架
属性 | 描述 | 是否为 HTML5 新增 | HTML5 中已不支持 |
---|---|---|---|
<frame> | 定义框架集的窗口或框架 | 是 | |
<frameset> | 定义框架集 | 是 | |
<noframes> | 定义针对不支持框架的用户的替代内容 | 是 | |
<iframe> | 定义内联框架 |
图像
属性 | 描述 | 是否为 HTML5 新增 | HTML5 中已不支持 |
---|---|---|---|
<img> | 定义图像 | ||
<map> | 定义图像映射 | ||
<area> | 定义图像地图内部的区域 | ||
<canvas> | 经过脚本(一般是 JavaScript)来绘制图形(好比图表和其余图像) | 是 | |
<figcaption> | 定义一个 caption for a <figure> element | 是 | |
<figure> | figure 标签用于对元素进行组合 | 是 |
Audio/Video
属性 | 描述 | 是否为 HTML5 新增 | HTML5 中已不支持 |
---|---|---|---|
<audio> | 定义声音,好比音乐或其余音频流 | 是 | |
<video> | 定义一个音频或者视频 | 是 | |
<source> | 定义media元素 (<video> 和 <audio>)的媒体资源。media | 是 | |
<track> | 为媒体(<video> 和 <audio>)元素定义外部文本轨道 | 是 |
链接
属性 | 描述 | 是否为 HTML5 新增 | HTML5 中已不支持 |
---|---|---|---|
<a> | 定义一个连接 | ||
<link> | 定义文档与外部资源的关系 | ||
<nav> | 定义导航连接 | 是 |
列表
属性 | 描述 | 是否为 HTML5 新增 | HTML5 中已不支持 |
---|---|---|---|
<ul> | 定义一个无序列表 | ||
<ol> | 定义一个有序列表 | ||
<dl> | 定义一个定义列表 | ||
<li> | 定义一个列表项 | ||
<dt> | 定义一个定义定义列表中的项目 | ||
<dd> | 定义定义列表中项目的描述 | ||
<menu> | 定义菜单列表 | ||
<dir> | 定义目录列表 | 是 | |
<command> | 定义用户可能调用的命令(好比单选按钮、复选框或按钮) |
表格
属性 | 描述 | 是否为 HTML5 新增 | HTML5 中已不支持 |
---|---|---|---|
<table> | 定义一个表格 | ||
<caption> | 定义表格标题 | ||
<th> | 定义表格中的表头单元格 | ||
<tr> | 定义表格中的行 | ||
<td> | 定义表格中的单元 | ||
<thead> | 定义表格中的表头内容 | ||
<tbody> | 定义表格中的主体内容 | ||
<tfoot> | 定义表格中的表注内容(脚注) | ||
<col> | 定义表格中一个或多个列的属性值 | ||
<colgroup> | 定义表格中供格式化的列组 |
样式/节
属性 | 描述 | 是否为 HTML5 新增 | HTML5 中已不支持 |
---|---|---|---|
<style> | 定义文档的样式信息 | ||
<div> | 定义文档中的节 | ||
<span> | 定义文档中的节 | ||
<header> | 定义一个文档头部部分 | 是 | |
<footer> | 定义一个文档底部 | 是 | |
<section> | 定义了文档的某个区域 | 是 | |
<article> | 定义一个文章内容 | 是 | |
<aside> | 定义其所处内容以外的内容 | 是 | |
<details> | 定义了用户可见的或者隐藏的需求的补充细节 | 是 | |
<dialog> | 定义一个对话框或者窗口 | 是 | |
<summary> | 定义一个可见的标题。 当用户点击标题时会显示出详细信息 | 是 |
元信息
属性 | 描述 | 是否为 HTML5 新增 | HTML5 中已不支持 |
---|---|---|---|
<head> | 定义关于文档的信息 | ||
<meta> | 定义关于 HTML 文档的元信息 | ||
<base> | 定义页面中全部连接的默认地址或默认目标 | ||
<basefont> | 定义页面中文本的默认字体、颜色或尺寸 | 是 |
程序
属性 | 描述 | 是否为 HTML5 新增 | HTML5 中已不支持 |
---|---|---|---|
<script> | 定义客户端脚本 | ||
<noscript> | 定义针对不支持客户端脚本的用户的替代内容 | ||
<applet> | 定义嵌入的 applet | 是 | |
<object> | 定义嵌入的对象 | ||
<param> | 定义对象的参数 |