静态网页入门讲解,制作属于你自己的网页(一)

article/2025/9/25 7:21:43

写在开始

这个系列教程主要针对完全没有接触过网页制作的萌新小伙伴开设的,如果你有一定的网页知识积累,可以果断关闭!

网页前端设计中牵涉的内容太多了,基础教程却比较缺乏,所以博主希望能够通过这样一个系列,帮想要学习网页编程的小伙伴整理一些比较基础又十分重要的知识点。那么,废话不多说,抓紧进入正题吧!

网页编程工具

编写一个网页的编辑器其实有很多,比如说:eclipse,Dreamweaver,VS Code等等,甚至你用一个记事本编写网页的代码,然后把后缀名改成 .html,也可以在浏览器中运行。

学校的教学会使用Dreamweaver的比较多,因为Dreamweaver对一些CSS的属性可以界面操作生成,不需要纯代码编写。但是博主实在是用不惯,界面太难受了。在掌握了一定的网页编程语法之后,VS Code,atom之类的编辑器或许是更好的选择。

博主使用的是VS Code,这节课没有什么需要操作的代码内容,就先不讲下载安装了。

网页的分类

网页基本上分为两种一种是静态网页、另一种是动态网页。
什么是静态网页? 什么是动态网页?

静态网页就好比是一张用画笔(HTML5、CSS、JS)画好的画作,如果你想要修改它,就要把它先从展板(浏览器)上取下来,然后用画笔再次修改后贴回展板上。

另一种就是动态网页啦!动态网页像是在画作上预留可变的位置,然后准备好预留位置不同情况的画作,根据每次不同的需求粘贴上不一样的画作,不用一次又一次地画来满足观赏者。

上面的解释比较直观,更加能让各位初学的小伙伴理解,动态网页是静态网页的完善,让网页的交互性更强,功能更加强大!

网页编程基础语法

1.网页代码的基本结构

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title></head><body></body>
</html>

上面的这个结构可以分成三个部分

<!--定义HTML5-->
<!doctype html>
<!--文档开始-->
<html><head><!--文档头部,页面的描述信息,不显示--></head><body><!--文档正文,显示页面的内容--></body>
<!--文档结束-->
</html>

HTML5中的标记都可以归纳为这样的一条公式,<头标签 > 显示元素 <尾便签>
在这里插入图片描述
2.HTML标记的基本语法

a.标签成对出现
b.标签与大小写无关
c.标签可以联合使用,也可以嵌套使用
d.一个标签可以有多个属性值

3.标题文字标记

在这里插入图片描述
4.文字样式标记

在这里插入图片描述
5.特定的文字标记
在这里插入图片描述
6.特殊字符

在这里插入图片描述
7.段落标记

在这里插入图片描述
8.水平线标记

在这里插入图片描述
在这里插入图片描述
9.图片标记

在这里插入图片描述
在这里插入图片描述
10.表格标记

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
11.列表标记

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
12.块容器标记

在这里插入图片描述
13.行内标记

在这里插入图片描述
14.超链接标记

在这里插入图片描述
15.表单标记

在这里插入图片描述
16.输入标记

在这里插入图片描述
在这里插入图片描述
17.下拉列表标记

在这里插入图片描述
18.多行文本框标记

在这里插入图片描述
19.音频标记

在这里插入图片描述
20.视频标记
在这里插入图片描述

总结

这次的博客主要就是让小伙伴们对于静态网页最基本的HTML5标签有个最全面的认识,一下子记不住不要紧,没事多看看,多用用,有助于更好地理解哦!

结语

如果说这篇文章有让你学到一定的知识的话,不妨点个赞和关注,让博主能够看到。如果讲解中有什么错误和疏忽,也劳烦在评论中指出或提问,博主会第一时间进行更新和答复,谢谢!


http://chatgpt.dhexx.cn/article/QfeqCm7o.shtml

相关文章

最全静态网页模板网站

前言 最近好多人私信我&#xff1a;我学了不久前端&#xff0c;想要用一些项目实战来练练手。那么&#xff0c;我以后将定期更新静态网页实战&#xff0c;专用于提供初学者的练习。 那么这次博客为大家提供一些模板网站&#xff0c;希望初学者借鉴和学习优质资源&#xff1a; …

搭建静态网页

day3作业 请给openlab搭建web网站​ 网站需求&#xff1a;​ 1.基于域名[www.openlab.com](http://www.openlab.com)可以访问网站内容为 welcome to openlab!!!​ 2.给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料和缴费网站&#xff0c;基于[www.openlab.com…

HTML前端静态网页制作

在制作网页之前&#xff0c;首先先分析网页是那些部分组成&#xff0c;可以从以下的代码看出&#xff0c;分为头部、导航栏、logo部分、文字部分等等这些组成。多的不说&#xff0c;直接上代码&#xff0c;本次静态网页代码分为html和css部分。 <!DOCTYPE html> <htm…

web前端简单静态网页制作

那么Web页面制作基础&#xff0c;能让你掌握什么呢&#xff1f; 1.掌握Web基础知识。 2.掌握HTML5基础知识。 3.掌握CSS基础知识。 网页设计源代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><…

HTML+CSS制作的纯静态网页

