HTML 常用的标签
一、HTML 基本结构
<html> </html>
:页面中最大的标签,也称根标签<head> </head>
:文档的头部,在 head 标签中必须设置 title (标题)<title> </title>
:文档的标题,让网页拥有一个标题<body> </body>
:文档的主体,所有内容基本都放在 body 里
二、标题:h1 ~ h6 标签
作为标题使用,并根据重要性递减。(一级标题字体最大,重要性最大)
特点:
(1)加了标题的文字会变得加粗,字号也会依次变大
(2)一个标题独占一行
<h1> </h1>
:一级标题<h2> </h2>
:二级标题<h3> </h3>
:三级标题<h4> </h4>
:四级标题<h5> </h5>
:五级标题<h6> </h6>
:六级标题
三、段落:p 标签
<p> </p>
:生成一个段落
特点:
(1)文本在一个段落中会根据浏览器窗口大小自动换行
(2)段落和段落之间保持空隙
四、换行:br 标签
<br/>
:break 的缩写,强制换行
特点:
(1)<br/>
是一个单标签
(2)<br/>
只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的空隙
五、文本格式化
<strong> </strong>
或<b> </b>
:加粗<em> </em>
或<i> </i>
:倾斜<del> </del>
或<s> </s>
:删除线<ins> </ins>
或<u></u>
:下划线
六、盒子标签
1. div 标签
- div 是 division 的缩写,标识分割、分区
<div> </div>
标签用来布局,但是一行只能放一个 div 标签- div 是 块级 盒子标签
2. span 标签
- span 意为跨度、跨距
<span> </span>
标签用来布局,但是一行可以放多个 span 标签- div 是 行级 盒子标签
七、图像:img 标签
- 标签格式:
<img src="图像URL"/>
- src :是
<img>
标签的必须属性,用于指定图像文件路径和文件名 - alt :替换文本,图像不能显示时(没网络加载不出来)显示的文本
- title :提示文本,鼠标放在图像上,显示的文字
- width :设置图像的宽度
- height :设置图像的高度
- border :设置图像边框粗细
八、超链接:a 标签
- 标签格式:
<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
- href :用于指定连接目标的 URL 地址,是必须属性
- target :用于指定链接页面的打开方式,常用的两种方式:
(1)_self
:为默认值,当前窗口打开
(2)_blank
:新窗口中打开
链接分类:
- (1)外部链接:如
<a href="www.baidu.com">百度</a>
- (2)内部链接:网页内部页面之间的相对连接,直接连接内部页面名(网站内的另一个页面)
- (3)空链接:如
<a href="#">空链接</a>
- (4)下载链接:如果 href 里的地址是一个文件或压缩包,会下载这个文件
- (5)网页元素链接:网页内的各种元素都可以添加超链接,如图片链接:
<a href="www.baidu.com"> <img src="img.png"> </a>
- (6)锚点链接:点击链接可以快速定位到页面的某个位置:
第一步:在链接文本的 href 中,设置属性值为#name
的形式,如:
<a href="#two">第二集</a>
第二步:找到目标位置标签,里面添加一个 id 属性等于刚才的名字,如:
<h3 id="two">第二集介绍</h3>
九、常用的特殊字符
(1)空格:
(2)小于号 < :<
(3)大于号 < : >
(4)和号 & : &
(5) … …