一、a标签(超链接)的用法
a→anchor的缩写
a标签定义超链接,用于从一个页面链接到另一个页面。
———————————————————————————
1.href规定链接的目标 URL
指向哔哩哔哩的超链接:
<a href="http://www.bilibili.com">哔哩哔哩</a>
注意: 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。
———————————————————————————
2.target定义被链接的文档在何处显示
- _self: 在当前页面加载,不设置target时这是默认值。
- _blank: 在新窗口打开。
- _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式与 _self 相同。
- _top:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同 _self。
<a href="http://www.bilibili.com" target="_blank">在新窗口打开哔哩哔哩</a>
———————————————————————————
3.title当鼠标移动到超链接上时显示说明文字
<a href="http://www.bilibili.com" title="全国最大交友网站">哔哩哔哩</a>
当鼠标移动到超链接"哔哩哔哩"时显示说明文字"全国最大交友网站".
———————————————————————————
4.download规定被下载的超链接目标
该属性可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。
提供下载的文件必须已经被上传到网站上
<a href="/i/w3school_logo_white.gif" download="w3logo">w3</a>
download="文件名"
点击"w3",下载w3logo.gif
———————————————————————————
5.如何实现页面内跳转
<h1 id="biaoti01">你好啊</h1>
...
<a href="#biaoti01">标题一</a>
点击"标题一"即可跳转到本页面内的一级标题"你好啊".
二、img 标签的用法
HTML Image 元素代表文档中的一个图像。
必须具备的两个属性是src和alt!!!
———————————————————————————
1.src规定显示图像的URL
这个属性是必需有的!!!
相对URL:
<img src="/i/picture.jpg" />
<!--指向站点内的文件,该照片文件的名称是 "picture.jpg",存放在服务器上的 "i" 文件夹中-->
绝对URL:
<img src="http://www.example.com/" />
<!--指向其他站点的文件-->
———————————————————————————
2.alt规定在图像无法显示时的替代文本
<img src="/i/picture.jpg" alt="这是一张普通的图片" />
<!--当picture.jpg加载失败时显示文本"这是一张普通的图片"-->
———————————————————————————
3.title规定鼠标在图片上停留时显示的悬浮框中显示的文字
<img src="/i/picture.jpg" title="这是一张普通的图片" />
<!--当鼠标移动到picture.jpg上时,显示文本为"这是一张普通的图片"的悬浮框-->
———————————————————————————
4.设置图像的尺寸
- 用width、height设置:
<img src="/i/picture.jpg" width="200px" height="30px" />
<!--宽高同时设置的情况,图片可能发生变形-->
<img src="/i/picture.jpg" width="200px" />
<!--宽和高只设置其中一个,图片将按比例进行缩放-->
注意:图片的宽和高(单位是CSS像素)同时被设置时,如果宽高没有保持其原来比例,图像会发生扭曲。如果只设置宽或高其中一个的像素值,那么图片将按比例进行大小缩放。
- 用百分比值设置:
<img src="/i/picture.jpg" width="50%" />
注意:如果提供了一个百分比形式的width值且忽略height,那么不管是放大还是缩小,浏览器都将保持图像的宽高比例。这意味着图像的高度与宽度之比将不会发生变化,图像也就不会发生扭曲。只设置百分比形式的width值且忽略width同理!
三、table 标签的用法
table元素表示表格数据,即通过二维数据表表示的信息。
详细使用方法及实例见:developer.mozilla.org/zh-CN/docs/…
table中可用的元素有:
- 一个可选的 < caption > 元素
- 零个或多个的< colgroup >元素
- 零个或多个的< td >元素
- 一个可选的 < thead > 元素
- 下列任意一个:
- 零个或多个 < tbody >
- 零个或多个 < tr >
- 一个可选的 < tfoot > 元素