WEB05Web开发HTMLCSS

Web前端开发

什么是 Web ?

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

Web 网站的工作流程

W3C

  • 万维网联盟( World Wide Web Consortium ),创建于1994年10月,主要工作是对 web 进行标准化。

HTML

快速入门

什么是HTML?

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

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

  • 标记语言:由标签构成的语言

  • HTML标签都是预定义好的。例如:使用<a>展示超链接,使用<img>展示图片,<video>展示视频。

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

HTML快速入门

  • 新建文本文件,后缀名改为 .html

  • 编写 HTML 结构标签

  • 在<body>中填写内容

基础标签

基础文本标签

超链接

  • <a>:定义超链接,用于链接到另一个资源

  • 常见属性 : href:指定访问资源的URL,支持绝对路径和相对路径两种写法 target:self,默认值,在当前页面打开;blank,在空白页面打开

图片、音频、视频标签

布局标签

布局标签

容器

  • <div>定义HTML文档中的一个区域部分,经常与CSS一起使用,用来布局页面。

  • <span>用来组合行内元素。

表格

  • <table>:定义表格 border:规定表格边框的宽度 width:规定表格的宽度 cellspacing:规定单元格之间的空白 <tr>:定义行 align:定义表格行的内容对齐方式 <td>:定义单元格 <th>:定义表头单元格

表单标签

表单标签

表单

  • 表单:在网页中主要负责数据采集功能,使用<form>标签定义表单。

  • 表单项:不同类型的 input 元素、下拉列表、文本域等。 <input>:定义表单项,通过type属性控制输入形式 <select>:定义下拉列表

    <textarea>:定义文本域

表单属性

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

  • method:规定用于发送表单数据的方式 get:浏览器会将数据直接拼接在表单的提交的 URL 之后,大小有限制 post:浏览器会将数据放到http请求消息体中,大小无限制

表单标签-表单项

表单项

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

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

  • <textarea>:文本域

CSS

快速入门

什么是CSS?

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

  • 层叠样式是指对同一个HTML标签添加多种不同的样式(字号、字体、颜色等等),所有样式会叠加在一起展示出效果

CSS引入方式

  • 行内样式:在标签内部,使用style属性,属性值就是css属性键值对。

    <div style="color: red; font-size: 50px; "> Hello CSS </div>

  • 内部样式:定义<style>标签,在标签内部定义css样式。

  • <style> div { color: red; font-size: 50px; } </style>

外部样式:定义<link>标签,引入外部的css文件。

  • <link rel="stylesheet" href="css/demo.css">

  • CSS样式使用优先级: 行内样式 > 内部和外部样式(内部和外部样式,后面覆盖前面的)

选择器

CSS选择器

  • 概念:选择器是选取需设置样式的元素(标签)

    div { color: red; }

  • 分类

样式

CSS属性

  • 参考官方文档:CSS 参考手册

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/42542.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ESP32-C3模组上跑通AES-GCM(1)

本文内容参考: mbedtls学习笔记 AES GCM_aes128 gcm的aad是什么-CSDN博客 https://www.cnblogs.com/testlearn/p/16547583.html 对称加密和非对称加密,一文讲解明白!-CSDN博客 深入理解高级加密标准(Advanced Encryption Standard)_aes在线加密-CSDN博客 特此致谢! …

OpenEarthMap:全球高分辨率土地覆盖制图的基准数据集(开源来下载!!!)

OpenEarthMap由220万段5000张航拍和卫星图像组成&#xff0c;覆盖6大洲44个国家97个地区&#xff0c;在0.25-0.5m的地面采样距离上人工标注8类土地覆盖标签。我们提供8类标注:裸地、牧场、已开发空间、道路、树木、水、农业用地和建筑。类选择与现有的具有亚米GSD的产品和基准数…

std::unordered_map和std::map在性能上有何不同

std::unordered_map和std::map在性能上的不同主要体现在以下几个方面&#xff1a; 1. 底层数据结构 std::unordered_map&#xff1a;基于哈希表实现&#xff0c;通过哈希函数计算元素的存储位置。哈希表能够直接通过哈希值快速定位到元素的位置&#xff0c;从而实现高效的查找…

30、PHP 实现 左旋转字符串、翻转单词顺序列

题目&#xff1a; PHP 实现 左旋转字符串 描述&#xff1a; 汇编语言中有一种移位指令叫做循环左移&#xff08;ROL&#xff09;&#xff0c;现在有个简单的任务&#xff0c; 就是用字符串模拟这个指令的运算结果。对于一个给定的字符序列S&#xff0c;请你把其循环左移K位后的…

电源纹波相关

什么是纹波&#xff1f;什么是噪声&#xff1f; 这种叠加在直流稳定量上的交流分量就称为纹波。 纹波的危害 电源纹波能影响设备性能和稳定性 纹波会导致电器上产生谐波&#xff0c;降低电源的使用效率&#xff1b; 高频电源纹波可能会产生浪涌电压或电流&#xff0c;影响设…

android deep links即scheme uri跳转以及googlePlay跳转配置

对于googlePlay的Custom URL就是googlePlay上APP网址&#xff1a; https://play.google.com/store/apps/details?idcom.yourapp如果是国内一些应用&#xff0c;则考虑market://包名等方式&#xff0c;自行百度。 对于Android URI Scheme&#xff1a; 首先需要在Manifest xm…

第2章大话 ASP.NET Core 入门

1.什么是ASP.NET Core框架 ASP.NET Core是一个超级棒的框架&#xff0c;它是免费的&#xff0c;你可以在任何主流的系统上&#xff0c;比如Windows、Linux或macOS上使用它&#xff0c;而且它是完全开放源代码的&#xff0c;意味着你可以看到并修改它的内部代码。这个框架是专门…

