HTML基本标签使用
标签使用
标题标签
为了使网页更具有语义化,我们经常会在页面中使用到标题标签HTML共提供了6个等级的网页标题,即
-
为1到6级标题
标题的重要性为一级标题最重要,依次递减。单词head的缩写,意为头部,标题。
特点是:加了标题的文字会变得加粗,字母的字号也会依次变大,且一个标题独占一行。
段落标签
在网页中,要把文字有条理的显示出来,就需要将这些文字分段显示。在HTML标签中,
标签用于定义段落,它可以将整个网页分为若干个段落。
我是一个段落标签
特点:文本在一个段落中会根据浏览器窗口的大小自动换行。段落和段落直接保有空隙。
换行标签
在HTML中,一个段落中文字会从左到右依次排列,,直达浏览器窗口的右端,如果希望某段文本强制换行显示,就需要使用到换行标签
语义:强制换行。
特点:是一个单标签,只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
文本格式化标签
在网页中,有时需要将文字设置粗体、斜体、或下划线等效果,这就需要使用到HTML中的文本格式化标签,使文字以特殊的方式显示。
标签语义:
语义 | 标签 | 说明 |
---|---|---|
加粗 | 推荐使用 |
|
倾斜 | 或者 | 推荐使用标签,语义更加强烈 |
删除线 | 推荐使用 |
|
下划线 | 或者 | 推荐使用标签下划,语义更加强烈 |
div和span标签
div和span是没有语义的,他们就是一个盒子,用来装内容的。
<div>这是头部</div>
<span>今日价格</span>
div是division的缩写,表示分割,分区
特点:是用来布局,但是现在一行只能放一个
span标签用来布局
特点:一行上可以放多个span,也就是放置多个小盒子。
图像标签
在HTML标签中,img标签用于定义HTML页面中的图像。
<img src="图像URL"/>
单词image的缩写,意为图像
src是img标签的必须属性,它用于指定图像文件的路径和文件名
所谓属性简单点就是属于这个图像标签的特性。
注意:要放入的图片必须要和写的HTML文件在同一个文件夹下。最好是放在旁边。
图像标签的其他属性
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文字,图像不能显示的文字 |
title | 文本 | 提示文本,鼠标放到图像上,显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的亮度 |
border | 像素 | 设置图像的边框粗细 |
图像标签的使用注意点:
1.图像标签可以拥有多个属性,但是都必须写在标签名的后面
2.属性之间不分先后顺序,标签名与属性,属性与属性之间用空格分开。
3.属性采取的是键值对的格式,即属性=“属性值”的格式。
链接标签
在HTML中,a标签用于定义链接,作用是从一个页面链接到另一个页面。
语法格式
<a herf = "跳转目标" target = "目标窗口的弹出方式为"> 文本或者图像</a>
单词anchor的缩写是“锚”的意思。
属性 | 作用 |
---|---|
herf | 用于指定链接目标的URL地址,(必须属性)当标签应用为herf时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其中-self为默认值,-blank为在新窗口中打开方式。 |
链接分类
1、外部链接
例如:<a href = "http://www.qq.com" target = "-blank">腾讯</a>
必须以http://网址为开头地址
2、内部链接
网站内部页面之间的相互链接,直接链接内部页面名称即可。
例如<a href = "index.html">首页</a>.
外部链接不需要加http://.
3、空链接
暂时没有想好去往哪一个页面,可暂时用空链接。
例如<a href = "#">公司地址</a>
4、下载链接
如果href里面地址是一个文件或者压缩包,会下载这个文件
例如<a href = img.zip>下载文件</a> //当压缩包与HTML文件属于同一级,直接写文件的名称即可,当属于不同级时,尝试没有成功
5、网页元素链接
一个图片也可以成为一个链接的源。
例如<a href = "http://www.baidu.com"//链接的目标是百度这个地址><img src = "img.jpg"//图片的名称></a>
锚点链接
当我们点链接,可以快速定位到页面中的某个位置
(1)在链接文本的href属性中,设置属性值为#名字的形式,如
<a href = "#two">第2集</a>
(2)在找到目标位置标签,里面添加一个id属性值 = 刚才的名字,如
<h3 id = "two">第2集介绍</h3>
尝试在文本底部,加返回顶部链接,回到开头部分。
注释标签
如果需要在HTML文档中添加一些便于阅读但又不需要显示在页面中的文字,就需要使用注释标签。
HTML中的注释标签以"<!--"开头,以"-->"结束
<!--注释语句-->快捷键是ctrl + /
特殊字符
常用的有空格 ,大于 ,小于三种
![](C:\Users\dell\Desktop\屏幕截图 2022-01-04 154107.png)
以上内容来自B站[黑马程序员前端Web全套教程,会打字就能学会的Web前端课程_哔哩哔哩_bilibili]()