文章目录
一.标题标签
标题标签只有6级,即h1~h6
逐次减小
二.段落和换行标签(*)
在网页中,有条理地将文字分段显示,即可用到< p >
段落标签
<p>段落标签是我</p>
当段落中的文字排到浏览器的最右端时,才会自动换行,如果需要强制换行,则需要使用到换行标签< br />
<br/>
注意
< br/ >是单标签
< br/ >标签仅是简单地换行,而使用段落标签的话,段与段之间是存在一些空隙
三.标题文本格式化标签
- 设置粗体,即加粗
<strong></strong>或者<b></b>
- 设置斜体,即倾斜
<em></em>或者<i></i>
- 删除线
<del></del>或者<s></s>
- 下划线
<ins></ins>或者<u></u>
< div >和< span >标签
它们都没有语义,它们是一个装内容的盒子。
特点:
- < div >用于布局,一行只能放一个,即大盒子
- < span >也用于布局,一行上可放多个,即小盒子
四.标题图像标签(*)
< img >标签来定义HTML页面中的图像
<img src="图像URL"/ >
src
是< img >标签的必须属性
,它用于指定图像文件的路径和文件名
alt
替换文本 当图像显示不出来的时候用文字替换
例:
<img src="img1.jpg" alt="网络不佳请多次刷新"/>
title
提示文本 当把鼠标放在网页上的图像时,即会提示文字
例:
<img src="logo.jpg" alt="网络较慢 请耐心等待" title="勒是雾都"/>
其它图片属性
width:设置图像的宽度
height:设置图像的高度
border:设置图像的边框粗细
注意
- 图像标签可以拥有多个属性,必须写在标签名的后面
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开
- 属性采取键值对的格式,即key=“value”的格式,属性=“属性值”
路径(重点)
相对路径
:以引用文件所在位置为参考基础,而建立出的目录路径
绝对路径
:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
而以盘符开始的路径仅限在本地电脑使用,原因是不同电脑存放的路径不同,则无法读取文件
网络图片
绝对路径,复制其图片链接即可
五.超链接标签(*)
< a >标签的作用是从一个页面链接到另一个页面
5.1链接的语法格式
< a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像< /a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式。 |
5.2链接分类
1.外部链接
例如< a href=“http://www.baidu.com”>百度< /a >
<a href="http://www.qq.com" target="_blank">腾讯</a>
target打开窗口的方式 默认的值是_self当前窗口打开页面 _blank新窗口打开页面
2.内部链接
网站内部页面之间的相互链接,直接链接内部页面名称即可
例如:
< a href="index.html">首页< /a >
3.空链接
如果当前没有确定链接目标时
例如:
< a href="#">首页< /a >
4.下载链接
地址链接时文件 .exe 或者 zip 等压缩包形式
5.网页元素链接
在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接
例:在图片里添加超链接,即点击图片可跳转页面
<a href="http://www.baidu.com"><img src="img.jpg"/></a>
6.锚点链接
点击锚点链接,即可快速定位到页面的某一位置
- 在链接文本的href属性中,设置属性值为#名字的形式,如:
<a href="#two">第2集</a>
- 找到目标位置标签,里面添加一个id属性=刚才的名字,如:
<h3 id="two">第2集介绍</h3>
注释标签
以“<!--
”开头,以"-->
"结束
六.特殊字符
空格符nbsp;
一个nbsp;
代表一个空格
常用的则有空格符,大于号,小于号
特殊字符 | 描述 | 字符的代码 |
---|---|---|
空格符 |   ; | |
< | 小于号 | < ; |
> | 大于号 | > ; |
& | 和号 | & ; |
¥ | 人民币 | ¥ ; |
© | 版权 | © ; |
® | 注册商标 | ® ; |
° | 摄氏度 | ° ; |
± | 正负号 | ± ; |
✖ | 乘号 | × ; |
➗ | 除号 | ÷ ; |
² | 平方 | ² ; |
³ | 立方 | ³ ; |
文献
黑马程序员-黑马前端