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 ...
随机推荐
- js原生设计模式——6复杂对象的构建—Builder建造者模式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 多线程和多进程的区别（C++）
很想写点关于多进程和多线程的东西,我确实很爱他们.但是每每想动手写点关于他们的东西,却总是求全心理作祟,始终动不了手. 今天终于下了决心,写点东西,以后可以再修修补补也无妨. 一.为何需要多进程(或者 ...
- C# winform初学者实例
快递单打印通 下载地址: http://pan.baidu.com/s/1nue5ifn
- ADXL345经验总结，采用SPI和I2C总线操作
一. ADXL345简介 ADXL345是ADI公司推出的三轴(x,y,z)iMEMS数字加速度计(digital accelerometer),具有在16G下高分辨率(13Bit)测量能 ...
- 《JAVASCRIPT高级程序设计》第五章(1)
引用类型是一种将数据和功能组合到一起的数据结构,它与类相似,但是是不同的概念:ECMAScript虽然是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和结构等基本结构.引用类型也被称为“对 ...
- 《JAVASCRIPT高级程序设计》第一章
在使用调制解调器的时代,频繁的表单验证对客户端来说是一个很大的负担,javascript,作为一种专门进行表单验证的客户端脚本语言诞生了.到今天,javascript早已超越了当初设定的角色.Java ...
- 源码(08) -- java.util.ListIterator<E>
java.util.ListIterator<E> 源码分析(JDK1.7) ------------------------------------------------------- ...
- VS Code C# 插件离线版 1.6.2
VS Code C# 插件离线版,目前最新稳定版为:1.6.2 . 由于在扩展中下载C#插件总是缓慢,或者容易出现错误,特制作离线版本共享出来. 本离线版本为Windows版本,其他系统请在扩展中下载 ...
- java_JDBC(4)
一.Statement import java.sql.*; public class TestJDBC { public static void main(String[] args) { Conn ...
- ScrollView嵌套ListView显示不完全、嵌套TextView不能滚动解决办法
目录: 一.情景说明 二.最初做法 三.解决办法 一.情景说明 1.情景 最近项目刚好有一个需求,需要在一个界面中用ScrollView嵌套一个滚动的TextView和一个listView ...