HTML5详篇 - 实践

前端三剑客

前端三剑客是指HTML、CSS和JavaScript：

HTML超文本标记语言（Hyper Text Markup Language)：简单理解描述网页结构的；用于网页内容的语言。它通过使用不同的HTML标签来定义页面中的各种元素，例如标题、段落、图像、链接等【无羽毛的小鸟模型】

CSS层叠样式表（Cascading Style Sheets)：简单理解美化网页样式的；用于控制网页的样式和布局。它通过选择器和属性来选择和修改HTML元素的外观，例如颜色、字体、大小、间距和位置等【有五颜六色漂亮羽毛的小鸟模型】

JavaScript：简单理解做网页交互的；JavaScript是一种用于在网页上实现动态交互的脚本语言。它可以通过修改HTML和CSS来实现用户与网页的互动，例如表单验证、动态内容加载、页面动画和用户事件处理等【会动会飞有生命的小鸟】

以上就是开发网站的三要素，好的网站缺一不可

前端开发还涉及到许多其他的技术和工具，例如前端框架（如React、Vue等）、CSS预处理器（如Sass、Less等）、浏览器开发者工具、版本控制工具（如Git）等。这些工具和技术可以提高开发效率，优化代码结构，并支持更复杂的前端应用程序的开发

计算机组成

A、计算机硬件：看得见摸得着

B、计算机软件：看不见也摸不着（指的实体）

计算机软件又分为：
1.系统软件：操作系统
2.应用软件：桌面软件
软件架构大致又分为：
CS架构软件 和 BS架构的软件

C/S和B/S

C/S架构是指客户端/服务器【Client/Server】架构，桌面应用软件访问的服务器，比如我们使用的QQ、微信等

在这里插入图片描述

B/S结构是浏览器/服务器【Browser/Server】的简称，通过浏览器访问的服务器，比如我们使用淘宝、京东、百度等

在这里插入图片描述

共同点：

都是需要访问到服务器的

BS/CS的优缺点：

(1) C/S : 更加安全（面向相对固定的用户群），速度更快（专用服务器），用户体验更好。但是需要单独安装客户端，而且每次升级都要重新安装客户端

(2) B/S : 用浏览器代替客户端，不用单独安装，客户端不必维护，无感更新。但是安全性和稳定性相对CS架构的软件较弱【所有的逻辑代码都是让服务器端完成的，而游览器只做界面渲染】

PS：Java主要用于开发BS架构的软件（很少会开发CS架构的软件）

网站访问原理

访问一个页面的过程大致如下：

在这里插入图片描述

1. 输入网络资源地址
2. 浏览器用URL查询DNS，DNS返回IP地址
3. 浏览器用这个IP地址和访问网页路径来访问网页
例如：183.2.172.17/index.html其实他会发一个网络请求给Web服务器
4. Web服务器接收到这个请求后，以html文档的方式来响应，相当于下载了html文档
5. 浏览器解析html文档，然后展示给用户

首先通过某一台电脑访问 https://www.baidu.com网址，此时会有一个DNS服务器(域名解析服务器：简单理解将域名转为IP地址)，通过网址访问DNS服务器解析为IP地址再把IP地址响应回去，最后通过IP地址访问到对应的服务器/电脑

常识：每一台的电脑IP都是独一无二的，即人的身份证；【所有的软件都是放到服务器上的】；为什么需要把域名转为IP，因为域名更容易记忆

服务器分类：

① 硬件服务器：本质就是一台高配电脑，例百度、淘宝等就是部署在电脑上的

② 软件服务器：Tomcat、Nginx、ES……

PS：通过域名拿到对应的IP

在这里插入图片描述

在这里插入图片描述
通过游览器获得需要的域名，再把域名解析成IP；“已响应”即表示ping通了

前端

什么是前端 ？

软件开发包括前端开发和后端开发，前端负责数据展示，后端负责业务实现

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3

前端开发：是指构建和实现用户在浏览器中直接与之交互的网页和应用程序的过程。前端开发关注于网页的外观、布局和用户体验，以及与用户的互动。

前端开发涉及到很技术和工具，例如移动应用开发、响应式设计、数据可视化等。像常见的网页，手机APP，微信小程序，VR等技术都属于前端的开发范畴。随着技术的不断发展和前端开发的进化，前端开发者在设计和实现用户界面时拥有更多的选择和创新的空间，以提供更丰富、交互性更强的应用程序和体验

开发环境与调试

开发环境

  • 文本文档：初代程序员使用
  • HBuilder：国内神器
  • VSCode：目前前端开发人员使用较多
  • idea: 后端/全栈开发人员使用较多

PS：工具不重要，哪个自己顺手用哪个即可

运行环境-浏览器

浏览器是html、css、js的解析器、执行器，我们写的html、css和js代码需要放在浏览器才能执行

