HTML5-01 简介

标记语言

  • 概述

      标记语言(也称置标语言),是一种将文本及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的计算机编码。与文本相关的其他信息(包括例如文本的结构和表示信息等)与原来的文本结合在一起,但是使用标记进行表示。标记语言常用于网页和网络应用程序。当今广泛使用的标记语言是:超文本标记语言(HTML)和 可扩展标记语言(XML)。
    
  • 分类

    • 表示性的
      • 在编码过程中,标记文档的结构信息。
    • 过程性
      • 一般都专门于文本的表达,但通常对于文本编辑者可见,并且能够被软件依其出现顺序依次解读。
    • 描述性
      • 描述文件的内容或结构,而不是文件的显示外观或样式。

HTML 概述

HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。常与 CSS、JavaScript 一起被用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的界面。
HTML 元素(如:<p>这是一个段落</p>)是构建网站的基石。一个元素通常包含文本信息和两个 HTML 标签,即:一个开标签(如:<p>),一个闭合标签(如:</p>)。浏览器使用 HTML 标签和脚本来诠释网页内容,但不会将它们显示在页面上。
HTML 文档(又称 web 页面)由 HTML 元素组成,即由 HTML 标签及文本信息组成。
HTML 可以嵌入脚本语言 JavaScript,其会影响 HTML 网页的行为;网页浏览器也可以引用层叠样式表(CSS)来定义文本和其他元素的外观与布局。

HTML 开发工具

编写 HTML 的工具有很多,普通的文本编辑器就可以。若你还没有选择编辑器,那么推荐你使用 sublime text,相信你会爱上它。以下是官网链接:

sublime text

HTML 基本结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>	
</body>
</html>
  • 如图:

    注意:图中灰色的部分,是不会显示在网页上的,只有白色部分才会真正显示到网页上。该图是通过 HTML 标记后,显示在浏览器中的效果,下边贴出 HTML 代码。

  • 代码

    <!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;">&lt;htlm&gt;
    		<div id="head" style="border: 1px solid black; margin: 25px; height: 100px; padding: 6px;">&lt;head&gt;
    			<div id="title" style="border: 1px solid black; margin: 16px; padding: 6px;">&lt;htlm&gt;页面标题&lt;/htlm&gt;</div>
    		&lt;/head&gt;</div>
    		<div id="body" style="border: 1px solid black; background-color: white; margin: 25px; margin-top: 0px; height: 160px; padding: 6px;">&lt;body&gt;
    			<div id="h1" style="border: 1px solid black; margin: 20px; padding: 6px;">&lt;H1&gt;这是一个标题&lt;/H1&gt;</div>
    			<div id="p" style="border: 1px solid black; margin: 20px; padding: 6px;">&lt;p&gt;这是一个段落&lt;/p&gt;</div>
    		&lt;/body&gt;</div>
    	&lt;/html&gt;</div>
    </body>
    </html>
    

    注意:对于以上的代码,你是不是看的想吐???对,我写的也想吐;不过,请不伤心难过。在接下来的日子里,你会渐渐地学会如何优雅地书写代码。

HTML 元素

  • 元素

    • HTML 元素定义了 HTML 文档。一个元素可以没有内容,但是一定要关闭。
  • 元素的组成

    • 开标签,如:<p>
    • 元素内容(若没有内容,则在开标签中关闭标签),如:<br/>
    • 闭合标签,如:</p>
    • 属性,并不是所有的元素都具有属性
  • 元素的分类

    • 块级元素,通常会以新行来开始(和结束)。如:<div>, <h1>, <p>, <ul>, <table>
    • 内联元素,通常不会以新行开始。如:<span>, <b>, <td>, <a>, <img>
  • 元素实例

    • 段落

      <p>这是一个段落</p>
      
    • 连接

      <a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/">这是一个连接</a>
      
    • 换行

      <br/>
      

HTML 属性

  • 概述

      属性总是以 键/值 对的形式出现在开标签中,为元素添加附加信息。一些 Boolean 类型的属性,也可以只包含属性名表示:"property": "true"。尽管属性对大小写不敏感,但是推荐使用小写。
    
  • 常用的属性

    描述 是否为 HTML5 新增
    ccesskey 设置访问元素的键盘快捷键
    lass 规定元素的类名
    ontenteditable 规定元素内容是否可编辑
    ontextmenu 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
    ata-* 用于存储页面的自定义数据
    ir 设置元素中内容的文本方向
    raggable 指定某个元素是否可拖动
    ropzone 指定是否将数据复制,移动,或链接,或删除
    idden 对元素进行隐藏
    d 规定元素的唯一 id
    ang 设置元素中内容的语言代码
    pellcheck 检测元素是否拼写错误
    tyle 规定元素的行内样式(inline style)
    abindex 设置元素的 Tab 键控制次序
    itle 规定元素的额外信息(可在工具提示中显示)
    ranslate 指定是否一个元素的值在页面载入时是否需要翻译
  • 最常用的属性

    • class
    • id
    • style
    • title
  • 关于属性

      在此,不再详细叙述每一个属性的用法,在后续的内容中,会逐渐地阐述这些属性的使用方法及对元素的影响。
    

