2.HTML5基本标签

一、标题标签 h1-->h6

h1最大

h6最小

<body>

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

</body>

二、特殊符号

<body>

</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=100px height=100px src="1.jpg"; alt="游戏手柄" title="游戏手柄" />游戏手柄超便宜！！

<br />

<img src="2.jpg" style=100px height=100px alt="音乐播放器" title="音乐播放器" />音乐播放器2折！！<br />

</body>

</html>

src：指定图片所在的路径

alt：指定的替代文本

表示图像无法显示时（图片路径错误等）替代显示的文本

title：额外的提示或帮助信息

六、超链接的用法

<a href="链接地址" target="目标窗口位置">具体内容</a>

href：用于设定链接地址

target：指定链接在哪个窗口打开

_blank：将链接的文档加载到一个未命名的新浏览器窗口中

_self：将链接的文档加载到该链接所在的同一框架中，默认值

例子：

在从新编辑一个网页，名称为a.html。以便下边的语句调用

<a href="a.html" target="_blank">abc</a>

会在新的窗口中打开a.html页面

(2)a标签还可以用图片作为超链接

　　<a href="http://www.baidu.com"><img src="1.jpg" width="200px" height="200px"></a>

（3）锚链接

　　在本页之间跳转位置

　　<p>唐诗三百首</p>
　　<a href="#abc">李白</p> #点击"李白"的超链接就会跳转到本页的abc位置。

　　<a name="abc">望庐山瀑布</a> #定义好位置，位置名称为abc

七、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）无序列表

例子：

<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">