html常用标签总结

        html负责结构，css负责样式，JavaScript负责页面交互等行为，html中常用的结构标签有标题标签、段落标签、水平线标签、换行标签、文本格式化标签、图像标签、链接标签以及注释和特殊字符标签等。

一、常用标签

1. 标题标签：<h1></h1>……<h6></h6>共分为六个等级，重要性依次降低；
2. 段落标签：<p></p>，默认情况下，在段落标签中的文本内容会根据浏览器窗口的大小自动换行；
3. 水平线标签：<hr />
4. 换行标签：<br />
5. 文本格式化标签: 文本格式化标签主要有字体加粗，倾斜，加删除线，加下划线等；

二、图像标签

图像标签是单标签，为<img />，它的属性见下表：

三、链接标签

<a href="目标URL" target="新窗口弹出方式">文本或图像</a>

• 链接标签是双标签，为<a></a>。需要添加链接的内容（可以是文字或者图片等）被此标签对包裹；
• 其中，href属性（hyperlink reference,超链接引用）的值是添加的跳转目标URL，target属性的值有_self和_blank用于定义目标链接以什么样的形式打开；

`<a href="http://www.baidu.com" target="_blank">百度</a>

• 当跳转到的是外部链接时，一般就是网址，如上所示；
• 此外target属性设置为_blank表示在新的窗口中打开链接；

`<a href="01首页.html" target="_self"> 首页</a>  `

• 跳转到的是内部链接时可以直接写上跳转目标文件的路径，如上所示；
• target属性设置为"_self"表示在当前页面中打开，这样会覆盖当前内容；

如果当前没有确认的链接目标，可以将href的属性值设置为#，即href="#"，使其成为空链接；此外，可以使用base标签设置统一设置链接窗口的打开方式，比如：<base target="_blank">点击链接时，都会在新窗口的打开页面

四、锚点定位

• 创建锚点链接需要两步

1. 使用<a href=”#id名“>链接文本</a>创建链接文本。
2. 使用相应的id名标注跳转目标的位置，用于页面导航

• 例如：<a href="#life">3 个人生活</a>这是添加的链接，<h3 id="life">个人生活</h3>，这是要跳转到的位置
• 如果做不同页面的跳转，需要在#id名前面加上页面的路径，例如，<a href="index.html#life">3 个人生活</a>这是添加的链接，<h3 id="life">个人生活</h3>这是要跳转到的页面的位置

五、绝对路径和相对路径

• 相对路径

1. 和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />
2. 位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />
3. 位于html文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="../logo.gif" />

• 绝对路径，例如“D:\web\img\logo.gif”，或完整的网络地址

六、html标签归类总结

“文档流”的效果，也就是 HTML 元素会按照它们各自在标记中出现的先后顺序，依次从页面上方“流向”下方

1. 标签显示属性display：
几乎所有 HTML 元素的 display 属性值要么为 block，要么为 inline。最明显的一个例外是 table 元素，它有自己特殊的 display 属性值。

块级元素(block)	常见的块级元素有<div>、标题标签<h>、段落标签<p>、<ol>、<ul>、<li>等； 最常用的块级元素是<div>
	特点	一个块占据一行或者多行；块与块之间上下堆叠在一起
		默认宽度是其父级元素的宽度
		可以设置宽高、内边距外边距以及背景颜色等
注意 : <h>标签、<p>标签等属于文字类的块级标签内，不能再放块级标签

行内元素(inline)	常见的行内元素有<a>、粗体<b>、斜体<i>、<span>等； 最常用的行内元素是<span>
	特点	和相邻的行内元素显示在一行，直到行左右距离容纳不下才换行
		行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧
		行内元素一般只能容纳文本和其他的行内元素
注意 : <a>标签是行内元素但是也可以容纳块级元素，比如给图片添加链接，但是链接内不能再放链接

行内块元素(inline-block)	常见的行内元素有<img />、粗体<input />等；
	特点	一行可以放多个行内块元素，但是之间会有空白缝隙
		可以进行宽高设置

如何消除inline-block产生的元素间空隙 - 亚洲黑色卍 - 博客园
总之，块级元素（比如标题<h>标签和段落<p>标签）会相互堆叠在一起沿着页面向下排列，每个元素分别占据一行；然而行内元素（比如<a/>链接标签）则会并列在一行显示，直到页面宽度不能容纳，才会重起一行进行显示。

2. 三种显示模式之间的转换： 只需要在CSS的选择器中对display属性进行设置即可

• 块$\to$行内 :display:inline;
• 行内$\to$块 ：display:block;
• 行内、块$\to$行内块 ：display:inline-block;

3. display属性和visibility属性的对比： display属性除了inline、block和inline-block之外还有一个属性值——none。使用none时，该元素以及包含在其中的所有元素，都不会在页面中显示；并且，它们原先在页面中所占据的空间会被“回收”。但是，相比之下，visibility属性，它常用的两个相对的值时visible和hidden。把元素设置为hidden时，只是进行了隐藏，其位置仍然保留。这就是display和visibility的区别。