浏览器的名称内核浏览器的由来浏览器的性能
谷歌（chrome）WebkitChrome 28以上为Blink内核Google公司旗下浏览器快速、安全、搜索引擎好、速度最快的浏览器
火狐（Firefox）Geckomozilla公司旗下浏览器简称：FF安全性高，速度中等
IE浏览器TridentMicrosoft微软公司在Mosaic代码的基础之上修改而来的浏览器速度慢，安全性中等
EdgeBlinkMicrosoft微软公司重新开发的浏览器，采用Chromium内核速度快
SafariWebkit苹果公司旗下浏览器在苹果系统下是很优秀的浏览器
欧朋(Opera)PrestoOpera15版本以上是Blink内核是挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器;速度快，浏览器界面简洁
  • 开发我们使用Chrome或者Firefox这两个浏览器，调试起来比较方便
  • 一般F12/右键审查元素/检查/工具栏 就可以从浏览器中打开调试工具

在这里插入图片描述

谷歌游览器和火狐游览器控制台的区别：谷歌游览器控制台是全英文，而火狐控制台是全中文

HTML

W3C认识

万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）

万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（HTML）、**可扩展标记语言（XML）**以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用

对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布

  • W3C是一个国际组织，它定义与规范大量Web标准（如H5，CSS3，js，xml等）

HTML认识

  • HTML(Hypertext Markup Language)超文本标记语言，是一种编写网页内容的技术
  • 文本：就是类似"xx.txt"文件里面可展现的内容
  • 超文本：指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
  • 标记语言：描述html的语法格式，采用标签的方式描述网页内的元素【即；标签=标记】
  • 后缀以 html或者 htm结尾的文档，可以展示文字，图片，超链接，视频等内容
  • Html是W3C制定的规范，规定了浏览器需要识别的html语法、html标签的基本功能。即浏览器能够识别html代码，是html的解析器，我们写的html、css和js代码需要放在浏览器才能执行

HelloWorld入门

  • 创建一个项目”VS“
  • 在项目中新建一个html页面。技巧：在vscode中输入英文**!回车** - 自动生成H5的骨架

在这里插入图片描述

HTML文件结构

在这里插入图片描述

什么是DOCTYPE？？？

DOCTYPE是Document Type（文档类型/申明 = DOCTYPE声明）的简写，DOCTYPE不属于HTML标签。在页面中用来指定页面所使用的HTML版本

什么是标签？？？

  • HTML是以标签来进行描述，学习HTML基本上就是认识HTML标签的含义与作用
  • 标签分成双标签与单标签
    • 单标签：<标签名 />
    • 双标签：<标签名>内容</标签名>
标签的语法格式：
<!--双标签：开始标签和结束标签各单独一个-->
方式1：<标签名 属性名1="值" 属性名2="值" 属性名3="值" ……></标签名>
  <!--标签中可以定义一个或多个属性-->
    <!--属性名后面的值，不管是单引号和双引号都表示字符串-->
      <!--单标签：开始标签和结束标签都是同一个-->
        方式2：<标签名 属性名1="值" 属性名2="值" 属性名3="值" …… />

什么是属性？？？

  • HTML标签中可以定义一个或多个属性，提供更多信息
  • 属性总是以名称/值对的形式出现，语法为 属性名=“属性值”；这里的属性值不管是数字还是字符串等都是用单引号或者双引号引起来的

title标签

用来声明网页的标题

在这里插入图片描述

meta标签认识

  • HTML中的Meta标签用于向浏览器提供Web页面的元数据，包括页面的标题、描述、关键字、作者、语言以及其他相关信息。它们被放置在head标签内，不会在主页面上显示
  • 常见的Meta标签及其作用：
    • <meta charset="utf-8">：指定页面的字符编码
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">：指定页面在不同设备上的显示方式，以适应不同屏幕尺寸
    • <meta name="description" content="java,php">：描述网页的内容，对搜索引擎优化SEO很重要
    • <meta name="keywords" content="java,php">：设置网页的关键字，以便于搜索引擎对网页内容的分析
    • <meta name="author" content="作者名">：设置页面的作者
    • <meta http-equiv="refresh" content="5;url=http://example.com/">：设置网页自动跳转，其中5表示间隔5秒，url表示跳转的地址

PS：响应式布局效果，即网页自适应

在这里插入图片描述

<!-- 版本不一样解析规则即不一样-->
  <!DOCTYPE html> <!-- 凡是出现<!DOCTYPE html>，就表示该版本是HTML5的版本，告诉游览器当前是html5版本，按照html5版本解析html页面-->
      <html lang="en"><!--html的根元素，如果开发一个网页必须要有根元素，也必须只能是html；一个html代表一个页面；那么一个网页内部又分为头信息和体信息 -->
      <head> <!--网页头信息，主要描述当前页面编码，网页标题，网页是否自适应-->
          <meta charset="UTF-8"> <!--告诉游览器当前页面是UTF-8编码-->
          <!--"viewport"：视点，"width=device-width, initial-scale=1.0"：响应式布局(该页面会根据当前设备进行屏幕大小展示)-->
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title> <!--网页标题-->
            </head>
            <body>
              hello world！！
            </body>
          </html></
posted @ 2025-08-24 16:23  yfceshi  阅读(12)  评论(0)    收藏  举报