web前端开发入门

最新推荐文章于 2025-11-24 02:17:16 发布
原创 最新推荐文章于 2025-11-24 02:17:16 发布 · 401 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

这篇博客介绍了HTML的基础知识，包括HTML的定义、Web标准的构成、HTML的基本语法，以及各种标签的用法，如title、meta、img等。通过学习，读者可以掌握创建第一个网页和理解HTML文档结构的基本技能。

网页

网页是构成网站的基本要素，通常是HTML格式的文件，一般以html后缀结尾。

什么是HTML？

HTML指的是超文本标记语言（是一种描述网页的语言）。

不是编程语言，而是一种标记语言。

标记语言是一套标记签。

实际上由多个标记签组成。

所谓超文本有两层含义：

606839f881e947c0bf2883470f770066.png

Web标准的构成

主要包括：结构(Structre)、表现(Presentation)、行为(Behavior)三个方面 

00fec155bbbc4b84b3b21f840b03bb0f.png

如图表示Web的构造： watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz6KGM5pe256m6Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16

HTML的语法概述

基本语法概述

878926ca896b4f26882f7d7418373762.png

 标签关系

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz6KGM5pe256m6Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16

第一个网页

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz6KGM5pe256m6Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16

第一个HTML

基本结构标签分析

d51536a935324a39b8c1e41a5e5e1b27.png

head标签中的元素

head标签中有很多元素(标签)可以使用，但是用在正文的标签不能在这里使用。

head标签作用于网页的头部他的内容不会在正文中出现。

title标签

<title>写文章-优快云博客</title>

d0a932109ad34d4389b64c2674a40c50.png

 meta标签

第一种用法

字符集

05b01e43b2af4c2595dbc826ea5c81b2.png

是用来设置网页文档编码以防止浏览器乱码的情况。（声明是什么编码方式）

一般情况下使用html5 因此对应 <meta charset="UTF-8">

第二种用法

设置网页关键字专门为搜索引擎服务

cf4d0782498e44e1a6be16a2feef0423.png

第三种用法

用于描述网站的（简介）

e1a42e0203964b86a131507734fcce6e.png

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz6KGM5pe256m6Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16

第四种用法

定义网站重定向

56f8e36f91b44dc8b8098cfcbd4ad9e9.png

 base标签

还没学到

html根标签

71bef9551bc641b3b4942bdf409d3308.png

zh-CN表示将网页以中文形式展现 ,en表示英文。

body标签

将输入内容放进去。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz6KGM5pe256m6Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16

 基本结构的关系图

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz6KGM5pe256m6Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16

 文档类型的声明标签

<!DOCTYPE html>

17b5ae7accfd45ccb9dc66ca74ed9ae3.png

 <html>标签包含的才属于HTML标签

标签语义

522350f4effd4ab58afa6106c823509c.png

标题标签

共有6个等级的网页标题<h1>到<h6>
特点：

加了标题的文字变的加粗，字号依次变大。

一个标题独占一行

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz6KGM5pe256m6Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16

段落和换行标签

段落标签<p> </p>可使内容分段显示

特点：

文本在一个段落中会根据浏览器窗口大小换行。

段落之间有空隙。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz6KGM5pe256m6Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16

 换行标签<br/>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz6KGM5pe256m6Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz6KGM5pe256m6Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16

特点：

独占一行

文本格式化标签

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz6KGM5pe256m6Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16

 <div>和<span>标签

<div>和<span>是没有语义，就是一个盒子用来装内容

div是一个大盒子（一行只能放一个）和<h >标题标签一样可以独占一行

35de65f29f4d413e8d373085d218807a.png

 0fc2ee4b9e7a4267912c563f6829e3ca.png

span是一个小盒子（一行可以放多个）

b20c2f5e61244b198de103df03b399fb.png

9fa49d0f0caf4e01a7643f783ab7777a.png

图像标签

重点：图像标签之间要隔开一个空格！

df179e28bdc64995aae061b501bc8afd.png

img标签

用于定义img图像

<img src="图像URL“/>

src是<img>标签的必须属性，用于指定图像文件的路径和文件名

<img src="img.jpg"/>

