当前位置: 移动技术网 > IT编程>网页制作>CSS > HTML基础解析

HTML基础解析

2018年12月05日  | 移动技术网IT编程  | 我要评论

安大教务系统学生入口,好听的歌曲打包下载,猪标局

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

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

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网