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 ...
随机推荐
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- Blend4 的安装和配置
Microsoft Expression Blend作为一款功能齐全的专业设计工具,可用来针对基于 Microsoft Windows 和基于 Microsoft Silverlight 1.0 的应 ...
- oracle 查询哪些表分区
如果查询当前用户下得分区表:select * from user_tables where partitioned='YES'如果要查询整个数据库中的分区表:select * from dba_tab ...
- linux下的Source命令的基本功能
source命令用法:source FileName作用:在当前bash环境下读取并执行FileName中的命令.注:该命令通常用命令“.”来替代.如:source .bash_rc 与 . .bas ...
- Golomb及指数哥伦布编码原理介绍及实现
2017年的第一篇博文. 本文主要有以下三部分内容: 介绍了Golomb编码,及其两个变种:Golomb-Rice和Exp-Golomb的基本原理 C++实现了一个简单的BitStream库,能够方便 ...
- wx小程序初体验
小程序最近太火,不过相比较刚发布时,已经有点热度散去的感觉,不过这不影响我们对小程序的热情,开发之前建议通读下官网文档,附链接:https://mp.weixin.qq.com/debug/wxado ...
- 自述创业史 | XMove动作感应系统(二)
XMove是沙漠君和几个死党从2010年开始开发的一套人体动作捕捉系统,软硬件全部自行开发,投入了大量的精力,历经三年,发展四个版本.文章分上下篇,本文为下篇,前三代的故事在<光荣与梦想| XM ...
- 蓝桥网试题 java 基础练习 数列排序
---------------------------------------------------------------------------------------------------- ...
- Python学习--17 访问数据库
实际开发中,我们会经常用到数据库. Python里对数据库的操作API都很统一. SQLite SQLite是一种嵌入式数据库,它的数据库就是一个文件.由于SQLite本身是C写的,而且体积很小,所以 ...
- java中的final与static
许多程序设计语言都有自己的办法告诉编译器某个数据是"常数".常数主要应用于下述两个方面: (1) 编译期常数,它永远不会改变 (2) 在运行期初始化的一个值,我们不希望它发生变化 ...