alt标签

文字替换显示不出来的图片

<img src="img.jpg" alt="我是pink老师"/>

55eadedeb28040149b6aef3325d1c5ea.png

 title标签

鼠标放在图片上显示文字

<img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达”/>

8fef1534f6c0418ba94b7c3c5440d4e1.png

width标签

设置宽度。

12f319c7bea24218b9d30f147abf534b.png

height标签

设置高度。

aa5449caa9c44b4f9646fff9c3b0119f.png

border标签

设置边框粗细。

3304a4cf4c17419bb4257a011313ce5c.png

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bmz6KGM5pe256m6Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16

王梓健WZJ
关注
Web前端开发【新手入门指南】
Fighting1995的博客
08-21 1705
Web前端开发入行门槛低、薪资高，是互联网行业的紧俏岗位之一。目前Web前端开发人员年薪基本都在10万以上，一线城市的薪资会更高，这也吸引了很多人进入Web前端行业。对于完全不了解行业的人来说，他们对Web前端知之甚少。下面小菌就给大家解读一下Web前端开发到底是干什么的，初学Web前端的小伙伴不容错过。
web前端的入门-----基础知识
weixin_72299343的博客
08-18 2329
对于web前端来说，想要去学习或者走上这条路，当然要先去了解清楚这是什么，前提是你要确保，你能够去理解这些东西能学进去，而我将会以css,html,js这些为例子，带你深入了解前端的一些基础知识。首先呢要先去了解他们的构建是什么，一个基础的网页，他一定会会有html,css,js这三种元素，先以html为例，什么是html，（HyperText Markup Language，超文本标记语言）是一种用来结构化网页的标准标记语言。你可以把它想象成一栋大楼的蓝图，它告诉浏览器如何显示网页的内容。
前端开发快速入门
福禄网络研发团队的博客
10-22 1175
一、了解前端技术栈 1. react：前端开发语言(着重学习) React是用于构建用户界面的JavaScript框架，用于构建高效、快速的用户界面。React 中一切都是组件。 虚拟dom 2. webpack：前端打包工具 一个开源的前端打包工具，将你的js、css、img、svg以更优的方式进行解析加载，配置灵活，功能强大 3. ant-design：商户侧前端使用的UI组...
Web前端该怎么编写呢？
VX_BYSJ8341的博客
12-08 1467
建议学习和掌握HTML、CSS和JavaScript的基础知识，并不断学习和实践前端开发的最新技术和趋势。9. SEO优化：为了提高网页在搜索引擎中的排名，需要优化网页的结构、内容和元数据，使用合适的关键词和描述。4. 响应式设计：使用CSS媒体查询和布局技术，使网页能够适应不同设备和屏幕尺寸，如手机、平板、电脑等。8. 调试和优化：使用浏览器的开发者工具进行调试和优化，查找和解决代码错误和性能问题。6. 图片和媒体：使用图片、视频、音频等媒体元素，增加网页的视觉效果和多媒体内容。
【前端开发入门】适合完完全全的小白
Dear_zzz的博客
03-31 265
【前端开发入门】适合完完全全的小白1.前端开发是什么2. 学习前端开发需要做的准备3.学习的内容4.总结 1.前端开发是什么 用官方的定义，就是网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页，用通俗的话来说，就是我们浏览网页看到的内容和页面。前端开发就是如何使用代码来制作网页的内容。我觉得前端开入门是非常容易的，也可以让你找到一份工作，有一份不错的收入。 2. 学习前端开发需要做的准备 电脑系统 —— Windows 10 （64位） 运行环境 —— nodejs Node.j
前端web搭建及常用web页面书写技巧
正月看雪花的博客
11-22 4638
一：静态页面和动态页面的区别 1.静态页面： （1）客户端使用浏览器发送请求，告诉服务器我需要访问哪一个页面，然后服务器根据用户的需要从文件中取出内容， 然后返回给客户端 （2）无法连接数据库， 每次改变内容都要去操作文件。 2.动态页面 （1）还是直接请求， 但是会经过web server判断， 如果是静态资源就直接请求， 如果是动态， 就呀哦动态拼接， 然后再返回。 二：如何搭建静态网站 购买服务->安装jdk和tomcat以及配置好环境变量->把web文件放到指定的文件夹下即可 然后直接
web前端代码编写规范
m0_71225058的博客
02-16 1408
此文讲述了一下web前段的一些书写规范，如有建议请多多提出！
web前端开发入门教程(20211215130803).pdf
11-17
web前端开发入门教程(20211215130803).pdf
WEB前端开发入门简介PPT
11-20
主要介绍了前端是什么，能干什么，与后端的区别，主要学的技术，HTML,CSS,JavaScript等等，以及未来的职业发展状况。
WEB前端开发入门：HTML, CSS, JavaScript与职业前景
"WEB前端开发入门简介PPT" 在当今数字化的世界中，前端开发是构建互联网产品和服务不可或缺的一部分。这份PPT主要针对那些对前端开发感兴趣的新手，它旨在介绍前端开发的基本概念、主要技术栈以及未来的职业发展...
Web前端开发教程
weixin_41135508的博客
05-03 1万+
web前端开发，基于html+css+js,JQuery。
web前端入门教程(非常详细)
qq_41286224的博客
10-27 2万+
初学编程的小伙伴经常会遇到的问题，1.没资源 2.没人带 3.不知道从何开始 ，小编也是从新手期过来的，所以很能理解萌新的难处，现在整理一些以前自己学习的一些资料送给大家，希望对广大初学小伙伴有帮助！这套「web前端入门教程」将多年的编程经验灌输其中，典型的实践派。既适合初学者入门，也适合程序员进阶（学习底层）。 web前端该怎么入门?web前端入门教程(非常详细)给你学习前端的新手几个建议：第一：切记学习前端开发不可以依赖任何人，我做了开发这么久，十年了，见过很多依赖老师的学生，这样的后果就是自己没有解
web前端基础入门教程（非常详细）HTML+CSS+JavaScript
f5465245的博客
10-29 2318
每一个学习前端的人对于前端三剑客《html+css+JavaScript》都不会陌生，可以说这是前端的世界，就没有前端解决不了的，而在前端的世界里就没有javascript实现不了的。 关于JavaScript有一句话：凡是可以用javascript来写的应用，最终都会用javascript，javascript可运行在所有的主要平台上，也可以运行在每一个主流操作的服务器上。现如今我们在网站写任何一个主要功能的时候都需要有懂够用JavaScript写前端的开发人员。 下面我们就来了解下这三门技术都有什么
WEB前端简历模板
热门推荐
小屋博客
12-02 11万+
详细资料             姓名：XXX                     出生年月：XXXX年X月                                               名 族：X 族                政治面貌：XXXX                                                        Q Q
WEB前端代码编写技巧
周秦卿的博客
10-10 4041
每个浏览器都有一些自带的或者共有的默认样式，会造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致，比如 *{margin:0;padding:0}就是一个最简单的css reset重置这些默认样式，使样式表现一致，比如 *{margin:0;padding:0}就是一个最简单的css reset
web前端开发基础入门篇（一）
陈十三的博客
11-18 1万+
本篇将依次介绍HTML、W3C标准、网页的开发工具和浏览工具、客户端应用计术等基础知识。
Vue开发工具使用技巧
最新发布
2509_93946471的博客
11-24 280
打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。
Python全栈开发项目——AI智能聊天机器人
qiao_yue的博客
11-24 787
本项目实现了AI聊天功能，具有语音输入和聊天背景自定义等亮点功能
Vue3的生命周期
分享学习网络的点点滴滴
11-21 135
Vue3生命周期详解：从创建到卸载的全过程 Vue3的生命周期分为四个主要阶段：创建、更新、卸载和错误处理。创建阶段包含setup()、onBeforeMount()和onMounted()；更新阶段有onBeforeUpdate()和onUpdated()；卸载阶段包括onBeforeUnmount()和onUnmounted()。setup()替代了Vue2的初始化阶段，是组合式API的入口。子组件的生命周期会先于父组件执行。错误处理可使用onErrorCaptured()捕获和阻止错误传播。这些钩子函
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值