写在前面
虽然这个账号很早以前就已经申请了,由于本人是数字媒体技术专业,学习份量较多的是adobe软件、建模软件和游戏制作软件(如Cocos 2D、Unity3D),所谓技多不压身,于是决定入门H5+Java全栈。目前还是这方面的小白......
1.什么是HTML?
https://en.wikipedia.org/wiki/HTML
超文本标记语言:是用于创建网页的标准标记语言。
- ✔文本:只有文字,没有样式的,没有图片等等,可以用记事本打开,没有乱码, 都称为文本。
- ✔超文本:文字,图片,动画,音频,视频,超链接,程序…
- ✔标记:也称为标签,HTML 是由一堆的标签组成,每个标签都有不同的功能
- ✔语言:计算机语言分两类,一类是编程语言,一类标签语言,我们学习的 HTML不属于编程语言
- ✔网页:凡是用浏览器打开的,不叫做网页
HTML 主要是用来给网页提供内容的,WEB 的三层结构:
- 结构层(内容层):HTML 是给网页提供内容
- 样式层(修饰层):CSS 是给网页提供样式(美化网页)
- 行为层:JavaScript: 是给网页提供行为的
HTML, CSS, JS 都是纯文本, 都可以用记事本打开
特点:
- 简单
- 通用性
- 平台无关
2.HTML发展历程
需要知道有两个跨时代的版本:
- html4.01
- html5
w3c:
3.编写第一个网页
编写网页前需要准备两个工具,(编辑器和浏览器)。
1. 在什么地方上写?
所谓的编程就是写代码,我们需要一款合适我们的编辑器或 IDE(集成开发环境),webstorm 或者 Visual Studio Code(vs code)。
2. 写完之后怎么看效果?
我们知道,以前我们作为网民时,网上浏览网页时,有一个东西叫浏览器,就是一个软件 ,作用是打开网页面文件,首先我们也需要有一个浏览器,常见的浏览器有:谷歌,IE, 火狐,欧朋,苹果浏览器…,主流浏览器(五大浏览器和 4 大内核),我学习时使用谷歌浏览器
准备好工具后,这里开始写我的第一个网页:
4.HTML基本结构
我们可以把 hmtl 看成由三部分级成:文档声明+头部+主体内容,所以 html 基本构成如下 :
✔文档声明 doctype
✔头部 head html
✔主 体 内 容 body
上图就是html 的基本结构也就是 html 的骨架
在这个骨架里面,都有:
- !DOCTYPE html 文档声明
- html 文档的根标签
- head 网页的头部
- title 网站的标题
- meta 元信息
- body 主体内容
html 由一堆的标签组成,每个标签都是有<打头,由>结束,里面包含了某种含义的单词或单词缩写,这些统称为标签或标记,每学一个标签都要从三方面来学习:
- 标签的格式
- 标签的作用
- 标签的经典用法
5.HTML元素的构成及语法
一个 html 元素是由开始标签+标签内容+结束标签组成,也就是说:
元素 = 开始标签+内容+结束标签
标签和元素不是同一个概念
标签的分类:
单标签:只有开始标签,没有结束标签,最后的/可以,可不加。
双标签:有开始标签,也有结束标签,结束标签比开始标签多了一个/。
标签与标签之间的关系:
并列关系:
嵌套关系:
注意:
1,并非所有的标签都有结束标签,比如:img /, br /, hr/,它们都可以看作自结束标签。
2,如:meta charset=”UTF-8” / meta 是标签 charset 是属性名, UTF-8 是属性值,属性名可以使用单引号或双引号,也可以不加
语法:
- HTML 语法比较松散, 主要体现在下面三个方面:
- 不区分大小写
- 对于自结束标签,可以加/, 也可以不加/
- 属性名可以不加引号
好习惯:
- 必须有文档声明
- 标签全部使用小写
- 给属性值加上引号
- 标签可以嵌套,但不能交叉
- 标签要正确的关闭
了解这些后就是HTML 常见的基本标签的学习