首页 > 代码库 > 2.HTML5基本标签
2.HTML5基本标签
一、标题标签 h1-->h6
h1最大
h6最小
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
二、特殊符号
<body>
Copyright © 1999-2011 "北大青鸟" All rights.
</body>
空格的连续写法
<body>
让子弹 多飞一会!!<br />
让子弹
多飞一会!!<br />
</body>
三、行控制标签 <p>
<body>
<h1>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p> #段落
<p>我是郭德纲!</p>
</body>
<body>
<h1>静夜思</h1>
床前明月光<br />
疑是地上霜<br /> #换行
举头望明月<br />
我是郭德纲!<br />
</body>
四、范围标签和下划线<span><hr />
<h1>静夜思</h1>
<hr />
床前明月光<br />
疑是地上霜<br />
举头望明月<br />
<span style="color:red; font-size:40px;">低头思故乡
</span><br />
</body>
五、图像标签
<html>
<body>
<img style=width:100px height=100px src="http://www.mamicode.com/1.jpg"; alt="游戏手柄" title="游戏手柄" />游戏手柄超便宜!!
<br />
<br />
<img src="http://www.mamicode.com/2.jpg" style=width:100px height=100px alt="音乐播放器" title="音乐播放器" />音乐播放器2折!!<br />
</body>
</html>
src:指定图片所在的路径
alt:指定的替代文本
表示图像无法显示时(图片路径错误等)替代显示的文本
title:额外的提示或帮助信息
六、超链接的用法
<a href="http://www.mamicode.com/链接地址" target="目标窗口位置">具体内容</a>
href:用于设定链接地址
target:指定链接在哪个窗口打开
_blank:将链接的文档加载到一个未命名的新浏览器窗口中
_self:将链接的文档加载到该链接所在的同一框架中,默认值
例子:
在从新编辑一个网页,名称为a.html。以便下边的语句调用
<a href="http://www.mamicode.com/a.html" target="_blank">abc</a>
会在新的窗口中打开a.html页面
七、HTML支持有序、无序和定义列表
(1)有序列表
例子: <ol> 效果: 1.c
<li>c</li> 2.b
<li>b</li> 3.a
<li>a</li>
</ol>
<ol start="10" > 效果:
<li>3</li> 10.3
<li>2</li> 11.2
<li>1</li> 12.1
</ol>
start="10" 表示从10开始 有序列表默认是从1开始的。
(2)无序列表
1. a
2. v
3. d
例子:
<ol>
<li>c</li>
<li>b</li>
<li>a</li>
</ol>
(3)自定义列表
用这个标签<dl></dl>
每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。
例子:
<dl>
<dt>年龄</dt>
<dd>1、2、3</dd>
<dt>姓名</dt>
<dd>pang、bing、bing</dd>
</dl>
效果:
年龄
1、2、3
姓名
pang、bing、bing
八、HTML表格
表格:由 <table> 标签来定义。
行:每个表格均有若干行(由 <tr> 标签定义),
单元格:每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
例子:
<table>
<tr>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>abc</td>
<td>ghb</td>
</tr>
</table>
效果:
123 |
456 |
abc |
ghb |
2、边框
<table border="1">
3.表格表头
<th>表头</th>
4.跨多列的表格
<td colspan="所跨的列数">单元格内容</td>
5.跨多行的表格
<td rowspan="所跨的列数">单元格内容</td>
6.为了使表格的宽度充满整个浏览器 可以使用width="100%"
<table width="100%"></table>
7.表格的填充属性 和间距属性
1.文字与边框的距离 :cellpadding
2.表格与表格的距离 : cellspacing
例子:
<table width="100%" cellpadding="10" cellspacing="200">
2.HTML5基本标签