文章目录
前言
自己自学前端的记录-01
一、HTML是什么?
首先HTML文件是打开网页的一种格式,我们常见到的网页基本上都是以 .html后缀结尾的文件,所以也叫做HTML文件。
HTML指的是超文本标记语言(Hyper Text Markup Language),是用来描述网页的语言,它并不是编程语言,是标记语言(Markup Language),由各种标签组成,比如图片标签,段落标签,视频标签…等
二、HTML语法规范
1.基本语法规范
- HTML都是由尖括号包括起来的关键字,<html></html>
- HTML基本上都是一些双标签,比如<p></p>,<div></div>
- 也有少数单标签,例如:a标签,img标签,换行标签<br/>
2.标签关系
双标签关系可以分为两类:包含关系和并列关系,例如:
<!-- 并列关系 -->
<div></div>
<div></div>
<!-- 包含关系 -->
<div>
<div></div>
</div>
三、HTML基本结构标签
标签名 | 定义 | 说明 |
---|---|---|
<html></html> | HTML标签 | 页面中最大的标签,也成为根标签 |
<head></head> | 文档的头部 | 在head标签中设置title标签 |
<title></title> | 文档标题 | 打开网页时显示的标题 |
<body></body> | 文档主题 | 包含元素所有的内容 |
四、网页开发工具
目前前端用的开发工具都是使用vscode,使用vscode可以先输入! 然后直接按tab键生成HTML骨架。
- 文档类型类型声明标签
<!DOCTYPE> 是文档声明类型,作用就是告诉浏览器使用哪种HTML版本来显示网页
这句话就是当前页面采取的是 HTML5 版本显示网页<!DOCTYPE html>
- lang 语言种类
- en 定义为英文
- zh-CN是中文网页
五、HTML常用标签
1.标题标签
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
这是作为标题使用的,重要性从h1到h6依次递减
2.段落和换行标签
- 段落标签
<p>段落标签</p>
特点:文本在段落中会随着浏览器窗口的变化而变化 - 换行标签
<br>也可以是<br/>
特点:这是单标签,只是简单的开始新的一行
3.文本格式化标签
- <div> 和 <span> 标签是没有语义的,就是一个盒子
<div> 是占网页一整行的盒子,一行只能放一个,是块级元素
<span> 一行上可以方很多个,是行内元素
4.图像标签和路径
- 图像标签
在HTML中,img标签用来放图像的
scr是img标签的必要属性,用于指定图像文件的路径和文件名<img src="图像URL">
- 路径
- 相对路径
- 绝对路径
是指目录下的绝对位置,例如:“D:\web\img\logo.gif”
- 相对路径
5.超链接标签
在HTML标签中,<a>用于定义超链接,作用是从一个页面跳转到另一个页面
<a scr="跳转目标" target="目标窗口的弹出方式">文本或图像</a>