HTML语法规则
HTML
标签是由尖括号包围的关键词,标签通常是成对出现的,例如<html>
和</html>
,称为双标签 。标签对中的第一个标签是开始标签,第二个标签是结束标签- 单标签比较少,例如
<br />
,加一个/即可
标签关系
双标签关系可以分为两类:包含关系和并列关系
//包含标签:
<html><head></head>
</html>
//并列关系:
<html><head></head><body> </body>
</html>
HTML 基本结构标签
HTML
页面也称为HTML
文档HTML
文档的的后缀名必须是.html
或.htm
,浏览器的作用是读取HTML
文档,并以网页的形式显示出它们。这也就提醒我们,用记事本时,要修改后缀名。- 此时,用浏览器打开这个网页,可以预览
HTML
文件了
vscode使用技巧
- ctrl + / - 放大缩小页面
- shift + alt + 下箭头 快速赋值上一行
- ctrl + d 选定多个相同的单词,双击单词,再按快捷键,可同时修改多个单词
- ctrl + alt + 上箭头/下箭头 ,添加多个光标,同时修改多行
- ctrl + h 全局替换某些单词
- ctrl + g 快速定位到某一行
- shift + alt 然后拖动鼠标,可以选择某个区块进行操作
- ctrl + / 单行注释
DOCTYPE
<!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
注意:
<!DOCTYPEl>
声明位于文档中最前面的位置,处于<html>
标签之前<!DOCTYPEl>
不是一个HTMl
标签,他就是文档类型声明标签
HTML常用标签
标题标签
特点:
- 加了标题的文字会变的加粗,字号也会依次变大。
- 一个标题独占一行
- 标题标签为双标签,成对出现
<h1></h1>
- 重要性
h1
到h6
一次递减
段落标签
- 需要注意的是,在软件使用时我们人为的换行,在网站打开是不起作用的,无论打一个空格还是10个空格,都只会显示一个空格,因此需要段落标签帮助我们进行分段处理
- 双标签:
<p> 我是一个段落标签 </p>
vscode
中查看 – 自动换行- 特点:
1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。
换行标签
- 在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签
<br />
。- 特点:
1.<br />
是个单标签。
2.<br />
标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距,
3. 不会形成如段落一样的较大缝隙,在网页上看就是单纯的另起一行,而不是另起一段。
文本格式化标签
特殊标签
<div>
和<span>
标签,是是没有语义的,它们就是一个盒子,用来装内容的。- 特点:
1.<div>
标签用来布局,但是现在一行只能放一个<div>
,也就是说一个<div>
占一整行,后面再写内容会在<div>
的下面显示。 大盒子
2.<span>
标签用来布局,一行上可以多个<span>
。小盒子
3. 都是双标签