HTML-从零开始的学习过程（2）

HTML列表

1.无序列表
结构：

<body><ul><li></li><li></li><li></li></ul>
</body>

属性：type（disc圆点、square正方形、circle空心圆）

<body><ul type="disc"><li>html</li><li>html</li><li>html</li></ul>

2.有序列表
结构：

<body><ol><li>html</li><li>html</li><li>html</li></ol>
</body>

属性（type）：

阿拉伯数字（1，2，3…）
小写字母（a，b，c…）
大写字母（A，B，C…）
小写罗马数字（i，ii，iii，vi…）
大写罗马数字（I，II，III，VI…）

<body><ol type="1"><li>html</li><li>html</li><li>html</li></ol>
</body>

3.定义列表
结构：

<body><dl><dt>标题1</dt><dd>内容</dd><dd>内容</dd><dt>标题2</dt><dd>内容</dd><dd>内容</dd></dl>
</body>

图像标签

结构：

<body><img src="" alt=""/>
</body>

属性：

src，用来表明显示文件的路径和文件的名称，路径包含绝对路径和相对路径；
alt是提示信息，图像替代的文本；
Height ，图像的高度，可以用数值和百分比表示-- px像素 20%百分比；
Width，图像的宽度，可以用数值和百分比表示 – px像素 20%百分比。
补充：
绝对路径：指的是具体盘符下的路径;
相对路径:指的是相对于当前文件夹的这个图片的路径;
相对路径分为3种情况：
1、html文件和图像文件处于同一级目录
2、图像文件处于html文件的下一级
3、图像文件处于html文件的上一级 (…/…/…/)

img标签中的alt属性，当图片显示不出来的时候，会显示alt的值
alt显示的几点原因：
1.网速太慢;
2.src属性值错误；
3.用户无法查看图像的时候。

超链接

1.超链接
结构：

<body><a href="" target="" title="" name=""></a>
</body>

属性：

href：链接地址，可以是内部，可以是外部；
target：链接的目标窗口（_self ,_blank,_top,_parent）；
title:链接提示的文字；
name:链接命名。
补充：
_self：和默认形式一样，都是默认当前打开页面；
_blank：表示在一个新打开、未命名的窗口中打开页面；
_top：在整个窗口中打开页面；
_parent：在父框架集中打开被链接文档。

2.锚链接
结构：

<body><a href="#锚名1">目录1</a><a href="#锚名2">目录2</a><a name="锚名1">内容</a><a name="锚名2">内容</a>
</body>

示例：

<!DOCTYPE html>
<html>
<head><title>超链接跳转</title><meta charset="utf-8">
</head>
<body><a name="这里是顶部">这里是顶部</a><br/><!-- 目录项 --><a href="#水果">水果</a><br/><a href="#蔬菜">蔬菜</a><br/><a href="#运动">运动</a><br/><!-- 具体内容 --><a  name="水果"><h2>水果</h2></a><p><ul><li>香蕉</li><li>苹果</li><li>葡萄</li><li>梨</li><li>西瓜</li><li>樱桃</li><li>菠萝</li><li>樱桃</li><li>橙子</li><li>柚子</li><li>芒果</li><li>香蕉</li><li>苹果</li><li>葡萄</li><li>梨</li><li>西瓜</li><li>樱桃</li><li>菠萝</li><li>樱桃</li><li>橙子</li><li>柚子</li><li>芒果</li></ul></p><br/><a href="#这里是顶部">返回顶部</a><br/><a name="蔬菜"><h2>蔬菜</h2></a><p><ul><li>西红柿</li><li>黄瓜</li><li>土豆</li><li>芹菜</li><li>蒜台</li><li>西葫芦</li><li>香菇</li><li>菠菜</li><li>豆角</li><li>西红柿</li><li>黄瓜</li><li>土豆</li><li>芹菜</li><li>蒜台</li><li>西葫芦</li><li>香菇</li><li>菠菜</li><li>豆角</li></ul></p><br/><a href="#这里是顶部">返回顶部</a><br/><a name="运动"><h2>运动</h2></a><p><ul><li>羽毛球</li><li>篮球</li><li>足球</li><li>乒乓球</li><li>台球</li><li>网球</li><li>高尔夫球</li><li>羽毛球</li><li>篮球</li><li>足球</li><li>乒乓球</li><li>台球</li><li>网球</li><li>高尔夫球</li><li>羽毛球</li><li>篮球</li><li>足球</li><li>乒乓球</li><li>台球</li><li>网球</li><li>高尔夫球</li></ul></p><br/><a href="#这里是顶部">返回顶部</a>
</body>
</html>

