疯狂H5讲义笔记 - H5常用元素和属性

来源：互联网发布：公安大数据宣传片编辑：程序博客网时间：2024/06/06 00:43

1.自定义文本显示方向:<bdo dir="ltr/rtl" />。ltr为从左往右显示文本内容，rtl为从右往左显示文本内容

2.缩写指定内容:<abbr title>...</abbr>。将鼠标移至该元素的文本内容上时会显示title值

3.格式化文本:<pre>...</pre>。该元素中的文本包含的空格、回车等都会被保留并原样输出，但是大部分的标签都会被当成标签处理，而不是输出

4.d氏列表:

<dl>    <dt>列表标题</dt>    <dd>列表项1</dd>    <dd>列表项2</dd>    ...</dl>

5.将一张图片分为不同位置，每个位置分别映射不同的范围:

<!--1.定义一个map，该map为图片映射元素，该元素有一个name属性，用于给img元素引用--><map name="test">    <!--2.定义其中的area元素，该元素用于指定不同位置的不同范围映射,        该元素有属性:shape:指定范围形状;coords:指定范围;href:指定该范围映射的链接;target:...;media:指定href引用的媒体类型-->    <area shape="cicle" coords="57,50,51" href="http://www.baidu.com" /></map><!--然后通过img的usemap属性指定选用的map的name就可以了，此时要注意：需要设置img的width和height--><img src="test.jpg" style="width:300px;height:300px;" usemap="test" />

6.H5不再使用<frameset>、<frame>、<noframe>三个标签，提供了新的标签:<iframe>

7.contentEditable：指定是否将该元素变成可编辑状态；designMode属性表示将整个页面作为可编辑状态；designMode是body的属性，在js脚本中则是设置成document.designMode=”on” ;

8.为等文本输入框提供拼写检查:spellcheck。所说的拼写检查就是简单的检查该单词是否在牛津字典存在

9.文档结构元素:<article>元素代表页面上独立的完整的文章，在里面可以:1.使用<header>定义标题部分；2.使用<footer>定义脚注部分；3.使用<section>将该文章结构进行分段；4.使用嵌套<article>

10.使用<details>元素可以定义摘要信息。在该元素下可以指定<summary>元素，用于定义索要摘要的数据.

<details>    <summary>java</summary>    java是一门面向对象的语言</details>

11.定义计数仪表:<meter value min max >

12.定义进度条:<progress value max>

13.定义基准链接:<base href target />,在head中定义该基准元素后，body下的链接的href就都加入了该href为链接前缀。如下:

<head>    <base href="http://www.baidu.com" />    ...</head><body>    <a href="index.html">...</a>    ...</body>

该代码中的a链接的实际链接网址为:http://www.baidu.com.index.html

14.<meta>元数据标签的使用:

1.Pragma：指定金枝浏览器从本地磁盘缓存中调用页面内容，一旦离开该网页，浏览器就无法脱机访问该页面<meta http-equiv="Pragma" content="no-cache" />2.Refresh：指定浏览器多长时间后自动刷新该页面，也可刷新到指定的页面<meta http-equiv="Refresh" content="3" /><meta http-equiv="Refresh" content="3;URL=http://www.baidu.com" />3.content-Type：指定页面类型以及所用的字符集<meta http-equiv="content-Type" content="text/html;charset=utf-8" />4.关键字信息描述:<meta http-equiv="Keywords" content="java.javaweb,ssh" /><meta http-equiv="author" content="chengxi" /><meta http-equiv="website" content="..." /><meta http-equiv="copyright" content="..." />

0 0