h5学习1

1.h5的基本结构

<!--文档类型-->
<!DOCTYPE html>
<!--文档命名空间-->
<html lang="en">
<head>
<!--字符编码-->
 <meta charset="UTF-8">
 <title>标题</title>
</head>
<body>

</body>
</html>

2.属性值的使用
对于具有boolean值的属性，当只写属性而不指定属性值的时候，表示属性为true,如果要设为false，可以不使用改属性。
要想设为true，也可以将属性名设为属性值或设为空串。

<input type="checkbox" checked>  true
<input type="checkbox">  false
<input type="checkbox" checked="checked">  true
<input type="checkbox" checked="">  true

3.基本的标签
①定义删除的文本就是在文本上有一条横线表示删除

<del>123</del>

②定义插入的文本就是在文本下有一条横线

<ins>eeee</ins>

③定义横线

<hr/>

④定义缩略词也就是正常显示的时候为PRC，但是当鼠标移动上去后会显示“People’s Republic of China”

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

⑤定义地址只不过包含住的字体会倾斜，其他没有什么效果

<address>
Written by W3School.com.cn<br />
<a href="mailto:[email protected]">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>

⑥使用tabindex进行控制tab键的顺序，注意在使用的时候第一标签要为1，否则就不能按照预定的顺序

<a href="#" tabindex="1">a</a>
<a href="#" tabindex="2">b</a>
<a href="#" tabindex="4">c</a>
<a href="#" tabindex="3">d</a>

⑦属性
当鼠标悬浮在图片的时候回显示title的内容，如果没有加载成功，那么就显示alt的内容。
alt属性只能用在img，area,input元素中。

<img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg" title="提示文本" alt="替换文本">

⑧下拉列表点击input框后会显示下拉列表

<input list="cars" />
<datalist id="cars">
    <option value="BMW">
   <option value="Ford">
  <option value="Volvo">
</datalist>

4.表单属性
为Input select textarea button等元素添加了autofocus属性

<input type=text autofocus="true"/>

为input textarea添加了placeholder属性
为input button output select textarea fieldset添加了form属性，不用必须放在form表单中。

5.全局属性
①contentEditable允许编辑其中的内容，然后发送到服务端，在js中还有isContentEditable属性

<ul contentEditable="true">
<li>eee</li>
<li>eee</li>
<li>eee</li>
</ul>

②data-*属性，用来自定义用户数据，然后在js中能够获取到自定义的数据

<body>
<ul>
 <li data-animal="la">
   啦啦
</li>
 <li data-animal='ha'>
    哈哈
 </li>
</ul>
</body>


<script>
 var list= document.getElementsByTagName("li")
 for (var i = 0; i < list.length; i++) {
   var listElement = list[i]
  console.log(listElement.dataset.animal)
 }

③draggble属性，能够让元素能够拖动

<div draggble="true">可以拖动</div>

④hidden属性
让元素的高度为0

猜你喜欢