HTML干货系列!html基础日记!
2017-03-11 08:47
330 查看
一. 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: (锚点) 给锚点起名字
三. 图片
标签: <img />
属性: src: 文件路径
width: 宽度
height: 高度
title: 光标放上去的提示信息或者图片加载失败时的提示信息
alt: 图片加载失败时的提示信息
[注]1.设置图片时,若只设置一个,图片会按照设置的等比例缩放
2.若设置两个时,图片会按照设置的尺寸发生变化(可能变形)
文件路径:(默写)
绝对路径: (唯一确定的值)
磁盘绝对: 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
.. 表示上一级文件夹
四. 多媒体
音频: <audio></audio>
属性: src: 文件路径
controls: 控制播放界面
loop: 循环
autoplay: 自动播放
视频: <video></video>
属性: src: 文件路径
controls: 控制播放界面
loop: 循环
autoplay: 自动播放
width: 宽度
height: 高度
注: 同时设置,会发生失真.
五. 表格
表格: <table></table>
border: 设置边框的像素
width: 宽度
height: 高度
cellspacing: 边框与边框之间的距离
cellpadding: 内容与边框之间的距离
bgcolor: 背景颜色
bordercolor: 边框颜色
align: 水平方向的对齐方式 left right center 默认left
一行: <tr></tr>
valign: 垂直方向的对齐方式 top bottom middle
一列: <td></td>
width: 设置宽度,整列都会发生变化
height : 设置高度,整行都会发生变化
colspan: 合并列
rowspan: 合并行
表头: <th></th>
标题: <caption></caption>
<html>
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank" title="百度">去百度</a><br />
<a href="mailto:liuhaiyan@1000phone.com?subject=节日快乐&body=哈哈哈哈">给刘海艳发邮件</a><br />
<a href="tel:18500791353">给刘海艳打电话</a><br />
<a href="#c4">去第四章</a>
<a href="#c5">去第五章</a><br />
<a href="1-test1.html#c3">去第三章</a>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p><p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p><p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p><p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<a name="c4">第四章</a>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<font id="c5">第五章</font>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p><p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
</body>
</html>
2,视频,音频基础例子
<html>
<head>
<meta charset="utf-8" />
<title>播放器</title>
</head>
<body>
<audio src="小苹果.MP3" controls loop></audio><br />
<video src="搞笑视频.MP4" controls loop autoplay width="1000" height="200"></video>
</body>
</html>
3.表格基础例子
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<table border="1" width="800" height="500" cellspacing="0" cellpadding="0" bordercolor="green" bgcolor="yellow" align="center">
<caption>标题</caption>
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
</tr>
<tr align="center" valign="bottom">
<td colspan="2">1</td>
<!-- <td>2</td> -->
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<!-- <td>9</td> -->
</tr>
</table>
</body>
</html>
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: (锚点) 给锚点起名字
三. 图片
标签: <img />
属性: src: 文件路径
width: 宽度
height: 高度
title: 光标放上去的提示信息或者图片加载失败时的提示信息
alt: 图片加载失败时的提示信息
[注]1.设置图片时,若只设置一个,图片会按照设置的等比例缩放
2.若设置两个时,图片会按照设置的尺寸发生变化(可能变形)
文件路径:(默写)
绝对路径: (唯一确定的值)
磁盘绝对: 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
.. 表示上一级文件夹
四. 多媒体
音频: <audio></audio>
属性: src: 文件路径
controls: 控制播放界面
loop: 循环
autoplay: 自动播放
视频: <video></video>
属性: src: 文件路径
controls: 控制播放界面
loop: 循环
autoplay: 自动播放
width: 宽度
height: 高度
注: 同时设置,会发生失真.
五. 表格
表格: <table></table>
border: 设置边框的像素
width: 宽度
height: 高度
cellspacing: 边框与边框之间的距离
cellpadding: 内容与边框之间的距离
bgcolor: 背景颜色
bordercolor: 边框颜色
align: 水平方向的对齐方式 left right center 默认left
一行: <tr></tr>
valign: 垂直方向的对齐方式 top bottom middle
一列: <td></td>
width: 设置宽度,整列都会发生变化
height : 设置高度,整行都会发生变化
colspan: 合并列
rowspan: 合并行
表头: <th></th>
标题: <caption></caption>
附录:
超链接基础例子:<html>
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank" title="百度">去百度</a><br />
<a href="mailto:liuhaiyan@1000phone.com?subject=节日快乐&body=哈哈哈哈">给刘海艳发邮件</a><br />
<a href="tel:18500791353">给刘海艳打电话</a><br />
<a href="#c4">去第四章</a>
<a href="#c5">去第五章</a><br />
<a href="1-test1.html#c3">去第三章</a>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p><p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p><p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p><p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<a name="c4">第四章</a>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<font id="c5">第五章</font>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p><p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
<p>曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧</p>
</body>
</html>
2,视频,音频基础例子
<html>
<head>
<meta charset="utf-8" />
<title>播放器</title>
</head>
<body>
<audio src="小苹果.MP3" controls loop></audio><br />
<video src="搞笑视频.MP4" controls loop autoplay width="1000" height="200"></video>
</body>
</html>
3.表格基础例子
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<table border="1" width="800" height="500" cellspacing="0" cellpadding="0" bordercolor="green" bgcolor="yellow" align="center">
<caption>标题</caption>
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
</tr>
<tr align="center" valign="bottom">
<td colspan="2">1</td>
<!-- <td>2</td> -->
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<!-- <td>9</td> -->
</tr>
</table>
</body>
</html>
相关文章推荐
- 干货系列,html基础日记!
- HTML学习日记(1-基础)
- [HTML基础系列]目录导航
- 4 HTML&JS等前端知识系列之Dom的基础
- HTML系列之基础标签(一)
- 机器视觉系列—— Vision 基础知识上集 http://bbs.elecfans.com/jishu_466819_1_1.html (出处: 中国电子技术论坛)
- 码农干货系列【9】--javascript光线追踪基础
- Java多线程干货系列—(一)Java多线程基础
- 前端系列之HTML基础知识概述
- Java多线程干货系列—(一)Java多线程基础
- html基础知识点系列1--常见元素及其语义用法
- HTML+CSS纯干货就业前基础到精通系统学习2016/9/3
- AxureRP7.0基础教程系列 部件详解 HTML Button HTML按钮
- Java多线程干货系列(1):Java多线程基础
- Web基础系列一、Html(网页结构)
- Java基础与提高干货系列——Java反射机制
- HTML的一些基础知识(干货)(一)
- html5基础学习日记0_HTML新建、图片、特殊字符代码、标签
- [转]Java多线程干货系列—(一)Java多线程基础
- Java多线程干货系列(1):Java多线程基础