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里显示不出来，就要通过下面的转义字符显示

空格：&nbsp；
&：&amp；
‘：&apos；
<：&lt；
>：&gt；
©：&copy；
®：&reg
等等

链接

链接基础

HTML中从一个网页跳转到另一个网页，通过链接标记符a来实现，它是一个inline元素，所以它不能p等包含block标记元素,它的具体用法如下：

<a href=“要跳转到的网址”>显示的文字</a>

a标记的href属性值即是要跳转到的网址，另外还可以在a标记中添加一个img标记，实现图片链接：

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=“” />
它是一个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限制可以数字的字符个数

HTML基础

HTML5是什么？

HTML5开发工具

HTML5基本结构

文字标记

Block、inline、empty标记

Block标记元素

Inline标记元素

Empty标记元素

标记属性

修饰文字

文字中的Block标记

文字中的inline标记

类元素

特殊字符

链接

链接基础

href属性值又有以下几种分类：

链接锚点

链接开启窗口

邮件链接

添加图片

图片基础

img标记元素属性

map标记元素-图片地图

map标记元素-图片地图

Form表单

form基础

form组件

各种各样的input标记元素