HTML(三)
html图像、绝对路径和相对路径
html图像
<img>标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显示的文字,以及对搜索引擎和盲人读屏软件的支持。
<img src="data:images/pic.jpg" alt="产品图片" />
绝对路径和相对路径
像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为绝对地址和相对地址。
- 绝对地址:相对于磁盘的位置去定位文件的地址
- 相对地址:相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题。相对路径的定义技巧:
“ ./ ” 表示当前文件所在目录下,比如:“./pic.jpg” 表示当前目录下的pic.jpg的图片,这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录,比如:“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
html链接
html链接
<a>标签可以在网页上定义一个链接地址,通过src属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的提示文字框。
<a href="#"></a> <!-- # 表示链接到页面顶部 -->
<a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a>
<a href="2.html">测试页面2</a>
定义页面内滚动跳转
页面内定义了“id”或者“name”的元素,可以通过a标签链接到它的页面滚动位置,前提是页面要足够高,有滚动条,且元素不能在页面顶部,否则页面不会滚动。
<a href="#mao1">标题一</a>
......
......
<h3 id="mao1">跳转到的标题</h3>
html列表
有序列表
在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现,代码如下:
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
在网页上生成的列表,每条项目上会按1、2、3编号,有序列表在实际开发中较少使用。
无序列表
在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现,代码如下:
<ul>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ul>
在网页上生成的列表,每条项目上会有一个小图标,这个小图标在不同浏览器上显示效果不同,所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
定义列表
定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释,代码如下:
<h3>前端三大块</h3>
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd> <dt>css</dt>
<dd>负责页面的表现</dd> <dt>javascript</dt>
<dd>负责页面的行为</dd> </dl>
最新文章
- vuex(1.0版本写法)
- web前端职业规划(转)
- hbase的rowkey简单设计
- PHP 简单实现MySQL数据搜索、添加数据功能 以设备管理为例
- flex 4 布局样式
- BDB (Berkeley DB)数据库简单介绍(转载)
- css控制背景图片在浏览器中居中,下拉浏览器的时候背景图一直不变
- parquet code demo
- 人事管理系统 c语言版
- IFields Interface 定义一个字段集合对象
- MFC画笔作用域的问题
- 小白的Python之路 day1 用户输入
- 吐槽:【计算机网络与通信】.张元.高清文字版.pdf
- 1.1、Libgdx目标和特性
- SQL Server事务 事务日志
- JAVA WEN开发环境与搭建
- Linux之特殊的环境变量IFS以及如何删除带有空格的目录
- css调整图片位置布局
- [CTCI] 单词最近距离
- 2D Polygons( Poygon) CGAL 4.13 -User Manual
热门文章
- 集腋成裘-06-angularJS -angular_02
- 最短路径算法之Dijkstra算法
- python---用链表结构实现有序和无序列表的几个功能
- 17/11/24 05:08:44 WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable
- asp.net Web API 身份验证 不记名令牌验证 Bearer Token Authentication 简单实现
- C#操作xml SelectNodes,SelectSingleNode总是返回NULL
- if-else(职责链)
- input时间表单默认样式修改(input[type=";date";])
- 关于ubuntu的ssh远程登录的问题
- day52 js--- bom dom