HTML 标签

  • 基础

    描述 是否为 HTML5 新增 HTML5 中已不支持
    lt;!DOCTYPE> 定义文档类型
    lt;html> 定义一个 HTML 文档
    lt;title> 为文档定义一个标题
    lt;body> 定义文档的主体
    lt;h1> 到 <h6> 定义 HTML 标题
    lt;p> 定义一个段落
    lt;br> 定义简单的拆行
    lt;hr> 定义水平线
    lt;!--...--> 定义一个注释
  • 格式

    描述 是否为 HTML5 新增 HTML5 中已不支持
    lt;pre> 定义预格式文本
    lt;bdo> 定义文本的方向
    lt;center> 定义居中文本
    lt;big> 定义大号文本
    lt;small> 定义小号文本
    lt;b> 定义粗体文本
    lt;em> 定义强调文本
    lt;strong> 定义语气更为强烈的强调文本
    lt;i> 定义斜体文本
    lt;u> 定义下划线文本
    lt;del> 定义被删除文本
    lt;s> 定义加删除线的文本
    lt;strike> 定义加删除线的文本
    lt;ins> 定义被插入文本
    lt;kbd> 定义键盘文本
    lt;samp> 定义计算机代码样本
    lt;sub> 定义下标文本
    lt;sup> 定义上标文本
    lt;abbr> 定义一个缩写
    lt;acronym> 定义只取首字母的缩写
    lt;blockquote> 定义块引用
    lt;cite> 定义引用(citation)
    lt;q> 定义短的引用
    lt;address> 定义文档作者或拥有者的联系信息
    lt;bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置
    lt;code> 定义计算机代码文本
    lt;dfn> 定义项目
    lt;font> 定义文本的字体、尺寸和颜色
    lt;mark> 定义带有记号的文本
    lt;meter> 定义度量衡。仅用于已知最大和最小值的度量
    lt;progress> 定义运行中的任务进度(进程)
    lt;rp> 定义不支持 ruby 元素的浏览器所显示的内容
    lt;rt> 定义字符(中文注音或字符)的解释或发音
    lt;ruby> 定义 ruby 注释(中文注音或字符
    lt;time> 定义一个日期/时间
    lt;tt> 定义打字机文本
    lt;var> 定义文本的变量部分
    lt;wbr> 规定在文本中的何处适合添加换行符
  • 表单

    描述 是否为 HTML5 新增 HTML5 中已不支持
    lt;form> 定义一个 HTML 表单,用于用户输入
    lt;input> 定义一个输入控件
    lt;label> 定义 input 元素的标注
    lt;output> 定义一个计算的结果
    lt;select> 定义选择列表(下拉列表)
    lt;optgroup> 定义选择列表中相关选项的组合
    lt;option> 定义选择列表中的选项
    lt;datalist> 规定了 input 元素可能的选项列表
    lt;fieldset> 定义围绕表单中元素的边框
    lt;legend> 定义 fieldset 元素的标题
    lt;button> 定义按钮
    lt;textarea> 定义多行的文本输入控件
    lt;keygen> 规定用于表单的密钥对生成器字段
  • 框架

    描述 是否为 HTML5 新增 HTML5 中已不支持
    lt;frame> 定义框架集的窗口或框架
    lt;frameset> 定义框架集
    lt;noframes> 定义针对不支持框架的用户的替代内容
    lt;iframe> 定义内联框架
  • 图像

    描述 是否为 HTML5 新增 HTML5 中已不支持
    lt;img> 定义图像
    lt;map> 定义图像映射
    lt;area> 定义图像地图内部的区域
    lt;canvas> 通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)
    lt;figcaption> 定义一个 caption for a <figure> element
    lt;figure> figure 标签用于对元素进行组合
  • Audio/Video

    描述 是否为 HTML5 新增 HTML5 中已不支持
    lt;audio> 定义声音,比如音乐或其他音频流
    lt;video> 定义一个音频或者视频
    lt;source> 定义media元素 (<video> 和 <audio>)的媒体资源。media
    lt;track> 为媒体(<video> 和 <audio>)元素定义外部文本轨道
  • 连接

    描述 是否为 HTML5 新增 HTML5 中已不支持
    lt;a> 定义一个链接
    lt;link> 定义文档与外部资源的关系
    lt;nav> 定义导航链接
  • 列表

    描述 是否为 HTML5 新增 HTML5 中已不支持
    lt;ul> 定义一个无序列表
    lt;ol> 定义一个有序列表
    lt;dl> 定义一个定义列表
    lt;li> 定义一个列表项
    lt;dt> 定义一个定义定义列表中的项目
    lt;dd> 定义定义列表中项目的描述
    lt;menu> 定义菜单列表
    lt;dir> 定义目录列表
    lt;command> 定义用户可能调用的命令(比如单选按钮、复选框或按钮)
  • 表格

    描述 是否为 HTML5 新增 HTML5 中已不支持
    lt;table> 定义一个表格
    lt;caption> 定义表格标题
    lt;th> 定义表格中的表头单元格
    lt;tr> 定义表格中的行
    lt;td> 定义表格中的单元
    lt;thead> 定义表格中的表头内容
    lt;tbody> 定义表格中的主体内容
    lt;tfoot> 定义表格中的表注内容(脚注)
    lt;col> 定义表格中一个或多个列的属性值
    lt;colgroup> 定义表格中供格式化的列组
  • 样式/节

    描述 是否为 HTML5 新增 HTML5 中已不支持
    lt;style> 定义文档的样式信息
    lt;div> 定义文档中的节
    lt;span> 定义文档中的节
    lt;header> 定义一个文档头部部分
    lt;footer> 定义一个文档底部
    lt;section> 定义了文档的某个区域
    lt;article> 定义一个文章内容
    lt;aside> 定义其所处内容之外的内容
    lt;details> 定义了用户可见的或者隐藏的需求的补充细节
    lt;dialog> 定义一个对话框或者窗口
    lt;summary> 定义一个可见的标题。 当用户点击标题时会显示出详细信息
  • 元信息

    描述 是否为 HTML5 新增 HTML5 中已不支持
    lt;head> 定义关于文档的信息
    lt;meta> 定义关于 HTML 文档的元信息
    lt;base> 定义页面中所有链接的默认地址或默认目标
    lt;basefont> 定义页面中文本的默认字体、颜色或尺寸
  • 程序

    描述 是否为 HTML5 新增 HTML5 中已不支持
    lt;script> 定义客户端脚本
    lt;noscript> 定义针对不支持客户端脚本的用户的替代内容
    lt;applet> 定义嵌入的 applet
    lt;object> 定义嵌入的对象
    lt;param> 定义对象的参数
posted @ 2016-04-28 09:42  世俗孤岛  阅读(972)  评论(0编辑  收藏  举报