第一章：HTML

已于 2024-01-17 17:18:22 修改
阅读量612 收藏 10
点赞数 9
分类专栏： JAVAWEB2 文章标签： html 前端
于 2024-01-17 17:14:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72232218/article/details/135654864
版权
本文介绍了HTML基础知识，包括快速入门、VScode的安装与插件使用，以及如何实现在新浪新闻中的标题排版、样式、超链接、正文布局、表格、表单和表单项。同时涉及前后端技术如Nginx、Maven和Mybatis的应用。
摘要由CSDN通过智能技术生成

第一章：HTML

1.web开发-介绍

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
Nginx为前端的服务器
Maven为Java项目的构建工具
Mybatis是通过Java程序操作数据库的技术
在这里插入图片描述

1.web前端开发-课程安排

在这里插入图片描述
在这里插入图片描述
AJAX，Axios是异步交互技术
ElementUI是Vue的桌面端组建库
Nginx是前端项目的部署服务器、
在这里插入图片描述

3.web前端开发-HTML-快速入门

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.VScode安装

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

安装完vscode后，我们就安装相关插件

中文插件
在这里插入图片描述
在这里插入图片描述
拼写检查器
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下面的设置可以改变VScode的颜色字体
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.新浪新闻-实现标题-排版

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

输入一个！可以一键生成html页面
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
我们将一些资源图片放入其中
但不能在VScode中直接放入，需要在文件夹中放入
在这里插入图片描述
在这里插入图片描述
如果将这个html文件移动到快速入门下面，则（记得点击ctrl+s保存）
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.新浪新闻-实现标题-样式1

标题字体的颜色是灰黑色的，不是纯黑色的，下面我们改变一下标题的字体颜色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.新浪新闻-实现标题-样式2

在这里插入图片描述

8.新浪新闻-实现标题-超链接

在这里插入图片描述
在这里插入图片描述

9.新浪新闻-实现正文-排版

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
text-align用来设置对齐方式
在这里插入图片描述
在这里插入图片描述

10.新浪新闻-实现正文-布局

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如果四个值都一样
可以简写
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

我们先设置百分比，这里设置为百分之65，
这表示div这个区域占整个body的百分之65
在这里插入图片描述
在这里插入图片描述

下一步我们就要将整个内容居中展示
在这里插入图片描述
在这里插入图片描述
还有一种简化的写法
在这里插入图片描述
0表示上面下面都是0，auto表示让浏览器自动计算
自动计算的结果是左边右边各一半
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

11.表格标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

12.表单标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

13.表单项标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

幸运小新
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值