web—HTML

devtools/2025/3/12 2:32:39/
htmledit_views">

什么是web

●Web:全球广域网,也称为万维网(www World Wide Web),能够通过浏览器访问的网站。

在浏览器中呈现精美的网页。

1.网页由那几部分组成?

>文字、图片、视频、音频、超链接,,,

2.我们看到的网页,背后本质是什么?

>程序员写的html" title=前端>前端代码

3.html" title=前端>前端代码如何转换成用户眼中的网页?

>通过浏览器转换成用户看到的网页。

>浏览器对代码进行解析渲染的部分,称为浏览器内核。

由于不同浏览器,内核不同,对于相同的html" title=前端>前端代码解析的效果可能会存在差异所以我们有一个统一规范叫做web标准。

web标准

●Web标准也称网页标准,由一系列的标准组成,大部分由W3C(World Wide Web Consortium,万维网联盟)负责制定。

●三个组成部分:

·HTML:负责网页的结构(页面元素和内容)。

·CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。

·JavaScript:负责网页的行为(交互效果)。

什么是HTML

●HTML(HyperText Markup Language):超文本标记语言。

◆超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。

◆标记语言:由标签“<标签名>”构成的语言

>HTML标签都是预定义好的。例如:使用<h1>展示标题,使用<img>展示图片,使用<video>展示视频。

>HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

什么是css

●CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。

html" title=前端>前端开发工具

●Visual Studio Code(简称VS Code)是Microsoft于2015年4月发布的一款代码编辑器。

●VS Code对html" title=前端>前端代码有非常强大的支持,同时也其他编程语言(例如:C++、JaVa、Python、PHP、Go等)。

●VS Code提供了非常强大的插件库,大大提高了开发效率。

●官网:Visual Studio Code - Code Editing. Redefined

定义标签

标题排版标签

标题样式

颜色表示形式:

CSS选择器是用来选取需要设置样式的元素(标签)的。

优先级:id选择器>类选择器>元素选择器

标签

超链接标签:<a></a>

<a href="http://gov.sina.com.cn/"target="_self">新浪政务</a>

target 是标签的打开方式。

用标签插入一个视频:

video用来定义视频的

用标签插入一张图片

三个标签总结:

盒子模型

盒子:页面中所有的元素(标签),都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局

盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

布局标签:网页开发中,会使用div和span这两个没有语义的布局标签

宽度:400像素:默认是内容展示区域的宽度·/,如果加上fxo-sizing:border-box展示的宽高为

如果不加上fxo-sizing:border-box则展示的宽度为

这里面的

小结:

flex布局

flex是flexible Box的缩写,意为"弹性布局",是一种一维的布局模型。fLex布局可以为元素之间提供强大的空间分布和对齐能力。

通过给父容器添加fLex的相关属性,来控制子元素的位置和排列方式。

常见的属性:

表单标签

表单:在网页中主要负责数据采集功能,如注册、登录等数据采集。

标签:<form>

表单项:不同类型的input元素、下拉列表、文本域等。

<input>:定义表单项,通过type属性控制输入形式(text/password/.·,)

<select>:定义下拉列表

<textarea>:定义文本域

属性:

action:规定当提交表单时向何处发送表单数据,URL

method:规定用于发送表单数据的方式。get、post

注意:表单项必须有name属性才可以提交。

表单标签—表单项

<input>:表单项,通过type属性控制输入形式。

<select>:定义下拉列表,<option>定义列表项。

<textarea>:文本域

<label>标签是对文字进行包裹,使点击文字也有反应

定义下拉列表:

表格标签

代码案例:


http://www.ppmy.cn/devtools/166434.html

相关文章

JVM参数调整

一、内存相关参数 1. 堆内存控制 -Xmx&#xff1a;最大堆内存&#xff08;如 -Xmx4g&#xff0c;默认物理内存1/4&#xff09;。-Xms&#xff1a;初始堆内存&#xff08;建议与-Xmx相等&#xff0c;避免动态扩容带来的性能波动&#xff09;。-Xmn&#xff1a;新生代大小&…

android13打基础: 保存用户免得下次重新登录逻辑

使用SP来做 创建LoginUser.kt // 登录用户需要Email data class LoginUser(val email: String,val password: String, )创建假数据FakeLoginUser.kt object FakeLoginUser {val fake_login_user_items arrayListOf(LoginUser(email "1690544550qq.com",password …

linux下文件读写操作

Linux下&#xff0c;文件I/O是操作系统与文件系统之间进行数据传输的关键部分。文件I/O操作允许程序读取和写入文件&#xff0c;管理文件的打开、关闭、创建和删除等操作。 1. 文件描述符 在Linux中&#xff0c;每个打开的文件都由一个文件描述符来表示。文件描述符是一个非负…

用Nutch库的HTTP请求写个万能下载程序

使用 Apache Nutch 来编写一个万能下载程序&#xff0c;涉及到集成其爬虫功能来抓取网页内容。Apache Nutch 是一个开源的 web 爬虫框架&#xff0c;主要用于抓取大量网页的数据。它是基于 Hadoop 的&#xff0c;可以扩展性地处理大规模的数据抓取任务。Nutch 主要是基于 Java …

vue3深入组件——依赖注入

一、场景介绍:一般父子间信息传递是通过props,但是一个多层嵌套的组件,必须将其沿着组件逐级的传递下去,这就是props的逐级透传。 二、上述情况下,就需要用到provide 和 inject;一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多…

深入探索 Dubbo:高效的 Java RPC 框架

深入探索 Dubbo&#xff1a;高效的 Java RPC 框架 随着微服务架构的流行&#xff0c;分布式系统中的服务间通信变得愈加复杂。Dubbo 作为阿里巴巴开源的高性能 Java RPC 框架&#xff0c;已成为开发高可用、高性能微服务架构的核心工具之一。本文将深入探讨 Dubbo 的核心特性、…

iOS插件,Theos环境搭建与XM文件开发指南(完善版本)

Theos环境搭建与XM文件开发指南 这里写目录标题 Theos环境搭建与XM文件开发指南什么是Theos&#xff1f;Theos的主要特点 Theos环境搭建在macOS上安装Theos在Windows上安装Theos (通过WSL) XM文件详解什么是Logos语法&#xff1f;XM文件基本结构XM文件打包配置1. 核心文件组成T…

【大前端】【Android】whistle配置Android手机代理脚本

Android配置whistle手机代理&#xff0c;为了避免频繁自己手动去WiFi代理输入私有IP地址&#xff0c;特地建了一个Python脚本来帮助一键配置好代理&#xff0c;解除代理。 原始配置流程手续&#xff1a; 需要打开http://127.0.0.1:8899/ 查看whistle的IP和端口号需要打开手机…