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 ...
随机推荐
- git 配置SSH免密
1.安装TortoiseGit(比较简单,直接在官网上下载安装包安装) 2.打开下图标识 点击 generate按钮 生成key(需要等一会) 3.生成Key保存成.ppk文件,记得存放路径,(建 ...
- UGUI batch 规则和性能优化
UGUI batch 规则和性能优化 (基础) Unity 绘图性能优化 - Draw Call Batching : http://docs.unity3d.com/Manual/DrawCallB ...
- 编写Node.js原生扩展
Node.js是一个强大的平台,理想状态下一切都都可以用javascript写成.然而,你可能还会用到许多遗留的库和系统,这样的话使用c++编写Node.JS扩展会是一个不错的注意. 以下所有例子的源 ...
- ZeroMQ 的模式
在需要并行化处理数据的时候,采用消息队列通讯的方式来协作,比采用共享状态的方式要好的多.Erlang ,Go 都使用这一手段来让并行任务之间协同工作. 最近读完了 ZeroMQ 的 Guide.写的很 ...
- 【译】延迟加载JavaScript
[译]延迟加载JavaScript 看到一个微信面试题引发的血案 --[译] 什么阻塞了 DOM?中提到的一篇文章,于是决定看下其博客内容,同时翻译下来留作笔记,因英文有限,如有不足之处,欢迎指出.同 ...
- js json和字符串的互转
json与字符串的互转: 下面格式两种只是针对引号有稍微的区别 var result = JSON.parse("{\"a\":\"擦擦\",\ ...
- ZLG_GUI和3D显示的移植
最近学习NRF51822,想在OLED上移植个强大的GUI ,本来想学习emWIN的,甚至想直接学习自带GUI的嵌入式操作系统RTThread,但是......哎,太懒了.....现在觉得ZLG_GU ...
- Spark RDD编程核心
一句话说,在Spark中对数据的操作其实就是对RDD的操作,而对RDD的操作不外乎创建.转换.调用求值. 什么是RDD RDD(Resilient Distributed Dataset),弹性分布式 ...
- find查找命令
find # 格式 find [路径] [参数] [表达式] -exec 指令 {} \ ; -{} 代表find找到的文件 -\ 禁止转意 : 表示本行指令结束 # find /sbin -type ...
- E. Change-free
Student Arseny likes to plan his life for n days ahead. He visits a canteen every day and he has alr ...