初识html

目录

1.网页

1.1 什么是网页

1.2 什么是 HTML

1.3 网页的形成

 网页总结

2. 常用浏览器

 3. Web 标准( 重点)

3.1 为什么需要 Web 标准

3.2 Web 标准的构成

4、开发工具

5、vscode的使用

6、注释

7、标签结构

8、标签关系

9、HTML

10、hello world

1.网页

1.1 什么是网页

        网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的“一页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。
        网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。 通常我们看到的网页,常见以 .htm 或 .html 后缀结尾的文件, 因此将其俗称为 HTML 文件。

1.2 什么是 HTML

        HTML 指的是超文本标记语言 (Hyper Text Markup Language) ,它是用来描述网页的一种语言。HTML 不是一种编程语言,而是一种标记语言 (markup language)。
标记语言是一套标记标签 (markup tag)。
所谓超文本, 有 2 层含义:

  1. 它可以加入图片、声音、动画、多媒体等内容( 超越了文本限制 )。
  2. 它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本 )。

1.3 网页的形成

        网页是由网页元素组成的,这些元素是利用 html 标签描述出来,然后通过浏览器解析来显示给用户的。
前端人员开发代码 ----> 浏览器显示代码(解析、渲染) -----> 生成最后的 Web 页面

 网页总结

        网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)
网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.
HTML: 超文本标记语言, 用来制作网页的一门语言. 有标签组成的. 比如 图片标签 链接标签 视频标签等…

2. 常用浏览器

网页是通过浏览器来展示的, 关于浏览器我们要介绍以下两点:

  1. 常用的浏览器
  2. 浏览器内核

浏览器是网页显示、 运行的平台。 五大浏览器 :

  • IE
  • 火狐( Firefox)
  • 谷歌( Chrome)
  • Safari
  • 欧朋Opera 

浏览器内核(渲染引擎): 负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。
浏览器内核

目前国内一般浏览器都会采用 Webkit/Blink 内核,如 360、 UC、 QQ、搜狗等。

 3. Web 标准( 重点)

接下来围绕web标准,我们学习以下两点:

  1. 为什么需要web标准
  2. Web标准的构成

3.1 为什么需要 Web 标准

浏览器不同, 它们显示页面或者排版就有些许差异。
Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。 W3C( 万维网联盟) 是国际最著名的标准化组织。

 遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、 更统一外, 还有以下优点:

  1. 让 Web 的发展前景更广阔。
  2. 内容能被更广泛的设备访问。
  3. 更容易被搜寻引擎搜索。
  4. 降低网站流量费用。
  5. 使网站更易于维护。
  6. 提高页面浏览速度。

3.2 Web 标准的构成

        主要包括结构( Structure) 、 表现( Presentation)和行为( Behavior)三个方面。
Web 标准提出的最佳体验方案: 结构、样式、行为相分离。
简单理解: 结构写到 HTML 文件中, 表现写到 CSS 文件中, 行为写到 JavaScript 文件中。

4、开发工具

Visual Studio Code

5、vscode的使用

快速生成 html 网页结构:

! + Tab 多了一行代码<!DOCTYPE html>

6、注释

<!-- 注释内容 -->

浏览器中不显示注释内容,添加和取消注释快捷键:ctrl + /

7、标签结构

  • 双标签 <开始标签> 内容 </结束标签>, 例如:<strong> 内容 </strong>
  • 单标签 <标签 /> , 例如:<br>

8、标签关系

<html>
  <head></head>
</html>
 
<head></head>
<body></body>

9、hello world

需要设置显示文件扩展名

文件扩展名:.html

例如:index.html

<html>
  <head>
    <title></title>
  </head>

  <body></body>
</html>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值