HTML 常见标签

排版标签

标题标签

HTML 共提供六级标题标签：<h1></h1>、<h2></h2>、……、<h6></h6>

段落标签

<p></p> 段落标签将网页分成若干个段落。默认情况下，文本在一个段落中会自动根据浏览器窗口的大小换行。

水平线标签

<hr /> 水平线标签的效果就是一条分割线。一般用于将段落与段落分开，使得层次更加分明。

换行标签

<br /> HTML 中换行操作只能通过标签来完成，文字中的回车符是没有作用的。

布局标签

DIV标签

<div></div> 分区。是最常用的布局标签之一。没有语义。多个div标签组合成一个网页。

SPAN标签

<span></span> 范围。与 div 标签相同。是最常用的布局标签之一。

文本标签

加粗标签

<b></b> 或 <strong></strong> 两种标签都为加粗，效果一样。

斜体标签

<i></i> 或 <em></em> 两种标签都为斜体，效果一样。

删除线标签

<s></s> 或 <del></del> 两种标签都为删除线，效果一样。

下划线标签

<u><u/> 或 <ins></ins> 两种标签都为下划线，效果一样。

图片标签

img 标签

<img />

img标签的几个常用属性：

src ：图片的路径及图片名

alt ：图片丢失文本（当图片因为某些原因无法显示时的提示文本）

title ：图片标题（鼠标悬停在图片上时显示的文本）

width：图像的宽度

height：图片的高度

border：图像边框的宽度

<img src="1.jpg" alt="一个丢失的图片" title="图片" width="100px" height="100px" border="3px">

链接标签

a 标签

<a></a>

a 标签的几个常用属性

_href ：链接跳转的目标（外部链接或内部链接都可以。# 表示空链接）

_target ：链接的打开方式。self：在本窗口打开（默认）；blank：在新窗口打开

a标签的锚点定位

<a href = "#2>锚点定位</a>
<p id="1">第一行</p>
<p id="2">第二行</p>
<p id="3">第三行</p>

扩展 —— base标签

base 标签卸载 <head></head>中，可以设置全局链接的打开方式。

<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <base target="_blank">
</head>

特殊字符标签

    &nbsp;      空格
    &lt;        小于号     <
    &gt;        大于号     >
    &amp;       &符号      &
    &yen;       人民币     ￥
    &copy;      版权       ©
    &reg;       注册商标    ®
    &deg;       度         °
    &plusmn;    正负号     ±
    &times;     乘号       ×
    &divide;    除号       ÷
    &sup2;      平方       ²
    &sup3;      立方       ³

注释标签

注释是一些对于代码的额外解释，是写给其他的开发人员看的，浏览器不解析，用户也看不到。

路径

相对路径

同级路径

目标文件与当前HTML文件在同一级目录下。

同级路径只需要写文件名即可。

<img src="1.jpg" />

下级路径

目标文件位于当前HTML文件的下一级目录中

<img src="img/2.jpg" />

上级路径

目标文件位于当前HTML文件的上一级目录中

<img src="../3.jpg" />

绝对路径

目标文件在本地或者固定服务器上的完整路径。

<img src="E:\001.File\07.Web_workspace\01.Web_learning\day01" />

一般不建议使用。因为一旦项目目录变化或在其他机器上运行时，很容易出现文件找不到的错误。

Web开发 _02_HTML基础