一.引入
项目研发
例: estore (电子商城)
1.
1.Html基础
1.1. 环境搭建
1) 编辑器环境 轻量级的编辑
sublime(emmet插件)
vscode *
2) 浏览器环境(测试)
firefox
google chrome
opera
safari
ie8+ 兼容性
1.2. 编写hello world网页
编写代码 -> 运行测试 -> 交付(部署)【网站】
1) 部署在tomcat中( 动态服务器- 慢)
tomcat/webapps/hello.html
2) 部署在静态服务器(apache/nginx)
阿里云(ubuntu16.04)47.112.126.92
jdk
mysql
apache /var/www/html
tomcat
编写代码 -> 编译代码 ->测试 -> 打包 (jar/war)
3. html结构
html是一种超文本标记语言
什么是超级文本?(文本,超级链接,图片,视频,音频…特点:自带样式,自带效果) doctype声明 :
```yaml
HTML5:
<!DOCTYPE html>
HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html主体结构 >
>
<!--源信息 -->
>
>
<!--可以显示在网页中的内容-->
注:
xml 标签是可以自定义的
html 所有的标签都是内置的
4.html 语法
html由各种元素组成,一个元素通常包含开始标签,结束标签,内容 ;在开始标签中可以添加属性
>
>hello world> >
5.html属性
a 标签:
://www.w3school.com.cn">W3School>
href :用于指定超链接目标的 URL。
绝对 URL - 指向另一个站点(比如 href="http://www.example.com/index.htm")
相对 URL - 指向站点内的某个文件(href="index.htm")
锚 URL - 指向页面中的锚(href="#top")
注:1.如果不使用 href 属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type 属性。
2.被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target 属性)。
3.> 标签中必须提供 href 属性或 name 属性。
target:规定在何处打开链接文档。
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
img 标签-----向网页中以链接的形式嵌入一幅图像,没有结束标签.
例:- 郁金香" />
src="该图像的文件的的绝对路径或相对路径"
width:宽 可用 px %
height:高
html那些事
Java 编译型语言 : .java --编译----> .class —运行----> jvm
隶属于sun/oracle公司的,有具体的公司及团队维护,所有的标准oracle说了算,jvm也是oracle开发的,所以,当Java需要进行语法升级的时候 ,jvm也会随之升级(解释java代码)从而达到一个良好的效果升级.
springboot写完代码之后如何部署
1) 打包成为war,直接抛在tomcat/webapps,war就会自动解压
2) 打包成为jar,直接运行jar(内置了tomcat)
html 解释型语言 : .html —运行—> 浏览器
当 网页编程标准,w3c 要将h4标准 升级到h5时,只是语法标准的升级,浏览器对于新标准的解析可能迟迟达不到要求,从而导致更新标准的复杂性.
>li 【容器】列表
ol>li 【容器】列表
dl>dd,dt 【容器】列
>
div 【容器】无意义的块元素(无招胜有招)
h1~h6 标题
p 段落
ul
span 无意义的行内元素
a 超链接 href target
img 图片 src alt 当图片找不到的时候的文本替代
strong b em i sub sup d ...
<span>hello</span>
<a href="">百度一下</a>
>
3).将css独立写在外部的css文件中,并且通过link导入进来,适用于企业级开发
<!DOCTYPE html>
>
>
-8">
-width, initial-scale=1.0">
>cssy引入 >
>
>
>
hello world!
>
>
hello css!
>
>
>
6.4.css语法
selector {
/*规则*/
color:#ffffff;
background-color:pink;
}
6.5. css选择器 (jQuery选择器)
1) 核心选择器
用法:选择较大范围
1. 标签(元素)选择器
div {}
h1 {}
2. id选择器
#one {}
>one>
>two>
3. class选择器
.first {}
>one>
>two>
>one>
>two>
>p
>one
>>two
> ::after