我的H5——01

H5由元素(element)、属性(attribute)和值(value组成。

元素:

       经典型:

           <em>amazed</em>
       空元素

          <img src="blueflax.jpg" width="300" height="175" alt="Blue Flax" />
空元素(如这里显示的 img 元素)并不包含任何文本内容(alt 属性中的文字是元素的一部分,并非显示在网页中的内容) 。空元素只有一个标签,同时作为元素的开始标签和束标签使用。结尾处的空格和斜杠在 HTML5 中是可选的。不过,元素最后面的 > 是必需的。

属性和值

<label for="email">Email Address</label>
这是一个 label 元素(关联文本标签与表单字段),它有一个简单的属性 值对。属性总是位于元素的开始标签内,属性的值通常放在一对引号中,属性值两边的引号是可选的。

有的元素可以有多个属性,每个属性都有各自的值。属性的顺序并不重要。不同的属性 值对之间都用空格隔开

<a href="http://en.wikipedia.org/wiki/Linum_lewisii" rel="external" title="Learn more about Blue Flax">Blue Flax</a>
<img src="img/blueflax.jpg" width="300" height="175" alt="Blue Flax" />

有的属性只接受特定的值。例如,只能将 link 元素里的 media 属性设为 allscreenprint 等值中的一个,不能像 href 属性和 title 属性那样可以输入任意值

<link rel="stylesheet" media="screen" href="style.css" />

有许多属性的值需要设置为数字,特别是那些描述大小和长度的属性。数字值无需包含单位,只需输入数字本身。图像和视频的宽度和高度是有单位的,默认为像素。

有的属性(如 href src)用于引用其他文件,它们只能包含 URL(统一资源定位符,是万维网上文件的唯一地址)形式的值。
有一种特殊的属性称为布尔属性(
Boolean attribute)。这种属性的值是可选的,因为只要这种属性出现就表示其值为真。如果一定要包含一个值,就写上属性名本身(这样做的效果是一样的)。布尔属性也是预先定义好的。

<input type="email" name="emailaddr" required />
<input type="email" name="emailaddr" required="required" />


H5的图片映射是指通过HTML5中的<area>元素来将一张图片划分成不同的区域,并为每个区域设置不同的链接或触发不同的事件。这样当用户点击图片中的某个区域时,就能够执行相应的操作。 为了方便取坐标点并创建图片映射,可以使用一些在线工具。这些工具通常提供一个用户友好的界面,让用户能够直观地选择图片上的区域,并为每个区域设置链接或其他属性。 使用这些工具的步骤通常如下: 1. 上传图片:用户需要首先将要处理的图片上传到工具中。一般支持多种图片格式,如PNG、JPEG等。 2. 选择区域:通过工具提供的画笔、形状工具或者直接拖动鼠标,在图片上划定出需要创建映射的区域。用户可以选择不同的形状,如矩形、圆形、多边形等。 3. 设置链接或触发事件:当某个区域被创建后,用户可以为其设置链接,指向其他页面或资源,也可以设置触发特定的JavaScript事件。 4. 保存结果:完成所有区域的设置后,用户可以保存映射的结果。通常会产生一个HTML代码或者文件,包含了所有区域的信息。 值得注意的是,H5的图片映射功能通常在移动设备上使用较少,因为移动设备的触摸操作不同于鼠标的点击,较难精确地选择区域。同样,图片映射在响应式设计中也需要谨慎使用,因为区域的大小和位置在不同设备上可能会有适配问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值