分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

HTML学习第二天

发布时间:2023-09-06 01:40责任编辑:赖小花关键词:HTML

学习内容:

1.向页面标题添加图标,在head标签中添加:<link rel="shortcut icon" href="图标地址">

1 <head>2 <meta charset="utf-8" >3 <title>添加图标</title>4 <link rel="shortcut icon" href="logo.ico">5 </head>

2.图片标签:<img src="图片地址" title="文字" alt="文字">

(1)title属性:当鼠标悬停在图片上时,显示文字。

1 <img src="img.png title="这是一张图片">

(2)alt属性:当图片无法正常显示时,显示文字。

1 <img src="img.png" alt="这是一张图片">

3.图片路径:绝对路径;相对路径

(1)绝对路径:引入图片的位置,例如E:\图片\123.png

1 <img src="E:\图片\123.png">

绝对路径不建议使用

(2)相对路径:相对当前HTML文件的路径

A. /  windows盘符 图片和html文件在同级目录时可以省略

1 <img src="/img/下载.jpg" alt="红点">

B. ../代表html文件的上一级目录

1 <img src="../img/下载.jpg">

C. ./代表当前文件目录,可以省略

1 <img src="whole_看图王.png">

 4.超链接标签: <a href="" target=""></a>

(1)href属性:填写链接路径,即可跳转至路径网页,当路径文件浏览器无法打开时,例如zip格式文件,那该文件将会被下载

1 <a href="../img/下载.zip">下载</a>

(2)target属性:_blank:在当新页面打开链接;_self:在当前页面打开链接

5.锚点链接:<a name="值">跳转位置</a><a href:"路径#name值">跳转链接</a>

对第一个a标签指定一个name值,另第二个a标签的href填写路径#name值,可以实现点击第二个a标签跳转至第一个a标签的位置,当路径为其他HTML页面时,可以实现跨页面跳转

1 <a name="demo">这是跳转地点</a>2 <a href="../html/classD1.html#demo" target="_self">跳转至昨天的页面的demo位置</a>

ps:可以对一个标签例如p制定一个id,#id即可实现跳转至该标签

1 <a href="#p">跳转至P</a>2 <p id="p">12345</p>

 6.表格:<table><tr><td></td></tr></table> tr定义行,td定义列,常用属性有cellspacing;cellpadding;border;colspan;rowspan

(1)cellspacing控制单元格之间的距离,用于table标签

1 <table cellspacing="10px"><tr><td></td></tr></table>

(2)cellspacing控制单元格内数据与单元格之间的距离,用于table标签

1 <table cellpadding="10px"><tr><td></td></tr></table>

(3)border控制这个单元格边框的有无、粗细,用于table标签

(4)colspan为列合并,rowspan为行合并,用于td标签

 1 <table border="1px"> 2 <tr> 3 <td colspan="2">123</td> 4 </tr> 5 <tr> 6 <td>456</td><td rowspan="2">789</td> 7 </tr> 8 <tr> 9 <td>101112</td>10 </tr>11 </table>

(5)表格内可以嵌套表格

 1 <table> 2 <tr> 3 <td> 4 ????<table> 5 ????<tr> 6 ????<td></td> 7 ????</tr> 8 ????</table> 9 </td>10 </tr>11 </table>

                                                                                                                                  2018.02.01

HTML学习第二天

原文地址:https://www.cnblogs.com/whwjava/p/8398536.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved