HTML基础解析

html

一.url

1.统一资源定位器

用于表示网络中任意资源的位置。

2.路径的表现形式

1.绝对路径(完整路径)

1.网络资源

协议+主机+目录结构+文件名称

2.本地路径

从最高盘符处开始去查找

2.相对路径

从当前文件所在的位置开始查找资源所经过的路径，就是相对路径。

同级目录：直接引用 ex:jd_logo.png

子级目录：先进入，再引用 ex:img/page.jpg

父级目录：先返回，再引用 ex:../jd_logo1.png

3.根相对路径

永远是从web站点的根目录处开始查找

ex:/codeboy/img/a.jpg

二.图像和链接

1.图像格式

.jpg 压缩比率大

.png 背景透明

.gif 动画

2.图像元素

语法：

属性：

src:指定要显示图像的url

width:指定图片的宽度 取值以px或%为单位的数字

height:指定图片的高度 取值以px或%为单位的数字

alt:图片无法正常显示时给的提示文字

注意：如果要修改图片的尺寸，一般只需修改其中一个属性值即可。

练习：day02文件夹中的01-url.html网页需要去引用与day02平级的other文件夹中的login.png图片

3.链接

1.语法：内容

属性：

1.href 指定链接的url

2.target 指定打开新网页的方式

取值：

1._self 默认值，在当前网页中打开新的网页

2._blank 在新的标签页中打开新网页

2.链接其它表现形式：

1.资源下载

让链接的url，链接到rar/zip的文件即可。

下载

2.电子邮件链接

打开邮件

3.返回页面的顶部

返回页面顶部

4.链接到js

执行js代码

练习：定义一个js函数,函数体内弹出"hello world!",在a标记中调用该函数，运行页面查看效果。(3分钟)

3.锚点

1.什么是锚点

锚点，就是网页中的一个记号，可以通过超链接跳转到记号位置处。

2.锚点的使用方式

1.定义锚点

1.使用a标记的name属性定义锚点

2.使用任意元素的id属性定义锚点

2.链接到锚点

1.链接到当前页面锚点

2.链接到其它页面锚点位置处

练习：

在不同的网页中分别定义三个锚点，锚点中内容随意，然后通过a标记分别链接到三个锚点位置处。

三.表格

1.表格作用

按照一定结构显示数据，由单元格按照从左往右，从上到下的方式排列到一起。数据都保存在单元格中，表格可以显示数据，也可以设置页面的布局。

2.表格语法

1.基本标记

表格：

行： table row

单元格/列： table data

练习：创建一个4行4列的表格

1.在网页中创建一对

标记

2.在标记中嵌套

3.在标记中嵌套

2.属性

1.table的属性

border:设置表格的边框 取值以px为单位的数字

width:设置表格的宽度

height:设置表格的高度

align:设置表格的水平对齐方式

取值：left/center/right

bgcolor:设置背景颜色 取值：合法的颜色值

cellpadding:设置单元格的内边距(内容与td之间的间距)

cellspacing:设置单元格的外边距(td边框与边框之间的间距)

练习：

在以上表格练习的基础上设置表格的尺寸400*400px,表格的背景颜色为橙色，表格边框为1px,并设置表格内边距为15px,外边距为10px(2分钟)。

2.tr的属性

align:设置当前行内容水平对齐方式

valign:设置当前行内容垂直对齐方式

取值：top/middle/bottom

bgcolor:设置当前行的背景颜色

3.td的属性

width:宽度

height:高度

align:水平对齐

valign:垂直对齐

bgcolor:单元格的背景颜色

colspan:跨列

rowspan:跨行

3.不规则表格的使用

1.跨列 colspan

从指定单元格位置处开始，横向向右合并几个单元格(包含自己)，被合并掉的单元格要删除。

2.跨行 rowspan

从指定单元格位置处开始，纵向向下合并几个单元格(包含自己)，被合并掉的单元格要删除。

4.可选标记

1.表格标题

如果设置标题的话，则必须位于

下的第一个子元素

2.行/列标题

所有td都可以用th替换

5.表格的复杂应用

1.表格嵌套

表格中所有被嵌套的内容只能放在td中。

ex:

2.行分组

可以将连续的几个行，划分到一个组中，并进行统一管理。

1.表头行

表格中最上面一行进行分组的话，可以放在表头行中。

2.表主体行

允许将若干行放在tbody中，进行统一管理。

3.表尾行

表格中最后一行进行分组的话，可以放在表尾行中。

四.列表

1.列表的作用

按照从上到下的方式来显示所有数据(或从左往右显示)，并且可以在数据前增加显示的标识。

2.列表的组成

1.列表的类型

有序列表：

order list

无序列表：

unorder list

2.列表项

用于表示列表中的数据(嵌套在列表中)

list item

3.列表的属性

1.有序列的属性

1.type 指定列表标识类型

取值：

1 默认值，以数字排序

a 小写英文字母排序

a 大写英文字母排序

i 大写罗马数字排序

i 小写罗马数字排序

2.start 指定起始编号是从第 几 开始

取值：为无单位的数字

2.无序列表的属性

1.type 指定无序列表的标识

取值：

disc 实心圆

circle 空心圆

square 实心方块

none 不显示标识

4.列表的嵌套

在一个列表中又出现另外一个列表。

被嵌套的列表只能在li中出现

ex：

5.自定义列表

1.什么是自定义列表

定义列表常用于给一类事物或对名词进行解释说明。

2.语法

表示定义列表

表示列表中要解释说明的名词

表示列表中对名词解释的具体内容

ex：

名词

解释的内容

常用场合：图文混排。

五.结构标记

1.结构标记的作用

用于描述网页的基本结构(取代p做布局)

提升代码的语义性，方便和维护。

2.常用的结构标记

1.header

定义网页的头部

2.nav

定义导航链接内部

3.section

定义网页主体

4.aside

定义网页的侧边栏内容

5.footer

定义网页偏底部内容

6.article

定义与文字描述相关的内容，如果，中帖子，微博条目，用户评论等等。