这篇博客主要介绍了HTML的基础知识，包括HTML的基本概念、常用浏览器、WEB标准、语法规范、基本结构标签以及常见HTML标签的用法，如标题、段落、换行、文本格式化、图像和链接等。同时，提到了开发工具VS Code的快捷键和插件安装建议。
HTML基础（笔记）
01.HTLM基本概念
1.网页的基本组成
- 经常以htm或者html为后缀名，就是HTML文件，里面包含视频，文字，图片，音频等元素。
- 多个网页组成网站
2.什么是HTML
超文本标记语言，实现页面布局。
超文本：（1）元素不仅限于文本（2）HTML里面有超链接
3.常用浏览器
浏览器：谷歌（blink内核），IE（微软trident内核），火狐（gecko内核），safari（webkit内核），Opera（blink内核）
浏览器内核：读取网页内容，将网页渲染出来。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LHLQ8RxE-1592591421702)(D:\前端学习\1.HTML\笔记\笔记图片\浏览器内核.png)]
4.WEB标准
W3C（万维网）指定的WEB标准。
（1）为什么需要web标准?
因为不同浏览器内核不一样，同样代码渲染出的效果不一样，为了有统一的展示效果而制定标准。
（2）web标准有哪些？
WEB标准的构成有三点:1.结构 2.表现 3.行为
这三点要分开来写，实现低耦合。结构写在结构文档里，表现写在表现文档里，行为写在行为文档里。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1CzAhXxZ-1592591421715)(C:\Users\wufuyun\AppData\Roaming\Typora\typora-user-images\1589790603550.png)]
5.HTML语法规范
- 双标签：
- 单标签:
- 标签的结构关系：包含（父子关系），并列（兄弟关系）
6.HTML基本结构标签
- 骨架标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f1rEWwxM-1592591421720)(D:\前端学习\1.HTML\笔记\笔记图片\骨架标签.png)]
7.开发工具
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eY5n8cam-1592591421726)(D:\前端学习\1.HTML\笔记\笔记图片\浏览器.png)]
8.VS CODE常见快捷键：
- 新建html文件:ctrl+n
- 骨架生成：！或 tab
- 浏览器运行：alt+b
- 代码放大缩小：ctrl+[+或- ]
9.VS CODE安装插件：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oFy4FtIU-1592591421728)(D:\前端学习\1.HTML\笔记\笔记图片\安装插件.png)]
ps：JS-CSS-HTML Formatter 不要安装，不好用
10.HTML骨架标签
[本骨架生成标签]
- （1）!DOCTYPE html :文档类型声明标签，不属于html标签，告诉浏览器该文档使用的是哪个版本的html
<!DOCTYPE html>
- （2）html lang=“zh-CN”：告诉浏览器网页html文档中采用的是什么语言
<html lang="zh-CN">
</html>
- （3）meta charset=”UTF-8“：html文件采用该字符集存储字符（单标签）“UTF-8”为万国码
<meta charset="UTF-8">
02.HTML标签
[标题标签]
h1—h6:一级标签到六级标签（双标签）
特点：单独一行且文字变大加粗
[段落标签]
p：将文字变成一个段落（双标签）
特点：段落之间有间隔，随着网页框大小自动适应。
[换行标签]
br/：强制换行（单标签）
特点：另起一行
[文本格式化标签]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JiCrfott-1592591421729)(D:\前端学习\1.HTML\笔记\笔记图片\文本格式化标签.png)]
[盒子标签]
div，和span标签：没有实际意义，盒子标签
特点:div一个一行。别的不可以在其后面显示。
span则是一行可以分隔放置。
<div>一个一行的盒子</div>
<span>一行1</span><span>一行2</span>
最低0.47元/天 解锁文章
扫一扫
902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
