1.定义
HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。
特点:
- 由尖括号包围的关键词
- 通常是成对出现的
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 也有单独呈现的标签
- 一般成对出现的标签,其内容在两个标签中间。单独呈现的标签,则在标签属性中赋值。
- 网页的内容需在html标签中,标题、字符格式、语言、兼容性、关键字、描述等信息显示在head标签中,而网页需展示的内容需嵌套在body标签中。某些时候不按标准书写代码虽然可以正常显示,但是作为职业素养,还是应该养成正规编写习惯。
2.网站的基本标签
1.标题标签
<!--标题标签 h1 + tab键 -->
<!--标题标签 h1 + tab键 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
2.段落标签
<p></p>
<!--p:段落标签-->
<p>
我们会来到这个世界,是不得不来;我们最终会离开这个世界,是不得不离开
</p>
<p>人是为活着本身而活着,而不是为了活着之外的任何事物所活着</p>
<p>死亡不是失去了生命,只是走出了时间</p>
<p>人是为了活着本身而活着,而不是为了活着之外的任何事物而活着</p>
<p>
世界上没有一条道路是重复的,也没有一个人生是能够替代的
</p>
3.换行标签
<br/>
4.水平线标签
hr/
5.水平线标签
<strong>粗体</strong>
<em>斜体</em>
<!--字体样式-->
<strong>洋洋 </strong>
<p>
<em>洋,女,汉族</em> <br>
<em>18岁</em> <br>
</p>
6.特殊符号标签
  空格
> <大于小于
© 版权所有
☎
<!--空格 &-->
<p>1 Java</p>
<p>1 Java</p>
<p>1 Java</p>
<!--大于小于号-->
>
<
<!--版权符号-->
© 版权所有:1
<!--万能的公式 & ;-->
☎
3.图像标签
- 常见的图片格式: .png .jpg .jpeg .bmp .gif…
- png 会有浏览器兼容问题,一般使用 .jpg .gif多一点
- 图片是静态资源,一般单独放在一个文件夹下,statics\images
- 相对路径:指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系
../../
- 绝对路径:指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径,带域名的文件的完整路径
https://150.109.117.44:443/usr/themes/PureLoveForTypecho/images/banner2.jpg
4.超链接
- 4.1基本用法
<!--
超链接:表示从一个地方跳转到另外一个地方 hao123导航
href:要跳转地址
target: 目标打开的窗口,在自己这个当前页面打开,还是在新的页面打开
_self : 在自己的窗口打开
_blank: 在新窗口中打开
和图片嵌套使用
-->
<!--<a href="https://www.baidu.com/" target="_self">百度</a>-->
<!--图片标签-->
<a href="https://www.baidu.com/" target="_self">
<img src="../statics/images/bd.png">
</a>
- 4.2锚链接
- 用于页面间指定位置跳转 : 快速定位目录
- 可以在同一页页面中跳转
- 也可以在不同页面中跳转 :(需要掌握)
锚点:
<!--标记A-->
<a name="markerA">A</a>
跳转到锚点:
<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a> <br>
<a href="2.基本结构.html#haha">E</a> <br>
- 4.3功能性链接
- 邮件
<a href="mailto:**********@qq.com">联系我们</a>
- 邮件
<!--QQ推广-->
<!--https://shang.qq.com/v3/widget.html-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=********&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:*******:53" alt="点击这里给我发消息"
title="点击这里给我发消息"/>
</a>
5.块元素、行内元素
块元素:无论内容多少,都是独占一行的 (p,h1~h6)
行内元素:只根据内容的长度来扩展。 (a,strong,em….)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>
<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>
</body>
</html>