浅尝Apache Mesos

文章目录 1. Mesos是什么2. 共享集群3. Apache Mesos3.1 Mesos主节点3.2 Mesos代理3.3 Mesos框架 4. 资源管理4.1 资源提供4.2 资源角色4.3 资源预留4.4 资源权重与配额 5. 实现框架5.1 框架主类5.3 实现执行器 6. 小结参考 1. Mesos是什么 Mesos是什么&#xff0c;Mesos是一个…

如何更好地对接第三方数据库

在现代企业信息化建设中&#xff0c;对接第三方数据库是一个常见且重要的任务。无论是为了单据录入还是报表统计&#xff0c;确保对接过程的顺利进行对于业务运转至关重要。本文将详细介绍如何更好地对接第三方数据库&#xff0c;涵盖命名方式、业务理解和数据对接的具体步骤。…

【国产AI绘图】快手把“可图”大模型开源了,这是一款支持中文的SDXL模型

Kolors 是由 Kuaishou Kolors 团队&#xff08;快手可图&#xff09;开发的基于潜在扩散的大规模文本到图像生成模型。经过数十亿对文本图像的训练&#xff0c;Kolors 在视觉质量、复杂语义的准确性以及中英文字符的文本渲染方面&#xff0c;与开源和专有模型相比都具有显著优势…

SQLAlchemy迁移数据库

SQLAlchemy迁移数据库 目录 SQLAlchemy迁移数据库安装Alembic配置Alembic编辑 alembic.ini编辑env.py生成迁移文件建表语句示例修改迁移文件命名格式 安装Alembic pip install alembic配置Alembic 执行初始化后会创建一个 alembic 目录&#xff0c;包含Alembic的配置文件 ale…

Linux中C语言指针的意义及高级用法

引言 指针是C语言中一个重要的特性&#xff0c;它为程序提供了强大的功能和灵活性。指针在内存管理、数据结构、函数参数传递等方面发挥着关键作用。本文将深入探讨C语言指针的意义及其在Linux环境中的一些高级用法。 一、指针的基本概念 指针是存储内存地址的变量。它指向存…

MSPM0G3507——外部中断测编码器数据

方式1&#xff1a;单相 void GROUP1_IRQHandler(void) //编码器的中断函数 {uint32_t gpioA DL_GPIO_getEnabledInterruptStatus(GPIOA, GPIO_Encoder_PIN_Back_Left_A_PIN | GPIO_Encoder_PIN_Back_Right_A_PIN );if (gpioA & GPIO_Encoder_PIN_Bac…

基础权限储存

一、要求&#xff1a; 1、建立用户组shengcan&#xff0c;其id为2000工 2、建立用户组 caiwu&#xff0c;其id为2001 3、建立用户组 jishu&#xff0c;其id 为 2002 4、建立目录/sc,此目录是 shengchan 部门的存储目录&#xff0c;只能被 shengchan 组的成员操作,其他用户没有…

笔记:Newtonsoft.Json 自定义序列化反序列化规则

使用 Newtonsoft.Json&#xff0c;你可以在类内部自定义序列化和反序列化规则。这通常通过实现 JsonConverter 抽象类来完成。自定义转换器允许你控制类的序列化和反序列化行为&#xff0c;使你能够处理复杂的场景&#xff0c;比如序列化第三方库的对象&#xff0c;或者处理不支…

Hi6276 无Y应用电源方案IC

Hi6276 combines a dedicated current mode PWM controller with integrated high voltage power MOSFET.Vcc low startup current and low operating current contribute to a reliable power on startup design with Hi6276. the IC operates in Extended ‘burst mode’ to …

【初中数学选讲】绝对值的几何意义例题(20240503-01)

初中数学选讲&#xff1a;绝对值的几何意义例题&#xff08;20240503-01&#xff09; 1. 练习题目1.1 题目描述1.2 分析 2 答题2.1 定义2.2 分段讨论2.2.1 情况1&#xff1a; x x x点在 a a a点左侧&#xff08; x < a , m ∣ x − a ∣ x<a,\ \ m\left|x-a\right| x<…

六、数据可视化—首页、列表页制作(爬虫及数据可视化)

六、数据可视化—首页、列表页制作&#xff08;爬虫及数据可视化&#xff09; 1&#xff0c;首页制作&#xff08;1&#xff09;创建新项目选择flask框架&#xff08;2&#xff09;下载模板&#xff08;3&#xff09;导入flask框架中进行改写&#xff08;4&#xff09;访问服务…

回溯算法-以景点门票销售管理系统为例

1.回溯算法介绍 1.来源 回溯算法也叫试探法&#xff0c;它是一种系统地搜索问题的解的方法。 用回溯算法解决问题的一般步骤&#xff1a; 1、 针对所给问题&#xff0c;定义问题的解空间&#xff0c;它至少包含问题的一个&#xff08;最优&#xff09;解。 2 、确定易于搜…

【论文阅读】-- Visual Analytics for Model Selection in Time Series Analysis

时间序列分析中模型选择的可视化分析 摘要1 引言2 相关工作3 问题表征3.1 Box-Jenkins 方法论3.2 ARIMA 和季节性 ARIMA 模型3.3 模型规范3.4 模型拟合3.5 模型诊断 4 需求分析5 VA 用于时间序列分析中的模型选择5.1 VA选型流程说明5.2 TiMoVA 原型5.2.1 实施选择5.2.2 图形用户…