- 传统路线
- HTML、CSS、JS
- Ajax
- JQuery
- MySQL
- JDBC
- Servlet
- JSP
- EL&JSTL
- CookieSession
- Filter
- Servlet案例
- Mybatis
- Spring
- SpringMVC
- SpringBoot
- 全新路线
- HTM、CSS、JS
- Ajax、Axios
- Vue、Element
- 前端工程化 vue脚手架
- Maven
- SpringBoot基础 基于SpringBoot进行讲解Spring的IOC,DI等[ spring 官方推荐]
- SpringBootSpringMVC基础
- MySQL:基于产品原型及需求分析,设计数据库表
- JDBC Mybatis
- Web案例:基于SpringBoot整合SSM,根据页面原型、需求、接口文档编写接口。
- 会话跟踪技术:Cookie、Session、令牌技术(JWT)
- FilterInterceptor: 令牌的统一拦截校验
- AOP
- SpringBoot原理
Web标准
Web标准也称为网页标准,由一系列标准组成,大部分由W3C (World Wide Web Consortium,万维网联盟)负责制定。
三个组成部分:
HTML:负责网页的结构(页面元素和内容)。
CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)
javaScript:负责网页的行为(交互效果)
HTML(Hyper Text Markup Language):超文本标记语言。
- 超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
- 标记语言:由标签构成的语言
HTML标签都是预定义好的。例如:使用<a> 展示超链接,使用<img> 展示图片,<video>展示视频。
HTML代码直接在浏览器中运行,HTML标签由浏览器解析。
css(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。

新浪新闻-标题排版


控制字体的颜色,需要css样式控制
- CSS引入方式
行内样式:写在标签的style属性中(不推荐)

内嵌样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中)

外联样式:写在一个单独的.css文件中(需要通过link标签在网页中引入)


CSS选择器

总结

标签:
- <a href="..." target="..."> 央视网 </a>
属性:
- href :指定资源访问的url
- target:指定在何处打开资源链接
- _self:默认值,在当前页面打开
- _bland:在空白页面打开
新浪新闻-正文
视频标签:<video>
- src: 规定视频的url
- controls:显示播放控件
- width:播放器的宽度
- height:播放器的高度
音频标签:<audio>
- src:规定音频的url
- control:显示播放控件
段落标签:<p>
文本加粗标签 <b> <strong>

新浪新闻-页面布局
盒子:页面中所有的元素(标签),都可以看作是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局。
盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、边外距区域(margin)


表格标签

表单标签


表单标签-表单项