刚学完HTMLCSS&#xff0c;一定要按照自己的想法去制作网页&#xff0c;虽然没有交互&#xff0c;但是可以对前面的知识有一个很大的重用&#xff0c;你的知识框架会更加完美。css基础html是勾勒&#xff0c;css是染色&#xff0c;基础的css学完你会有种想写页面的冲动&#xf…

游戏网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

&#x1f329;️ 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f482; 作者主页: 【进入主页—&#x1f680;获取更多源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;HTML5网页期末作业 (1000套…

个人介绍网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

一个简单的静态网页制作(html+css)

这是仿照中国高等教育学生信息网写的一个静态网页&#xff08;参考2020年3月份的&#xff09; 这也是我当时辛辛苦苦写了几天的劳动成果&#xff0c;希望大家可以尊重。 截图如下 下面是主要的代码&#xff1a; <!DOCTYPE html> <html> <head> <meta c…

html实战-制作静态网页

教程视频&#xff1a;http://edu.csdn.net/course/detail/535 从42开始 制作的网页&#xff1a;http://www.cnos.co/ 整体思路&#xff1a; 先布局再CSS控制 骨架搭好了&#xff0c;初始化样式&#xff0c; 后再弄CSS样式。注意&#xff1a;将CSS的样式导入到外部样式表时…

制作静态网页

首先进行CSS样式布局&#xff0c;根据样图进行块级标签分布&#xff0c;为每一个块级标签设置颜色以查看布局是否正确&#xff0c;最好是每设置一个块级标签颜色就查看一次是否排布正确&#xff0c;这样可以及时发现问题并解决问题&#xff1b;等到每一块区域都划分完成后&…

API幂等设计

API幂等就是在新增或更新数据时&#xff0c;如果多次发起同一个请求&#xff0c;只能产生一个结果。如&#xff1a;同一个订单多次提交&#xff0c;只能在数据库产生一个订单数据。我了解的基于redis实现幂等的有两种方式&#xff1a;基于token和基于请求。 基于token认证 参…

Mysql实现幂等_过幂等性问题

一、什么是幂等? 幂等性:多次调用方法或者接口不会改变业务状态,可以保证重复调用的结果和单次调用的结果一致。 二、使用幂等的场景 1、前端重复提交 用户注册,用户创建商品等操作,前端都会提交一些数据给后台服务,后台需要根据用户提交的数据在数据库中创建记录。如果用…

分布式锁实现业务幂等

1、前言 现如今很多系统都会基于分布式或微服务思想完成对系统的架构设计。那么在这一个系统中&#xff0c;就会存在若干个微服务&#xff0c;而且服务间也会产生相互通信调用。那么既然产生了服务调用&#xff0c;就必然会存在服务调用延迟或失败的问题。当出现这种问题&…

幂等性组件

根据上篇文章改进&#xff0c;并做成springbootstarter&#xff0c;依赖于redisson&#xff0c;如果redission已配置&#xff0c;则该组件可开箱即用 接口防重复提交_King_Kwin的博客-CSDN博客_接口防重复提交 本篇已做了较大的改动&#xff0c;可查看代码 idempotent: 幂等…

java幂等控制_JAVA幂等性实现

什么是幂等&#xff1a; 贴一张百度百科的图&#xff1a; 简单来说幂等保证了只要调用接口成功,外部多次调用对系统的影响是一致的&#xff0c;也就是一个请求多次重试的问题。 需要考虑幂等的场景&#xff1a; 客户端存在多次提交或者超时重试的情况&#xff1b; 分布式架构中…

幂等问题

点击↑上方↑蓝色“编了个程”关注我~ 每周至少一篇原创文章 这是本公众号的第 34 篇原创文章 最近比较懒&#xff0c;好几周没写文章了。还是没能坚持每周更新&#xff0c;愧对关注我的读者和自己的flag。。。 不过还好调整了过来&#xff0c;还是会继续坚持周更的。毕竟学习是…

常见的幂等性解决方案

背景 我们实际系统中有很多操作&#xff0c;是不管做多少次&#xff0c;都应该产生一样的效果或返回一样的结果。 get请求一般没有幂等性需求、delete请求一般也没有幂等性需求&#xff0c;post、update视情况而定例如&#xff1a; 前端重复提交选中的数据&#xff0c;应该后…

彻底理解接口幂等性

目录 背景 1. 幂等性的概念 2.什么情况需要处理接口幂等性问题&#xff1f; 2.1 select 天然自带幂等性。 2.2 insert 当我们重复插入数据的时候&#xff0c;会出现什么情况 &#xff1f; 2.3 delete 是否具有幂等性&#xff1f; 2.4 update 猜一猜是否具有天热幂等性&a…

【实战】聊聊幂等设计

前言 大家好,今天我们一起来聊聊幂等设计。 什么是幂等为什么需要幂等接口超时,如何处理呢?如何设计幂等?实现幂等的8种方案HTTP的幂等1. 什么是幂等? 幂等是一个数学与计算机科学概念。 在数学中,幂等用函数表达式就是:f(x) = f(f(x))。比如求绝对值的函数,就是幂等…

幂等性 详解

目录 一、幂等概念 1、幂等的数学概念 2. 幂等的业务概念 二、幂等概述 三、幂等场景 四、解决方案 1、token redis机制 2、乐观锁机制 3、唯一主键机制 4、去重表机制 5、门票机制 一、幂等概念 1、幂等的数学概念 如果在一元运算中&#xff0c;x 为某集合中的任…