HTML入门第二天
一. URL
url:统一资源定位符
组成: 协议://域名:端口号/文件?参数名1=值1&参数名2=值2
例子:http://www.163.com:80/index.html?username=zhangkun&sex=nan
协议: http:// file:// ftp://
端口号: 取值范围是0-65535, 通常使用的是1-1024, (已经被占用) http协议默认的端口号是80 。
文件: 请求的文件
参数: 通常是以键值对的形式出现. 每个参数之间使用&隔开
二. 超链接
标签: <a></a>
属性: href: 要跳转的链接地址或者本地访问文件
mailto: 发邮件
tel: 打电话
#锚点名
去该文件: #锚点名称
去另外一个文件: 文件路径#锚点名称
target: 打开目标方式
_self (默认打开方式)在当前窗口打开
_blank(在新窗口打开)
title: 光标放上去的提示信息
name: (锚点) 给锚点起名字
<a href="http://www.baidu.com" target="_blank">百度</a>
三. 图片
标签: <img />
属性: src: 文件路径
width: 宽度
height: 高度
title: 光标放上去的提示信息或者图片加载失败时的提示信息
alt: 图片加载失败时的提示信息
[注]1.设置图片时,若只设置一个,图片会按照设置的等比例缩放
2.若设置两个时,图片会按照设置的尺寸发生变化(可能变形)
<img src="图片.jpg" width="20" height="15" title="美女"/>
文件路径:
绝对路径: (唯一确定的值)
磁盘绝对: C:\1705\html\day2\meinv.jpg
网络绝对: https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488951235858&di=724a43c9fc6dc60b9e62e42e6ed22776&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F6a63f6246b600c33fe5527171e4c510fd8f9a1c5.jpg
注意:
1.在windows下对文件夹分割符可以使用/或者\,但是在linux下只能使用/,为了统一起见,我们都使用/作为文件夹分割符.
2 在windows下的文件夹就是linux下的目录
相对路径: (有参照物) / 文件夹分割符
当前文件夹指:执行文件所在的文件夹就是当前文件夹
. :表示当前文件夹
子级文件夹: ./image/image1/image2/meinv.jpg
..:表示上一级文件夹(这个在window的dos命令可以查看的到)
四. 多媒体
音频: <audio></audio>
属性: src: 文件路径
controls: 控制播放界面
loop: 循环
autoplay: 自动播放
<audio src="D:/music/平凡之路.mp3" controls loop autoplay></audio>
其中controls是必须要有的他是一个控制条!
视频: <video></video>
属性: src: 文件路径
controls: 控制播放界面
loop: 循环
autoplay: 自动播放
width: 宽度
height: 高度
注: 同时设置,会发生失真.
<video src="D:/video/金刚狼.mp4" controls loop autoplay width="100"></video>
这里的controls也不能少!
五. 表格
表格: <table></table>
border: 设置边框的像素
width: 宽度
height: 高度
cellspacing: 边框与边框之间的距离
cellpadding: 内容与边框之间的距离
bgcolor: 背景颜色
bordercolor: 边框颜色
align: 水平方向的对齐方式 left right center 默认left
valign: 垂直方向的对齐方式 top bottom middle
一行: <tr></tr>
一列: <th></th>
一列: <td></td>
td与th的区别:
1.th表示标题位置,<th>姓名</th>
2.td表示元素位置,<td>小明</td>
width: 设置宽度,整列都会发生变化
height : 设置高度,整行都会发生变化
colspan: 合并列
rowspan: 合并行
表头: <th></th>
标题: <caption></caption>
这里把表格着重讲一下吧,这算一个小难点.
1 <!doctype html> 2 <html> 3 <head> 5 <meta charset = "utf-8" /> 6 <title>表格</title> 7 </head> 8 <body> 9 <table border="1" width = "50%" cellpadding = "30" cellspacing = "0"> 10 <caption><h1>学员表</h1></caption> 11 <tr><!--这是第一行--> 12 <th colspan = "3">学员基本信息</th> 13 <th colspan = "2">成绩</th> 14 </tr> 15 <tr align = "center"><!--这是第二行--> 16 <th>姓名</th> 17 <th>性别</th> 18 <th>专业</th> 19 <th>课程</th> 20 <th>分数</th> 21 </tr> 22 23 <tr align = "center"><!--这是第三行--> 24 <td>小凯</td> 25 <td>男</td> 26 <td rowspan = "2">计算机</td> 27 <td rowspan = "2">PHP开发</td> 28 <td><font color = "red">86</font></td> 29 </tr> 30 <tr align = "center"><!--这是第四行--> 31 <td>小珊</td> 32 <td>女</td> 33 <td><font color = "red">98</font></td> 34 </tr> 35 </table> 36 </body> 37 </html>
给大家写了一个简单的小例子,上述代码打印出来是这样的:
给大家讲解一下这串代码:
首先大家可以看到上一篇博文中讲到的全局架构标签<html><head></head><body></body></html>,而我们今天所讲的table标签则写在了body标签里面,而且还是一个双边标签.table的开始标签中出现了这几个属性:border,width,cellspacing,cellpadding 他们的含义在上文已经讲到了,其中需要注意的是border的值设为0时,这个表格就没有边框了.大家可以把代码敲一遍,然后自己改变这个属性的值,通过看表格的变化,结果一目了然!接下来是caption标签,它是表示标题的,会自动居中在表格中间.然后就tr,th,td这三个标签,tr代表的是一行,表格显示是一行一行的往下进行的,所以上来先写第一行的内容.然后大家可以发现,在表中第一行是标题行,而且只有两列,在其他行中最多有5列,因此在写th标签的时候用到了cols属性,它是指将几列合为一列,这样当cols="3"的时候,学院基本信息这个标题就占据了三列.接下来第二行也是用th来打印的标题.然后第三行开始打印元素,在打印计算机的时候,发现两个元素是一样的,需要把两行合为一个,因此就用到了rows属性.<td rows="2">计算机</td>这种形式就可以打印出结果.最后值得大家注意的一点是:在你应用rows或者cols属性时,你已经提前占据的行或者列在下面就不要在多赋值了,大家可以参考上述代码中打印第四行的方法.
好了,今天就说这么多,希望能对广大想要接触HTML的博友有所帮助,有什么说的不到位的地方,也希望大家积极指正,互相鞭策,互相学习!
