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>
这里把表格着重讲一下吧,这算一个小难点.
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>表格</title>
</head>
<body>
<table border="1" width = "50%" cellpadding = "30" cellspacing = "0">
<caption><h1>学员表</h1></caption>
<tr><!--这是第一行-->
<th colspan = "3">学员基本信息</th>
<th colspan = "2">成绩</th>
</tr>
<tr align = "center"><!--这是第二行-->
<th>姓名</th>
<th>性别</th>
<th>专业</th>
<th>课程</th>
<th>分数</th>
</tr> <tr align = "center"><!--这是第三行-->
<td>小凯</td>
<td>男</td>
<td rowspan = "2">计算机</td>
<td rowspan = "2">PHP开发</td>
<td><font color = "red">86</font></td>
</tr>
<tr align = "center"><!--这是第四行-->
<td>小珊</td>
<td>女</td>
<td><font color = "red">98</font></td>
</tr>
</table>
</body>
</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的博友有所帮助,有什么说的不到位的地方,也希望大家积极指正,互相鞭策,互相学习!
HTML入门第二天的更多相关文章
- JAVA入门第二季（mooc-笔记）
相关信息 /** * @subject <学习与创业>作业1 * @author 信管1142班 201411671210 赖俊杰 * @className <JAVA入门第二季&g ...
- ElasticSearch入门 第二篇：集群配置
这是ElasticSearch 2.4 版本系列的第二篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...
- Docker 入门 第二部分： 容器
目录 Docker 入门 第二部分: 容器 先决条件 介绍 你的新开发环境 使用 Dockerfile 定义一个容器 Dockerfile 应用本身 requirements.txt app.py 构 ...
- Hibernate入门第二课 Hibernate Tools for Eclipse Plugins安装
Hibernate入门第二课 Hibernate Tools for Eclipse Plugins安装 你们可以直接去,http://blog.csdn.net/wei_chong_chong/ar ...
- Java入门第二季学习总结
课程总概 该门课程作为java入门学习的第二季,是在有一定的java基础上进行的进一步学习.由于该季涉及到了java的一些核心内容,所以相对第一季来说,课程难度有所提升.大致可将该季的课程分为五部分: ...
- 解析Mybatis入门第二天
入门第二天 目的:使用Mybatis对数据库中的数据进行简单的操作.例如:增.删.改.查. 前言:同样是使用idea创建一个普通的maven工程(如何创建一个普通的Maven工程可以参考入门第一天的详 ...
- 数据结构入门第二课（浙大mooc)
数据结构入门第二课 目录 数据结构入门第二课 引子 多项式的表示 方法1 顺序结构表示多项式各项 方法2 顺序结构表示非零项 方法3 链表结构存储非零项 多项式问题的启示 线性表 线性表的抽象数据类型 ...
- COM编程入门第二部分——深入COM服务器
本文为刚刚接触COM的程序员提供编程指南,解释COM服务器内幕以及如何用C++编写自己的接口.继上一篇COM编程入门之后,本文将讨论有关 COM服务器的内容,解释编写自己的COM接口和COM服务器所需 ...
- Kotlin入门第二课：集合操作
测试项目Github地址: KotlinForJava 前文传送: Kotlin入门第一课:从对比Java开始 初次尝试用Kotlin实现Android项目 1. 介绍 作为Kotlin入门的第二课, ...
- SpringMVC入门第二天
SpringMVC第二天 1. 回顾 1.Springmvc介绍? Springmvc是Spring公司 2.Springmvc入门程序 第一步:Web工程 第二步:导Jar包 第三步:web.x ...
随机推荐
- zoom:1-hasLayout
在现代浏览器,如果子元素float,则父元素不会自动被撑开 #nofloatbox { border: 1px solid #FF0000; background: #CCC; width:200px ...
- cygwin下配置alias
主要是cygwin下的盘符映射关系容易忘,直接用mount命令: 所以,找到E:\cygwin64\home\Administrator下面的.bashrc,添加alias.如下:
- MySQL in不走索引
优化前 SELECT* FROM erp_helei mg WHERE mg.num = 602 AND mg.pid IN (10002559,10002561,10002562,10 ...
- 在Flex中定义移动设备应用程序和启动屏幕
创建移动设备应用程序容器 移动设备应用程序中的第一个标签通常是以下标签之一: <s:ViewNavigatorApplication> 标签用于定义只有一个部分的移动设备应用程序. < ...
- html标签大全（2）
http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...
- 小谈JavaScript中this的用法
"this"关键字是JavaScript中广泛应用的一种特性,但它经常也是这门语言中最容易混淆和误解的特性.那么"this"的实际意义是什么?它是如何求值的? ...
- mac下sublime 配置查看源码
sublime及package control的安装查看之前一篇文章:http://www.cnblogs.com/xdwa/p/5805101.html 安装ctags 安装完毕package co ...
- 《JAVASCRIPT高级程序设计》选择框脚本和富文本编辑
一.选择框脚本 选择框也是表单的一个字段,是通过<select>和<option>元素来创建的,需要使用javascript来控制.选择框拥有以下的属性和方法: 以下介绍一些选 ...
- 【iOS 录音转码MP3及转码BASE64上传】
iOS 录音转码MP3及转码BASE64上传 一,开始录音 NSLog(@"开始录音"); [self startRecord]; - (void)startRecord { // ...
- 用jdk在cmd下运行编译java程序
1.首先通过创建一个txt文档,将java代码写入txt文档中保存 2.将保存好的HelloWorld.txt文档重命名为HelloWorld.java文件. 3.打开windows中的"命 ...