HTML快速入门


写在前面

        虽然这个账号很早以前就已经申请了,由于本人是数字媒体技术专业,学习份量较多的是adobe软件、建模软件和游戏制作软件(如Cocos 2D、Unity3D),所谓技多不压身,于是决定入门H5+Java全栈。
        目前还是这方面的小白......

1.什么是HTML?

https://en.wikipedia.org/wiki/HTML

        超文本标记语言:是用于创建网页的标准标记语言。

  • ✔文本:只有文字,没有样式的,没有图片等等,可以用记事本打开,没有乱码, 都称为文本。
  • ✔超文本:文字,图片,动画,音频,视频,超链接,程序…
  • ✔标记:也称为标签,HTML 是由一堆的标签组成,每个标签都有不同的功能
  • ✔语言:计算机语言分两类,一类是编程语言,一类标签语言,我们学习的 HTML不属于编程语言
  • ✔网页:凡是用浏览器打开的,不叫做网页

HTML 主要是用来给网页提供内容的,WEB 的三层结构:

  1. 结构层(内容层):HTML 是给网页提供内容
  2. 样式层(修饰层):CSS 是给网页提供样式(美化网页)
  3. 行为层:JavaScript: 是给网页提供行为的

HTML, CSS, JS 都是纯文本, 都可以用记事本打开

特点:

  1. 简单
  2. 通用性
  3. 平台无关

2.HTML发展历程


发展历程
需要知道有两个跨时代的版本:

  1. html4.01
  2. 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 常见的基本标签的学习
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值