【网页前端】HTML基础入门以及概述

简介: 【网页前端】HTML基础入门以及概述

1.HTML概述

1.1网页概述(了解)

1.1.1什么是网页

网页就是电脑上 联网查看的页面。

平时上网查阅资料,上网追剧,追小说,上网购物等等,看到的都是网页。

例如:学院官网、百度首页,就是具体的网页。

image.pngimage.png

1.1.2网页是如何编写的

开发人员编写网页内容,然后通过浏览器处理后,就形成了多姿多彩的网络世界。

image.png

1.2浏览器概述(了解)

浏览器是网页运行的平台,每一台计算机如果要上网浏览内容,就必须安装浏览器,

win7/win8/win9

操作系统默认安装的是 IE 浏览器,win10 操作系统默认安装时 Edge 浏览器,那么还有其他浏览器吗?

1.2.1常见浏览器

常用的浏览器有:谷歌(Chrome)、IE 等,我们的课堂中大部分情况都使用 Chrome

image.png

Chrome 浏览器 :简洁、快速、高效,浏览器中的王者,现阶段市场占有率最高的浏览器。

IE 浏览器:曾经的浏览器霸主,但仍有很多用户使用,因为操作系统默认浏览器,不会安装其他浏览器用户只能使用。

还有一些其他常见的浏览器:

image.png

1.2.2其他浏览器

360 极速浏览器、QQ 浏览器、猎豹安全浏览器、百度浏览器、2345 浏览器、傲游、世界之窗浏览器 等

第三方浏览器,都是在常见浏览器的基础上,添加一些特殊插件的产物。例如:

360 安全浏览器,Chrome IE 双内核的浏览器。

QQ 浏览器,Chrome Tab 高速组件和自带 IE 高级内核双内核的浏览器。

猎豹安全浏览器,采用 Trident WebKit 双渲染内核。

扩展

内核:浏览器的核心程序(心脏)

Trident 就是 IE 内核、WebKit 就是 Chrome 内核

1.2.3浏览器的市场份额

查看百度统计:http://tongji.baidu.com/data/browser

image.png

1.3什么是HTML

image.png

HTML:超级文本标记语言(HyperText Markup Language

“文本” 记事本上的普通文字

“超文本”就是指页面内可以包含图片、链接等非文字内容。

“标记”就是使用标签的方式将需要的展示的内容包起来。例如:<a>www.itcast.cn</a>

作用:使得信息的展示更加丰富多彩

扩展:

为了使页面展示更为丰富,我们需要学习三部分知识:

HTML: 页面框架搭建

CSS

页面美化

JavaScript:页面功能

1.4快速入门:编写第一个HTML网页

步骤 1 :快捷创建 HTML 文件

image.png

image.png

image.png

步骤 2:使用浏览器(谷歌/IE/火狐)打开该 html 文件即可

image.png

1.5HTML基本语法【重点】

1.5.1基本语法

HTML 文件不需要编译,直接使用浏览器打开即可解析效果

HTML 文件的扩展名是*.html *.htm

HTML 都是由标签组成

标签名预先定义好的,我们只需要了解其功能即可。

标签名不区分大小写。建议标签名小写例如:<a></a><A></A>被认为是一个同标签

通常情况下标签由开始标签和结束标签组成。例如:<a></a>

开始标签和结束标签之间的信息,叫做标签的内容体。例如:<a>我就是内容体<a/>

如果没有结束标签,建议以/结尾。例如:<img />

HTML 代码中的空格和换行解析时会被忽略

多个空格合并成一个展示,代码换行展示时会被忽略

1. HTML 标签是有属性的。

<标签名 属性名 1= "属性值 1" 属性名 2=" 属性值 2"/>

属性用于修饰标签效果,例如:字体颜色、字体大小等。好比人有肤色、眼睛大小等属性一样。

image.png

属性值一般用双引号或单引号包裹。

2. HTML 标签可以包裹嵌套,禁止交叉嵌套

image.png

3. 标签之间有两大基础关系:

父子关系(包裹嵌套):标签 1 包裹标签 2,则标签 1 为父,标签 2 为子

兄弟关系(标签并列):在同一个父标签内,2 个标签相互并列,互不包含,就是兄弟关系

image.png

注意:标签 4 和标签 2 没有在同一个父下,也不存在包裹,所以既不是兄弟,也不是父子。 

image.png

1.5.2HTML标准代码格式

开发中,要求 HTML 必须写为标准代码格式:

<html><head><title>这是标题</title> </head> <body>这里是正文 </body> </html>

image.png

HTML 代码标准由<head><body>两部分组成。

<head>:头标签,用于定义页面说明型或者功能型信息。例如字符集、引入 css 样式,引入JavaScript功能等。

向用户展示的信息不建议放入 head 中。

<body>:身体标签,用于定义 页面的展示型信息。 例如:图片、表格、表单等效果展示

1.6HTML访问刘川(了解)

image.png

image.png

1.7文档约束/声明(了解)

文档声明:通知浏览器文档所使用的 HTML 规范。不同版本的规范浏览器处理方式不同。常见规范

版本:HTML5HTML4.01。以后开发中我们使用 HTML5 规范。规范都是固定格式。

HTML5 规范【掌握】

image.png

HTML4.01 规范(了解)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/l
相关文章
|
1月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
322 2
|
20天前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
100 4
|
1月前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
144 68
|
12天前
|
XML 前端开发 JavaScript
前端大神揭秘:如何让你的网页秒变炫酷,让用户欲罢不能的5大绝招!
前端开发不仅是技术活,更是艺术创作。本文揭秘五大前端开发技巧,包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计,助你打造炫酷网页,提升用户体验。
58 30
|
13天前
|
存储 编解码 前端开发
惊!前端新手也能秒懂的高级技巧,轻松提升网页颜值与性能!
本文针对前端新手,介绍了三个简单易学的高级技巧,帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度,以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰,适合初学者上手实践。
25 3
|
13天前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
18 3
|
16天前
|
存储 前端开发 搜索推荐
(前端直接编辑CAD)网页CAD二次开发中线型表的使用方法
在DWG数据库中,线型样式存储在线型样式表 `McDbLinetypeTable` 中,每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式,并提供了绘制不同线型的示例代码,包括虚线、点划线和带文字的线型。通过在线示例demo,用户可以实践修改CAD图纸中的实体线型及其样式。
|
19天前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
29 5
|
19天前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
65 4
|
20天前
|
前端开发 JavaScript 搜索推荐
前端小白也能学会的高大上技巧:如何让你的网页支持暗黑模式?
【10月更文挑战第30天】随着现代网页设计的发展,暗黑模式已成为一种流行趋势,提升了用户的阅读体验并增强了网页的适应性。本文介绍了如何通过简单的HTML、CSS和JavaScript实现网页的暗黑模式。首先,定义两种主题的CSS样式;然后,使用JavaScript实现模式切换逻辑,并自动检测系统主题。通过这些步骤,前端小白也能轻松掌握暗黑模式的实现,提升网页的用户体验和个性化水平。
40 4
下一篇
无影云桌面