HTML语法规范:
在尖括号中间,一般情况成对出现如<html>(开始标签)</html>(结束标签)
有些特殊标签必须是单标签
标签关系:
1.包含关系: 2.并列关系:
<head> <head></head>
<title> </title> <body></body>
</head>
HTML基本结构标签:
第一个HTML网页:
先建立一个记事本文本文件,在记事本中写如下代码后,将文本文件改成html文件,查看
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
键盘敲烂,工资过万
</body>
</html>
在VScode中自动生成的骨架标签多出的两行代码
<!DOCTYPE html><!DOCTYPE>文档类型声明,不是HTML标签告诉浏览器使用哪种html版本显示网页
<html lang="zh-CN>lang,语言种类,定义当前文档显示的语言,en英语,zh-CN中文
<meta charset="UTF-8"/>必须写, charset字符集,在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
HTML常用标签:
1.标题标签:<h>
共六级标签<h1>-<h6>,一行显示,字体加粗,从一级标签到六级标签字号依次变小,重要性递减
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
2.段落标签:<p></p>
可以把文档分成若干段,文本在一个段落中会根据浏览器窗口大小自动换行,段落和段落之间保有空隙
分段前:
分段后:
2.换行标签:<br />
3.文本格式化标签:
4.<div>和<span>标签
无语义,就是一个盒子,用来装内容
<div>标签用来布局,一行只能放一个<div>,大盒子
<span>标签用来布局,一行可以放多个<span>,小盒子
5.图像标签和路径
(1)图像标签<img>
<img src="图像URL" /> 用于定义HTML页面中的图像
src是<img>的必须属性,用于指定图像文件的路径和文件名
首先将图片和网页文件放在一起
图像标签属性注意点:
图像标签可以拥有多个属性,必须写在标签名后面,属性之间不分先后顺序,标签名与属性,属性与属性之间均以空格分开,属性采取键值对的格式,即key= "value"的格式,属性=”属性值“
(2)路径
目录文件夹:普通文件夹,里面存放了我们做页面所需的相关素材,如html文件图片等
根目录:打开目录文件夹的第一层就是根目录
相对路径:以引用文件所在位置为参考基础,建立出的目录路径即图片相对于html页面的位置
同一级路径:图片和html文件在同一个目录下,同一级路径直接写文件名
下一级目录
(2)绝对路径:只目录下的绝对位置,直接达到目标位置,通常是从盘符开始的路径
6.超链接标签
在HTML标签中,<a>标签用于定义超链接,作用是从一个页面连接到另一个页面
链接的语法格式:<a href="跳转目标"target="目标窗口的弹出方式">文本或图像</a>
两个属性及作用如下:
链接分类:
外部链接:如<a href="http://www.baidu.com>百度</a>
target属性,在新窗口中打开方式
内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可
如: <a href="标题标签.html">标题标签</a>
空连接:如: <a href="#">公司地址</a>
下载链接:地址链接的是文件,.exe或.zip等压缩包形式
如:<a href="吴京.rar">下载文件</a>
网页元素链接:在网页中的各种网页链接都可以添加超链接如文本、图像、表格、视频、音频。 如:<a href="http://www.baidu.com"><img src="吴京.jpg"width=300 /></a>
锚点链接:点击链接可快速定位到页面中的某个位置
7.注释标签和特殊字符
注释标签:<!--注释语句--> 快捷键ctrl+/
特殊字符: