大家可以关注一下我的博客 我的博客所有随笔都是我从基础开始学习java的所有知识点
机器语言--》02020-2二进制码---》汇编语言---》C语言---》Java/Python... ---> javascript/html/css --->未来。。。语义化编程
云服务 -----》非常多的客户端访问
服务器（一个服务）JAVA/PYTHON/PHP/NODE(Js) ----Html/css/js(服务器到客户端的语言) 非常多的客户端（浏览器/手机App/智能电视/智能手表/VR眼镜/AR眼镜）访问
多台服务器（一个服务） ---- 非常多的客户端访问
分布式服务任何问题，其实都有解决方案。学会使用开源框架就ok
HTML/CSS/JS/JQUERY/VUE(框架，前后端分离，可以代替jsp)
Servlet/jsp/正则
项目
HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的
WEB开发工具：hbuilder/webstorm/vs code/eclpise
最简单的HTML
| <!DOCTYPE html> ---->告诉浏览器，当前HTML语言使用的是第5个版本，2014年发布 <html> --->根标签，一般有2个标签，head，body标签 <head> --->head标签里的内容一般不直接现实在页面上，用来说明和描述网页文档 <meta charset="utf-8" /> --->申明文档使用的是UTF-8的编码 <title></title> ---->说明网页标题 </head> <body> --->body标签放置真正显示的内容
</body> </html> |
HTML常用标签
网页内容的标题标签
H1,H2,H3...H6，都是网页内容的标题标题
| <h1>标题1</h1> <h2>标题2</h2> <h6>标题6</h6> |
网页注释标签
| <!--标题标签--> |
段落标签
| <p>超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p> |
图片标签
| <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558591161852&di=1bd06fab6bc654369456cf33bff60f07&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201410%2F21%2F20141021205157_j2TL2.thumb.700_0.jpeg"/> |
最常用容器标签
| <!--最常用的容器标签,因为块级标签，没有其他多余的样式--> <div>hello</div> |
链接标签
跳转到淘宝
| <a href="http://www.taobao.com">淘宝</a> |
跳转当前页面的某个地方
| <a href="#跳转到相对应的元素的ID">主要作品</a> |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>101三美_百度百科</title> </head> <body> <h2>火箭少女101</h2> <p>火箭少女101是由哇唧唧哇娱乐、海南周天娱乐有限公司于2018年推出的中国内地女子演唱组合，由孟美岐、吴宣仪、杨超越、段奥娟、Yamy、赖美云、张紫宁、杨芸晴、李紫婷、傅菁、徐梦洁十一位成员组成</p> <h3>代表作品</h3> <a href="https://music.163.com/#/song?id=1294924781&autoplay=true&market=baiduhd">卡路里</a> <h1>火箭三美</h1> <div id="目录"> <h1>目录</h1> <p><a href="#杨超越">杨超越</a></p> <p><a href="#吴宣仪">吴宣仪</a></p> <p><a href="#孟美岐">孟美岐</a></p> </div> <div id="杨超越"> <h3>杨超越</h3> <p>杨超越，1998年7月31日出生于江苏省盐城市，中国内地流行乐女歌手、影视演员，女子演唱组合CH2、火箭少女101成员。</p> <p>2017年，加入女子演唱组合CH2，从而正式出道，并签约了多家游戏平台，为高校电竞比赛做内容推广 [1] ；同年，随CH2相继推出了《启航》、《听雪恋歌》 [2-3] 等单曲。2018年，参加腾讯视频女团青春成长节目《创造101》 [4] ，最终获得第3名，并加入女子演唱组合火箭少女101 [5] ；8月18日，随火箭少女101推出组合首张EP专辑《撞》 [6] ；9月23日，推出首支个人单曲《跟着我一起》 [7] ；11月15日，推出第2支个人单曲《冲鸭冲鸭》 [8] ；11月27日，推出第3支个人单曲《招财进宝》 [9] ；12月15日，获得“影响中国”年度人物荣誉盛典年度演艺人物奖 [10] 。2019年，她被评选为LikeTCCAsia亚太区最美100张面孔第3位 [11] 、中国区最美100张面孔第1位 [12] 。</p> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558621721566&di=f975629bb83437bd7fa18f0555644fab&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F283%2Fw1252h631%2F20190106%2FSCTQ-hrfcctn2651707.jpg"></a> </div> <div id="吴宣仪"> <h3>吴宣仪</h3> <p>吴宣仪，1995年1月26日出生于海南省海口市，中国内地流行乐女歌手、演员，女子演唱组合宇宙少女、火箭少女101成员。 2016年2月，吴宣仪随宇宙少女发行首张迷你专辑《WOULD YOU LIKE？》，正式出道 [1] ；5月，随宇宙少女获得亚洲强音盛典最佳新人奖 [2] 。2017年6月，随宇宙少女推出首张正规专辑《HAPPY MOMENT》 [3] ；9月，随宇宙少女获得第1届SORIBADA最佳音乐大奖新韩流Rising Hot Star奖 [4] ；同年，主演爱情电影《初恋的滋味》 [5] 。2018年4月起，参加女团青春成长节目《创造101》，获得第二名，成功加入火箭少女101组合 [6] ；8月，其获得了亚洲新歌榜最受欢迎潜力女歌手 [7] 。2019年1月，其获得了中国文娱金数据2018年度网络综艺综合影响力女艺人奖 [8]</p> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558621372987&di=da157b183a45c1d4b41d02bef4982ff3&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F07%2F20180707194954_eseqx.jpg"></a> </div> <div id="孟美岐"> <h3>孟美岐</h3> <p>孟美岐，1998年10月15日出生于河南省洛阳市，中国内地流行乐女歌手、演员，女子演唱组合火箭少女101、宇宙少女成员。 2016年2月25日，随宇宙少女组合正式出道 [1] ；12月，在爱情电影《舞出我人生之舞所不能》中饰演小飞 [2] 。2017年6月7日，随组合推出专辑《HAPPY MOMENT》 [3] ；同年，在爱情电影《蓝色生死恋》中饰演欣爱 [4] 。 2018年4月，参加腾讯视频女团青春成长节目《创造101》 [5] ，以第一名的成绩C位出道，成为组合火箭少女101成员 [6] ；7月26日，随火箭少女101发行电影《西虹市首富》的插曲《卡路里》 [7] ；8月2日，入选福布斯中国“30位30岁以下精英”音乐榜榜单 [8] ；10月17日，在古装玄幻电影《诛仙I》中饰演碧瑶 [9] ；2019年1月15日，发布《流浪地球》推广曲《有种》 [10] 。</p> <img src="http://b-ssl.duitang.com/uploads/item/201804/30/20180430194814_dgujb.jpg"></a> </div> </body> </html>
列表
无序列表
| <!--无序列表--> <ul> <li>习大大的长征脚步，从未停歇</li> <li>传承红色基因 习大大强调四个“不要忘”</li> <li>"小"降准"大"意义 支持实体经济向好。效力显著</li> </ul>
|
有序列表
| <!--有序列表--> <ol> <li>习大大的长征脚步，从未停歇</li> <li>传承红色基因 习大大强调四个“不要忘”</li> <li>"小"降准"大"意义 支持实体经济向好。效力显著</li> </ol> |
之所以有区别，是因为浏览器给到了不一样的默认样式
表单标签
form表单标签
action:将表单数据提交给什么服务器（服务器的地址）
method:get/post
get和post区别：get会将表单提交的内容直接放在请求的URL地址里，效率高，不安全。post不会将表单数据显示到url上，会放置在请求的body上。
搜索/正常的请求就会使用get
登陆/注册等比较隐私和安全的内容时候，就需要用到POST,上传文件的时候也会用到post
input标签有多种类型
type=》
text（文本输入）
password(密码)
radio:单选框，注意单选框如果选择的内容是同一项内容，那么多个输入input标签的name值必须一致。
checkbox:复选框，选择的内容是同一项内容，那么多个输入input标签的name值必须一致
color:输入颜色（少用）
date:时间标签（少用）
select>option
textarea：长文本输入标签
text-decoration: none 去掉字体下划线
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="get"> 用户名： <input type="text" name="usr" id="" value="" /> 密码 <input type="password" name="pa" id="pa" value="" /> <input type="submit" value="注册" /> <h3>性别选择</h3> 男 <input type="radio" name="gender" id="gender" value="" /> 女 <input type="radio" name="gender" id="gender" value="" /> <h3>请输入你喜欢的明星</h3> 杨超越 <input type="checkbox" name="stars" id="stars" value="" /> 吴宣仪 <input type="checkbox" name="stars" id="stars" value="" /> 孟美岐 <input type="checkbox" name="stars" id="stars" value="" /> <h3>请输入你喜欢的颜色</h3> <input type="color" name="color" id="" value="" /> <h3>请输入你的生日</h3> <input type="date" name="birthday" id="birthday" value="" /> <h1>请自我介绍</h1> <textarea name="wo" rows="20" cols="150"></textarea> <h3>请选择你喜欢的成市</h3> <select name="city"> <option value="">深圳</option> <option value="">广州</option> </select> </form> </body> </html>
css
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS使用
1、style属性上直接使用
| <h1 style="color:purple;">今晚吃什么？</h1> <h1 style="color: greenyellow;">吃鸡</h1> |
2、Style标签上使用
语法：
| <style type="text/css"> 选择器{样式的内容} </style> |
CSS常用选择选择器：
元素选择器：元素名称
Class选择器：.+类名
ID选择器：#+id名称
3、Link标签引入css文件使用
| <link rel="stylesheet" type="text/css" href="css/style.css"/> |
优先级情况
元素内style属性的优先级>id>class>元素>默认的浏览器样式>继承的样式
越复杂的选择器优先级越高
备注：!Important,将样式的优先级提高到最高
#w{color: yellow !important ;}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WAN</title> <link rel="stylesheet" type="text/css" href="../css/new_file.css"/> <style type="text/css"> .bao{color: blue;} h1{font-size: 100px;} #w{color: green;} h1#w{color: brown;} </style> </head> <body> <h1 style="color: purple;">今晚干什么</h1> <h1 style="color: red ;">今晚感看见的</h1> <h1 class="bao">ffewewvvwewffef</h1> <h1 class="bao">fewwegwegew</h1> <h1 id="w">efqfqf</h1> </body> </html>
文字
Color:文字颜色
Font-size:文字的大小
font-family:文字字体，尽量使用黑体，微软雅黑，宋体，普通用户都有的字体
Font-weight:字体粗细,100-900,具体的粗细根据字体文件本身有什么粗细的字体来决定
Text-align:文字的排版，left,center,right
Line-height:行高，行与行之间的高度
Text-shadow:文字阴影
| text-shadow: 0 0 10px orange,0 0 20px yellow; Text-shadow:水平偏移值 垂直偏移值 阴影的模糊度 阴影的颜色，设置多个阴影用逗号隔开 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>101三美_百度百科</title> <style type="text/css"> h3{color: fuchsia; font-size: 100px;/*设置字体大小*/ font-family: "微软雅黑";/*设置什么字体*/ font-weight: 900;/*设置字体的粗细，100-900*/ text-align: center;/*设置字体靠的方向*/ text-shadow: 0 0 20px orchid;/*水平偏移值 垂直偏移值 阴影的模糊度 阴影的颜色，设置多个阴影用逗号隔开*/ } p{ line-height: 80px;/*设置行高*/ font-size: 60px; } a{ font-size:80px ; } h1{ font-size: 100px; } h2{ font-size: 80px; } </style> </head> <body> <h2 style="color: aqua;">火箭少女101</h2> <p>火箭少女101是由哇唧唧哇娱乐、海南周天娱乐有限公司于2018年推出的中国内地女子演唱组合，由孟美岐、吴宣仪、杨超越、段奥娟、Yamy、赖美云、张紫宁、杨芸晴、李紫婷、傅菁、徐梦洁十一位成员组成</p> <h3>代表作品</h3> <a href="https://music.163.com/#/song?id=1294924781&autoplay=true&market=baiduhd">卡路里</a> <h1 style="color: cyan;">火箭三美</h1> <div id="目录"> <p><a href="#杨超越">杨超越</a></p> <p><a href="#吴宣仪">吴宣仪</a></p> <p><a href="#孟美岐">孟美岐</a></p> </div> <div id="杨超越"> <h3>杨超越</h3> <p>杨超越，1998年7月31日出生于江苏省盐城市，中国内地流行乐女歌手、影视演员，女子演唱组合CH2、火箭少女101成员。</p> <p>2017年，加入女子演唱组合CH2，从而正式出道，并签约了多家游戏平台，为高校电竞比赛做内容推广 [1] ；同年，随CH2相继推出了《启航》、《听雪恋歌》 [2-3] 等单曲。2018年，参加腾讯视频女团青春成长节目《创造101》 [4] ，最终获得第3名，并加入女子演唱组合火箭少女101 [5] ；8月18日，随火箭少女101推出组合首张EP专辑《撞》 [6] ；9月23日，推出首支个人单曲《跟着我一起》 [7] ；11月15日，推出第2支个人单曲《冲鸭冲鸭》 [8] ；11月27日，推出第3支个人单曲《招财进宝》 [9] ；12月15日，获得“影响中国”年度人物荣誉盛典年度演艺人物奖 [10] 。2019年，她被评选为LikeTCCAsia亚太区最美100张面孔第3位 [11] 、中国区最美100张面孔第1位 [12] 。</p> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558621721566&di=f975629bb83437bd7fa18f0555644fab&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F283%2Fw1252h631%2F20190106%2FSCTQ-hrfcctn2651707.jpg"></a> </div> <div id="吴宣仪"> <h3>吴宣仪</h3> <p>吴宣仪，1995年1月26日出生于海南省海口市，中国内地流行乐女歌手、演员，女子演唱组合宇宙少女、火箭少女101成员。 2016年2月，吴宣仪随宇宙少女发行首张迷你专辑《WOULD YOU LIKE？》，正式出道 [1] ；5月，随宇宙少女获得亚洲强音盛典最佳新人奖 [2] 。2017年6月，随宇宙少女推出首张正规专辑《HAPPY MOMENT》 [3] ；9月，随宇宙少女获得第1届SORIBADA最佳音乐大奖新韩流Rising Hot Star奖 [4] ；同年，主演爱情电影《初恋的滋味》 [5] 。2018年4月起，参加女团青春成长节目《创造101》，获得第二名，成功加入火箭少女101组合 [6] ；8月，其获得了亚洲新歌榜最受欢迎潜力女歌手 [7] 。2019年1月，其获得了中国文娱金数据2018年度网络综艺综合影响力女艺人奖 [8]</p> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558621372987&di=da157b183a45c1d4b41d02bef4982ff3&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F07%2F20180707194954_eseqx.jpg"></a> </div> <div id="孟美岐"> <h3>孟美岐</h3> <p>孟美岐，1998年10月15日出生于河南省洛阳市，中国内地流行乐女歌手、演员，女子演唱组合火箭少女101、宇宙少女成员。 2016年2月25日，随宇宙少女组合正式出道 [1] ；12月，在爱情电影《舞出我人生之舞所不能》中饰演小飞 [2] 。2017年6月7日，随组合推出专辑《HAPPY MOMENT》 [3] ；同年，在爱情电影《蓝色生死恋》中饰演欣爱 [4] 。 2018年4月，参加腾讯视频女团青春成长节目《创造101》 [5] ，以第一名的成绩C位出道，成为组合火箭少女101成员 [6] ；7月26日，随火箭少女101发行电影《西虹市首富》的插曲《卡路里》 [7] ；8月2日，入选福布斯中国“30位30岁以下精英”音乐榜榜单 [8] ；10月17日，在古装玄幻电影《诛仙I》中饰演碧瑶 [9] ；2019年1月15日，发布《流浪地球》推广曲《有种》 [10] 。</p> <img src="http://b-ssl.duitang.com/uploads/item/201804/30/20180430194814_dgujb.jpg"></a> </div> </body> </html>
容器盒子
Box-size:设置盒子模型
Width:宽度
Height:高度
Padding:内边距
Margin:外边距
Border:边框
Box-shadow:盒子阴影
Display:设置盒子是块级元素还是行级元素还是弹性元素
Background:设置元素的背景，背景图片，背景颜色