H5笔记——HTML常用的标签
2017-01-21 本文已影响287人
行走的苹果哥
HTML的结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
/* 标题 */
</title>
</head>
<body>
<!-- 正文-->
</body>
</html>
HTML常用的标签
标题标签—h
总共有6级，依次从大到小。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h1>我是h1标签</h1>
<h2>我是h1标签</h2>
<h3>我是h1标签</h3>
<h4>我是h1标签</h4>
<h5>我是h1标签</h5>
<h6>我是h1标签</h6>
</body>
</html>
浏览器显示效果如下：
Paste_Image.png
表单标签—input
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<input placeholder="我是占位文字"><br>
<input value="我是默认文字"><br>
<input type="date"><br>
<input type="file"><br>
<input type="color"><br>
<input type="radio"><br>
<input type="checkbox"><br>
</body>
</html>
为换行标签，type和value为input的属性，可以改变它的样式。显示效果如下：
Paste_Image.png
段落标签—p
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
<p>
我是段落标签我是段落标签<br>
我是段落标签我是段落标签我是段落标签
</p>
</body>
</html>
显示效果如下：
Paste_Image.png
超链接标签—a
比如说加载百度网页。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<a href="http://www.baidu.com/" target="_blank">
百度
</a>
</body>
</html>
显示效果如下：直接点击文字跳转到百度页面，blank是在新的页面加载百度。如果href="#",就是表示为空链接，跳转到当前界面。
Paste_Image.png
图像标签—img
在本地放一张图片，跟创建的html文件同级，直接加载图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
</body>
</html>
显示效果：
Paste_Image.png
结合上面超链接标签，来实现点击图片跳转百度页面，如下代码所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<a href="http://www.520it.com/" target="_blank">
</a>
</body>
</html>
alt后面的文字，只有在图片加载失败的时候，才会出现，现在加载成功，显示效果如下：
Paste_Image.png
列表标签
列表标签分为有序列表(ol)和无序列表(ul)。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<ul>
<!--无序列表-->
<li> 我是无序列表 </li>
<li> 我是无序列表 </li>
<li> 我是无序列表 </li>
<li> 我是无序列表 </li>
<li> 我是无序列表 </li>
</ul>
<!--有序列表-->
<ol type="1">
<li> 我是无序列表 </li>
<li> 我是无序列表 </li>
<li> 我是无序列表 </li>
<li> 我是无序列表 </li>
<li> 我是无序列表 </li>
</ol>
</body>
</html>
显示效果：
Paste_Image.png
有序列表的type还可以等于A、I、a、i。
无序列表的type还可以设置为circle。
Paste_Image.png
