HTML入门 --- 常见标签

HTML代码都是由标签构成的 , 所谓的标签 , 就是结构形如 xxxx 的代码.

标签

  • 标签就是由<>括起来的代码 , 结构 : <标签名> 内容 </标签名>
  • 大部分标签都是成对出现的 , <html>为开始标签 ,</html>为结束标签 , 开始标签和结束标签中间的内容就是标签内容
  • 少数标签是只有开始标签 , 没有结束标签,这样的标签称为单标签

HTML结构

和其他语言的方法类似 , html的代码也有"方法头" “方法体” .

<html>
	<head>
		<title> 这是一个html文件 </title>
	</head>
	<body>
		html文件的内容 
	</body>
</html>
public int func() {
	// body
}

HTML结构和方法结构对比
HTML的基本结构写好之后 , 就可以在<body></body>中间写代码了 .(这个就和我们定义好了方法之后,就可以在大括号里面实现我们的方法了)

  • html标签是整个html文件的根标签(最顶层的标签)
  • head标签中写页面的属性(定义页面的字符集 ,定义页面的语言)
  • title标签写的是页面的标题
  • body标签中写的是页面上具体显示的内容

标签之间的关系

从html的结构我们可以看出 , <html>是最顶层的标签 .在它的里面,还包含着其他的标签 , 如<head></head>和<body></body> , 我们称这样子的关系为"父子关系" .而<head></head>和<body></body>他们属于同一级别,因此称为兄弟标签

总结 : 和树的定义类似 , html的标签的关系也是"层次关系" .

HTML结构

实用标签

注释标签

<!--这是一个注释-->

分割标签

<!--这是一个分割标签-->
<hr>
<!--这是一个分段标签-->
<p></p>
<!--这是一个换行标签-->
</br>

我们来看看加了分割标签和不加分割标签的区别
分隔符标签展示
注意

  • html中输入多个空格都相当于一个空格.输入换行并不会真的换行,而是相当于一个空格
  • p标签之间存在一个空隙 br是一个单标签
  • <br/>是规范写法 , 不建议写成<br>

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题展示
标题展示

格式化标签

  • 加粗 <b> 或者<strong>
  • 倾斜 <em> 或者 <i>
  • 删除线 <del> 或者 <s>
  • 下划线 <ins> 或者 <u>

格式化标签

图片标签

  • <img src=“地址”>

地址
本地地址
相对地址 : 相对路径 , 以当前文件所在的路径为基准 , 查看图片相对于当前文件地址所在的位置
绝对地址 : 绝对路径 , 从根路径开始 , 到引用的图片的路径
网络地址 : 图片的网址
在这里插入图片描述

超链接标签

超链接 就是在显示的文字 , 图片等嵌入地址 , 当我们点击文件 , 图片等时就会发生跳转 , 可以跳转到另外一个网址 , 也可以跳转到另外一个html页面 , 除此之外 , 还有其他用法 .

<a href=“地址”></a>

href后面的地址是点击后跳转到的页面
如果不另外进行设置,默认是在当前页面进行跳转 , 不使用新的标签页打开
对标签的target进行设置为 _blank , 则是以新的标签页打开<a href=“地址” target=_blank></a>

  • 元素链接
  • 空链接
  • 下载链接
  • 锚点链接

元素链接

对文字插入超链接

在这里插入图片描述

对图片插入超链接

在这里插入图片描述
从上面的代码我们可以看出 , 标签是可以嵌套使用的

空链接

  • #占位符 点击但是不会发生跳转
  • 什么都不写的空链接 会跳转到当前页面,类似于刷新的效果<a href=“”></a>

在这里插入图片描述
但是需要注意的是 , 如果以新页面的形式打开 , 都会以新页面的形式打开当前页面

下载链接

如果href对应的路径是一个本地压缩文件 , 那么就会在浏览器下载该文件
在这里插入图片描述
在这里插入图片描述

锚点链接

可以快速跳转到当前页面的某一个位置
在这里插入图片描述

禁止 a 标签跳转: <a href=“javascript:void(0);”> 或者 <a href=“javascript:;”>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值