【Web前端】 HTML简介

简介: 1、 网页(1)什么是网页(2)什么是 HTML(3)网页的形成2、 常用浏览器3、Web 标准(重点)(1)为什么需要web标准(2)Web标准的构成

1、 网页


我们接下来是进行的网页开发, 这里首先介绍下网页的相关概念:


  • 什么是网页?
  • 什么是HTML?
  • 网页的形成?

(1)什么是网页

网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。


网页是网站中的一“页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。


网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以.htm或 .html 后缀结尾的文件,因此将其俗称为 HTML 文件。


(2)什么是 HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) ,它是用来描述网页的一种语言。


HTML 不是一种编程语言,而是一种标记语言 (markup language)。


标记语言是一套标记标签 (markup tag)。


所谓超文本,有 2 层含义:


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

(3)网页的形成

网页是由网页元素组成的,这些元素是利用 html 标签描述出来,然后通过浏览器解析来显示给用户的。


前端人员开发代码 ----> 浏览器显示代码(解析、渲染) -----> 生成最后的 Web 页面


2、 常用浏览器


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


  • 常用的浏览器
  • 浏览器内核

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。

平时称为五大浏览器。


浏览器内核(渲染引擎): 负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。目前国内一般浏览器都会采用 Webkit/Blink 内核,如 360、UC、QQ、搜狗等。


3、Web 标准(重点)


Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。


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


为什么需要web标准

Web标准的构成

(1)为什么需要web标准

浏览器不同,它们显示页面或者排版就有些许差异。


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

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

(2)Web标准的构成

主要包括结构(Structure) 、表现(Presentation)和行为(Behavior)三个方面。


Web 标准提出的最佳体验方案:结构、样式、行为相分离。


简单理解:结构写到 HTML 文件中,表现写到 CSS 文件中,行为写到 JavaScript 文件中。


目录
相关文章
|
3天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
21 11
|
3天前
|
前端开发
|
3天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
3天前
|
前端开发
【前端web入门第五天】01 结构伪类选择器与伪元素选择器
本文介绍了CSS中的结构伪类选择器和伪元素选择器。结构伪类选择器如`nth-child`可根据元素结构关系进行选择,例如将列表中首个`<li>`元素背景设为绿色。伪元素选择器用于创建装饰性内容。
|
3天前
|
前端开发
【前端web入门第五天】02 盒子模型基础
本文档详细介绍了CSS中的盒子模型及其组成部分,包括内容区域、内边距、边框线和外边距。通过具体示例展示了如何设置边框线、内边距及外边距,并解释了尺寸计算方法和版心居中的技巧。内容丰富,示例清晰,有助于理解盒子模型在网页布局中的应用。
|
3天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`<div>`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
3天前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
2天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
1月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
21 0
|
3月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
63 2

热门文章

最新文章