HTML干货系列!html基础日记!

xiaoxiao2021-03-25 96

一. 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://b.hiphotos.baidu.com/image/pic/item/6a63f6246b600c33fe5527171e4c510fd8f9a1c5.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> <a href="mailto:liuhaiyan@1000phone.com?subject=节日快乐&body=哈哈哈哈">给刘海艳发邮件</a> <a href="tel:18500791353">给刘海艳打电话</a> <a href="#c4">去第四章</a> <a href="#c5">去第五章</a> <a href="1-test1.html#c3">去第三章</a> 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 <a name="c4">第四章</a> 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 第五章 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 曾经有一段失败的爱情,放在我面前,我没有珍惜,如果上天再给我一次机会,我会对他说三个字:滚蛋吧 </body> </html> 2,视频,音频基础例子 <html> <head> <meta charset="utf-8" /> <title>播放器</title> </head> <body> <audio src="小苹果.MP3" controls loop></audio> <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>3</td> </tr> <tr> <td>4</td> <td>5</td> <td rowspan="2">6</td> </tr> <tr> <td>7</td> <td>8</td>  </tr> </table> </body> </html>

转载请注明原文地址: https://ju.6miu.com/read-26361.html

技术

最新回复(0)