HTML基础
HTML5是什么？
- HTML是用来描述网页的语言（标记语言）
- 标记语言（Hyper Text Markup Language）；
- HTML5第一个版本出在2008年
- 支持的浏览器：Safari、Chrome、Firefox、Opera、IE9。
严格意义上HTML算不上是一种编程语言，而是一种标记语言，它的功能非常类似于word里基本字型设置功能，所以结合word的功能选项来学习HTML标记语言会更加容易理解。
HTML5开发工具
- DreamWeaver
- Eclipse
- Notepad++
- Intellij IDEA
- Web Storm(推荐)
HTML5基本结构
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 页面内容部分 </body> </html>
文字标记
HTML标记的结构
<标记名称>标记内容</标记名称>
如：<h1>Black Goose Bistro</h1>
这样的标记有很多：
- <h1></h1>：标题，其中”h1”中的数字可以是1~6之间的任意数字，这有点类似于word里的“标题一”“标题二”…的效果
- <em></em>：强调，标记内容有点斜体的感觉
- <p></p>：段落，标记内容前后都会有换行
Block、inline、empty标记
Block、inline、empty是HTML标记三种类型，就像人类有白种人和黑种人之分一样。
-
Block标记元素
HTML将Block标记元素作为矩形盒子对待，Block标记元素总是另起一行开始,如hx、p、blockquote、pre、ol、ul、li、dl、dt、dd、hr
-
Inline标记元素
HTML对待inline标记元素与文本一样，不会另起一行，inline标记内不能包含block标记元素
-
Empty标记元素
Empty标记元素内不包含任何的文字信息，它们只是实现各自相应的功能，与其他的标记元素不同的是，empty标记元素没有尾部标记，如<img/>、<br/>、<hr/>等。
标记属性
每个标记元素都包含自己的属性，这些属性的定义方式如下：
<标记名称 属性=“值”属性=“值”></标记名称>
使用标记属性时要注意：
- 属性只能写在左标记符中，不能写在右标记符中
- 当有多个属性时，每个属性用空格分开，顺序不重要
- 属性值可以是数字、字符串、链接或者是尺寸，取决于应用属性的目的
- 属性值要放在引号内，虽然HTML里没有特别要求一定要用引号，但是XHTML已经做出了要求，单引号或双引号都可以，只要它们配对出现，不过双引号是业界惯例
- 有些属性是必须的，如img标记的src和alt属性
- 属性名称是HTML里规定好的，也就是说你无法自定义标记属性
修饰文字
文字中的Block标记
- ul：无序列表 类似于
- ol：有序列表 类似于 ，可以通过属性start来修改列表的起始数字
- dl：自定义列表 dl与前面两种列表不同，他的序号通过dt标记来定义，如<dt>ladeng</dt>，则序号即为ladeng，dl中只能包含dt和dd两种标记，而且dt中不能包含block标记，但是dd可以包含
- P：段落 <p></p>标记中可以包含文字、图片及其他的inline标记，但是不能有block标记包括其他的p标记
- blockquote：长引用 如果有很多内容或者段落要作为引用的话，首先blockquote，因为它可以包含p、hx、ul、ol等标记
- pre：预格式化文字 如果显示文本中存在大量的空格，HTML标记语言会忽略这些空格，而pre标记可以为我保留这个空格，完全按照我们输入的结果显示
- address：地址 用来强调标记内容是地址，但是不是所有的地址都可以用它，比如Email地址
文字中的inline标记
Inline标记是指可以在语句内不会换行的标记
- em和strong：这两个标记都表示强调，前者默认字体始终是斜体，后者是粗体
- q：短引用，不同的浏览器显示的是不一样的，Firefox和IE9都是引号显示了
- abbr和acronym：缩写和首字母缩写，前者是指单词的缩写，如please缩写为pls，后者是指词语首字母的缩写，如by the way缩写为BTW;这两种标记在显示上是没有明显变化的，它们的存在是方便搜索引擎或其他平台的查询或现实
- cite：参考文献引用
- dfn：定义词或者网页流行词，比如“小月月”、“我爸是李刚”
- code、var、samp、kbd：用来描述技术文档，如代码、变量、程序取样、用户输入流等
-
ins和del：ins插入标记，显示时字符会带有下划线，后者del删除字符，字符中间会有一条删除线
-
sup和sub：前者是上阶字符，如二次方，后者是下阶字符
类元素
block和inline标记是很多，但未必都满足我们的需求，所以HTML中有两个顶级类标记，可以让我们自定义元素的格式：div和span；它们没有预设的格式，我们可以通过它们的id或class属性结合CSS进行定制
- div：一种block标记元素，他可以定义一个元素，也可以用来给HTML网页分块
- span：它可以div的作用一样的，不过它是inline标记元素，和其他的inline元素一样，它只能包含inline标记元素
要获得div和span的引用，要通过标识符，即id和class，id类似于AS3中对象的实例名称，是指某一个实例；而类就是AS3中的类对象了，指的是一类对象，它的变更会影响到所有该类的元素
基本上所有的标记元素都有id和class属性，但是这个两个属性对下面的标记不适用： base、basefont、head、html、meta、param、script、style、title
特殊字符
有些特殊字符与标记字符冲突，在HTML里显示不出来，就要通过下面的转义字符显示
- 空格： ；
- &：&；
- ‘：&apos；
- <：<；
- >：>；
- ©：©；
- ®：®
- 等等
链接
链接基础
HTML中从一个网页跳转到另一个网页，通过链接标记符a来实现，它是一个inline元素，所以它不能p等包含block标记元素,它的具体用法如下：
<a href=“要跳转到的网址”>显示的文字</a>
a标记的href属性值即是要跳转到的网址，另外还可以在a标记中添加一个img标记，实现图片链接：
<a href=“要跳转到的网址”><img src=“”/></a>
href属性值又有以下几种分类：
一个绝对路径，即要访问的网址与当前网址不在同一个服务器上，如：“http://blog.sina.com.cn/ladeng6666”，
一个相对路径，目标网址与当前网址在同一个服务器上，通过相对路径来访问如：“blog/index.html”
当相对路径在当前网页上一级目录时，要通过“../”来返回上一级目录，如：“../blog/index.html”
访问当前网页根目录也很简单，只需一个“/”就可以了，如：“/blog/index.html”
链接锚点
链接不仅可以调整页面，也可以在同一个页面中不同位置之间跳转，即链接锚点：
创建锚点：锚点的创建，通过设置元素的id属性值即可实现，如：<div id=“maodian1”></div>
访问锚点：<a href=“#maodian1”></a>
访问网页的某个锚点：<a href=“another.html#maodian1”></a>
链接开启窗口
通过a标记的target属性，可以设置新网页开启的窗口，target属性值有以下几种情况：
_blank：每个新网页都在新的窗口中开启，如：<a href=“http://blog.sina.com.cn/ladeng6666” target=“_blank”></a>
自定义窗口：给target传入一个任意值后，再使用这个任意值设置target，那么新网页会在上一个窗口中开启，如：<a href=“http://blog.sina.com.cn/ladeng6666” target=“display”</a>。注意自定义target属性值不能带有下划线”_”
邮件链接
在HTML中添加一个邮件链接，可以让更多的读者联系到你，用法如下：
<a href=“mailto:邮箱地址”>显示的文字</a>
如<a href=“mailto:ladeng6666@163.com”>联系拉登</a>
添加图片
图片基础
HTML中的图片都是通过img标记显示出来的，
<img src=“图片地址”/>
它有下面几个特点：
- 它是一个空标记元素：<img src=“” />
- 它是一个inline标记元素，所以也拥有inline元素的特征
- 它是一个替代元素，即改标记元素中的内容来源于外部文件，有外部文件“替代”
- 默认情况下，图片底部与文字底部平齐
img标记元素属性
img有很多属性，对这些属性进行设置，可以更改图片显示的效果：
- src：图片链接地址，这是比不可少的；另外HTML中的图片只显示三中格式GIF、JPE(JPEG)和PNG，如果需要显示其他格式的图片，可结合a标记元素，链接到其他类型格式的图片上
- alt：当图片出现链接错误等无法显示时，用来代替显示的文字 longdesc：当代替文字比较长时，可以用这个属性链接到外部的网址，代替alt属性的文字内容
- width：图片的宽度
- height：图片的高度，宽度高度值在CSS样式表中也是可以设置的
map标记元素-图片地图
在同一个图片中，我们可能需要有不同的链接，比如图片左边链接到百度，右边链接到拉登的博客，这时候就要把img与map标记元素结合起来使用了：
<map id="mps" name="mps"> <area shape="rect" coords="0,0,50,50" href="http://blog.sina.com.cn/ladeng6666" alt="拉登的博客" /> </map> <img src="图片地址" usemap="mps" />
map标记元素-图片地图
定义多热区img的三个步骤：
- 创建一个map标记元素来盛放热区area标记元素，并定义map的id，供img标记元素使用usemap属性来绑定
- 创建area标记元素，并通过它的shape属性来选择热区的形状，然后通过coords属性来定义形状的大小
- 创建img标记元素，通过usemap属性绑定map标记元素
<map id="mps" name="mps"> <area shape="rect" coords="0,0,50,50" href="http://blog.sina.com.cn/ladeng6666" alt="拉登的博客" /> </map> <img src="图片地址" usemap="mps" />
Form表单
form基础
当需要在网上提交一些信息时，比如注册论坛，发帖等，你会发现一些文本框或下拉菜单，这就是form，form是在网页中进行信息交互时不可缺少的一部分，它具有以下特点：
- form是一个block标记元素
- form中不能再嵌套，即<form><form></form></form>是不允许的 它的基本属性有：
- action：我们在form中填入的信息，需要有一个网址来处理，action的作用就是指向这个网址，如：action=“ladeng6666.php”
- method：数据传输的方法，有两种可能：GET或POST：
GET方法会将表单中的变量追加到处理信息的网址后面，如：ladeng6666.php?name=ladeng，这种方法传递的数据量被限制为URL的长度2048KB，而且这种方法很不安全
POST将数据通过HTTP协议传递给处理信息网址，这种方法安全且无数据大小限制，使用广泛
- name：用来设置form内个组件对应的变量名，如：<textarea name=“hello world”，那么处理信息网址会接收到一个name变量，变量值为”hello wrold”
form组件
form中常用的组件有：
- label：注释其他的组件，可以在label中嵌套其他组件，可以通过for属性将其与其他组件绑定，如：<label for=“ladeng”>ladeng6666</label>
- fieldset：用来对组件进行分组，如右图
- legend：为fieldset分组添加标题，如上图中的infor，一个fieldset可以有多个legend
- textarea：文本输入框，通过rows和cols属性可以 设置文字方框的行数和列数
- select：设置菜单选项，它要通过option标记来添加菜单内容，属性size设置显示菜单选项的个数，multiple属性设置是否可以多选
- optgroup：用来对菜单选择进行分组，并通过label属性来设置分组标题
各种各样的input标记元素
input标记元素是一个empty标记元素，但是通过它的type属性，可以得到不同的组件：
- button：自定义按钮 checkbox：它和radio是一样的，不过它是多项选择
- file：网页中用来上传文件的“浏览”按钮，size属性设置浏览框宽度，注意在使用该组件时，一定要将form的enctype属性设置为multipart/form-data
- hidden：当有一些变量信息不来自于用户时，可以用这个标记元素，使信息不显示在网页中
- image：可以用来自定义图片按钮
- password：它跟text差不多，不过password文本框中显示的字符使用*或圆点代替，但要注意的是form不会对这些字符加密
- radio：选项按钮，当一组radio具有相同的name属性时，我们说radio属于一组，即它们只能有一个处于选择状态；设置默认选择radio，可以通过checked属性来设置，如：checked=“checked”
- reset：它和submit一样具有特定的功能，即被按下时，form的组件会恢复初始值
- submit：这是一个有特殊功能的按钮，当被按下时，form中的信息会被发送到处理信息的网址
- text：单行文字，通过value属性可以设置它的初始值，size属性来定义text的宽度，maxlength限制可以数字的字符个数
