初识HTML及常⽤的标签（2）HTML的常⽤标签
在前⾯⼀篇也提到了⼀些标签，接着记录⼀些常⽤的HTML标签：
图像标签
HTML中的图像是通过<img>标签定义的。
img标签其基本语法如下：
标签中的src属性是⽤于指定图⽚的名字和图⽚⽂件的路径。它是img标签的必须属性。
<img src="图像URL" />
img标签其中还有⼀些属性如下表格：
属性属性值属性描述
src URL（Uniform Resource Locator，统⼀资
源定位符）是地址的别名
图像⽂件的地址
title⽂本⿏标在图⽚上悬停时，显⽰的⽂本内容
alt⽂本图⽚加载失败时显⽰的⽂本内容
width数字设置图像的宽度
height数字设置图像的⾼度
border数字设置图像边框的宽度
链接标签
HTML中的超链接标签是由<a>标签来定义的，⽤a标签环绕需要被链接的对象即可创建⼀个超链接。如下：
<a href="跳转的⽬标路径" target="⽬标窗⼝弹出的⽅式">⽂本或图⽚</a>
其中的href属性：⽤于指定链接⽬标的url地址，当为标签应⽤href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超⽂本引⽤。
target属性：⽤于指定链接页⾯的打开⽅式，其取值有self和blank两种，其中self为默认值，blank为在新窗⼝中打开⽅式。
注意：
1.外部链接需要添加模式、主机名和路径如： www.baidu
2.内部链接直接链接内部页⾯名称即可⽐如 < a href="index.html"> ⾸页 </a >
3.如果当时没有确定链接⽬标时，通常将链接标签的href属性值定义为“#”(即href="#")，表⽰该链接暂时为⼀个空链接。
4.不仅可以创建⽂本超链接，在⽹页中各种⽹页元素，如图像、表格、⾳频、视频等都可以添加超链接。
锚点定位
通常，激活⼀个链接会将⽤户带到对应的⽹页顶端。如果要想⽤户跳⾄⽹页的特定区域，可以创建⼀个锚。
创建锚的步骤：
1、将光标放在希望⽤户跳转⾄的元素的开始标签中，输⼊⼀个id属性及属性值。
例如：<h2 id="features">希望⽤户跳转到此处</h2>
2、创建链接到特定锚的链接
<a href="#features">定位到id为features的区域</a>
其中的features为⽬标的id属性值。当点击链接时，将⽤户直接带到步骤1中的⽂字区域。
注意：
提到链接，还需要注意⼀个标签（base标签）
base标签可以设置整体链接的打开状态
base标签书写到<head></head>之间
例如：
<head>
<base target="_blank"/>
</head>
将所有链接默认添加属性target="_blank"（默认在新窗⼝打开）
其中⽹易就是使⽤的base标签：
列表标签
HTML包含了专门⽤于创建项⽬列表的元素，其中有有序列表、⽆序列表、描述列表，下⾯分别详细介绍其语义和⽤法。
1、有序列表：
适⽤于提供完成某⼀任务的分步说明，或者⽤于创建⼤型⽂档的⼤纲等。总之呢，它适⽤于任何强调顺序的项⽬列表。
例如：
<ol>
<li>Coffee</li>
<li>Tea</li>
html href属性<li>Milk</li>
</ol>
代码运⾏：
其中有序列表都是默认使⽤阿拉伯数字创建带编号的有序列表，这个可以通过CSS对此进⾏修改。有序列表和⽆序列表在显⽰时默认都会进⾏缩进。
如何选择列表的起始编号呢？
选择列表的起始编号
<ol start="2">
<li>第⼀个li</li>
<li value="6">第⼆个li</li>
<li>第三个li</li>
</ol>
在ol开始标签中添加start属性，可以表⽰列表的初始值。在li标签的开始标签中添加value属性和值，可以表⽰当前的li标签 从value值开始。
代码运⾏：
2、⽆序列表：
适⽤于列表项的顺序不太重要的。
例如：
<ul>
<li>⾐服</li>
<li>帽⼦</li>
<li>鞋⼦</li>
</ul>
代码运⾏：
在默认情况下，⽆序列表前⾯显⽰实⼼圆点。可以通过CSS对此进⾏修改。
注意：
1. <ul></ul>和<ol></ol>中只能嵌套<li></li>，直接在<ul></ul>和<ol></ol>标签中输⼊其他标签或者
⽂字的做法是不被允许的。
2. <li>与</li>之间相当于⼀个容器，可以容纳所有元素。
3. ⽆序列表和有序列表会带有⾃⼰样式属性，放下那个样式，⼀会让CSS来！
3、描述列表（⼜称⾃定义列表）
描述列表常⽤于对术语或名词进⾏解释和描述，定义列表的列表项前没有任何项⽬符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
每个描述列表，都是由每个名-值组组成，⼀般⼀个名-值组都是由⼀个dt和⼀个或多个dd组成。
表格table
结构化表格：放在电⼦表格中的信息通常很适合⽤HTML表格呈现。
从基本层⾯看，table元素是由⾏（tr）组成的，⾏⼜是由单元格组成的。每⼀⾏（tr）都包含标题单元格（th）或数据单元格（td）或者同时包含这两种单元格。
以下三种标签不可或缺：
1.table⽤于定义⼀个表格。
< ⽤于定义表格中的⼀⾏，必须嵌套在 table标签中，在 table中包含⼏对 tr，就有⼏⾏表格。
3.td /td：⽤于定义表格中的单元格，必须嵌套在<tr></tr>标签中，⼀对 <tr> </tr>中包含⼏对<td></td>，就表⽰该⾏中有多少列（或多少个单元格）。
直接上例⼦来看：
<table>
<caption>表格标题</caption>
<tr>
<th>标题单元格⼀</th>
<th>标题单元格⼆</th>
</tr>
<tr>
<td>第⼀⾏第⼀列</td>
<td>第⼀⾏第⼆列</td>
</tr>
</table>
代码运⾏：
上述例⼦中，caption标签是可选的（可以包含p标签和其他的⽂本标签），如果有caption标签，则必须是table中的第⼀个元素（标签），可以为表格添加标题，并且⽂本是居中对齐的。th标签包裹的是标题单元格（可以是第⼀⾏作为标题单元格，也可以是第⼀列作为标题单元格）。
注意：
1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签，他就像⼀个容器，可以容纳所有的元素
表格结构
在使⽤表格进⾏布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体如下所⽰：
<thead></thead>：⽤于定义表格的头部。
必须位于<table></table> 标签中，⼀般包含⽹页的logo和导航等头部信息。
<tbody></tbody>：⽤于定义表格的主体。
位于<table></table>标签中，⼀般包含⽹页中除头部和底部之外的其他内容。
表格属性
属性名含义常⽤属性值
border设置表格边框（默认border="0"）像素值
cellspacing设置单元格与单元格边框之间的空隙（空⽩间距）像素值（默认为2像素）
cellpadding设置单元格中的内容与单元格边框之间的空⽩间距像素值（默认为1像素）
width设置表格的宽度像素值
height设置表格的⾼度像素值
align设置表格在⽹页中的⽔平对齐⽅式left、center、right
让单元格跨越多列或多⾏
可以通过colspan和rowspan属性让th或td跨越⼀个以上的列或⾏。对该属性指定的数值表⽰的是跨越的单元格的数量。合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除。
例如把 3个 td 合并成⼀个，那就多余了2个，需要删除。
公式： 删除的个数 = 合并的个数 - 1
合并的顺序 先上 先左
例如：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。