HTML元素及属性

HTML元素及属性

HTML4

div和span

<!--div定义一块区域--><div>这里是一块,我也不知道<!--span在文本行里定义一块区域--><span>文本里区域</span><div>

效果图:

ol、ul和dl

<!--有序列表--><ol><li>苹果</li><li>栗子</li><li>鸭梨</li></ol><!--无序列表--><ul><li>苹果</li><li>栗子</li><li>鸭梨</li></ul><!--dl是自定义的方式,进行列表--><dl><dt>水果<dd>苹果</dd><dd>栗子</dd><dd>鸭梨</dd></dt><dt>汽车<dd>保时捷</dd><dd>红旗</dd></dt></dl>

效果图

del 和 ins

		<!--定义删除的文本--><del>一道横线删除</del><!--定义插入的文本--><span>我是一个<ins>(其实,不是)</ins>爱学习前端开发的小白！</span>

效果图:

h1~h6

<h1>我</h1>
<h2>的</h2>
<h3>字</h3>
<h4>体</h4>
<h5>越来越</h5>
<h6>小</h6>

效果图:

其他

p:定义段落结构；
hr:定义水平线;
br:定义换行;
a:定义超链接

		<!--a定义超链接--><a href="" target="_blank" > 跳转百度搜索</a>

abbr:定义一个缩写词

<abbr title="World Health Organization">WHO</abbr>是世界卫生组织的缩写！

blockquote:定义大块内容引用

		<!--blockquote定义大块内容引用--><blockquote>This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. <em>This is a long quotation.</em></blockquote>

cite:定义引文
q:修饰的内容会加引号

		<!--cite定义引文,em,strong都是定义重要文本-->&#171<cite title="作者:海明威"><em>老人与海</em></cite>&#187:<q><strong>一个人可以被毁灭，但不能被打败!</strong></q>

效果图:

b:粗体；
i:斜体；
small:文本缩小；

<b>粗体  </b>
<i>斜体  </i>
<small>文本缩小</small>

sup:定义上标；
sub:定义下标;

 <p>x<sup>2</sup>=1的解为x<sub>1</sub>=1和x<sub>2</sub>=-1</p>

效果图:

bdo：定义显示文本的方向

		<p><bdo dir="rtl">我这个是从右到左</bdo><br><bdo dir="ltr">我这个是从左到右</bdo></p>

效果图:

alt:定义元素的替换文本
title：显示提示文本

<p><!--alt定义元素的替换文本--><img src="url" alt="我想显示一张图片"/><br><!--title提示文本--><em title="出自老人与海">不过话得说回来，没有一桩事是容易的。</em></p>

HTML5

HTML5增添了很多的属性和标签,仅记录自己觉得有点用的，emmm;
nav:表示页面中导航链接的部分

<!--nav表示页面中导航链接的部分--><nav><a href="/html/">HTML</a> |<a href="/css/">CSS</a> |<a href="/js/">JavaScript</a> |<a href="/jquery/">jQuery</a></nav>

效果图:

mark:高亮显示

<mark>高亮显示</mark>

效果图:

summary:提高标题或者图例

<!--summary提供标题或者图例--><details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>

效果图:


datalist：定义可选的下拉框

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

input：表单元素
type的可选类型入下:

hidden：定义隐藏元素

<button id="btn" onclick="hide()" onmouseout="show()">隐藏与显现转换</button><script>//点击隐藏function hide(){ElementById("btn").hidden=true;}//鼠标移走显现function show(){ElementById("btn").hidden=false;}</script>

实例代码: