HTML常用标签(上)
标题标签
格式:
< h1 >内容< /h1>是一级标题
< h2>内容< /h2>是二级标题
< h3>内容< /h3> 是三级标题
< h4>内容< /h4>是四级标题
< h5>内容< /h5>是五级标题
< h6>内容< /h6>是六级标题
特点:
- 加了标题标签的文字会加粗,字号也会变大
- 一个标题独占一行
段落标签
格式:
< p>内容< /p> 分段落
特点:
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落与段落之间会有较大的空隙
换行标签
格式:
内容< br /> 强制换行
特点:
- < br />是一个单标签
- < br />标签只是简单的另起一行,和段落不一样,段落之间会有较大的空隙,换行没有
文本格式化标签
格式:
< strong>内容< strong> 加粗文字效果(推荐)
< b>内容< /b> 加粗
< em>内容< /em> 倾斜文字效果(推荐)
< i> 内容< /i> 倾斜
< del>内容< /del> 删除线效果(推荐)
< s>内容< /s> 删除线
< ins>内容< /ins> 下划线(推荐)
< u>内容< /u> 下划线
格式:
< div>和< span>标签没有语义,它们是一个盒子,用来装内容
< div>文字< /div>
< span>文字< /span>
特点:
- < div>标签用来布局,但是现在一行只能放一个< div>。大盒子
- < span>标签用来布局,但是一行可以放多个< span>。小盒子
图像标签
格式:
< img src =“图像的路径” />
src是< img>标签的必须属性,用来指定图像文件的路径和文件名
< img src=“图像的路径” alt=“文字” />
alt 是< img> 标签的属性,替换文本,图像显示不出来的时候用文字替代
< img src=“图像的路径” title=“文字” />
title 是< img> 标签的属性,提示文本,鼠标放在图片上,提示的文字
< img src=“图像的路径” width=“像素大小” />
width 是< img> 标签的属性,给图像设定宽度
< img src=“图像的路径” height=“像素大小” />
width 是< img> 标签的属性,给图像设定高度
< img src=“图像的路径” border=“像素大小” />
border是< img> 标签的属性,给图像设定边框粗细
注意点:
- 图像标签可以拥有多个属性,必须写在标签名的后面
- 属性之间不分先后顺序,标签名与属性,属性与属性之间用空格分开
- 属性采取键值对的方式,即属性=“属性值”
超链接标签
1.外部链接
格式:
< a href=“超链接地址”>文字< /a>
href是< a>的必须属性,是打开的哪个链接
< a href=“超链接地址” target=“_blank”>文字< /a>
target是< a>的一个属性,打开窗口的方式,默认的值是_ self,当前窗口打开页面,_ blank,新窗口打开页面
2.内部链接
内部链接是网站内部页面之间的相互链接,直接链接内部页面名称即可
格式:
< a href=“链接地址” target=“_blank”>文字< /a>
3.空连接
如果当时没有确定链接目标
格式:
< a href="#" target=“_blank”>文字< /a>
4.下载链接
如果href里面的地址是一个文件 .exe或压缩包 .zip,会下载这个文件
格式:
< a href=“链接地址” >文字< /a>
5.网页元素链接
在网页中的各种元素链接,如文本,图像,表格,音频,视频等都可以添加超链接
示例:
< a href=“超链接地址” target=“_blank”>< img src =“图像的路径” />< /a>
6.锚点链接
点我们点击链接,可以快速定位到页面中的某个位置
- 在连接文本的href属性中,设置属性值为“#名字”的形式,如< a href="#two">第二季< /a>
- 找到目标位置标签,里面添加一个id属性 = 刚才的名字 ,如< h3 id=“two”>第二季介绍< /h3>
格式示例:
< a href="#名字" >文字< /a>
< h3 id=“名字”>内容< /h3>
注释标签
如果需要在HTML文档中添加一些便于阅读和理解但又不需要在页面中显示的文字
格式:
< !-- 注释语句 -->
快捷键:ctrl+/
常用特殊字符
特殊字符 | 描述 | 字符的代码 |
空格符 | &nbsb; | |
< | 小于号 | & lt; |
> | 大于号 | & gt; |