目录
1.HTML5背景知识
2.准备工作
作者使用Komodo Edit作为编译器，使用Node.js,可以通过http://nodejs.org下载并且需要安装multipart模块，同样在https://github.com/isaacs/multipart-js下载
3.初探HTML
空元素，自闭合标签，虚元素--元素没有任何内容，但起到结构的作用
标签元素属性可分为全局属性和专有属性
布尔属性，不需要任何值就能代表意思
自定义属性，属性前面需要天机data-开头
HTML分为外层结构<!DOCTYPE HTML>
元数据包含在head标签里面，内容包含在body里面
HTML分为外层结构，元数据，内容
数据类型分为元数据，流、短语，所有的短语属于流，流元素包括了短语类型，简答点说其元素能不能包含其他的元素
全局属性
- accesskey 可通过快捷键切换到元素上<input type="text" accesskey="n"/>当按下Alt加n时会切换到该元素上
- class，类属性
- contenteditable属性，允许用户修改页面上的内容 <p contenteditable="true" >可修改内容</p>
- contextmenu属性，受到触发时弹出的菜单，如点击右键，浏览器尚不支持
- dir属性，该属性有两个值，一个ltr和rtl设置字体文字的方向，ltr为从左到右，rtl为从右到左，是从浏览器的左边开始编排文字还是右边编排文字
- draggable属性，支持拖放操作，后续详细
- dropzone属性，拖放属性，配合前一个使用
- hidden属性，隐藏属性，并且不占用位置，是一个布尔属性
- id属性
- lang属性，设置元素内容的语言，必须是有效的ISO语言代码，可参考http://tools.ief.org/html/bcp47
- spellcheck属性，编写检测属性，具体实现需要根据不同的浏览器提供的方法各异，用户可以编辑的元素上才有意义
- style属性,定义css样式
- tabindex属性，设置按下tab键时跳转的顺序，值为123排序，1为第一个，2为第二个<input tabindex="1"/>
- title属性，提示属性
4.初探CSS
- 使用元素内嵌形式<a style="background-color:grey">
- 使用文档内嵌形式<style type="text/css"> a{color:blue;}</style>
- 使用外部样式表<link type="text/css" href=" " rel="stylesheet" ></link>
- 从其他样式表中导入数据@import "style.css"
- 声明样式表使用的编码@charset "UTF-8"
- 浏览器样式
- 用户定义样式
- 元素内嵌样式>文档内嵌样式>外部样式>用户样式>浏览器样式
- 改变样式层叠顺序a{color:white !important}
- 内嵌样式、文档样式、外部样式统称为作者样式，作者样式优先于用户样式，但对于添加了！important字段的样式用户样式优于作者样式
- 继承，对于元素外观相关的样式会被继承，与元素在页面上的布局相关的样式不会被继承，使用inherit这个特别设立的值可以被强行实施继承
颜色，可以使用英文字母代表的颜色如red代表红、可以使用十六进制#00FF00，或者十进制（11，12，123），若果连续字母相同时还可以缩写如#FFFFFF可以写成#FFF
| 函数 | 说明 | 示例 |
| rgb（r，g，b） | 用RGB模型表示颜色 | color：rgb（112，128，122） |
| rbga（r，g，b，a） | 用RGB模型表示颜色，外加一个用于表示透明度的值0代表全透明，1代表完全不透明 | color:rgba(112,128,122,0.5) |
| hsl(h,s,l) | 用HSL模型表示颜色 | color：hsl（120，100%，10%） |
| hsla（h，s，l，a） | 用HSLA模型表示颜色 | color：hsla（120，80%，12%，1） |
CSS使用的长度单位
| 单位标志符 | 说明 | 单位标志符 | 说明 |
| in | 英寸 | em | 与元素字号挂钩 |
| cm | 厘米 | ex | 与元素字体的“x高度”挂钩 |
| mm | 毫米 | rem | 与根元素的字号挂钩 |
| pt | 磅（1磅等于1/72英寸） | px | CSS像素（假定显示设备的分辨率为96dpi） |
| pc | pica（1pica等于12磅） | % | 另一属性的值的百分比 |
5.初探JavaScript
6.HTML元素背景知识
元素分类
| 元素 | 说明 | 类型 | 局部属性 | 备注 |
| base | 设置相对URL的基础，链接的打开方式，表单的提交方式，href可以设置路径，在使用非绝对路径时默认从base属性href中找到相对的路径，否则从当前文档中查找相对路径 | 元素据 | href、target | 如果没有设置href属性，则从当前文档路径来解释相对路径，<base href="http://www.baidu.com/"/><a href="2.html">则完整路径为http://www.baidu.com/2.html |
| body | 表示HTML文档的内容 | 无 | 无 | 内容 |
| DOCTYPE | 表示HTML文档的开始，外层结构 | 无 | 无 | <DOCTYPE HTML> |
| head | 包含文档的元素据 | 无 | 无 | 用于声明，设置等非内容元素的开始 |
| html | 表示文档中HTML部分的开始 | 无 | manifest | 整个网页的根元素 |
| link | 定义与外部资源的关系 | 元数据 | href、rel、hreflang、media、type、sizes | href指定link元素指向的资源URL media所适用的设备 hreflang说明所链接资源使用的语言 rel说明文档与链接资源的关系类型 type说明所链接资源的MIME类型，text/css、image/x-icon sizes指定图标的大小 |
| meta | 提供关于文档的信息，指定名/值元数据对，声明字符编码，模拟HTTP标头字段 | 元数据 | name、content、charset、http-equiv | 见下章 |
| noscpipt | 包含浏览器禁用脚本或不支持脚本时显示的内容 | 元数据、短语 | <noscrpit><meat http-equiv="refresh" content="0;http://www.apress.com"/> | |
| script | 定义脚本程序，可以是文档内嵌的也可以是外部文件中的 位于head属于元数据，其他地方为短语 |
元数据、短语 | type、src、defer、async、charset | type表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略 src指向外部脚本文件的URL defer推迟执行、async异步执行方式不影响页面的加载，只能和src一起使用，布尔属性 charset说明外部脚本文件所用字符编码，该属性只能与src一同使用 |
| style | 定义CSS样式 | 元数据 | type、media、scoped | 见下章 |
| title | 设置文档标题 | 元数据 | 无 |
| 元素 | 说明 | 类型 | 局部属性 | 备注 |
| a | 生成超链接 | 短语、流 | href、hreflang、media、rel、target、type | 属性与link元素基本一致 href不一定是http协议网址，也可以是邮箱或者是#<id>锚点的形式进行链接 |
| abbr | 缩略语 | 短语 | 代表缩写，其title属性表示的是该缩写代表的完整词语<abbr title="FFFFFF">FF</abbr> | |
| b | 不带强调或着重意味地标记一段文字 | 短语 | <b>orange</b> b {font-weight:border} |
|
| br | 表示换行 | 短语 | </br> | |
| bdo | 撇开默认的文字方向设置 | 短语 | 无局部属性，但必须添加全局属性dir | rtl（从右到左right to left） ltr（从左到右left to right） |
| bdi | 表示一段出于文字方向考虑而与其他内容隔离开来的文字 | 短语 | 较少使用，例子是一个阿拉伯文字显示出错 | |
| cite | 表示其他作品的标题 | 短语 | cite{font-style:italic} 斜体显示 |
|
| code | 表示计算机代码片段 | 短语 | <code>orange</code> code{font-family:monospace} |
|
| del | 表示从文档中删除的文字 | 短语、流 | del{text-decoration:line-throught} | |
| dfn | 表示术语定义 | 短语 | 如果dfn元素包含一个abbr元素，则该缩写词就是要定义的术语。如果没有title则文字就是要定义的术语 | |
| em | 表示着重强调的一段文字 | 短语 | 斜体字<em>orange</em> em {font-style:italic} |
|
| i | 表示与周边内容秉性不同的一段文字，例如来自另一种语言的词语 | 短语 | <i>orange</orange> i {font-style:italic} |
|
| ins | 表示加入文档的文字 | 短语、流 | ins{text-decoration:underline} | |
| kbd | 表示用户输入内容 | 短语 | <kbd>orange</kbd> kbd {font-family:monospace} |
|
| mark | 表示一段因为与上下文中另一词 |
最低0.47元/天 解锁文章
2972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
