HTML常用标签

HTML常用标签1

HTML 常用标签

1 文本格式化标签

加粗<strong></strong>    (<b></b>)
倾斜<em></em>            (<i><i/>)
删除 <del></del>         (<s><s/>)
下划线<ins></ins>        (<u><u/>)

2 div 和 span

<div> 和 <span> 是没有语义的，他们就是一个盒子，用来装内容的。
div 是division的缩写，表示分割、分区。span 意为跨度、跨距。

<div> 标签用来布局，但是一行只能放一个<div>.大盒子
<span> 标签用来布局，一行可以放多个<span>，小盒子 

span是小格子 div是大格子

3 图像标签和路径

图像标签属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时，显示的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

路径之相对路径
图片相对于HTML页面的位置

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级 如 <img src="1.jpg">
下一级路径	/	图像文件位于HTML文件下一级 如 <img src="images/1.jpg">
上一级路径	…/	图像文件位于HTML文件上一级 如 <img src="../1.jpg">

路径之绝对路径
是指目录下的绝对位置，直接到达目标位置
如：“D:\web\img\1.jpg”.或者完整的网络地址：“http://www.baidu/logo.jpg”

4 超链接

<a href="跳转目标"  target="目标窗口的弹出方式" > 文本或图像</a>
1 外部链接： <a href="http://www,baidu.com">百度</a>
2 内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可。
		  <a href="index.html">首页</a>
3 空连接 ： <a href="#">首页</a>
4 下载链接 ： <a href="img.zip">首页</a>
5 网页元素的链接：  <a href="#"><img src="img.jpg "/></a>
6 锚点链接：点击链接可以快速定位到页面中的某个位置。
	在链接文本的 href 属性中，设置属性值为 #文字 的形式，如<a href="#two">第二集</a>
	找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3> 

两个属性href 和 target 的作用

属性	作用
href	用于指定连接目标的 url 地址，当标签应用 href 属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self 为默认值，_blank 为在新窗口中打开方式

5 注释和特殊字符

字符	描述	字符的代码
注释	代码注释	<!-- -->
空格	空格符	&nbsp
<	小于号	&lt
>	大于号	&gt
&	和号	&amp
￥	人民币	&yen
©	版权	&copy
®	注册商标	&reg
℃	摄氏度	&deg
±	正负号	&plusmn
×	乘号	&times
÷	除号	&divide
²	平方	&sup2
³	立方	&sup3

6 表格标签

6.1 普通表格

表头标签一般用 (table head缩写)可以加粗居中显示
表格代码框架基本语法如下所示：

<table>
	<tr>	<!--  行属性 -->
		<th>表头</th>
		....
	<tr>
	<tr>	<!--  行属性 -->
		<td>普通列元素</td>
		....
	<tr>
	....
</table>

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或" "	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

在表格标签中，分别用：$<thead>$ 标签表示表格的头部区域；$<tbody>$标签表示表格主体区域

6.2 合并单元格

合并单元格分为跨行、跨列两种。

跨列合并colspan
跨行合并rowspan
下图所示为合并行和列的单元格

7 列表

7.1 无序列表

列表基本语法格式如下：

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	...
</ul>

$<ul>$ 中只能嵌套$<li>$，输入其他标签是不允许的。
$<li>$ 之间相当于一个容器，可以容纳所有元素。

7.2 有序列表

有序列表的基本语法格式如下：

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ol>

7.3 自定义列表

基本语法如下：

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
</dl>

$<dl>$标签用于定义描述列表(或定义列表),该标签会与$<dt>$(定义项目/名字)和$<dd>$一起使用。