html 常用标签[2]

来源：互联网发布：合肥飞友网络编辑：程序博客网时间：2024/06/05 20:37

定义列表
图片
超链接
指定图片某块区域加超链接
div 容器
span 内联元素
定义列表

苹果: 苹果是种低热量食物，每 100 克只产生 60 千卡热量；苹果中营养成份可溶性大，易被人体吸收，故有“活水”之称，有利于溶解硫元素，使皮肤润滑柔嫩。

块级元素
2. 插入图片

<img src=”” alt=”” width=”” height=”” />

1）属性 src 里面填写图片的路径即可！
路径有两种填写方式：绝对路径、相对路径
绝对路径我们等到服务器上部署的时候再说！
相对路径：相对于我们当前 html 文件的位置来写路径即可！
./表示当前目录，../表示上一级目录
2）属性 alt 里面写一些图片的说明信息
3）属性 width 填写图片长度，也可用百分比来表示
4）属性 height 填写图片的高度，也可用百分比来表示

内联元素

超链接

<a href=”链接地址” title=”百度” target=”_blank”>百度一下</a>

1）属性 href
填写需要链接到的网址,网站建设初期可以使用#链接来表示空链接
2）属性 title
title 里面的内容会在鼠标悬停时显示
3）属性 target
设置为_blank 时即可在新窗口打开链接地址
内联元素

指定图片某块区域加超链接
使用 map 标签可以给图片某块区域加超链接
使用方法：
1）为 map 标签首先加上 id 属性用来为 map 标签定义一个唯一的名称
2）为了保证兼容性再加上 name 属性，属性值与 id 的值相同
3）为 map 标签所作用的图片加上 usemap 属性，属性值为 #id 名称
4）在 map 标签内嵌套 area 标签来实现给指定区域加链接

shape 属性：定义链接区域的形状，常用值 rect、circle
coords 属性：确定区域的精确位置。填写坐标即可
href 属性：填写链接地址即可
alt 属性：给链接加一些说明信息
div 标签
可以把 div 标签看成一个可以存放标签的容器！
我们讲的常用标签几乎都可以嵌套在 div 标签的里面
块级元素
span 标签
使用来组合内联元素，以便通过 css 来美化它们。

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>html常用标签[2]</title></head><body><!--    <ul>        <li>列表</li>        <li>列表</li>        <li>列表</li>        <li>列表</li>        <li>列表</li>    </ul>--><dl>    <dt>苹果</dt>    <dd>        苹果是种低热量食物，每 100 克只产生 60 千卡热量；苹果中营养成份可溶性        大，易被人体吸收，故有“活水”之称，有利于溶解硫元素，使皮肤润滑柔嫩。    </dd>    <dt>鸭梨</dt>    <dd>鸭梨也是一种水果.....</dd>    <dt>橙子</dt>    <dd>橙子.........</dd></dl><img src="images/1.jpg" alt="一对猫咪" width="100" /><img src="images/1.jpg" alt="一对猫咪" width="100" /><img src="images/1.jpg" alt="一对猫咪" width="100" /><img src="images/1.jpg" alt="一对猫咪" width="100" /><br /><br /><br /><a href="http://www.baidu.com" title="百度搜索" target="_blank">百度</a><br /><br /><br />    <img src="images/1.jpg" alt="一对猫咪" usemap="#img1" />    <map id="img1" name="img1">        <area shape="rect" coords="184,33,391,258" href="http://www.baidu.com" alt="百度一下" target="_blank" />        <area shape="rect" coords="76,62,150,150" href="http://www.sifangku.com" alt="私房库我的博客" target="_blank" />        <area shape="circle" coords="507,287,20" href="http://www.sifangku.com" alt="私房库我的博客" target="_blank" />    </map><div>    <p></p>    <h2></h2>    <ul>        <li></li>    </ul>    <img src="images/1.jpg" alt="一对猫咪" usemap="#img1" />    <map id="img1" name="img1">        <area shape="rect" coords="184,33,391,258" href="http://www.baidu.com" alt="百度一下" target="_blank" />        <area shape="rect" coords="76,62,150,150" href="http://www.sifangku.com" alt="私房库我的博客" target="_blank" />        <area shape="circle" coords="507,287,20" href="http://www.sifangku.com" alt="私房库我的博客" target="_blank" />    </map>    <p>我是一个<span>段落</span></p></div></body></html>

这里写图片描述

这里写图片描述参考：HTML

阅读全文

0 0