第一章:HTML

第一章:HTML

  • 1.web开发-介绍
  • 1.web前端开发-课程安排
  • 3.web前端开发-HTML-快速入门
  • 4.VScode安装
  • 5.新浪新闻-实现标题-排版
  • 6.新浪新闻-实现标题-样式1
  • 7.新浪新闻-实现标题-样式2
  • 8.新浪新闻-实现标题-超链接
  • 9.新浪新闻-实现正文-排版
  • 10.新浪新闻-实现正文-布局
  • 11.表格标签
  • 12.表单标签
  • 13.表单项标签

1.web开发-介绍

第一章:HTML_第1张图片
第一章:HTML_第2张图片
第一章:HTML_第3张图片
第一章:HTML_第4张图片
Nginx为前端的服务器
Maven为Java项目的构建工具
Mybatis是通过Java程序操作数据库的技术
第一章:HTML_第5张图片

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

第一章:HTML_第6张图片
第一章:HTML_第7张图片
AJAX,Axios是异步交互技术
ElementUI是Vue的桌面端组建库
Nginx是前端项目的部署服务器、
第一章:HTML_第8张图片

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

第一章:HTML_第9张图片
第一章:HTML_第10张图片
第一章:HTML_第11张图片
第一章:HTML_第12张图片

4.VScode安装

第一章:HTML_第13张图片
第一章:HTML_第14张图片
在这里插入图片描述

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

中文插件
第一章:HTML_第15张图片
第一章:HTML_第16张图片
拼写检查器
第一章:HTML_第17张图片
第一章:HTML_第18张图片
第一章:HTML_第19张图片
第一章:HTML_第20张图片
下面的设置可以改变VScode的颜色字体
第一章:HTML_第21张图片
第一章:HTML_第22张图片
第一章:HTML_第23张图片

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

第一章:HTML_第24张图片
第一章:HTML_第25张图片
第一章:HTML_第26张图片
第一章:HTML_第27张图片
第一章:HTML_第28张图片
第一章:HTML_第29张图片
第一章:HTML_第30张图片
第一章:HTML_第31张图片

输入一个!可以一键生成html页面
第一章:HTML_第32张图片

第一章:HTML_第33张图片
第一章:HTML_第34张图片
我们将一些资源图片放入其中
但不能在VScode中直接放入,需要在文件夹中放入
第一章:HTML_第35张图片
第一章:HTML_第36张图片
如果将这个html文件移动到快速入门下面,则(记得点击ctrl+s保存)
第一章:HTML_第37张图片
第一章:HTML_第38张图片
第一章:HTML_第39张图片
第一章:HTML_第40张图片

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

标题字体的颜色是灰黑色的,不是纯黑色的,下面我们改变一下标题的字体颜色
第一章:HTML_第41张图片
第一章:HTML_第42张图片
第一章:HTML_第43张图片
第一章:HTML_第44张图片
第一章:HTML_第45张图片
第一章:HTML_第46张图片
第一章:HTML_第47张图片

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

第一章:HTML_第48张图片

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

第一章:HTML_第49张图片
第一章:HTML_第50张图片

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

第一章:HTML_第51张图片
第一章:HTML_第52张图片
第一章:HTML_第53张图片
text-align用来设置对齐方式
在这里插入图片描述
第一章:HTML_第54张图片

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

第一章:HTML_第55张图片
第一章:HTML_第56张图片
第一章:HTML_第57张图片
第一章:HTML_第58张图片
如果四个值都一样
可以简写
第一章:HTML_第59张图片
第一章:HTML_第60张图片
第一章:HTML_第61张图片
第一章:HTML_第62张图片

我们先设置百分比,这里设置为百分之65,
这表示div这个区域占整个body的百分之65
第一章:HTML_第63张图片
第一章:HTML_第64张图片

下一步我们就要将整个内容居中展示
第一章:HTML_第65张图片
第一章:HTML_第66张图片
还有一种简化的写法
第一章:HTML_第67张图片
0表示上面下面都是0,auto表示让浏览器自动计算
自动计算的结果是左边右边各一半
第一章:HTML_第68张图片
第一章:HTML_第69张图片
第一章:HTML_第70张图片
第一章:HTML_第71张图片

11.表格标签

第一章:HTML_第72张图片
第一章:HTML_第73张图片
第一章:HTML_第74张图片

12.表单标签

第一章:HTML_第75张图片
第一章:HTML_第76张图片
第一章:HTML_第77张图片

13.表单项标签

第一章:HTML_第78张图片
第一章:HTML_第79张图片
第一章:HTML_第80张图片

你可能感兴趣的:(JAVAWEB2,html,前端)