HTML干货系列!html基础日记!
来源：互联网 发布：中文域名在线转码 编辑：程序博客网 时间：2024/05/05 15:19
一. 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>
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>
<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>
<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>
<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>
0 0
- 干货系列,html基础日记!
- HTML干货系列!html基础日记!
- 干货系列!css知识点日记!
- Web基础系列一、Html(网页结构)
- HTML系列之基础标签(一)
- Html 基础学习系列一 标签img
- html初学日记
- html初学日记2
- html初学日记3
- html学习日记：div
- HTML学习日记一
- HTML笔记-HTML基础
- 【HTML】HTML基础
- 【HTML】HTML基础
- html--1.html基础
- HTML基础---HTML介绍
- HTML：HTML基础
- HTML 基础
- 华为实习生在线笔试
- ~闰年~
- 洛谷 1330 封锁阳光大学
- Java面试 -- JVM篇
- 读取文件中的音乐名，合并音乐（MP3）
- HTML干货系列!html基础日记!
- Red and Black POJ
- 【BZOJ 4318】[概率DP]OSU!
- java建立一个类时为什么设置private static final long serialVersionUID？？
- 理解进程，线程概念
- 《ACM程序设计》书中题目―K
- rem单位的使用总结
- select和epoll
- zkw线段树，区间修改，最值查询（差分）