效果图：

3.锚链接中不同页面的跳转：
结构：
网页1：< a href =”网页名字#锚名” >…< /a>
网页2：< a name =”锚名”>…< /a>

4.电子邮件链接
结构：

<body><a href="mailto:邮箱地址">。。。</a>
</body>

5.文件下载
结构：

<body><a href="需要下载的文件地址"></a>
</body>

补充：

如果路径是地址打开的相应的地址；
如果是文件就会进行下载。

HTML-从零开始的学习过程（2）相关推荐

从零开始的FPGA学习（第一个任务：多数表决器）
从零开始的FPGA学习第一个任务:多数表决器 (1)基础任务 (2)提高任务和扩展任务简单说明:这里我们采用Vivado软件进行仿真和编译,使用的语言为Verilog语言,这篇博客记录自己的从零开 ...
一、Python时间序列小波分析——实例分析
小波分析是在Fourier分析基础上发展起来的一种新的时频局部化分析方法.小波分析的基本思想是用一簇小波函数系来表示或逼近某一信号或函数. 小波分析原理涉及到傅里叶变换,并有多种小波变换,有点点小复杂 ...
如何在5天内学会Vue？聊聊我的学习方法！
先说下为什么用学习Vue这个例子来谈我的学习方法?其实关注我的朋友很多都是从我的Github上面来的,大多数都是Java后端开发者,Vue作为一种前端技术,掌握的人并不多.所以使用Vue从零开始的学习 ...
Java游戏服务器成长之路——感悟篇
又是一个美好的周末啊,现在一到周末,早上就起得晚,下午困了又会睡一两个小时,上班的时候,早上起来喝一杯咖啡,然后就能高效的工作一整天,然而到了周末人就懒散了,哈哈. 最近刚跳槽,到新公司已经干了有两周 ...
python从零开始的学习-python学习过程之从零开始
用于交互使用: >>> user = raw_input("Enter login name:") Enter login name:root >>& ...
[译]从零开始成为数据科学家的9个步骤
[译]从零开始成为数据科学家的9个步骤原文链接:http://www.datasciencecentral.com/profiles/blogs/9-steps-to-become-a-data-s ...
从零开始教你训练神经网络（附公式学习资源）
来源:机器之心作者:Vitaly Bushaev 本文长度为8900字,建议阅读15分钟本文从神经网络简单的数学定义开始,沿着损失函数.激活函数和反向传播等方法进一步描述基本的优化算法. 作者从神 ...
使用深度学习和树搜索进行从零开始的既快又慢的学习
本文介绍了来自伦敦大学学院(UCL)Thomas Anthony.Zheng Tian 与 David Barber 的深度学习与树搜索研究.该论文已被 NIPS 2017 大会接收. 二元处理机制理 ...
从零开始的AI·机器学习の基本概念
从零开始的AI系列机器学习の基本概念从零开始的AI系列一.机器学习の相关术语及其理解二.机器学习の学习任务分类回归聚类特征降维与低维可视化三.机器学习の学习范式监督式学习半监督式 ...
python -- 计算平方、乘方、平方根_从零开始学习PYTHON3讲义（二）把Python当做计算器...
<从零开始PYTHON3>第二讲上一讲我们说过了如何启动Python IDLE集成开发学习环境,macOS/Linux都可以在命令行执行idle3.Windows则从开始菜单中去寻找ID ...

HTML-从零开始的学习过程（2）

HTML列表

图像标签

超链接

HTML-从零开始的学习过程（2）相关推荐

最新文章

热门文章