HTML代码都是由标签构成的 , 所谓的标签 , 就是结构形如 xxxx 的代码.
标签
- 标签就是由<>括起来的代码 , 结构 : <标签名> 内容 </标签名>
- 大部分标签都是成对出现的 , <html>为开始标签 ,</html>为结束标签 , 开始标签和结束标签中间的内容就是标签内容
- 少数标签是只有开始标签 , 没有结束标签,这样的标签称为单标签
HTML结构
和其他语言的方法类似 , html的代码也有"方法头" “方法体” .
<html>
<head>
<title> 这是一个html文件 </title>
</head>
<body>
html文件的内容
</body>
</html>
public int func() {
// body
}
HTML的基本结构写好之后 , 就可以在<body></body>中间写代码了 .(这个就和我们定义好了方法之后,就可以在大括号里面实现我们的方法了)
- html标签是整个html文件的根标签(最顶层的标签)
- head标签中写页面的属性(定义页面的字符集 ,定义页面的语言)
- title标签写的是页面的标题
- body标签中写的是页面上具体显示的内容
标签之间的关系
从html的结构我们可以看出 , <html>是最顶层的标签 .在它的里面,还包含着其他的标签 , 如<head></head>和<body></body> , 我们称这样子的关系为"父子关系" .而<head></head>和<body></body>他们属于同一级别,因此称为兄弟标签
总结 : 和树的定义类似 , 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:;”>