HTML与CSS学习基础总结
先了解学习的知识点有哪些：
HTML
HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。
CSS
CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。
可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
JS
JS 全称（javascript）中文是java脚本的意思 。
它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。
但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。
为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））
其次js的作用“增强页面的趣味性，响应用户的行为”； 特点（弱解释脚本语言，可以被浏览器直接解析 不需要编译）
js的输出，有两种：
1.控制台输出（console.log()）不会对文档造成影响
2.文档中输出 document.write(“xxxx”) 会对文档造成影响
简单了解一下javaEE的基础知识
什么是JAVAEE?
主要是面向企业级开发(基础的概念，实际上远远不止如此)，对于我们来说
主要还是从事B/S架构的开发。
软件结构的分类：
C/S架构的开发(客户端到服务器的开发):
例如:吃鸡、QQ、LOL(有实体的应用客户端)
特点:
1.有客户端、必须要安装客户端程序
2.要进行客户端的升级，除了服务器进行代码的更新，客户端也必须
重新安装或者在线进行升级。
B/S架构的开发(浏览器到服务器的开发):
例如:淘宝、天猫、腾讯网、网页游戏
特点:
1.不需要安装任何的实体客户端，只需要一个浏览器(内核)即可
2.要进行客户端升级，只需要服务器进行代码更新，客户端不需要进行任何操作
其实，现在太部分的企业采用都是B/S架构(并不是说C/S比较少)
两者来说，他们在各自的领域应该是怎么样的?
C/S:消耗的是你的系统资源(CPU/GPU/内存)，所以运行的速度会比较流畅 而且对于图层渲染来说，B/S架构是永远达不到C/S架构的地步，适合做有动画效果 、启动速度快等等软件 B/S:无法直接获取你的系统资源，所有的系统资源的调配其实是由浏览器来做的 但是，浏览器本质是上也是基于C/S，B/S不适合特大型的实体软件(游戏开发)
简单了解网页的源来！
1.什么是前端？
1.前端其实就是将设计师设计好的效果图，通过网页的形式展现给客户
2.什么是网页?
2.网页是由图片、文字、链接、视频、音乐、输入框、表单等组成
3.WEB标准
HTML: 结构标准 相当于建房子的地基和框架,相当于人的身体
CSS: 表现标准 相当于房子的装修，相当于妹子化妆
JS: 行为标准 相当于房子里面只智能家居，相当于妹子跳舞
4.浏览器
浏览器的内核(渲染引擎):也就是浏览器所采用的引擎，这个渲染引擎决定了你的网页的
显示方式以及排版布局等等相关信息(遵循标准)
IE/谷歌/欧朋/火狐/苹果(这样就会造成浏览器兼容的问题)
5.html
xhtml1.0 W3C推荐的版本 2000年发布
xhtml2.0 因为改变太大，最终胎死腹中
HTML4.0 W3C推荐的版本1997年12月
HTML5 2004年提出，2006年开始火爆，而且这个版本跟之前所有的版本都不同，改变太大
而且是一个完全新的团队在做(火爆的主要原因还是因为移动端)。
HTML:超 文本 标记 语言
文本:说明HTML是由文本组成
超:说明HTML是由超链接组成
标记语言:说明HTML是使用标记进行组合的(解释性语言，由浏览器进行解释执行)
6.HTML怎么写？
标准结构:
> <!doctype html> //文档声明(告诉浏览器以什么标准来执行下面的代码)
>
> <html> // HTML的根标签 所有的HTML都必须写在根标签里面
> <head></head> //HTML的头部标签,里面的内容不显示在浏览器主体，一般用于设置、导入等相关文件
> <body></body>// HTML的主体标签，里面的所有内容会直接的显示在浏览器
> </html>
7.HTML的标签分类:
单标签:<!doctype html> <br/> <img/> 双标签:<head></head> <body></body> 可单可双:<a/>
包含关系:<head><title>这个代码贼棒棒</title></head>
并列关系:<head></head><body></body>
8.HTML的开发工具:
1.记事本(推荐使用)
2.DW(,给设计师用的 很老)
3.sublime(专业级开发，插件式安装 缺什么补什么吗，很好用)
4.webstorm(很牛逼，界面非常好看 但是收费，而且太智能)
5.Hbuilder(你们必须得支持，国产的，而且是Java写的 非常适合H5的开发，用着很舒服)
9.HTML的基础标签
9.1 文字标签
文字加粗:
文字斜体:
下划线:
删除线:
注意:上面多个实现方式，在xhtml1.0版本当中，明确推荐使用后者
因为后者是语义化标签，针对浏览器来说，更加喜爱后者。
9.2 功能标签
换行:<br/>
水平线:<hr/>
9.3 标题标签
<h1> ~ <h6>
h6以下的字体均为默认字体，h系列的标签,具备加粗和换行的功能
9.4 段落标签
<p></p>
段落标签,在每一个段落都是单独显示，除了进行分段，他还是一个容器(使用频率非常大)
图像标签:
<img src="图像的路径"
alt="当图片无法加载所给予用户的文字提示"
title="鼠标悬浮至图片所给予的文字提示"
width="设置图片的宽度(可以是像素也可以是百分比)"
height="设置图片的高度(可以是像素也可以是百分比)"
/>
超链接标签:
点击我到百度
打开方式:
_blank:新开窗口
_self:默认窗口
注意:
如果需要访问的是一个具体路径，你直接写路径就可以了
如果需要访问的是网络上的资源，则需要写上资源的协议名(http://www.baidu.com / ftp://172.18.33.10)
同时，还可以下载指定的压缩文件
列表:
无序列表:
<!-- ul是对浏览器声明，他的子项是无序列表
type="disc" 默认
type="square" 实心方块
type="circle" 空心圆
注意:一般情况下，我们不会去设置列表项的显示图案，只会尽可能的干掉他
-->
<ul type="circle">
<!--li是这个无序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>赵丽颖</li>
</ul>
有序列表:
<!-- ol是对浏览器声明，他的子项是有序列表
type="2" 默认
type="A/a" 使用字母
type="I/i" 使用罗马字符
注意:一般情况下，我们不会去设置列表项的显示图案，只会尽可能的干掉他
-->
<ol type="6-15">
<!--li是这个有序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
</ol>
定义列表:
<dl>
<!--声明为列表的标题-->
<dt>最爱的</dt>
<!--声明为这个标题下面的内容-->
<dd>苏绪</dd>
<dd>阿香</dd>
<dt>阿香的</dt>
<dd>苏绪</dd>
<dd>阿香</dd>
</dl>
实例练习:
我的电脑文件
- 我的电脑
- 本地磁盘C
- 我的电影
- 我的香格里拉
- 本地磁盘D
- 我的资料
- 我的全家福
</li> </ul> - 本地磁盘C
表格:
<!--说明这是一个表格的结构-->
<table>
<!--一个tr即代表表格的一行-->
<tr align="center" bgcolor="fuchsia">
<!--一个td即代表这个行里面的一个单元格-->
<td bgcolor="aqua">香格里拉</td>
</tr>
</table>
表格的边框:border="1"
表格的宽度:width="300px"
表格的高度:height="100px"
单元格与单元格之间的间距:cellspacing="0px"
单元格内容与单元格内间距:cellpadding="10px"
水平对齐的方式:align="center"(左/中/右)[如果是table设置，则设置的是表格的对齐的方式]
设置背景颜色:bgcolor="fuchsia"
设置边框的颜色:bordercolor="red"
合并同一个行上的单元格:colspan="2"
合并同一个列上的单元格:rowspan="2"
表格语义化:
表格语义化写法和普通表格没有任何区别，只不过表格语义化有益于搜索引擎的摘取
网页的常用设置:
<!--设置网页关键字-->
<meta name="keywords" content="胡歌,最有涵养的明星,比较崇拜的之一,枪支迷药" />
<!--设置网页描述-->
<meta name="description" content="阿香何时离开的" />
<!--设置网页的作者-->
<meta name="author" content="香格里拉" />
<!--设置网页的字符集编码-->
<meta charset="utf-8" />
<!--网页重定向-->
<meta http-equiv="refresh" content="5,http://www.baidu.com" />
表单:
表单的作用:负责数据采集
表单主要分为：表单控件、提示信息、表单域
表单控件:
包含了具体的表单功能，比如按钮、输入框、单选框、复选框、密码框、下拉框等等
提示信息:
一个完整的表单应该包含对于用户的友好提示，或者一些能够对事件进行解释说明的文字
表单域:
其实就相当于一个容器，这个容器包含了所有的控件和提示信息，可以通过定义相关控件
来处理不同的信息，也可以将这些信息发送到服务器后台当中，如果不定义表单域，也就
意味着你这里输入的所有信息是无法发送到服务端。
表单怎么写?
表单域:
> <form action="login.do" name="login" method="get/post">
> </form>
action:用于提交表单信息到服务端的某个(脚本)程序 name:你这个表单域的名字，主要用户后端进行获取 前端并没有多大用处 method：你这个表单的提交方式，默认参数为get get:所有的数据以参数进行提交，所提交的参数会直接显示在你的url(如果是敏感数据或者大容量数据，一般不建议使用get进行提交) post:适合敏感数据和大容量数据的提交，他提交的方式为实体参数，url并不会直接显示
表单控件:
<!--文本框 readonly-->
账号:<input type="text" maxlength="6" name="username" value="请输入你的账号"/>
<!--密码框-->
密码:<input type="password"/>
<!--密码框-->
性别:<input type="radio" name="y"/>男<input type="radio" name="y" />女
<!--复选框-->
爱好:<input type="checkbox" name="kl"/>喝可乐<input type="checkbox" name="lm"/>撩妹<input type="checkbox"/>爱林月如<input type="checkbox"/>学习JAVA
<!--下拉框-->
家庭住址:<select>
<option value="hn">湖南</option>
<option selected>广东</option>
<option>湖北</option>
<option>福建</option>
<option>江苏</option>
<option>北京</option>
</select> <select>
<option>湘潭</option>
<option>永州</option>
<option>深圳</option>
<option>湘西</option>
<option>长沙</option>
<option>张家界</option>
</select>
<!--上传组件-->
请上传文档:<input type="file" />
<!--提交按钮-->
<input type="submit" value="提交" />
<!--重置按钮-->
<input type="reset" value="重写" />
<!--图片-->
<input type="image" src="img/img.png" />
<!--普通按钮-->
<input type="button" value="提交" />
关键字的功能解释：
maxlength=“6” 设置输入框的输入长度
name=“username” 设置控件的名字,这个参数主要给后端工程师进行调用
value=“请输入你的账号” 控件的实际内容，后端工程师所需要的其实就是这个内容
readonly=“readonly” 设置控件只读状态(不可编辑)
selected=“selected” 用于设置下拉框的默认选项
submit:提交后立即执行到服务器
image:理论上跟submit一致，但是一般只配合js使用
button:普通按钮，没有任何效果，但是用的非常多 一般配合js使用
页面美观——CSS
什么是CSS?
- CSS是指层叠样式
- CSS的作用是用于美化HTML页面的中的内容(字体、颜色、高宽、大小)
- CSS另外的作用就是可以对网页进行布局(CSS+DIV)
CSS的优势?
1.内容与表现分离
2.网页的表现形式高度统一，便于后期维护
3.具备极为丰富的样式，页面美化更加灵活
4.减少网页的代码量，增加网页的浏览速度 可以节省网络带宽
5.用于独立于页面的CSS,有利于搜索引擎的收录
CSS如何去写？
选择器:就是你要选择谁，然后改变什么
CSS的导入方式:
内部样式:
位置:范围内
格式:
特点:
适合同一个页面的效果实现，其他页面无效
行内样式:
位置:所需要实现的标签内
格式:
<p style="color:red">
特点:
适合某一个标签的样式修改
外部样式:
独立创建一个css文件，这个文件里面不需要写style,直接写样式即可
1.在head当中，<link href="css/style_demo.css" rel="stylesheet" type="text/css" />
2.在head当中的style当中,@import url("css/style_demo.css" );
一般来说只会使用第一种，第二种几乎不用，因为link标签是属于xhtml的
而@import属于css2.1的规则，如果浏览器不支持@import，也就意味着你的样式无效
如果你使用的是link进行导入，先加载CSS样式，然后再去显示整个网页
如果你使用的@import，是先加载网页，再去显示CSS样式
适合多个页面共享一个CSS样式
样式表的优先级:
行内样式表 > 内部样式表 > 外部样式表
一般来说，我们只会使用外部样式表
格式:
选择器{
属性:属性值;
}
选择器分类:
基础选择器:
标签选择器:
标签名{
属性:属性值;
}
注意:属性值后的分号，你可以不写的 但是W3C的标准是必须要写的，而大部分
浏览器都遵循了W3C的标准，如果不写 可能会有部分浏览器无法使用。
特点:
一旦符合规则的标签，全部会实现同样的CSS效果
类选择器:
<i class="class">类选择器</i>
.类名{
属性:属性值;
}
特点:
所有符合类名的标签，都会实现同样的效果
类名不能以数字开头
ID选择器:
<p id="id">ID选择器我</p>
#ID名{
属性:属性值;
}
特点:
所有符合ID名的标签，都会实现同样的效果
但是，在同一个页面当中，标签不能出现同名的ID(js会出现问题)
选择器的优先级:ID选择器 > 类选择器 > 标签选择器
实例练习：
望庐山瀑布:
诗正文使用14px字体，颜色为绿色
水调歌头:
标题为红色，字体大小为18px，
正文第一段字体大小为12px,字体为红色
第二段字体颜色为黑色，字体大小为12px
如梦令:
使用标签选择器设置标题字体大小为20px
页面当中所有段落的文字为16px
使用类选择器设置译文和正文内容字体颜色为绿色
想办法将译文字体颜色改变为蓝色
复合选择器:
指两个及两个以上的选择器进行组合使用。
交集选择器:
标签选择器+类(ID)选择器{
属性:属性值;
}
特点:既要满足是否使用了某个标签选择器，也要满足是否使用了某个类或者ID选择器(也就说明标签选择器和类或者ID选择器必须同时满足)
后代选择器:
选择器+空格+选择器{
属性:属性值;
}
特点:无隔代限制，必须包含嵌套关系，例如p标签下面的span标签
子代选择器:
选择器>选择器{
属性:属性值;
}
特点:子代必须是父类的直接子代，不能存在隔代关系
并集选择器:
选择器,选择器,选择器,选择器,选择器,选择器{
属性:属性值;
}
特点:所有的选择器都实现同一个效果。
CSS继承性的问题:
html -> head ->title
body ->h1
p
ul -> li -> ol ->li ->ul
div
如果存在嵌套关系，父元素的属性发生了改变，子元素也会随之改变，
但是h标签无法继承父元素的字体大小，a标签无法继承父元素的颜色
文本样式:
background: firebrick;
/设置字体样式/
color: khaki;
/设置水平对齐方式/
text-align:center;
/文字的首行缩进/
text-indent:2em;
/文本的样式修饰 一般只用下划线和取消下划线/
text-decoration:underline;
字体样式:
/文字大小/
font-size:20px;
/文字样式/
font-family:“宋体”;
/文字风格/
font-style:oblique;
/文字粗细/
font-weight:bold;
/字体连写 字体风格 字体粗细 字体大小 样式(顺序不能乱)/
/font:oblique bold 36px “微软雅黑”;/
超链伪类:
/ 鼠标悬浮所触发的样式/
.baidu:hover{
color: thistle;
font-size:10px;
}
/当超链接被访问之后的链接（鸡肋）/
.wangyi,
.baidu:visited {
color: darkcyan;
font-size: 50px;
}
/当鼠标点击当中所触发的样式/
.tencent:active{
color: green;
}
/*未访问之前的颜色*/
.tencent:link {
color:deepskyblue;
font-size: 180px;
}
布局的使用
CSS+DIV
用途:
div+css是现在主流的web设计模式
div主要的作用:
对网页进行布局
对网页内容进行对应的排版
div一般配合CSS，并且设置高和宽，否则无意义。
颜色的表示形式:
三原色:rgba(46,61,73,.4)
进制:#000000
单词:red
背景颜色:background-color:red;
图片背景:background-image: url(img/timg.jpg);
背景重复方式:background-repeat:no-repeat;
repeat-x:沿着x轴平铺
repeat-y:沿着y轴平铺
no-repeat:图像不平铺
repeat:图像平铺
图像大小:background-size: 50%;
图像定位:
background-position-y:沿着y轴移动
background-position-x:沿着x轴移动
移动方式:
y%/x%:依照百分比来移动
ypx/xpx:依照像素移动
x轴:left/center/right
y轴:top/center/bottom
背景连写:颜色/路径/x轴/y轴/平铺方式
background: red url(img/timg.jpg) 250px 150px no-repeat;
了解发展史
W3C:HTML 结构标准 / CSS 表现标准 / JavaScript 行为标准
世界上第一款浏览器 94年网景(Netscape Communications Corporation)公司开发。
95年和sun公司开发出Java
网景和sun进行了深度的合作 java+script= javascript
2003年之前，js其实很少有人使用，因为js就是垃圾广告的代名词。
2004年，一家伟大的公司彻底改变了js的命运，这就公司就谷歌，因为谷歌推出了一种
技术，这种技术一直沿用至今，仍然都是目前主流的技术(AJAX)
ajax:异步加载
认识js：
1.js是什么?
js一个可以嵌入到HTML网页当中，是基于对象和事件驱动的脚本语言
2.js的特点?
1.对于用户有非常良好的交互性
2.具备非常强的安全性(对于用户)，JS没有任何的权限可以访问你的系统资源和磁盘
3.是跨平台，因为是基于浏览器的
3.js能做什么?
1.js能够实时动态的修改你的CSS和你的HTML代码
2.能够动态的校验数据
4.js的组成
DOM(文档对象模型)
BOM(浏览器对象模型)
5.怎么去使用js?
1.行内
<input type="button" value="我是个没用的东西" οnclick="alert('我被点击了')"/>
2.内部
<script type="text/javascript"/>
alert('我被加载了');
</script>
3.外部
<script type="text/javascript" src="../js/js_demo.js"/>
JS代码放在哪儿？
原则上,你JS放任意位置都没问题，但是在不影响功能的前提下，建议越晚加载越好
二:JS的基本语法
typeof获取当前数据的类型
js当中的原始数据类型:
number:数字
string:字符串类型
boolean:布尔类型
null:空类型
underfind:未定义
number/string/boolean 伪数据类型(等同于java的自动拆装箱)
类型转型:
number/boolean类型转成string
toString();
string/boolean转number
parseInt();
parseFloat();
string转成number parseInt(x) 字符串必须开头包含数字，最后的结果就是开头的数字
强制类型转换:
Boolean(),强转布尔
数字如果转成布尔,false即0 true即1
字符串如果转成布尔，空内容即false,有内容及true
Number()
布尔转数字，true即1 false即0
字符串转数字，不能转
引用数据类型
java:Object ob = new Object();
js:var ob = new Number();
运算符:
赋值运算:
var x = 5;
算数运算:
+ - * /(操作跟java一致，你们不让我讲)
逻辑运算:
&& ||
比较运算:
< > <= >= != == ===
全等:需要数据类型和数据值完全匹配
三元运算:
3 > 2 ? 3 : 2;
void运算:
<a href="javascript:void(0)">点击我跳转</a>
类型运算符：
typeof:获取数据类型
instanceof:判断某一个数据是否为某种数据类型
逻辑语句:
1.if
if(x > 5){
alert(“大于”);
}
2.if else
if(x > 5){
alert(“大于”);
}else{
alert(‘小于’);
}
3.switch(){
case “css”:
alert(“xxx”);
break;
default:
alert(“xxx”);
}
4.for
for(var a = 0;a < 5;a++){
alert(a);
}
5.for in
var arr = [1,56,1,5,“s”];
for(s in arr){
//alert(s);//索引编号
alert(arr[s]);
}
————————————————
版权声明：本文为CSDN博主「苏绪」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41719737/article/details/81949812HTML与CSS学习基础总结
原创苏绪 发布于2018-08-22 20:01:13 阅读数 2073 收藏
展开
先了解学习的知识点有哪些：
HTML
HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。
CSS
CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。
可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
JS
JS 全称（javascript）中文是java脚本的意思 。
它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。
但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。
为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））
其次js的作用“增强页面的趣味性，响应用户的行为”； 特点（弱解释脚本语言，可以被浏览器直接解析 不需要编译）
js的输出，有两种：
1.控制台输出（console.log()）不会对文档造成影响
2.文档中输出 document.write(“xxxx”) 会对文档造成影响
简单了解一下javaEE的基础知识
什么是JAVAEE?
主要是面向企业级开发(基础的概念，实际上远远不止如此)，对于我们来说
主要还是从事B/S架构的开发。
软件结构的分类：
C/S架构的开发(客户端到服务器的开发):
例如:吃鸡、QQ、LOL(有实体的应用客户端)
特点:
1.有客户端、必须要安装客户端程序
2.要进行客户端的升级，除了服务器进行代码的更新，客户端也必须
重新安装或者在线进行升级。
B/S架构的开发(浏览器到服务器的开发):
例如:淘宝、天猫、腾讯网、网页游戏
特点:
1.不需要安装任何的实体客户端，只需要一个浏览器(内核)即可
2.要进行客户端升级，只需要服务器进行代码更新，客户端不需要进行任何操作
其实，现在太部分的企业采用都是B/S架构(并不是说C/S比较少)
两者来说，他们在各自的领域应该是怎么样的?
C/S:消耗的是你的系统资源(CPU/GPU/内存)，所以运行的速度会比较流畅
而且对于图层渲染来说，B/S架构是永远达不到C/S架构的地步，适合做有动画效果
、启动速度快等等软件
B/S:无法直接获取你的系统资源，所有的系统资源的调配其实是由浏览器来做的
但是，浏览器本质是上也是基于C/S，B/S不适合特大型的实体软件(游戏开发)
简单了解网页的源来！
1.什么是前端？
1.前端其实就是将设计师设计好的效果图，通过网页的形式展现给客户
2.什么是网页?
2.网页是由图片、文字、链接、视频、音乐、输入框、表单等组成
3.WEB标准
HTML: 结构标准 相当于建房子的地基和框架,相当于人的身体
CSS: 表现标准 相当于房子的装修，相当于妹子化妆
JS: 行为标准 相当于房子里面只智能家居，相当于妹子跳舞
4.浏览器
浏览器的内核(渲染引擎):也就是浏览器所采用的引擎，这个渲染引擎决定了你的网页的
显示方式以及排版布局等等相关信息(遵循标准)
IE/谷歌/欧朋/火狐/苹果(这样就会造成浏览器兼容的问题)
5.html
xhtml1.0 W3C推荐的版本 2000年发布
xhtml2.0 因为改变太大，最终胎死腹中
HTML4.0 W3C推荐的版本1997年12月
HTML5 2004年提出，2006年开始火爆，而且这个版本跟之前所有的版本都不同，改变太大
而且是一个完全新的团队在做(火爆的主要原因还是因为移动端)。
HTML:超 文本 标记 语言
文本:说明HTML是由文本组成
超:说明HTML是由超链接组成
标记语言:说明HTML是使用标记进行组合的(解释性语言，由浏览器进行解释执行)
6.HTML怎么写？
标准结构:
<!doctype html> //文档声明(告诉浏览器以什么标准来执行下面的代码)
<html> // HTML的根标签 所有的HTML都必须写在根标签里面
<head></head> //HTML的头部标签,里面的内容不显示在浏览器主体，一般用于设置、导入等相关文件
<body></body>// HTML的主体标签，里面的所有内容会直接的显示在浏览器
</html>
7.HTML的标签分类:
单标签:<!doctype html>
双标签:
可单可双:
包含关系:<head><title>这个代码贼棒棒</title></head>
并列关系:<head></head><body></body>
8.HTML的开发工具:
1.记事本(推荐使用)
2.DW(,给设计师用的 很老)
3.sublime(专业级开发，插件式安装 缺什么补什么吗，很好用)
4.webstorm(很牛逼，界面非常好看 但是收费，而且太智能)
5.Hbuilder(你们必须得支持，国产的，而且是Java写的 非常适合H5的开发，用着很舒服)
9.HTML的基础标签
9.1 文字标签
文字加粗:
文字斜体:
下划线:
删除线:
注意:上面多个实现方式，在xhtml1.0版本当中，明确推荐使用后者
因为后者是语义化标签，针对浏览器来说，更加喜爱后者。
9.2 功能标签
换行:<br/>
水平线:<hr/>
9.3 标题标签
<h1> ~ <h6>
h6以下的字体均为默认字体，h系列的标签,具备加粗和换行的功能
9.4 段落标签
<p></p>
段落标签,在每一个段落都是单独显示，除了进行分段，他还是一个容器(使用频率非常大)
图像标签:
超链接标签:
点击我到百度
打开方式:
_blank:新开窗口
_self:默认窗口
注意:
如果需要访问的是一个具体路径，你直接写路径就可以了
如果需要访问的是网络上的资源，则需要写上资源的协议名(http://www.baidu.com / ftp://172.18.33.10)
同时，还可以下载指定的压缩文件
列表:
无序列表:
<ul type="circle">
<!--li是这个无序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>赵丽颖</li>
</ul>
有序列表:
<ol type="6-15">
<!--li是这个有序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
</ol>
定义列表:
<dl>
<!--声明为列表的标题-->
<dt>橘梨纱最爱的</dt>
<!--声明为这个标题下面的内容-->
<dd>苏绪</dd>
<dd>阿香</dd>
<dt>阿香的</dt>
<dd>苏绪</dd>
<dd>阿香</dd>
</dl>
实例练习:
我的电脑文件
<ul>
<li>我的电脑
<ul>
<li>本地磁盘C
<ul>
<li>我的电影</li>
<li>我的香格里拉</li>
</ul>
</li>
<li>本地磁盘D
<ul>
<li>我的资料</li>
<li>我的全家福</li>
</ul>
</li>
</ul>
</li>
</ul>
表格:
<table>
<!--一个tr即代表表格的一行-->
<tr align="center" bgcolor="fuchsia">
<!--一个td即代表这个行里面的一个单元格-->
<td bgcolor="aqua">香格里拉</td>
</tr>
</table>
表格的边框:border="1"
表格的宽度:width="300px"
表格的高度:height="100px"
单元格与单元格之间的间距:cellspacing="0px"
单元格内容与单元格内间距:cellpadding="10px"
水平对齐的方式:align="center"(左/中/右)[如果是table设置，则设置的是表格的对齐的方式]
设置背景颜色:bgcolor="fuchsia"
设置边框的颜色:bordercolor="red"
合并同一个行上的单元格:colspan="2"
合并同一个列上的单元格:rowspan="2"
表格语义化:
表格语义化写法和普通表格没有任何区别，只不过表格语义化有益于搜索引擎的摘取
网页的常用设置:
<meta name="keywords" content="胡歌,最有涵养的明星,比较崇拜的之一,枪支迷药" />
<!--设置网页描述-->
<meta name="description" content="阿香何时离开的" />
<!--设置网页的作者-->
<meta name="author" content="香格里拉" />
<!--设置网页的字符集编码-->
<meta charset="utf-8" />
<!--网页重定向-->
<meta http-equiv="refresh" content="5,http://www.baidu.com" />
表单:
表单的作用:负责数据采集
表单主要分为：表单控件、提示信息、表单域
表单控件:
包含了具体的表单功能，比如按钮、输入框、单选框、复选框、密码框、下拉框等等
提示信息:
一个完整的表单应该包含对于用户的友好提示，或者一些能够对事件进行解释说明的文字
表单域:
其实就相当于一个容器，这个容器包含了所有的控件和提示信息，可以通过定义相关控件
来处理不同的信息，也可以将这些信息发送到服务器后台当中，如果不定义表单域，也就
意味着你这里输入的所有信息是无法发送到服务端。
表单怎么写?
表单域:
表单控件:
<!--文本框 readonly-->
账号:<input type="text" maxlength="6" name="username" value="请输入你的账号"/>
<!--密码框-->
密码:<input type="password"/>
<!--密码框-->
性别:<input type="radio" name="y"/>男<input type="radio" name="y" />女
<!--复选框-->
爱好:<input type="checkbox" name="kl"/>喝可乐<input type="checkbox" name="lm"/>撩妹<input type="checkbox"/>爱林月如<input type="checkbox"/>学习JAVA
<!--下拉框-->
家庭住址:<select>
<option value="hn">湖南</option>
<option selected>广东</option>
<option>湖北</option>
<option>福建</option>
<option>江苏</option>
<option>北京</option>
</select> <select>
<option>湘潭</option>
<option>永州</option>
<option>深圳</option>
<option>湘西</option>
<option>长沙</option>
<option>张家界</option>
</select>
<!--上传组件-->
请上传文档:<input type="file" />
<!--提交按钮-->
<input type="submit" value="提交" />
<!--重置按钮-->
<input type="reset" value="重写" />
<!--图片-->
<input type="image" src="img/img.png" />
<!--普通按钮-->
<input type="button" value="提交" />
关键字的功能解释：
maxlength=“6” 设置输入框的输入长度
name=“username” 设置控件的名字,这个参数主要给后端工程师进行调用
value=“请输入你的账号” 控件的实际内容，后端工程师所需要的其实就是这个内容
readonly=“readonly” 设置控件只读状态(不可编辑)
selected=“selected” 用于设置下拉框的默认选项
submit:提交后立即执行到服务器
image:理论上跟submit一致，但是一般只配合js使用
button:普通按钮，没有任何效果，但是用的非常多 一般配合js使用
页面美观——CSS
什么是CSS?
- CSS是指层叠样式
- CSS的作用是用于美化HTML页面的中的内容(字体、颜色、高宽、大小)
- CSS另外的作用就是可以对网页进行布局(CSS+DIV)
CSS的优势?
1.内容与表现分离
2.网页的表现形式高度统一，便于后期维护
3.具备极为丰富的样式，页面美化更加灵活
4.减少网页的代码量，增加网页的浏览速度 可以节省网络带宽
5.用于独立于页面的CSS,有利于搜索引擎的收录
CSS如何去写？
选择器:就是你要选择谁，然后改变什么
CSS的导入方式:
内部样式:
位置:范围内
格式:
特点:
适合同一个页面的效果实现，其他页面无效
行内样式:
位置:所需要实现的标签内
格式:
<p style="color:red">
特点:
适合某一个标签的样式修改
外部样式:
独立创建一个css文件，这个文件里面不需要写style,直接写样式即可
1.在head当中，<link href="css/style_demo.css" rel="stylesheet" type="text/css" />
2.在head当中的style当中,@import url("css/style_demo.css" );
一般来说只会使用第一种，第二种几乎不用，因为link标签是属于xhtml的
而@import属于css2.1的规则，如果浏览器不支持@import，也就意味着你的样式无效
如果你使用的是link进行导入，先加载CSS样式，然后再去显示整个网页
如果你使用的@import，是先加载网页，再去显示CSS样式
适合多个页面共享一个CSS样式
样式表的优先级:
行内样式表 > 内部样式表 > 外部样式表
一般来说，我们只会使用外部样式表
格式:
选择器{
属性:属性值;
}
选择器分类:
基础选择器:
标签选择器:
标签名{
属性:属性值;
}
注意:属性值后的分号，你可以不写的 但是W3C的标准是必须要写的，而大部分
浏览器都遵循了W3C的标准，如果不写 可能会有部分浏览器无法使用。
特点:
一旦符合规则的标签，全部会实现同样的CSS效果
类选择器:
<i class="class">类选择器</i>
.类名{
属性:属性值;
}
特点:
所有符合类名的标签，都会实现同样的效果
类名不能以数字开头
ID选择器:
<p id="id">ID选择器我</p>
#ID名{
属性:属性值;
}
特点:
所有符合ID名的标签，都会实现同样的效果
但是，在同一个页面当中，标签不能出现同名的ID(js会出现问题)
选择器的优先级:ID选择器 > 类选择器 > 标签选择器
实例练习：
望庐山瀑布:
诗正文使用14px字体，颜色为绿色
水调歌头:
标题为红色，字体大小为18px，
正文第一段字体大小为12px,字体为红色
第二段字体颜色为黑色，字体大小为12px
如梦令:
使用标签选择器设置标题字体大小为20px
页面当中所有段落的文字为16px
使用类选择器设置译文和正文内容字体颜色为绿色
想办法将译文字体颜色改变为蓝色
复合选择器:
指两个及两个以上的选择器进行组合使用。
交集选择器:
标签选择器+类(ID)选择器{
属性:属性值;
}
特点:既要满足是否使用了某个标签选择器，也要满足是否使用了某个类或者ID选择器(也就说明标签选择器和类或者ID选择器必须同时满足)
后代选择器:
选择器+空格+选择器{
属性:属性值;
}
特点:无隔代限制，必须包含嵌套关系，例如p标签下面的span标签
子代选择器:
选择器>选择器{
属性:属性值;
}
特点:子代必须是父类的直接子代，不能存在隔代关系
并集选择器:
选择器,选择器,选择器,选择器,选择器,选择器{
属性:属性值;
}
特点:所有的选择器都实现同一个效果。
CSS继承性的问题:
html -> head ->title
body ->h1
p
ul -> li -> ol ->li ->ul
div
如果存在嵌套关系，父元素的属性发生了改变，子元素也会随之改变，
但是h标签无法继承父元素的字体大小，a标签无法继承父元素的颜色
文本样式:
background: firebrick;
/设置字体样式/
color: khaki;
/设置水平对齐方式/
text-align:center;
/文字的首行缩进/
text-indent:2em;
/文本的样式修饰 一般只用下划线和取消下划线/
text-decoration:underline;
字体样式:
/文字大小/
font-size:20px;
/文字样式/
font-family:“宋体”;
/文字风格/
font-style:oblique;
/文字粗细/
font-weight:bold;
/字体连写 字体风格 字体粗细 字体大小 样式(顺序不能乱)/
/font:oblique bold 36px “微软雅黑”;/
超链伪类:
/ 鼠标悬浮所触发的样式/
.baidu:hover{
color: thistle;
font-size:10px;
}
/当超链接被访问之后的链接（鸡肋）/
.wangyi,
.baidu:visited {
color: darkcyan;
font-size: 50px;
}
/当鼠标点击当中所触发的样式/
.tencent:active{
color: green;
}
/*未访问之前的颜色*/
.tencent:link {
color:deepskyblue;
font-size: 180px;
}
布局的使用
CSS+DIV
用途:
div+css是现在主流的web设计模式
div主要的作用:
对网页进行布局
对网页内容进行对应的排版
div一般配合CSS，并且设置高和宽，否则无意义。
颜色的表示形式:
三原色:rgba(46,61,73,.4)
进制:#000000
单词:red
背景颜色:background-color:red;
图片背景:background-image: url(img/timg.jpg);
背景重复方式:background-repeat:no-repeat;
repeat-x:沿着x轴平铺
repeat-y:沿着y轴平铺
no-repeat:图像不平铺
repeat:图像平铺
图像大小:background-size: 50%;
图像定位:
background-position-y:沿着y轴移动
background-position-x:沿着x轴移动
移动方式:
y%/x%:依照百分比来移动
ypx/xpx:依照像素移动
x轴:left/center/right
y轴:top/center/bottom
背景连写:颜色/路径/x轴/y轴/平铺方式
background: red url(img/timg.jpg) 250px 150px no-repeat;
了解发展史
W3C:HTML 结构标准 / CSS 表现标准 / JavaScript 行为标准
世界上第一款浏览器 94年网景(Netscape Communications Corporation)公司开发。
95年和sun公司开发出Java
网景和sun进行了深度的合作 java+script= javascript
2003年之前，js其实很少有人使用，因为js就是垃圾广告的代名词。
2004年，一家伟大的公司彻底改变了js的命运，这就公司就谷歌，因为谷歌推出了一种
技术，这种技术一直沿用至今，仍然都是目前主流的技术(AJAX)
ajax:异步加载
认识js：
1.js是什么?
js一个可以嵌入到HTML网页当中，是基于对象和事件驱动的脚本语言
2.js的特点?
1.对于用户有非常良好的交互性
2.具备非常强的安全性(对于用户)，JS没有任何的权限可以访问你的系统资源和磁盘
3.是跨平台，因为是基于浏览器的
3.js能做什么?
1.js能够实时动态的修改你的CSS和你的HTML代码
2.能够动态的校验数据
4.js的组成
DOM(文档对象模型)
BOM(浏览器对象模型)
5.怎么去使用js?
1.行内
<input type="button" value="我是个没用的东西" οnclick="alert('我被点击了')"/>
2.内部
<script type="text/javascript"/>
alert('我被加载了');
</script>
3.外部
<script type="text/javascript" src="../js/js_demo.js"/>
JS代码放在哪儿？
原则上,你JS放任意位置都没问题，但是在不影响功能的前提下，建议越晚加载越好
二:JS的基本语法
typeof获取当前数据的类型
js当中的原始数据类型:
number:数字
string:字符串类型
boolean:布尔类型
null:空类型
underfind:未定义
number/string/boolean 伪数据类型(等同于java的自动拆装箱)
类型转型:
number/boolean类型转成string
toString();
string/boolean转number
parseInt();
parseFloat();
string转成number parseInt(x) 字符串必须开头包含数字，最后的结果就是开头的数字
强制类型转换:
Boolean(),强转布尔
数字如果转成布尔,false即0 true即1
字符串如果转成布尔，空内容即false,有内容及true
Number()
布尔转数字，true即1 false即0
字符串转数字，不能转
引用数据类型
java:Object ob = new Object();
js:var ob = new Number();
运算符:
赋值运算:
var x = 5;
算数运算:
+ - * /(操作跟java一致，你们不让我讲)
逻辑运算:
&& ||
比较运算:
< > <= >= != == ===
全等:需要数据类型和数据值完全匹配
三元运算:
3 > 2 ? 3 : 2;
void运算:
<a href="javascript:void(0)">点击我跳转</a>
类型运算符：
typeof:获取数据类型
instanceof:判断某一个数据是否为某种数据类型
逻辑语句:
1.if
if(x > 5){
alert(“大于”);
}
2.if else
if(x > 5){
alert(“大于”);
}else{
alert(‘小于’);
}
3.switch(){
case “css”:
alert(“xxx”);
break;
default:
alert(“xxx”);
}
4.for
for(var a = 0;a < 5;a++){
alert(a);
}
5.for in
var arr = [1,56,1,5,“s”];
for(s in arr){
//alert(s);//索引编号
alert(arr[s]);
}
————————————————
版权声明：本文为CSDN博主「苏绪」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41719737/article/details/81949812HTML与CSS学习基础总结
原创苏绪 发布于2018-08-22 20:01:13 阅读数 2073 收藏
展开
先了解学习的知识点有哪些：
HTML
HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。
CSS
CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。
可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
JS
JS 全称（javascript）中文是java脚本的意思 。
它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。
但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。
为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））
其次js的作用“增强页面的趣味性，响应用户的行为”； 特点（弱解释脚本语言，可以被浏览器直接解析 不需要编译）
js的输出，有两种：
1.控制台输出（console.log()）不会对文档造成影响
2.文档中输出 document.write(“xxxx”) 会对文档造成影响
简单了解一下javaEE的基础知识
什么是JAVAEE?
主要是面向企业级开发(基础的概念，实际上远远不止如此)，对于我们来说
主要还是从事B/S架构的开发。
软件结构的分类：
C/S架构的开发(客户端到服务器的开发):
例如:吃鸡、QQ、LOL(有实体的应用客户端)
特点:
1.有客户端、必须要安装客户端程序
2.要进行客户端的升级，除了服务器进行代码的更新，客户端也必须
重新安装或者在线进行升级。
B/S架构的开发(浏览器到服务器的开发):
例如:淘宝、天猫、腾讯网、网页游戏
特点:
1.不需要安装任何的实体客户端，只需要一个浏览器(内核)即可
2.要进行客户端升级，只需要服务器进行代码更新，客户端不需要进行任何操作
其实，现在太部分的企业采用都是B/S架构(并不是说C/S比较少)
两者来说，他们在各自的领域应该是怎么样的?
C/S:消耗的是你的系统资源(CPU/GPU/内存)，所以运行的速度会比较流畅
而且对于图层渲染来说，B/S架构是永远达不到C/S架构的地步，适合做有动画效果
、启动速度快等等软件
B/S:无法直接获取你的系统资源，所有的系统资源的调配其实是由浏览器来做的
但是，浏览器本质是上也是基于C/S，B/S不适合特大型的实体软件(游戏开发)
简单了解网页的源来！
1.什么是前端？
1.前端其实就是将设计师设计好的效果图，通过网页的形式展现给客户
2.什么是网页?
2.网页是由图片、文字、链接、视频、音乐、输入框、表单等组成
3.WEB标准
HTML: 结构标准 相当于建房子的地基和框架,相当于人的身体
CSS: 表现标准 相当于房子的装修，相当于妹子化妆
JS: 行为标准 相当于房子里面只智能家居，相当于妹子跳舞
4.浏览器
浏览器的内核(渲染引擎):也就是浏览器所采用的引擎，这个渲染引擎决定了你的网页的
显示方式以及排版布局等等相关信息(遵循标准)
IE/谷歌/欧朋/火狐/苹果(这样就会造成浏览器兼容的问题)
5.html
xhtml1.0 W3C推荐的版本 2000年发布
xhtml2.0 因为改变太大，最终胎死腹中
HTML4.0 W3C推荐的版本1997年12月
HTML5 2004年提出，2006年开始火爆，而且这个版本跟之前所有的版本都不同，改变太大
而且是一个完全新的团队在做(火爆的主要原因还是因为移动端)。
HTML:超 文本 标记 语言
文本:说明HTML是由文本组成
超:说明HTML是由超链接组成
标记语言:说明HTML是使用标记进行组合的(解释性语言，由浏览器进行解释执行)
6.HTML怎么写？
标准结构:
<!doctype html> //文档声明(告诉浏览器以什么标准来执行下面的代码)
<html> // HTML的根标签 所有的HTML都必须写在根标签里面
<head></head> //HTML的头部标签,里面的内容不显示在浏览器主体，一般用于设置、导入等相关文件
<body></body>// HTML的主体标签，里面的所有内容会直接的显示在浏览器
</html>
7.HTML的标签分类:
单标签:<!doctype html>
双标签:
可单可双:
包含关系:<head><title>这个代码贼棒棒</title></head>
并列关系:<head></head><body></body>
8.HTML的开发工具:
1.记事本(推荐使用)
2.DW(,给设计师用的 很老)
3.sublime(专业级开发，插件式安装 缺什么补什么吗，很好用)
4.webstorm(很牛逼，界面非常好看 但是收费，而且太智能)
5.Hbuilder(你们必须得支持，国产的，而且是Java写的 非常适合H5的开发，用着很舒服)
9.HTML的基础标签
9.1 文字标签
文字加粗:
文字斜体:
下划线:
删除线:
注意:上面多个实现方式，在xhtml1.0版本当中，明确推荐使用后者
因为后者是语义化标签，针对浏览器来说，更加喜爱后者。
9.2 功能标签
换行:<br/>
水平线:<hr/>
9.3 标题标签
<h1> ~ <h6>
h6以下的字体均为默认字体，h系列的标签,具备加粗和换行的功能
9.4 段落标签
<p></p>
段落标签,在每一个段落都是单独显示，除了进行分段，他还是一个容器(使用频率非常大)
图像标签:
超链接标签:
点击我到百度
打开方式:
_blank:新开窗口
_self:默认窗口
注意:
如果需要访问的是一个具体路径，你直接写路径就可以了
如果需要访问的是网络上的资源，则需要写上资源的协议名(http://www.baidu.com / ftp://172.18.33.10)
同时，还可以下载指定的压缩文件
列表:
无序列表:
<ul type="circle">
<!--li是这个无序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>赵丽颖</li>
</ul>
有序列表:
<ol type="6-15">
<!--li是这个有序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
</ol>
定义列表:
<dl>
<!--声明为列表的标题-->
<dt>橘梨纱最爱的</dt>
<!--声明为这个标题下面的内容-->
<dd>苏绪</dd>
<dd>阿香</dd>
<dt>阿香的</dt>
<dd>苏绪</dd>
<dd>阿香</dd>
</dl>
实例练习:
我的电脑文件
<ul>
<li>我的电脑
<ul>
<li>本地磁盘C
<ul>
<li>我的电影</li>
<li>我的香格里拉</li>
</ul>
</li>
<li>本地磁盘D
<ul>
<li>我的资料</li>
<li>我的全家福</li>
</ul>
</li>
</ul>
</li>
</ul>
表格:
<table>
<!--一个tr即代表表格的一行-->
<tr align="center" bgcolor="fuchsia">
<!--一个td即代表这个行里面的一个单元格-->
<td bgcolor="aqua">香格里拉</td>
</tr>
</table>
表格的边框:border="1"
表格的宽度:width="300px"
表格的高度:height="100px"
单元格与单元格之间的间距:cellspacing="0px"
单元格内容与单元格内间距:cellpadding="10px"
水平对齐的方式:align="center"(左/中/右)[如果是table设置，则设置的是表格的对齐的方式]
设置背景颜色:bgcolor="fuchsia"
设置边框的颜色:bordercolor="red"
合并同一个行上的单元格:colspan="2"
合并同一个列上的单元格:rowspan="2"
表格语义化:
表格语义化写法和普通表格没有任何区别，只不过表格语义化有益于搜索引擎的摘取
网页的常用设置:
<meta name="keywords" content="胡歌,最有涵养的明星,比较崇拜的之一,枪支迷药" />
<!--设置网页描述-->
<meta name="description" content="阿香何时离开的" />
<!--设置网页的作者-->
<meta name="author" content="香格里拉" />
<!--设置网页的字符集编码-->
<meta charset="utf-8" />
<!--网页重定向-->
<meta http-equiv="refresh" content="5,http://www.baidu.com" />
表单:
表单的作用:负责数据采集
表单主要分为：表单控件、提示信息、表单域
表单控件:
包含了具体的表单功能，比如按钮、输入框、单选框、复选框、密码框、下拉框等等
提示信息:
一个完整的表单应该包含对于用户的友好提示，或者一些能够对事件进行解释说明的文字
表单域:
其实就相当于一个容器，这个容器包含了所有的控件和提示信息，可以通过定义相关控件
来处理不同的信息，也可以将这些信息发送到服务器后台当中，如果不定义表单域，也就
意味着你这里输入的所有信息是无法发送到服务端。
表单怎么写?
表单域:
表单控件:
<!--文本框 readonly-->
账号:<input type="text" maxlength="6" name="username" value="请输入你的账号"/>
<!--密码框-->
密码:<input type="password"/>
<!--密码框-->
性别:<input type="radio" name="y"/>男<input type="radio" name="y" />女
<!--复选框-->
爱好:<input type="checkbox" name="kl"/>喝可乐<input type="checkbox" name="lm"/>撩妹<input type="checkbox"/>爱林月如<input type="checkbox"/>学习JAVA
<!--下拉框-->
家庭住址:<select>
<option value="hn">湖南</option>
<option selected>广东</option>
<option>湖北</option>
<option>福建</option>
<option>江苏</option>
<option>北京</option>
</select> <select>
<option>湘潭</option>
<option>永州</option>
<option>深圳</option>
<option>湘西</option>
<option>长沙</option>
<option>张家界</option>
</select>
<!--上传组件-->
请上传文档:<input type="file" />
<!--提交按钮-->
<input type="submit" value="提交" />
<!--重置按钮-->
<input type="reset" value="重写" />
<!--图片-->
<input type="image" src="img/img.png" />
<!--普通按钮-->
<input type="button" value="提交" />
关键字的功能解释：
maxlength=“6” 设置输入框的输入长度
name=“username” 设置控件的名字,这个参数主要给后端工程师进行调用
value=“请输入你的账号” 控件的实际内容，后端工程师所需要的其实就是这个内容
readonly=“readonly” 设置控件只读状态(不可编辑)
selected=“selected” 用于设置下拉框的默认选项
submit:提交后立即执行到服务器
image:理论上跟submit一致，但是一般只配合js使用
button:普通按钮，没有任何效果，但是用的非常多 一般配合js使用
页面美观——CSS
什么是CSS?
- CSS是指层叠样式
- CSS的作用是用于美化HTML页面的中的内容(字体、颜色、高宽、大小)
- CSS另外的作用就是可以对网页进行布局(CSS+DIV)
CSS的优势?
1.内容与表现分离
2.网页的表现形式高度统一，便于后期维护
3.具备极为丰富的样式，页面美化更加灵活
4.减少网页的代码量，增加网页的浏览速度 可以节省网络带宽
5.用于独立于页面的CSS,有利于搜索引擎的收录
CSS如何去写？
选择器:就是你要选择谁，然后改变什么
CSS的导入方式:
内部样式:
位置:范围内
格式:
特点:
适合同一个页面的效果实现，其他页面无效
行内样式:
位置:所需要实现的标签内
格式:
<p style="color:red">
特点:
适合某一个标签的样式修改
外部样式:
独立创建一个css文件，这个文件里面不需要写style,直接写样式即可
1.在head当中，<link href="css/style_demo.css" rel="stylesheet" type="text/css" />
2.在head当中的style当中,@import url("css/style_demo.css" );
一般来说只会使用第一种，第二种几乎不用，因为link标签是属于xhtml的
而@import属于css2.1的规则，如果浏览器不支持@import，也就意味着你的样式无效
如果你使用的是link进行导入，先加载CSS样式，然后再去显示整个网页
如果你使用的@import，是先加载网页，再去显示CSS样式
适合多个页面共享一个CSS样式
样式表的优先级:
行内样式表 > 内部样式表 > 外部样式表
一般来说，我们只会使用外部样式表
格式:
选择器{
属性:属性值;
}
选择器分类:
基础选择器:
标签选择器:
标签名{
属性:属性值;
}
注意:属性值后的分号，你可以不写的 但是W3C的标准是必须要写的，而大部分
浏览器都遵循了W3C的标准，如果不写 可能会有部分浏览器无法使用。
特点:
一旦符合规则的标签，全部会实现同样的CSS效果
类选择器:
<i class="class">类选择器</i>
.类名{
属性:属性值;
}
特点:
所有符合类名的标签，都会实现同样的效果
类名不能以数字开头
ID选择器:
<p id="id">ID选择器我</p>
#ID名{
属性:属性值;
}
特点:
所有符合ID名的标签，都会实现同样的效果
但是，在同一个页面当中，标签不能出现同名的ID(js会出现问题)
选择器的优先级:ID选择器 > 类选择器 > 标签选择器
实例练习：
望庐山瀑布:
诗正文使用14px字体，颜色为绿色
水调歌头:
标题为红色，字体大小为18px，
正文第一段字体大小为12px,字体为红色
第二段字体颜色为黑色，字体大小为12px
如梦令:
使用标签选择器设置标题字体大小为20px
页面当中所有段落的文字为16px
使用类选择器设置译文和正文内容字体颜色为绿色
想办法将译文字体颜色改变为蓝色
复合选择器:
指两个及两个以上的选择器进行组合使用。
交集选择器:
标签选择器+类(ID)选择器{
属性:属性值;
}
特点:既要满足是否使用了某个标签选择器，也要满足是否使用了某个类或者ID选择器(也就说明标签选择器和类或者ID选择器必须同时满足)
后代选择器:
选择器+空格+选择器{
属性:属性值;
}
特点:无隔代限制，必须包含嵌套关系，例如p标签下面的span标签
子代选择器:
选择器>选择器{
属性:属性值;
}
特点:子代必须是父类的直接子代，不能存在隔代关系
并集选择器:
选择器,选择器,选择器,选择器,选择器,选择器{
属性:属性值;
}
特点:所有的选择器都实现同一个效果。
CSS继承性的问题:
html -> head ->title
body ->h1
p
ul -> li -> ol ->li ->ul
div
如果存在嵌套关系，父元素的属性发生了改变，子元素也会随之改变，
但是h标签无法继承父元素的字体大小，a标签无法继承父元素的颜色
文本样式:
background: firebrick;
/设置字体样式/
color: khaki;
/设置水平对齐方式/
text-align:center;
/文字的首行缩进/
text-indent:2em;
/文本的样式修饰 一般只用下划线和取消下划线/
text-decoration:underline;
字体样式:
/文字大小/
font-size:20px;
/文字样式/
font-family:“宋体”;
/文字风格/
font-style:oblique;
/文字粗细/
font-weight:bold;
/字体连写 字体风格 字体粗细 字体大小 样式(顺序不能乱)/
/font:oblique bold 36px “微软雅黑”;/
超链伪类:
/ 鼠标悬浮所触发的样式/
.baidu:hover{
color: thistle;
font-size:10px;
}
/当超链接被访问之后的链接（鸡肋）/
.wangyi,
.baidu:visited {
color: darkcyan;
font-size: 50px;
}
/当鼠标点击当中所触发的样式/
.tencent:active{
color: green;
}
/*未访问之前的颜色*/
.tencent:link {
color:deepskyblue;
font-size: 180px;
}
布局的使用
CSS+DIV
用途:
div+css是现在主流的web设计模式
div主要的作用:
对网页进行布局
对网页内容进行对应的排版
div一般配合CSS，并且设置高和宽，否则无意义。
颜色的表示形式:
三原色:rgba(46,61,73,.4)
进制:#000000
单词:red
背景颜色:background-color:red;
图片背景:background-image: url(img/timg.jpg);
背景重复方式:background-repeat:no-repeat;
repeat-x:沿着x轴平铺
repeat-y:沿着y轴平铺
no-repeat:图像不平铺
repeat:图像平铺
图像大小:background-size: 50%;
图像定位:
background-position-y:沿着y轴移动
background-position-x:沿着x轴移动
移动方式:
y%/x%:依照百分比来移动
ypx/xpx:依照像素移动
x轴:left/center/right
y轴:top/center/bottom
背景连写:颜色/路径/x轴/y轴/平铺方式
background: red url(img/timg.jpg) 250px 150px no-repeat;
了解发展史
W3C:HTML 结构标准 / CSS 表现标准 / JavaScript 行为标准
世界上第一款浏览器 94年网景(Netscape Communications Corporation)公司开发。
95年和sun公司开发出Java
网景和sun进行了深度的合作 java+script= javascript
2003年之前，js其实很少有人使用，因为js就是垃圾广告的代名词。
2004年，一家伟大的公司彻底改变了js的命运，这就公司就谷歌，因为谷歌推出了一种
技术，这种技术一直沿用至今，仍然都是目前主流的技术(AJAX)
ajax:异步加载
认识js：
1.js是什么?
js一个可以嵌入到HTML网页当中，是基于对象和事件驱动的脚本语言
2.js的特点?
1.对于用户有非常良好的交互性
2.具备非常强的安全性(对于用户)，JS没有任何的权限可以访问你的系统资源和磁盘
3.是跨平台，因为是基于浏览器的
3.js能做什么?
1.js能够实时动态的修改你的CSS和你的HTML代码
2.能够动态的校验数据
4.js的组成
DOM(文档对象模型)
BOM(浏览器对象模型)
5.怎么去使用js?
1.行内
<input type="button" value="我是个没用的东西" οnclick="alert('我被点击了')"/>
2.内部
<script type="text/javascript"/>
alert('我被加载了');
</script>
3.外部
<script type="text/javascript" src="../js/js_demo.js"/>
JS代码放在哪儿？
原则上,你JS放任意位置都没问题，但是在不影响功能的前提下，建议越晚加载越好
二:JS的基本语法
typeof获取当前数据的类型
js当中的原始数据类型:
number:数字
string:字符串类型
boolean:布尔类型
null:空类型
underfind:未定义
number/string/boolean 伪数据类型(等同于java的自动拆装箱)
类型转型:
number/boolean类型转成string
toString();
string/boolean转number
parseInt();
parseFloat();
string转成number parseInt(x) 字符串必须开头包含数字，最后的结果就是开头的数字
强制类型转换:
Boolean(),强转布尔
数字如果转成布尔,false即0 true即1
字符串如果转成布尔，空内容即false,有内容及true
Number()
布尔转数字，true即1 false即0
字符串转数字，不能转
引用数据类型
java:Object ob = new Object();
js:var ob = new Number();
运算符:
赋值运算:
var x = 5;
算数运算:
+ - * /(操作跟java一致，你们不让我讲)
逻辑运算:
&& ||
比较运算:
< > <= >= != == ===
全等:需要数据类型和数据值完全匹配
三元运算:
3 > 2 ? 3 : 2;
void运算:
<a href="javascript:void(0)">点击我跳转</a>
类型运算符：
typeof:获取数据类型
instanceof:判断某一个数据是否为某种数据类型
逻辑语句:
1.if
if(x > 5){
alert(“大于”);
}
2.if else
if(x > 5){
alert(“大于”);
}else{
alert(‘小于’);
}
3.switch(){
case “css”:
alert(“xxx”);
break;
default:
alert(“xxx”);
}
4.for
for(var a = 0;a < 5;a++){
alert(a);
}
5.for in
var arr = [1,56,1,5,“s”];
for(s in arr){
//alert(s);//索引编号
alert(arr[s]);
}
————————————————
版权声明：本文为CSDN博主「苏绪」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41719737/article/details/81949812HTML与CSS学习基础总结
原创苏绪 发布于2018-08-22 20:01:13 阅读数 2073 收藏
展开
先了解学习的知识点有哪些：
HTML
HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。
CSS
CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。
可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
JS
JS 全称（javascript）中文是java脚本的意思 。
它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。
但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。
为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））
其次js的作用“增强页面的趣味性，响应用户的行为”； 特点（弱解释脚本语言，可以被浏览器直接解析 不需要编译）
js的输出，有两种：
1.控制台输出（console.log()）不会对文档造成影响
2.文档中输出 document.write(“xxxx”) 会对文档造成影响
简单了解一下javaEE的基础知识
什么是JAVAEE?
主要是面向企业级开发(基础的概念，实际上远远不止如此)，对于我们来说
主要还是从事B/S架构的开发。
软件结构的分类：
C/S架构的开发(客户端到服务器的开发):
例如:吃鸡、QQ、LOL(有实体的应用客户端)
特点:
1.有客户端、必须要安装客户端程序
2.要进行客户端的升级，除了服务器进行代码的更新，客户端也必须
重新安装或者在线进行升级。
B/S架构的开发(浏览器到服务器的开发):
例如:淘宝、天猫、腾讯网、网页游戏
特点:
1.不需要安装任何的实体客户端，只需要一个浏览器(内核)即可
2.要进行客户端升级，只需要服务器进行代码更新，客户端不需要进行任何操作
其实，现在太部分的企业采用都是B/S架构(并不是说C/S比较少)
两者来说，他们在各自的领域应该是怎么样的?
C/S:消耗的是你的系统资源(CPU/GPU/内存)，所以运行的速度会比较流畅
而且对于图层渲染来说，B/S架构是永远达不到C/S架构的地步，适合做有动画效果
、启动速度快等等软件
B/S:无法直接获取你的系统资源，所有的系统资源的调配其实是由浏览器来做的
但是，浏览器本质是上也是基于C/S，B/S不适合特大型的实体软件(游戏开发)
简单了解网页的源来！
1.什么是前端？
1.前端其实就是将设计师设计好的效果图，通过网页的形式展现给客户
2.什么是网页?
2.网页是由图片、文字、链接、视频、音乐、输入框、表单等组成
3.WEB标准
HTML: 结构标准 相当于建房子的地基和框架,相当于人的身体
CSS: 表现标准 相当于房子的装修，相当于妹子化妆
JS: 行为标准 相当于房子里面只智能家居，相当于妹子跳舞
4.浏览器
浏览器的内核(渲染引擎):也就是浏览器所采用的引擎，这个渲染引擎决定了你的网页的
显示方式以及排版布局等等相关信息(遵循标准)
IE/谷歌/欧朋/火狐/苹果(这样就会造成浏览器兼容的问题)
5.html
xhtml1.0 W3C推荐的版本 2000年发布
xhtml2.0 因为改变太大，最终胎死腹中
HTML4.0 W3C推荐的版本1997年12月
HTML5 2004年提出，2006年开始火爆，而且这个版本跟之前所有的版本都不同，改变太大
而且是一个完全新的团队在做(火爆的主要原因还是因为移动端)。
HTML:超 文本 标记 语言
文本:说明HTML是由文本组成
超:说明HTML是由超链接组成
标记语言:说明HTML是使用标记进行组合的(解释性语言，由浏览器进行解释执行)
6.HTML怎么写？
标准结构:
<!doctype html> //文档声明(告诉浏览器以什么标准来执行下面的代码)
<html> // HTML的根标签 所有的HTML都必须写在根标签里面
<head></head> //HTML的头部标签,里面的内容不显示在浏览器主体，一般用于设置、导入等相关文件
<body></body>// HTML的主体标签，里面的所有内容会直接的显示在浏览器
</html>
7.HTML的标签分类:
单标签:<!doctype html>
双标签:
可单可双:
包含关系:<head><title>这个代码贼棒棒</title></head>
并列关系:<head></head><body></body>
8.HTML的开发工具:
1.记事本(推荐使用)
2.DW(,给设计师用的 很老)
3.sublime(专业级开发，插件式安装 缺什么补什么吗，很好用)
4.webstorm(很牛逼，界面非常好看 但是收费，而且太智能)
5.Hbuilder(你们必须得支持，国产的，而且是Java写的 非常适合H5的开发，用着很舒服)
9.HTML的基础标签
9.1 文字标签
文字加粗:
文字斜体:
下划线:
删除线:
注意:上面多个实现方式，在xhtml1.0版本当中，明确推荐使用后者
因为后者是语义化标签，针对浏览器来说，更加喜爱后者。
9.2 功能标签
换行:<br/>
水平线:<hr/>
9.3 标题标签
<h1> ~ <h6>
h6以下的字体均为默认字体，h系列的标签,具备加粗和换行的功能
9.4 段落标签
<p></p>
段落标签,在每一个段落都是单独显示，除了进行分段，他还是一个容器(使用频率非常大)
图像标签:
超链接标签:
点击我到百度
打开方式:
_blank:新开窗口
_self:默认窗口
注意:
如果需要访问的是一个具体路径，你直接写路径就可以了
如果需要访问的是网络上的资源，则需要写上资源的协议名(http://www.baidu.com / ftp://172.18.33.10)
同时，还可以下载指定的压缩文件
列表:
无序列表:
<ul type="circle">
<!--li是这个无序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>赵丽颖</li>
</ul>
有序列表:
<ol type="6-15">
<!--li是这个有序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
</ol>
定义列表:
<dl>
<!--声明为列表的标题-->
<dt>橘梨纱最爱的</dt>
<!--声明为这个标题下面的内容-->
<dd>苏绪</dd>
<dd>阿香</dd>
<dt>阿香的</dt>
<dd>苏绪</dd>
<dd>阿香</dd>
</dl>
实例练习:
我的电脑文件
<ul>
<li>我的电脑
<ul>
<li>本地磁盘C
<ul>
<li>我的电影</li>
<li>我的香格里拉</li>
</ul>
</li>
<li>本地磁盘D
<ul>
<li>我的资料</li>
<li>我的全家福</li>
</ul>
</li>
</ul>
</li>
</ul>
表格:
<table>
<!--一个tr即代表表格的一行-->
<tr align="center" bgcolor="fuchsia">
<!--一个td即代表这个行里面的一个单元格-->
<td bgcolor="aqua">香格里拉</td>
</tr>
</table>
表格的边框:border="1"
表格的宽度:width="300px"
表格的高度:height="100px"
单元格与单元格之间的间距:cellspacing="0px"
单元格内容与单元格内间距:cellpadding="10px"
水平对齐的方式:align="center"(左/中/右)[如果是table设置，则设置的是表格的对齐的方式]
设置背景颜色:bgcolor="fuchsia"
设置边框的颜色:bordercolor="red"
合并同一个行上的单元格:colspan="2"
合并同一个列上的单元格:rowspan="2"
表格语义化:
表格语义化写法和普通表格没有任何区别，只不过表格语义化有益于搜索引擎的摘取
网页的常用设置:
<meta name="keywords" content="胡歌,最有涵养的明星,比较崇拜的之一,枪支迷药" />
<!--设置网页描述-->
<meta name="description" content="阿香何时离开的" />
<!--设置网页的作者-->
<meta name="author" content="香格里拉" />
<!--设置网页的字符集编码-->
<meta charset="utf-8" />
<!--网页重定向-->
<meta http-equiv="refresh" content="5,http://www.baidu.com" />
表单:
表单的作用:负责数据采集
表单主要分为：表单控件、提示信息、表单域
表单控件:
包含了具体的表单功能，比如按钮、输入框、单选框、复选框、密码框、下拉框等等
提示信息:
一个完整的表单应该包含对于用户的友好提示，或者一些能够对事件进行解释说明的文字
表单域:
其实就相当于一个容器，这个容器包含了所有的控件和提示信息，可以通过定义相关控件
来处理不同的信息，也可以将这些信息发送到服务器后台当中，如果不定义表单域，也就
意味着你这里输入的所有信息是无法发送到服务端。
表单怎么写?
表单域:
表单控件:
<!--文本框 readonly-->
账号:<input type="text" maxlength="6" name="username" value="请输入你的账号"/>
<!--密码框-->
密码:<input type="password"/>
<!--密码框-->
性别:<input type="radio" name="y"/>男<input type="radio" name="y" />女
<!--复选框-->
爱好:<input type="checkbox" name="kl"/>喝可乐<input type="checkbox" name="lm"/>撩妹<input type="checkbox"/>爱林月如<input type="checkbox"/>学习JAVA
<!--下拉框-->
家庭住址:<select>
<option value="hn">湖南</option>
<option selected>广东</option>
<option>湖北</option>
<option>福建</option>
<option>江苏</option>
<option>北京</option>
</select> <select>
<option>湘潭</option>
<option>永州</option>
<option>深圳</option>
<option>湘西</option>
<option>长沙</option>
<option>张家界</option>
</select>
<!--上传组件-->
请上传文档:<input type="file" />
<!--提交按钮-->
<input type="submit" value="提交" />
<!--重置按钮-->
<input type="reset" value="重写" />
<!--图片-->
<input type="image" src="img/img.png" />
<!--普通按钮-->
<input type="button" value="提交" />
关键字的功能解释：
maxlength=“6” 设置输入框的输入长度
name=“username” 设置控件的名字,这个参数主要给后端工程师进行调用
value=“请输入你的账号” 控件的实际内容，后端工程师所需要的其实就是这个内容
readonly=“readonly” 设置控件只读状态(不可编辑)
selected=“selected” 用于设置下拉框的默认选项
submit:提交后立即执行到服务器
image:理论上跟submit一致，但是一般只配合js使用
button:普通按钮，没有任何效果，但是用的非常多 一般配合js使用
页面美观——CSS
什么是CSS?
- CSS是指层叠样式
- CSS的作用是用于美化HTML页面的中的内容(字体、颜色、高宽、大小)
- CSS另外的作用就是可以对网页进行布局(CSS+DIV)
CSS的优势?
1.内容与表现分离
2.网页的表现形式高度统一，便于后期维护
3.具备极为丰富的样式，页面美化更加灵活
4.减少网页的代码量，增加网页的浏览速度 可以节省网络带宽
5.用于独立于页面的CSS,有利于搜索引擎的收录
CSS如何去写？
选择器:就是你要选择谁，然后改变什么
CSS的导入方式:
内部样式:
位置:范围内
格式:
特点:
适合同一个页面的效果实现，其他页面无效
行内样式:
位置:所需要实现的标签内
格式:
<p style="color:red">
特点:
适合某一个标签的样式修改
外部样式:
独立创建一个css文件，这个文件里面不需要写style,直接写样式即可
1.在head当中，<link href="css/style_demo.css" rel="stylesheet" type="text/css" />
2.在head当中的style当中,@import url("css/style_demo.css" );
一般来说只会使用第一种，第二种几乎不用，因为link标签是属于xhtml的
而@import属于css2.1的规则，如果浏览器不支持@import，也就意味着你的样式无效
如果你使用的是link进行导入，先加载CSS样式，然后再去显示整个网页
如果你使用的@import，是先加载网页，再去显示CSS样式
适合多个页面共享一个CSS样式
样式表的优先级:
行内样式表 > 内部样式表 > 外部样式表
一般来说，我们只会使用外部样式表
格式:
选择器{
属性:属性值;
}
选择器分类:
基础选择器:
标签选择器:
标签名{
属性:属性值;
}
注意:属性值后的分号，你可以不写的 但是W3C的标准是必须要写的，而大部分
浏览器都遵循了W3C的标准，如果不写 可能会有部分浏览器无法使用。
特点:
一旦符合规则的标签，全部会实现同样的CSS效果
类选择器:
<i class="class">类选择器</i>
.类名{
属性:属性值;
}
特点:
所有符合类名的标签，都会实现同样的效果
类名不能以数字开头
ID选择器:
<p id="id">ID选择器我</p>
#ID名{
属性:属性值;
}
特点:
所有符合ID名的标签，都会实现同样的效果
但是，在同一个页面当中，标签不能出现同名的ID(js会出现问题)
选择器的优先级:ID选择器 > 类选择器 > 标签选择器
实例练习：
望庐山瀑布:
诗正文使用14px字体，颜色为绿色
水调歌头:
标题为红色，字体大小为18px，
正文第一段字体大小为12px,字体为红色
第二段字体颜色为黑色，字体大小为12px
如梦令:
使用标签选择器设置标题字体大小为20px
页面当中所有段落的文字为16px
使用类选择器设置译文和正文内容字体颜色为绿色
想办法将译文字体颜色改变为蓝色
复合选择器:
指两个及两个以上的选择器进行组合使用。
交集选择器:
标签选择器+类(ID)选择器{
属性:属性值;
}
特点:既要满足是否使用了某个标签选择器，也要满足是否使用了某个类或者ID选择器(也就说明标签选择器和类或者ID选择器必须同时满足)
后代选择器:
选择器+空格+选择器{
属性:属性值;
}
特点:无隔代限制，必须包含嵌套关系，例如p标签下面的span标签
子代选择器:
选择器>选择器{
属性:属性值;
}
特点:子代必须是父类的直接子代，不能存在隔代关系
并集选择器:
选择器,选择器,选择器,选择器,选择器,选择器{
属性:属性值;
}
特点:所有的选择器都实现同一个效果。
CSS继承性的问题:
html -> head ->title
body ->h1
p
ul -> li -> ol ->li ->ul
div
如果存在嵌套关系，父元素的属性发生了改变，子元素也会随之改变，
但是h标签无法继承父元素的字体大小，a标签无法继承父元素的颜色
文本样式:
background: firebrick;
/设置字体样式/
color: khaki;
/设置水平对齐方式/
text-align:center;
/文字的首行缩进/
text-indent:2em;
/文本的样式修饰 一般只用下划线和取消下划线/
text-decoration:underline;
字体样式:
/文字大小/
font-size:20px;
/文字样式/
font-family:“宋体”;
/文字风格/
font-style:oblique;
/文字粗细/
font-weight:bold;
/字体连写 字体风格 字体粗细 字体大小 样式(顺序不能乱)/
/font:oblique bold 36px “微软雅黑”;/
超链伪类:
/ 鼠标悬浮所触发的样式/
.baidu:hover{
color: thistle;
font-size:10px;
}
/当超链接被访问之后的链接（鸡肋）/
.wangyi,
.baidu:visited {
color: darkcyan;
font-size: 50px;
}
/当鼠标点击当中所触发的样式/
.tencent:active{
color: green;
}
/*未访问之前的颜色*/
.tencent:link {
color:deepskyblue;
font-size: 180px;
}
布局的使用
CSS+DIV
用途:
div+css是现在主流的web设计模式
div主要的作用:
对网页进行布局
对网页内容进行对应的排版
div一般配合CSS，并且设置高和宽，否则无意义。
颜色的表示形式:
三原色:rgba(46,61,73,.4)
进制:#000000
单词:red
背景颜色:background-color:red;
图片背景:background-image: url(img/timg.jpg);
背景重复方式:background-repeat:no-repeat;
repeat-x:沿着x轴平铺
repeat-y:沿着y轴平铺
no-repeat:图像不平铺
repeat:图像平铺
图像大小:background-size: 50%;
图像定位:
background-position-y:沿着y轴移动
background-position-x:沿着x轴移动
移动方式:
y%/x%:依照百分比来移动
ypx/xpx:依照像素移动
x轴:left/center/right
y轴:top/center/bottom
背景连写:颜色/路径/x轴/y轴/平铺方式
background: red url(img/timg.jpg) 250px 150px no-repeat;
了解发展史
W3C:HTML 结构标准 / CSS 表现标准 / JavaScript 行为标准
世界上第一款浏览器 94年网景(Netscape Communications Corporation)公司开发。
95年和sun公司开发出Java
网景和sun进行了深度的合作 java+script= javascript
2003年之前，js其实很少有人使用，因为js就是垃圾广告的代名词。
2004年，一家伟大的公司彻底改变了js的命运，这就公司就谷歌，因为谷歌推出了一种
技术，这种技术一直沿用至今，仍然都是目前主流的技术(AJAX)
ajax:异步加载
认识js：
1.js是什么?
js一个可以嵌入到HTML网页当中，是基于对象和事件驱动的脚本语言
2.js的特点?
1.对于用户有非常良好的交互性
2.具备非常强的安全性(对于用户)，JS没有任何的权限可以访问你的系统资源和磁盘
3.是跨平台，因为是基于浏览器的
3.js能做什么?
1.js能够实时动态的修改你的CSS和你的HTML代码
2.能够动态的校验数据
4.js的组成
DOM(文档对象模型)
BOM(浏览器对象模型)
5.怎么去使用js?
1.行内
<input type="button" value="我是个没用的东西" οnclick="alert('我被点击了')"/>
2.内部
<script type="text/javascript"/>
alert('我被加载了');
</script>
3.外部
<script type="text/javascript" src="../js/js_demo.js"/>
JS代码放在哪儿？
原则上,你JS放任意位置都没问题，但是在不影响功能的前提下，建议越晚加载越好
二:JS的基本语法
typeof获取当前数据的类型
js当中的原始数据类型:
number:数字
string:字符串类型
boolean:布尔类型
null:空类型
underfind:未定义
number/string/boolean 伪数据类型(等同于java的自动拆装箱)
类型转型:
number/boolean类型转成string
toString();
string/boolean转number
parseInt();
parseFloat();
string转成number parseInt(x) 字符串必须开头包含数字，最后的结果就是开头的数字
强制类型转换:
Boolean(),强转布尔
数字如果转成布尔,false即0 true即1
字符串如果转成布尔，空内容即false,有内容及true
Number()
布尔转数字，true即1 false即0
字符串转数字，不能转
引用数据类型
java:Object ob = new Object();
js:var ob = new Number();
运算符:
赋值运算:
var x = 5;
算数运算:
+ - * /(操作跟java一致，你们不让我讲)
逻辑运算:
&& ||
比较运算:
< > <= >= != == ===
全等:需要数据类型和数据值完全匹配
三元运算:
3 > 2 ? 3 : 2;
void运算:
<a href="javascript:void(0)">点击我跳转</a>
类型运算符：
typeof:获取数据类型
instanceof:判断某一个数据是否为某种数据类型
逻辑语句:
1.if
if(x > 5){
alert(“大于”);
}
2.if else
if(x > 5){
alert(“大于”);
}else{
alert(‘小于’);
}
3.switch(){
case “css”:
alert(“xxx”);
break;
default:
alert(“xxx”);
}
4.for
for(var a = 0;a < 5;a++){
alert(a);
}
5.for in
var arr = [1,56,1,5,“s”];
for(s in arr){
//alert(s);//索引编号
alert(arr[s]);
}
————————————————
版权声明：本文为CSDN博主「苏绪」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41719737/article/details/81949812HTML与CSS学习基础总结
原创苏绪 发布于2018-08-22 20:01:13 阅读数 2073 收藏
展开
先了解学习的知识点有哪些：
HTML
HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。
CSS
CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。
可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
JS
JS 全称（javascript）中文是java脚本的意思 。
它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。
但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。
为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））
其次js的作用“增强页面的趣味性，响应用户的行为”； 特点（弱解释脚本语言，可以被浏览器直接解析 不需要编译）
js的输出，有两种：
1.控制台输出（console.log()）不会对文档造成影响
2.文档中输出 document.write(“xxxx”) 会对文档造成影响
简单了解一下javaEE的基础知识
什么是JAVAEE?
主要是面向企业级开发(基础的概念，实际上远远不止如此)，对于我们来说
主要还是从事B/S架构的开发。
软件结构的分类：
C/S架构的开发(客户端到服务器的开发):
例如:吃鸡、QQ、LOL(有实体的应用客户端)
特点:
1.有客户端、必须要安装客户端程序
2.要进行客户端的升级，除了服务器进行代码的更新，客户端也必须
重新安装或者在线进行升级。
B/S架构的开发(浏览器到服务器的开发):
例如:淘宝、天猫、腾讯网、网页游戏
特点:
1.不需要安装任何的实体客户端，只需要一个浏览器(内核)即可
2.要进行客户端升级，只需要服务器进行代码更新，客户端不需要进行任何操作
其实，现在太部分的企业采用都是B/S架构(并不是说C/S比较少)
两者来说，他们在各自的领域应该是怎么样的?
C/S:消耗的是你的系统资源(CPU/GPU/内存)，所以运行的速度会比较流畅
而且对于图层渲染来说，B/S架构是永远达不到C/S架构的地步，适合做有动画效果
、启动速度快等等软件
B/S:无法直接获取你的系统资源，所有的系统资源的调配其实是由浏览器来做的
但是，浏览器本质是上也是基于C/S，B/S不适合特大型的实体软件(游戏开发)
简单了解网页的源来！
1.什么是前端？
1.前端其实就是将设计师设计好的效果图，通过网页的形式展现给客户
2.什么是网页?
2.网页是由图片、文字、链接、视频、音乐、输入框、表单等组成
3.WEB标准
HTML: 结构标准 相当于建房子的地基和框架,相当于人的身体
CSS: 表现标准 相当于房子的装修，相当于妹子化妆
JS: 行为标准 相当于房子里面只智能家居，相当于妹子跳舞
4.浏览器
浏览器的内核(渲染引擎):也就是浏览器所采用的引擎，这个渲染引擎决定了你的网页的
显示方式以及排版布局等等相关信息(遵循标准)
IE/谷歌/欧朋/火狐/苹果(这样就会造成浏览器兼容的问题)
5.html
xhtml1.0 W3C推荐的版本 2000年发布
xhtml2.0 因为改变太大，最终胎死腹中
HTML4.0 W3C推荐的版本1997年12月
HTML5 2004年提出，2006年开始火爆，而且这个版本跟之前所有的版本都不同，改变太大
而且是一个完全新的团队在做(火爆的主要原因还是因为移动端)。
HTML:超 文本 标记 语言
文本:说明HTML是由文本组成
超:说明HTML是由超链接组成
标记语言:说明HTML是使用标记进行组合的(解释性语言，由浏览器进行解释执行)
6.HTML怎么写？
标准结构:
<!doctype html> //文档声明(告诉浏览器以什么标准来执行下面的代码)
<html> // HTML的根标签 所有的HTML都必须写在根标签里面
<head></head> //HTML的头部标签,里面的内容不显示在浏览器主体，一般用于设置、导入等相关文件
<body></body>// HTML的主体标签，里面的所有内容会直接的显示在浏览器
</html>
7.HTML的标签分类:
单标签:<!doctype html>
双标签:
可单可双:
包含关系:<head><title>这个代码贼棒棒</title></head>
并列关系:<head></head><body></body>
8.HTML的开发工具:
1.记事本(推荐使用)
2.DW(,给设计师用的 很老)
3.sublime(专业级开发，插件式安装 缺什么补什么吗，很好用)
4.webstorm(很牛逼，界面非常好看 但是收费，而且太智能)
5.Hbuilder(你们必须得支持，国产的，而且是Java写的 非常适合H5的开发，用着很舒服)
9.HTML的基础标签
9.1 文字标签
文字加粗:
文字斜体:
下划线:
删除线:
注意:上面多个实现方式，在xhtml1.0版本当中，明确推荐使用后者
因为后者是语义化标签，针对浏览器来说，更加喜爱后者。
9.2 功能标签
换行:<br/>
水平线:<hr/>
9.3 标题标签
<h1> ~ <h6>
h6以下的字体均为默认字体，h系列的标签,具备加粗和换行的功能
9.4 段落标签
<p></p>
段落标签,在每一个段落都是单独显示，除了进行分段，他还是一个容器(使用频率非常大)
图像标签:
超链接标签:
点击我到百度
打开方式:
_blank:新开窗口
_self:默认窗口
注意:
如果需要访问的是一个具体路径，你直接写路径就可以了
如果需要访问的是网络上的资源，则需要写上资源的协议名(http://www.baidu.com / ftp://172.18.33.10)
同时，还可以下载指定的压缩文件
列表:
无序列表:
<ul type="circle">
<!--li是这个无序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>赵丽颖</li>
</ul>
有序列表:
<ol type="6-15">
<!--li是这个有序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
</ol>
定义列表:
<dl>
<!--声明为列表的标题-->
<dt>橘梨纱最爱的</dt>
<!--声明为这个标题下面的内容-->
<dd>苏绪</dd>
<dd>阿香</dd>
<dt>阿香的</dt>
<dd>苏绪</dd>
<dd>阿香</dd>
</dl>
实例练习:
我的电脑文件
<ul>
<li>我的电脑
<ul>
<li>本地磁盘C
<ul>
<li>我的电影</li>
<li>我的香格里拉</li>
</ul>
</li>
<li>本地磁盘D
<ul>
<li>我的资料</li>
<li>我的全家福</li>
</ul>
</li>
</ul>
</li>
</ul>
表格:
<table>
<!--一个tr即代表表格的一行-->
<tr align="center" bgcolor="fuchsia">
<!--一个td即代表这个行里面的一个单元格-->
<td bgcolor="aqua">香格里拉</td>
</tr>
</table>
表格的边框:border="1"
表格的宽度:width="300px"
表格的高度:height="100px"
单元格与单元格之间的间距:cellspacing="0px"
单元格内容与单元格内间距:cellpadding="10px"
水平对齐的方式:align="center"(左/中/右)[如果是table设置，则设置的是表格的对齐的方式]
设置背景颜色:bgcolor="fuchsia"
设置边框的颜色:bordercolor="red"
合并同一个行上的单元格:colspan="2"
合并同一个列上的单元格:rowspan="2"
表格语义化:
表格语义化写法和普通表格没有任何区别，只不过表格语义化有益于搜索引擎的摘取
网页的常用设置:
<meta name="keywords" content="胡歌,最有涵养的明星,比较崇拜的之一,枪支迷药" />
<!--设置网页描述-->
<meta name="description" content="阿香何时离开的" />
<!--设置网页的作者-->
<meta name="author" content="香格里拉" />
<!--设置网页的字符集编码-->
<meta charset="utf-8" />
<!--网页重定向-->
<meta http-equiv="refresh" content="5,http://www.baidu.com" />
表单:
表单的作用:负责数据采集
表单主要分为：表单控件、提示信息、表单域
表单控件:
包含了具体的表单功能，比如按钮、输入框、单选框、复选框、密码框、下拉框等等
提示信息:
一个完整的表单应该包含对于用户的友好提示，或者一些能够对事件进行解释说明的文字
表单域:
其实就相当于一个容器，这个容器包含了所有的控件和提示信息，可以通过定义相关控件
来处理不同的信息，也可以将这些信息发送到服务器后台当中，如果不定义表单域，也就
意味着你这里输入的所有信息是无法发送到服务端。
表单怎么写?
表单域:
表单控件:
<!--文本框 readonly-->
账号:<input type="text" maxlength="6" name="username" value="请输入你的账号"/>
<!--密码框-->
密码:<input type="password"/>
<!--密码框-->
性别:<input type="radio" name="y"/>男<input type="radio" name="y" />女
<!--复选框-->
爱好:<input type="checkbox" name="kl"/>喝可乐<input type="checkbox" name="lm"/>撩妹<input type="checkbox"/>爱林月如<input type="checkbox"/>学习JAVA
<!--下拉框-->
家庭住址:<select>
<option value="hn">湖南</option>
<option selected>广东</option>
<option>湖北</option>
<option>福建</option>
<option>江苏</option>
<option>北京</option>
</select> <select>
<option>湘潭</option>
<option>永州</option>
<option>深圳</option>
<option>湘西</option>
<option>长沙</option>
<option>张家界</option>
</select>
<!--上传组件-->
请上传文档:<input type="file" />
<!--提交按钮-->
<input type="submit" value="提交" />
<!--重置按钮-->
<input type="reset" value="重写" />
<!--图片-->
<input type="image" src="img/img.png" />
<!--普通按钮-->
<input type="button" value="提交" />
关键字的功能解释：
maxlength=“6” 设置输入框的输入长度
name=“username” 设置控件的名字,这个参数主要给后端工程师进行调用
value=“请输入你的账号” 控件的实际内容，后端工程师所需要的其实就是这个内容
readonly=“readonly” 设置控件只读状态(不可编辑)
selected=“selected” 用于设置下拉框的默认选项
submit:提交后立即执行到服务器
image:理论上跟submit一致，但是一般只配合js使用
button:普通按钮，没有任何效果，但是用的非常多 一般配合js使用
页面美观——CSS
什么是CSS?
- CSS是指层叠样式
- CSS的作用是用于美化HTML页面的中的内容(字体、颜色、高宽、大小)
- CSS另外的作用就是可以对网页进行布局(CSS+DIV)
CSS的优势?
1.内容与表现分离
2.网页的表现形式高度统一，便于后期维护
3.具备极为丰富的样式，页面美化更加灵活
4.减少网页的代码量，增加网页的浏览速度 可以节省网络带宽
5.用于独立于页面的CSS,有利于搜索引擎的收录
CSS如何去写？
选择器:就是你要选择谁，然后改变什么
CSS的导入方式:
内部样式:
位置:范围内
格式:
特点:
适合同一个页面的效果实现，其他页面无效
行内样式:
位置:所需要实现的标签内
格式:
<p style="color:red">
特点:
适合某一个标签的样式修改
外部样式:
独立创建一个css文件，这个文件里面不需要写style,直接写样式即可
1.在head当中，<link href="css/style_demo.css" rel="stylesheet" type="text/css" />
2.在head当中的style当中,@import url("css/style_demo.css" );
一般来说只会使用第一种，第二种几乎不用，因为link标签是属于xhtml的
而@import属于css2.1的规则，如果浏览器不支持@import，也就意味着你的样式无效
如果你使用的是link进行导入，先加载CSS样式，然后再去显示整个网页
如果你使用的@import，是先加载网页，再去显示CSS样式
适合多个页面共享一个CSS样式
样式表的优先级:
行内样式表 > 内部样式表 > 外部样式表
一般来说，我们只会使用外部样式表
格式:
选择器{
属性:属性值;
}
选择器分类:
基础选择器:
标签选择器:
标签名{
属性:属性值;
}
注意:属性值后的分号，你可以不写的 但是W3C的标准是必须要写的，而大部分
浏览器都遵循了W3C的标准，如果不写 可能会有部分浏览器无法使用。
特点:
一旦符合规则的标签，全部会实现同样的CSS效果
类选择器:
<i class="class">类选择器</i>
.类名{
属性:属性值;
}
特点:
所有符合类名的标签，都会实现同样的效果
类名不能以数字开头
ID选择器:
<p id="id">ID选择器我</p>
#ID名{
属性:属性值;
}
特点:
所有符合ID名的标签，都会实现同样的效果
但是，在同一个页面当中，标签不能出现同名的ID(js会出现问题)
选择器的优先级:ID选择器 > 类选择器 > 标签选择器
实例练习：
望庐山瀑布:
诗正文使用14px字体，颜色为绿色
水调歌头:
标题为红色，字体大小为18px，
正文第一段字体大小为12px,字体为红色
第二段字体颜色为黑色，字体大小为12px
如梦令:
使用标签选择器设置标题字体大小为20px
页面当中所有段落的文字为16px
使用类选择器设置译文和正文内容字体颜色为绿色
想办法将译文字体颜色改变为蓝色
复合选择器:
指两个及两个以上的选择器进行组合使用。
交集选择器:
标签选择器+类(ID)选择器{
属性:属性值;
}
特点:既要满足是否使用了某个标签选择器，也要满足是否使用了某个类或者ID选择器(也就说明标签选择器和类或者ID选择器必须同时满足)
后代选择器:
选择器+空格+选择器{
属性:属性值;
}
特点:无隔代限制，必须包含嵌套关系，例如p标签下面的span标签
子代选择器:
选择器>选择器{
属性:属性值;
}
特点:子代必须是父类的直接子代，不能存在隔代关系
并集选择器:
选择器,选择器,选择器,选择器,选择器,选择器{
属性:属性值;
}
特点:所有的选择器都实现同一个效果。
CSS继承性的问题:
html -> head ->title
body ->h1
p
ul -> li -> ol ->li ->ul
div
如果存在嵌套关系，父元素的属性发生了改变，子元素也会随之改变，
但是h标签无法继承父元素的字体大小，a标签无法继承父元素的颜色
文本样式:
background: firebrick;
/设置字体样式/
color: khaki;
/设置水平对齐方式/
text-align:center;
/文字的首行缩进/
text-indent:2em;
/文本的样式修饰 一般只用下划线和取消下划线/
text-decoration:underline;
字体样式:
/文字大小/
font-size:20px;
/文字样式/
font-family:“宋体”;
/文字风格/
font-style:oblique;
/文字粗细/
font-weight:bold;
/字体连写 字体风格 字体粗细 字体大小 样式(顺序不能乱)/
/font:oblique bold 36px “微软雅黑”;/
超链伪类:
/ 鼠标悬浮所触发的样式/
.baidu:hover{
color: thistle;
font-size:10px;
}
/当超链接被访问之后的链接（鸡肋）/
.wangyi,
.baidu:visited {
color: darkcyan;
font-size: 50px;
}
/当鼠标点击当中所触发的样式/
.tencent:active{
color: green;
}
/*未访问之前的颜色*/
.tencent:link {
color:deepskyblue;
font-size: 180px;
}
布局的使用
CSS+DIV
用途:
div+css是现在主流的web设计模式
div主要的作用:
对网页进行布局
对网页内容进行对应的排版
div一般配合CSS，并且设置高和宽，否则无意义。
颜色的表示形式:
三原色:rgba(46,61,73,.4)
进制:#000000
单词:red
背景颜色:background-color:red;
图片背景:background-image: url(img/timg.jpg);
背景重复方式:background-repeat:no-repeat;
repeat-x:沿着x轴平铺
repeat-y:沿着y轴平铺
no-repeat:图像不平铺
repeat:图像平铺
图像大小:background-size: 50%;
图像定位:
background-position-y:沿着y轴移动
background-position-x:沿着x轴移动
移动方式:
y%/x%:依照百分比来移动
ypx/xpx:依照像素移动
x轴:left/center/right
y轴:top/center/bottom
背景连写:颜色/路径/x轴/y轴/平铺方式
background: red url(img/timg.jpg) 250px 150px no-repeat;
了解发展史
W3C:HTML 结构标准 / CSS 表现标准 / JavaScript 行为标准
世界上第一款浏览器 94年网景(Netscape Communications Corporation)公司开发。
95年和sun公司开发出Java
网景和sun进行了深度的合作 java+script= javascript
2003年之前，js其实很少有人使用，因为js就是垃圾广告的代名词。
2004年，一家伟大的公司彻底改变了js的命运，这就公司就谷歌，因为谷歌推出了一种
技术，这种技术一直沿用至今，仍然都是目前主流的技术(AJAX)
ajax:异步加载
认识js：
1.js是什么?
js一个可以嵌入到HTML网页当中，是基于对象和事件驱动的脚本语言
2.js的特点?
1.对于用户有非常良好的交互性
2.具备非常强的安全性(对于用户)，JS没有任何的权限可以访问你的系统资源和磁盘
3.是跨平台，因为是基于浏览器的
3.js能做什么?
1.js能够实时动态的修改你的CSS和你的HTML代码
2.能够动态的校验数据
4.js的组成
DOM(文档对象模型)
BOM(浏览器对象模型)
5.怎么去使用js?
1.行内
<input type="button" value="我是个没用的东西" οnclick="alert('我被点击了')"/>
2.内部
<script type="text/javascript"/>
alert('我被加载了');
</script>
3.外部
<script type="text/javascript" src="../js/js_demo.js"/>
JS代码放在哪儿？
原则上,你JS放任意位置都没问题，但是在不影响功能的前提下，建议越晚加载越好
二:JS的基本语法
typeof获取当前数据的类型
js当中的原始数据类型:
number:数字
string:字符串类型
boolean:布尔类型
null:空类型
underfind:未定义
number/string/boolean 伪数据类型(等同于java的自动拆装箱)
类型转型:
number/boolean类型转成string
toString();
string/boolean转number
parseInt();
parseFloat();
string转成number parseInt(x) 字符串必须开头包含数字，最后的结果就是开头的数字
强制类型转换:
Boolean(),强转布尔
数字如果转成布尔,false即0 true即1
字符串如果转成布尔，空内容即false,有内容及true
Number()
布尔转数字，true即1 false即0
字符串转数字，不能转
引用数据类型
java:Object ob = new Object();
js:var ob = new Number();
运算符:
赋值运算:
var x = 5;
算数运算:
+ - * /(操作跟java一致，你们不让我讲)
逻辑运算:
&& ||
比较运算:
< > <= >= != == ===
全等:需要数据类型和数据值完全匹配
三元运算:
3 > 2 ? 3 : 2;
void运算:
<a href="javascript:void(0)">点击我跳转</a>
类型运算符：
typeof:获取数据类型
instanceof:判断某一个数据是否为某种数据类型
逻辑语句:
1.if
if(x > 5){
alert(“大于”);
}
2.if else
if(x > 5){
alert(“大于”);
}else{
alert(‘小于’);
}
3.switch(){
case “css”:
alert(“xxx”);
break;
default:
alert(“xxx”);
}
4.for
for(var a = 0;a < 5;a++){
alert(a);
}
5.for in
var arr = [1,56,1,5,“s”];
for(s in arr){
//alert(s);//索引编号
alert(arr[s]);
}
————————————————
版权声明：本文为CSDN博主「苏绪」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41719737/article/details/81949812HTML与CSS学习基础总结
原创苏绪 发布于2018-08-22 20:01:13 阅读数 2073 收藏
展开
先了解学习的知识点有哪些：
HTML
HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。
CSS
CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。
可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
JS
JS 全称（javascript）中文是java脚本的意思 。
它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。
但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。
为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））
其次js的作用“增强页面的趣味性，响应用户的行为”； 特点（弱解释脚本语言，可以被浏览器直接解析 不需要编译）
js的输出，有两种：
1.控制台输出（console.log()）不会对文档造成影响
2.文档中输出 document.write(“xxxx”) 会对文档造成影响
简单了解一下javaEE的基础知识
什么是JAVAEE?
主要是面向企业级开发(基础的概念，实际上远远不止如此)，对于我们来说
主要还是从事B/S架构的开发。
软件结构的分类：
C/S架构的开发(客户端到服务器的开发):
例如:吃鸡、QQ、LOL(有实体的应用客户端)
特点:
1.有客户端、必须要安装客户端程序
2.要进行客户端的升级，除了服务器进行代码的更新，客户端也必须
重新安装或者在线进行升级。
B/S架构的开发(浏览器到服务器的开发):
例如:淘宝、天猫、腾讯网、网页游戏
特点:
1.不需要安装任何的实体客户端，只需要一个浏览器(内核)即可
2.要进行客户端升级，只需要服务器进行代码更新，客户端不需要进行任何操作
其实，现在太部分的企业采用都是B/S架构(并不是说C/S比较少)
两者来说，他们在各自的领域应该是怎么样的?
C/S:消耗的是你的系统资源(CPU/GPU/内存)，所以运行的速度会比较流畅
而且对于图层渲染来说，B/S架构是永远达不到C/S架构的地步，适合做有动画效果
、启动速度快等等软件
B/S:无法直接获取你的系统资源，所有的系统资源的调配其实是由浏览器来做的
但是，浏览器本质是上也是基于C/S，B/S不适合特大型的实体软件(游戏开发)
简单了解网页的源来！
1.什么是前端？
1.前端其实就是将设计师设计好的效果图，通过网页的形式展现给客户
2.什么是网页?
2.网页是由图片、文字、链接、视频、音乐、输入框、表单等组成
3.WEB标准
HTML: 结构标准 相当于建房子的地基和框架,相当于人的身体
CSS: 表现标准 相当于房子的装修，相当于妹子化妆
JS: 行为标准 相当于房子里面只智能家居，相当于妹子跳舞
4.浏览器
浏览器的内核(渲染引擎):也就是浏览器所采用的引擎，这个渲染引擎决定了你的网页的
显示方式以及排版布局等等相关信息(遵循标准)
IE/谷歌/欧朋/火狐/苹果(这样就会造成浏览器兼容的问题)
5.html
xhtml1.0 W3C推荐的版本 2000年发布
xhtml2.0 因为改变太大，最终胎死腹中
HTML4.0 W3C推荐的版本1997年12月
HTML5 2004年提出，2006年开始火爆，而且这个版本跟之前所有的版本都不同，改变太大
而且是一个完全新的团队在做(火爆的主要原因还是因为移动端)。
HTML:超 文本 标记 语言
文本:说明HTML是由文本组成
超:说明HTML是由超链接组成
标记语言:说明HTML是使用标记进行组合的(解释性语言，由浏览器进行解释执行)
6.HTML怎么写？
标准结构:
<!doctype html> //文档声明(告诉浏览器以什么标准来执行下面的代码)
<html> // HTML的根标签 所有的HTML都必须写在根标签里面
<head></head> //HTML的头部标签,里面的内容不显示在浏览器主体，一般用于设置、导入等相关文件
<body></body>// HTML的主体标签，里面的所有内容会直接的显示在浏览器
</html>
7.HTML的标签分类:
单标签:<!doctype html>
双标签:
可单可双:
包含关系:<head><title>这个代码贼棒棒</title></head>
并列关系:<head></head><body></body>
8.HTML的开发工具:
1.记事本(推荐使用)
2.DW(,给设计师用的 很老)
3.sublime(专业级开发，插件式安装 缺什么补什么吗，很好用)
4.webstorm(很牛逼，界面非常好看 但是收费，而且太智能)
5.Hbuilder(你们必须得支持，国产的，而且是Java写的 非常适合H5的开发，用着很舒服)
9.HTML的基础标签
9.1 文字标签
文字加粗:
文字斜体:
下划线:
删除线:
注意:上面多个实现方式，在xhtml1.0版本当中，明确推荐使用后者
因为后者是语义化标签，针对浏览器来说，更加喜爱后者。
9.2 功能标签
换行:<br/>
水平线:<hr/>
9.3 标题标签
<h1> ~ <h6>
h6以下的字体均为默认字体，h系列的标签,具备加粗和换行的功能
9.4 段落标签
<p></p>
段落标签,在每一个段落都是单独显示，除了进行分段，他还是一个容器(使用频率非常大)
图像标签:
超链接标签:
点击我到百度
打开方式:
_blank:新开窗口
_self:默认窗口
注意:
如果需要访问的是一个具体路径，你直接写路径就可以了
如果需要访问的是网络上的资源，则需要写上资源的协议名(http://www.baidu.com / ftp://172.18.33.10)
同时，还可以下载指定的压缩文件
列表:
无序列表:
<ul type="circle">
<!--li是这个无序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>赵丽颖</li>
</ul>
有序列表:
<ol type="6-15">
<!--li是这个有序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
</ol>
定义列表:
<dl>
<!--声明为列表的标题-->
<dt>橘梨纱最爱的</dt>
<!--声明为这个标题下面的内容-->
<dd>苏绪</dd>
<dd>阿香</dd>
<dt>阿香的</dt>
<dd>苏绪</dd>
<dd>阿香</dd>
</dl>
实例练习:
我的电脑文件
<ul>
<li>我的电脑
<ul>
<li>本地磁盘C
<ul>
<li>我的电影</li>
<li>我的香格里拉</li>
</ul>
</li>
<li>本地磁盘D
<ul>
<li>我的资料</li>
<li>我的全家福</li>
</ul>
</li>
</ul>
</li>
</ul>
表格:
<table>
<!--一个tr即代表表格的一行-->
<tr align="center" bgcolor="fuchsia">
<!--一个td即代表这个行里面的一个单元格-->
<td bgcolor="aqua">香格里拉</td>
</tr>
</table>
表格的边框:border="1"
表格的宽度:width="300px"
表格的高度:height="100px"
单元格与单元格之间的间距:cellspacing="0px"
单元格内容与单元格内间距:cellpadding="10px"
水平对齐的方式:align="center"(左/中/右)[如果是table设置，则设置的是表格的对齐的方式]
设置背景颜色:bgcolor="fuchsia"
设置边框的颜色:bordercolor="red"
合并同一个行上的单元格:colspan="2"
合并同一个列上的单元格:rowspan="2"
表格语义化:
表格语义化写法和普通表格没有任何区别，只不过表格语义化有益于搜索引擎的摘取
网页的常用设置:
<meta name="keywords" content="胡歌,最有涵养的明星,比较崇拜的之一,枪支迷药" />
<!--设置网页描述-->
<meta name="description" content="阿香何时离开的" />
<!--设置网页的作者-->
<meta name="author" content="香格里拉" />
<!--设置网页的字符集编码-->
<meta charset="utf-8" />
<!--网页重定向-->
<meta http-equiv="refresh" content="5,http://www.baidu.com" />
表单:
表单的作用:负责数据采集
表单主要分为：表单控件、提示信息、表单域
表单控件:
包含了具体的表单功能，比如按钮、输入框、单选框、复选框、密码框、下拉框等等
提示信息:
一个完整的表单应该包含对于用户的友好提示，或者一些能够对事件进行解释说明的文字
表单域:
其实就相当于一个容器，这个容器包含了所有的控件和提示信息，可以通过定义相关控件
来处理不同的信息，也可以将这些信息发送到服务器后台当中，如果不定义表单域，也就
意味着你这里输入的所有信息是无法发送到服务端。
表单怎么写?
表单域:
表单控件:
<!--文本框 readonly-->
账号:<input type="text" maxlength="6" name="username" value="请输入你的账号"/>
<!--密码框-->
密码:<input type="password"/>
<!--密码框-->
性别:<input type="radio" name="y"/>男<input type="radio" name="y" />女
<!--复选框-->
爱好:<input type="checkbox" name="kl"/>喝可乐<input type="checkbox" name="lm"/>撩妹<input type="checkbox"/>爱林月如<input type="checkbox"/>学习JAVA
<!--下拉框-->
家庭住址:<select>
<option value="hn">湖南</option>
<option selected>广东</option>
<option>湖北</option>
<option>福建</option>
<option>江苏</option>
<option>北京</option>
</select> <select>
<option>湘潭</option>
<option>永州</option>
<option>深圳</option>
<option>湘西</option>
<option>长沙</option>
<option>张家界</option>
</select>
<!--上传组件-->
请上传文档:<input type="file" />
<!--提交按钮-->
<input type="submit" value="提交" />
<!--重置按钮-->
<input type="reset" value="重写" />
<!--图片-->
<input type="image" src="img/img.png" />
<!--普通按钮-->
<input type="button" value="提交" />
关键字的功能解释：
maxlength=“6” 设置输入框的输入长度
name=“username” 设置控件的名字,这个参数主要给后端工程师进行调用
value=“请输入你的账号” 控件的实际内容，后端工程师所需要的其实就是这个内容
readonly=“readonly” 设置控件只读状态(不可编辑)
selected=“selected” 用于设置下拉框的默认选项
submit:提交后立即执行到服务器
image:理论上跟submit一致，但是一般只配合js使用
button:普通按钮，没有任何效果，但是用的非常多 一般配合js使用
页面美观——CSS
什么是CSS?
- CSS是指层叠样式
- CSS的作用是用于美化HTML页面的中的内容(字体、颜色、高宽、大小)
- CSS另外的作用就是可以对网页进行布局(CSS+DIV)
CSS的优势?
1.内容与表现分离
2.网页的表现形式高度统一，便于后期维护
3.具备极为丰富的样式，页面美化更加灵活
4.减少网页的代码量，增加网页的浏览速度 可以节省网络带宽
5.用于独立于页面的CSS,有利于搜索引擎的收录
CSS如何去写？
选择器:就是你要选择谁，然后改变什么
CSS的导入方式:
内部样式:
位置:范围内
格式:
特点:
适合同一个页面的效果实现，其他页面无效
行内样式:
位置:所需要实现的标签内
格式:
<p style="color:red">
特点:
适合某一个标签的样式修改
外部样式:
独立创建一个css文件，这个文件里面不需要写style,直接写样式即可
1.在head当中，<link href="css/style_demo.css" rel="stylesheet" type="text/css" />
2.在head当中的style当中,@import url("css/style_demo.css" );
一般来说只会使用第一种，第二种几乎不用，因为link标签是属于xhtml的
而@import属于css2.1的规则，如果浏览器不支持@import，也就意味着你的样式无效
如果你使用的是link进行导入，先加载CSS样式，然后再去显示整个网页
如果你使用的@import，是先加载网页，再去显示CSS样式
适合多个页面共享一个CSS样式
样式表的优先级:
行内样式表 > 内部样式表 > 外部样式表
一般来说，我们只会使用外部样式表
格式:
选择器{
属性:属性值;
}
选择器分类:
基础选择器:
标签选择器:
标签名{
属性:属性值;
}
注意:属性值后的分号，你可以不写的 但是W3C的标准是必须要写的，而大部分
浏览器都遵循了W3C的标准，如果不写 可能会有部分浏览器无法使用。
特点:
一旦符合规则的标签，全部会实现同样的CSS效果
类选择器:
<i class="class">类选择器</i>
.类名{
属性:属性值;
}
特点:
所有符合类名的标签，都会实现同样的效果
类名不能以数字开头
ID选择器:
<p id="id">ID选择器我</p>
#ID名{
属性:属性值;
}
特点:
所有符合ID名的标签，都会实现同样的效果
但是，在同一个页面当中，标签不能出现同名的ID(js会出现问题)
选择器的优先级:ID选择器 > 类选择器 > 标签选择器
实例练习：
望庐山瀑布:
诗正文使用14px字体，颜色为绿色
水调歌头:
标题为红色，字体大小为18px，
正文第一段字体大小为12px,字体为红色
第二段字体颜色为黑色，字体大小为12px
如梦令:
使用标签选择器设置标题字体大小为20px
页面当中所有段落的文字为16px
使用类选择器设置译文和正文内容字体颜色为绿色
想办法将译文字体颜色改变为蓝色
复合选择器:
指两个及两个以上的选择器进行组合使用。
交集选择器:
标签选择器+类(ID)选择器{
属性:属性值;
}
特点:既要满足是否使用了某个标签选择器，也要满足是否使用了某个类或者ID选择器(也就说明标签选择器和类或者ID选择器必须同时满足)
后代选择器:
选择器+空格+选择器{
属性:属性值;
}
特点:无隔代限制，必须包含嵌套关系，例如p标签下面的span标签
子代选择器:
选择器>选择器{
属性:属性值;
}
特点:子代必须是父类的直接子代，不能存在隔代关系
并集选择器:
选择器,选择器,选择器,选择器,选择器,选择器{
属性:属性值;
}
特点:所有的选择器都实现同一个效果。
CSS继承性的问题:
html -> head ->title
body ->h1
p
ul -> li -> ol ->li ->ul
div
如果存在嵌套关系，父元素的属性发生了改变，子元素也会随之改变，
但是h标签无法继承父元素的字体大小，a标签无法继承父元素的颜色
文本样式:
background: firebrick;
/设置字体样式/
color: khaki;
/设置水平对齐方式/
text-align:center;
/文字的首行缩进/
text-indent:2em;
/文本的样式修饰 一般只用下划线和取消下划线/
text-decoration:underline;
字体样式:
/文字大小/
font-size:20px;
/文字样式/
font-family:“宋体”;
/文字风格/
font-style:oblique;
/文字粗细/
font-weight:bold;
/字体连写 字体风格 字体粗细 字体大小 样式(顺序不能乱)/
/font:oblique bold 36px “微软雅黑”;/
超链伪类:
/ 鼠标悬浮所触发的样式/
.baidu:hover{
color: thistle;
font-size:10px;
}
/当超链接被访问之后的链接（鸡肋）/
.wangyi,
.baidu:visited {
color: darkcyan;
font-size: 50px;
}
/当鼠标点击当中所触发的样式/
.tencent:active{
color: green;
}
/*未访问之前的颜色*/
.tencent:link {
color:deepskyblue;
font-size: 180px;
}
布局的使用
CSS+DIV
用途:
div+css是现在主流的web设计模式
div主要的作用:
对网页进行布局
对网页内容进行对应的排版
div一般配合CSS，并且设置高和宽，否则无意义。
颜色的表示形式:
三原色:rgba(46,61,73,.4)
进制:#000000
单词:red
背景颜色:background-color:red;
图片背景:background-image: url(img/timg.jpg);
背景重复方式:background-repeat:no-repeat;
repeat-x:沿着x轴平铺
repeat-y:沿着y轴平铺
no-repeat:图像不平铺
repeat:图像平铺
图像大小:background-size: 50%;
图像定位:
background-position-y:沿着y轴移动
background-position-x:沿着x轴移动
移动方式:
y%/x%:依照百分比来移动
ypx/xpx:依照像素移动
x轴:left/center/right
y轴:top/center/bottom
背景连写:颜色/路径/x轴/y轴/平铺方式
background: red url(img/timg.jpg) 250px 150px no-repeat;
了解发展史
W3C:HTML 结构标准 / CSS 表现标准 / JavaScript 行为标准
世界上第一款浏览器 94年网景(Netscape Communications Corporation)公司开发。
95年和sun公司开发出Java
网景和sun进行了深度的合作 java+script= javascript
2003年之前，js其实很少有人使用，因为js就是垃圾广告的代名词。
2004年，一家伟大的公司彻底改变了js的命运，这就公司就谷歌，因为谷歌推出了一种
技术，这种技术一直沿用至今，仍然都是目前主流的技术(AJAX)
ajax:异步加载
认识js：
1.js是什么?
js一个可以嵌入到HTML网页当中，是基于对象和事件驱动的脚本语言
2.js的特点?
1.对于用户有非常良好的交互性
2.具备非常强的安全性(对于用户)，JS没有任何的权限可以访问你的系统资源和磁盘
3.是跨平台，因为是基于浏览器的
3.js能做什么?
1.js能够实时动态的修改你的CSS和你的HTML代码
2.能够动态的校验数据
4.js的组成
DOM(文档对象模型)
BOM(浏览器对象模型)
5.怎么去使用js?
1.行内
<input type="button" value="我是个没用的东西" οnclick="alert('我被点击了')"/>
2.内部
<script type="text/javascript"/>
alert('我被加载了');
</script>
3.外部
<script type="text/javascript" src="../js/js_demo.js"/>
JS代码放在哪儿？
原则上,你JS放任意位置都没问题，但是在不影响功能的前提下，建议越晚加载越好
二:JS的基本语法
typeof获取当前数据的类型
js当中的原始数据类型:
number:数字
string:字符串类型
boolean:布尔类型
null:空类型
underfind:未定义
number/string/boolean 伪数据类型(等同于java的自动拆装箱)
类型转型:
number/boolean类型转成string
toString();
string/boolean转number
parseInt();
parseFloat();
string转成number parseInt(x) 字符串必须开头包含数字，最后的结果就是开头的数字
强制类型转换:
Boolean(),强转布尔
数字如果转成布尔,false即0 true即1
字符串如果转成布尔，空内容即false,有内容及true
Number()
布尔转数字，true即1 false即0
字符串转数字，不能转
引用数据类型
java:Object ob = new Object();
js:var ob = new Number();
运算符:
赋值运算:
var x = 5;
算数运算:
+ - * /(操作跟java一致，你们不让我讲)
逻辑运算:
&& ||
比较运算:
< > <= >= != == ===
全等:需要数据类型和数据值完全匹配
三元运算:
3 > 2 ? 3 : 2;
void运算:
<a href="javascript:void(0)">点击我跳转</a>
类型运算符：
typeof:获取数据类型
instanceof:判断某一个数据是否为某种数据类型
逻辑语句:
1.if
if(x > 5){
alert(“大于”);
}
2.if else
if(x > 5){
alert(“大于”);
}else{
alert(‘小于’);
}
3.switch(){
case “css”:
alert(“xxx”);
break;
default:
alert(“xxx”);
}
4.for
for(var a = 0;a < 5;a++){
alert(a);
}
5.for in
var arr = [1,56,1,5,“s”];
for(s in arr){
//alert(s);//索引编号
alert(arr[s]);
}
————————————————
版权声明：本文为CSDN博主「苏绪」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41719737/article/details/81949812HTML与CSS学习基础总结
原创苏绪 发布于2018-08-22 20:01:13 阅读数 2073 收藏
展开
先了解学习的知识点有哪些：
HTML
HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。
CSS
CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。
可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
JS
JS 全称（javascript）中文是java脚本的意思 。
它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。
但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。
为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））
其次js的作用“增强页面的趣味性，响应用户的行为”； 特点（弱解释脚本语言，可以被浏览器直接解析 不需要编译）
js的输出，有两种：
1.控制台输出（console.log()）不会对文档造成影响
2.文档中输出 document.write(“xxxx”) 会对文档造成影响
简单了解一下javaEE的基础知识
什么是JAVAEE?
主要是面向企业级开发(基础的概念，实际上远远不止如此)，对于我们来说
主要还是从事B/S架构的开发。
软件结构的分类：
C/S架构的开发(客户端到服务器的开发):
例如:吃鸡、QQ、LOL(有实体的应用客户端)
特点:
1.有客户端、必须要安装客户端程序
2.要进行客户端的升级，除了服务器进行代码的更新，客户端也必须
重新安装或者在线进行升级。
B/S架构的开发(浏览器到服务器的开发):
例如:淘宝、天猫、腾讯网、网页游戏
特点:
1.不需要安装任何的实体客户端，只需要一个浏览器(内核)即可
2.要进行客户端升级，只需要服务器进行代码更新，客户端不需要进行任何操作
其实，现在太部分的企业采用都是B/S架构(并不是说C/S比较少)
两者来说，他们在各自的领域应该是怎么样的?
C/S:消耗的是你的系统资源(CPU/GPU/内存)，所以运行的速度会比较流畅
而且对于图层渲染来说，B/S架构是永远达不到C/S架构的地步，适合做有动画效果
、启动速度快等等软件
B/S:无法直接获取你的系统资源，所有的系统资源的调配其实是由浏览器来做的
但是，浏览器本质是上也是基于C/S，B/S不适合特大型的实体软件(游戏开发)
简单了解网页的源来！
1.什么是前端？
1.前端其实就是将设计师设计好的效果图，通过网页的形式展现给客户
2.什么是网页?
2.网页是由图片、文字、链接、视频、音乐、输入框、表单等组成
3.WEB标准
HTML: 结构标准 相当于建房子的地基和框架,相当于人的身体
CSS: 表现标准 相当于房子的装修，相当于妹子化妆
JS: 行为标准 相当于房子里面只智能家居，相当于妹子跳舞
4.浏览器
浏览器的内核(渲染引擎):也就是浏览器所采用的引擎，这个渲染引擎决定了你的网页的
显示方式以及排版布局等等相关信息(遵循标准)
IE/谷歌/欧朋/火狐/苹果(这样就会造成浏览器兼容的问题)
5.html
xhtml1.0 W3C推荐的版本 2000年发布
xhtml2.0 因为改变太大，最终胎死腹中
HTML4.0 W3C推荐的版本1997年12月
HTML5 2004年提出，2006年开始火爆，而且这个版本跟之前所有的版本都不同，改变太大
而且是一个完全新的团队在做(火爆的主要原因还是因为移动端)。
HTML:超 文本 标记 语言
文本:说明HTML是由文本组成
超:说明HTML是由超链接组成
标记语言:说明HTML是使用标记进行组合的(解释性语言，由浏览器进行解释执行)
6.HTML怎么写？
标准结构:
<!doctype html> //文档声明(告诉浏览器以什么标准来执行下面的代码)
<html> // HTML的根标签 所有的HTML都必须写在根标签里面
<head></head> //HTML的头部标签,里面的内容不显示在浏览器主体，一般用于设置、导入等相关文件
<body></body>// HTML的主体标签，里面的所有内容会直接的显示在浏览器
</html>
7.HTML的标签分类:
单标签:<!doctype html>
双标签:
可单可双:
包含关系:<head><title>这个代码贼棒棒</title></head>
并列关系:<head></head><body></body>
8.HTML的开发工具:
1.记事本(推荐使用)
2.DW(,给设计师用的 很老)
3.sublime(专业级开发，插件式安装 缺什么补什么吗，很好用)
4.webstorm(很牛逼，界面非常好看 但是收费，而且太智能)
5.Hbuilder(你们必须得支持，国产的，而且是Java写的 非常适合H5的开发，用着很舒服)
9.HTML的基础标签
9.1 文字标签
文字加粗:
文字斜体:
下划线:
删除线:
注意:上面多个实现方式，在xhtml1.0版本当中，明确推荐使用后者
因为后者是语义化标签，针对浏览器来说，更加喜爱后者。
9.2 功能标签
换行:<br/>
水平线:<hr/>
9.3 标题标签
<h1> ~ <h6>
h6以下的字体均为默认字体，h系列的标签,具备加粗和换行的功能
9.4 段落标签
<p></p>
段落标签,在每一个段落都是单独显示，除了进行分段，他还是一个容器(使用频率非常大)
图像标签:
超链接标签:
点击我到百度
打开方式:
_blank:新开窗口
_self:默认窗口
注意:
如果需要访问的是一个具体路径，你直接写路径就可以了
如果需要访问的是网络上的资源，则需要写上资源的协议名(http://www.baidu.com / ftp://172.18.33.10)
同时，还可以下载指定的压缩文件
列表:
无序列表:
<ul type="circle">
<!--li是这个无序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>赵丽颖</li>
</ul>
有序列表:
<ol type="6-15">
<!--li是这个有序列表的每个列表项-->
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
<li>林月如</li>
<li>胡歌</li>
<li>林月如</li>
</ol>
定义列表:
<dl>
<!--声明为列表的标题-->
<dt>橘梨纱最爱的</dt>
<!--声明为这个标题下面的内容-->
<dd>苏绪</dd>
<dd>阿香</dd>
<dt>阿香的</dt>
<dd>苏绪</dd>
<dd>阿香</dd>
</dl>
实例练习:
我的电脑文件
<ul>
<li>我的电脑
<ul>
<li>本地磁盘C
<ul>
<li>我的电影</li>
<li>我的香格里拉</li>
</ul>
</li>
<li>本地磁盘D
<ul>
<li>我的资料</li>
<li>我的全家福</li>
</ul>
</li>
</ul>
</li>
</ul>
表格:
<table>
<!--一个tr即代表表格的一行-->
<tr align="center" bgcolor="fuchsia">
<!--一个td即代表这个行里面的一个单元格-->
<td bgcolor="aqua">香格里拉</td>
</tr>
</table>
表格的边框:border="1"
表格的宽度:width="300px"
表格的高度:height="100px"
单元格与单元格之间的间距:cellspacing="0px"
单元格内容与单元格内间距:cellpadding="10px"
水平对齐的方式:align="center"(左/中/右)[如果是table设置，则设置的是表格的对齐的方式]
设置背景颜色:bgcolor="fuchsia"
设置边框的颜色:bordercolor="red"
合并同一个行上的单元格:colspan="2"
合并同一个列上的单元格:rowspan="2"
表格语义化:
表格语义化写法和普通表格没有任何区别，只不过表格语义化有益于搜索引擎的摘取
网页的常用设置:
<meta name="keywords" content="胡歌,最有涵养的明星,比较崇拜的之一,枪支迷药" />
<!--设置网页描述-->
<meta name="description" content="阿香何时离开的" />
<!--设置网页的作者-->
<meta name="author" content="香格里拉" />
<!--设置网页的字符集编码-->
<meta charset="utf-8" />
<!--网页重定向-->
<meta http-equiv="refresh" content="5,http://www.baidu.com" />
表单:
表单的作用:负责数据采集
表单主要分为：表单控件、提示信息、表单域
表单控件:
包含了具体的表单功能，比如按钮、输入框、单选框、复选框、密码框、下拉框等等
提示信息:
一个完整的表单应该包含对于用户的友好提示，或者一些能够对事件进行解释说明的文字
表单域:
其实就相当于一个容器，这个容器包含了所有的控件和提示信息，可以通过定义相关控件
来处理不同的信息，也可以将这些信息发送到服务器后台当中，如果不定义表单域，也就
意味着你这里输入的所有信息是无法发送到服务端。
表单怎么写?
表单域:
<form action="login.do" name="login" method="get/post">
</form>
action:用于提交表单信息到服务端的某个(脚本)程序
name:你这个表单域的名字，主要用户后端进行获取 前端并没有多大用处
method：你这个表单的提交方式，默认参数为get
get:所有的数据以参数进行提交，所提交的参数会直接显示在你的url(如果是敏感数据或者大容量数据，一般不建议使用get进行提交)
post:适合敏感数据和大容量数据的提交，他提交的方式为实体参数，url并不会直接显示
表单控件:
<!--文本框 readonly-->
账号:<input type="text" maxlength="6" name="username" value="请输入你的账号"/>
<!--密码框-->
密码:<input type="password"/>
<!--密码框-->
性别:<input type="radio" name="y"/>男<input type="radio" name="y" />女
<!--复选框-->
爱好:<input type="checkbox" name="kl"/>喝可乐<input type="checkbox" name="lm"/>撩妹<input type="checkbox"/>爱林月如<input type="checkbox"/>学习JAVA
<!--下拉框-->
家庭住址:<select>
<option value="hn">湖南</option>
<option selected>广东</option>
<option>湖北</option>
<option>福建</option>
<option>江苏</option>
<option>北京</option>
</select> <select>
<option>湘潭</option>
<option>永州</option>
<option>深圳</option>
<option>湘西</option>
<option>长沙</option>
<option>张家界</option>
</select>
<!--上传组件-->
请上传文档:
<!--提交按钮-->
<input type="submit" value="提交" />
<!--重置按钮-->
<input type="reset" value="重写" />
<!--图片-->
<input type="image" src="img/img.png" />
<!--普通按钮-->
<input type="button" value="提交" />
关键字的功能解释：
maxlength=“6” 设置输入框的输入长度
name=“username” 设置控件的名字,这个参数主要给后端工程师进行调用
value=“请输入你的账号” 控件的实际内容，后端工程师所需要的其实就是这个内容
readonly=“readonly” 设置控件只读状态(不可编辑)
selected=“selected” 用于设置下拉框的默认选项
submit:提交后立即执行到服务器
image:理论上跟submit一致，但是一般只配合js使用
button:普通按钮，没有任何效果，但是用的非常多 一般配合js使用
页面美观——CSS
什么是CSS?
- CSS是指层叠样式
- CSS的作用是用于美化HTML页面的中的内容(字体、颜色、高宽、大小)
- CSS另外的作用就是可以对网页进行布局(CSS+DIV)
CSS的优势?
1.内容与表现分离
2.网页的表现形式高度统一，便于后期维护
3.具备极为丰富的样式，页面美化更加灵活
4.减少网页的代码量，增加网页的浏览速度 可以节省网络带宽
5.用于独立于页面的CSS,有利于搜索引擎的收录
CSS如何去写？
选择器:就是你要选择谁，然后改变什么
CSS的导入方式:
内部样式:
位置:范围内
格式:
特点:
适合同一个页面的效果实现，其他页面无效
行内样式:
位置:所需要实现的标签内
格式:
<p style="color:red">
特点:
适合某一个标签的样式修改
外部样式:
独立创建一个css文件，这个文件里面不需要写style,直接写样式即可
1.在head当中，<link href="css/style_demo.css" rel="stylesheet" type="text/css" />
2.在head当中的style当中,@import url("css/style_demo.css" );
一般来说只会使用第一种，第二种几乎不用，因为link标签是属于xhtml的
而@import属于css2.1的规则，如果浏览器不支持@import，也就意味着你的样式无效
如果你使用的是link进行导入，先加载CSS样式，然后再去显示整个网页
如果你使用的@import，是先加载网页，再去显示CSS样式
适合多个页面共享一个CSS样式
样式表的优先级:
行内样式表 > 内部样式表 > 外部样式表
一般来说，我们只会使用外部样式表
格式:
选择器{
属性:属性值;
}
选择器分类:
基础选择器:
标签选择器:
标签名{
属性:属性值;
}
注意:属性值后的分号，你可以不写的 但是W3C的标准是必须要写的，而大部分
浏览器都遵循了W3C的标准，如果不写 可能会有部分浏览器无法使用。
特点:
一旦符合规则的标签，全部会实现同样的CSS效果
类选择器:
类选择器
.类名{
属性:属性值;
}
特点:
所有符合类名的标签，都会实现同样的效果
类名不能以数字开头
ID选择器:
<p id="id">ID选择器我</p>
#ID名{
属性:属性值;
}
特点:
所有符合ID名的标签，都会实现同样的效果
但是，在同一个页面当中，标签不能出现同名的ID(js会出现问题)
选择器的优先级:ID选择器 > 类选择器 > 标签选择器
实例练习：
望庐山瀑布:
诗正文使用14px字体，颜色为绿色
水调歌头:
标题为红色，字体大小为18px，
正文第一段字体大小为12px,字体为红色
第二段字体颜色为黑色，字体大小为12px
如梦令:
使用标签选择器设置标题字体大小为20px
页面当中所有段落的文字为16px
使用类选择器设置译文和正文内容字体颜色为绿色
想办法将译文字体颜色改变为蓝色
复合选择器:
指两个及两个以上的选择器进行组合使用。
交集选择器:
标签选择器+类(ID)选择器{
属性:属性值;
}
特点:既要满足是否使用了某个标签选择器，也要满足是否使用了某个类或者ID选择器(也就说明标签选择器和类或者ID选择器必须同时满足)
后代选择器:
选择器+空格+选择器{
属性:属性值;
}
特点:无隔代限制，必须包含嵌套关系，例如p标签下面的span标签
子代选择器:
选择器>选择器{
属性:属性值;
}
特点:子代必须是父类的直接子代，不能存在隔代关系
并集选择器:
选择器,选择器,选择器,选择器,选择器,选择器{
属性:属性值;
}
特点:所有的选择器都实现同一个效果。
CSS继承性的问题:
html -> head ->title
body ->h1
p
ul -> li -> ol ->li ->ul
div
如果存在嵌套关系，父元素的属性发生了改变，子元素也会随之改变，
但是h标签无法继承父元素的字体大小，a标签无法继承父元素的颜色
文本样式:
background: firebrick;
/设置字体样式/
color: khaki;
/设置水平对齐方式/
text-align:center;
/文字的首行缩进/
text-indent:2em;
/文本的样式修饰 一般只用下划线和取消下划线/
text-decoration:underline;
字体样式:
/文字大小/
font-size:20px;
/文字样式/
font-family:“宋体”;
/文字风格/
font-style:oblique;
/文字粗细/
font-weight:bold;
/字体连写 字体风格 字体粗细 字体大小 样式(顺序不能乱)/
/font:oblique bold 36px “微软雅黑”;/
超链伪类:
/ *鼠标悬浮所触发的样式*/
.baidu:hover{
color: thistle;
font-size:10px;
}
/*当超链接被访问之后的链接（鸡肋）*/
.wangyi,
.baidu:visited {
color: darkcyan;
font-size: 50px;
}
/*当鼠标点击当中所触发的样式*/
.tencent:active{
color: green;
}
/*未访问之前的颜色*/
.tencent:link {
color:deepskyblue;
font-size: 180px;
}
布局的使用
CSS+DIV
用途:
div+css是现在主流的web设计模式
div主要的作用:
对网页进行布局
对网页内容进行对应的排版
div一般配合CSS，并且设置高和宽，否则无意义。
颜色的表示形式:
三原色:rgba(46,61,73,.4)
进制:#000000
单词:red
背景颜色:background-color:red;
图片背景:background-image: url(img/timg.jpg);
背景重复方式:background-repeat:no-repeat;
repeat-x:沿着x轴平铺
repeat-y:沿着y轴平铺
no-repeat:图像不平铺
repeat:图像平铺
图像大小:background-size: 50%;
图像定位:
background-position-y:沿着y轴移动
background-position-x:沿着x轴移动
移动方式:
y%/x%:依照百分比来移动
ypx/xpx:依照像素移动
x轴:left/center/right
y轴:top/center/bottom
背景连写:颜色/路径/x轴/y轴/平铺方式
background: red url(img/timg.jpg) 250px 150px no-repeat;
了解发展史
W3C:HTML 结构标准 / CSS 表现标准 / JavaScript 行为标准
世界上第一款浏览器 94年网景(Netscape Communications Corporation)公司开发。
95年和sun公司开发出Java
网景和sun进行了深度的合作 java+script= javascript
2003年之前，js其实很少有人使用，因为js就是垃圾广告的代名词。
2004年，一家伟大的公司彻底改变了js的命运，这就公司就谷歌，因为谷歌推出了一种
技术，这种技术一直沿用至今，仍然都是目前主流的技术(AJAX)
ajax:异步加载
认识js：
1.js是什么?
js一个可以嵌入到HTML网页当中，是基于对象和事件驱动的脚本语言
2.js的特点?
1.对于用户有非常良好的交互性
2.具备非常强的安全性(对于用户)，JS没有任何的权限可以访问你的系统资源和磁盘
3.是跨平台，因为是基于浏览器的
3.js能做什么?
1.js能够实时动态的修改你的CSS和你的HTML代码
2.能够动态的校验数据
4.js的组成
DOM(文档对象模型)
BOM(浏览器对象模型)
5.怎么去使用js?
1.行内
<input type="button" value="我是个没用的东西" οnclick="alert('我被点击了')"/>
2.内部
<script type="text/javascript"/>
alert('我被加载了');
</script>
3.外部
<script type="text/javascript" src="../js/js_demo.js"/>
JS代码放在哪儿？
原则上,你JS放任意位置都没问题，但是在不影响功能的前提下，建议越晚加载越好
二:JS的基本语法
typeof获取当前数据的类型
js当中的原始数据类型:
number:数字
string:字符串类型
boolean:布尔类型
null:空类型
underfind:未定义
number/string/boolean 伪数据类型(等同于java的自动拆装箱)
类型转型:
number/boolean类型转成string
toString();
string/boolean转number
parseInt();
parseFloat();
string转成number parseInt(x) 字符串必须开头包含数字，最后的结果就是开头的数字
强制类型转换:
Boolean(),强转布尔
数字如果转成布尔,false即0 true即1
字符串如果转成布尔，空内容即false,有内容及true
Number()
布尔转数字，true即1 false即0
字符串转数字，不能转
引用数据类型
```javascript
java:Object ob = new Object();
js:var ob = new Number();
运算符:
赋值运算:
var x = 5;
算数运算:
+ - * /(操作跟java一致，你们不让我讲)
逻辑运算:
&& ||
比较运算:
< > <= >= != == ===
全等:需要数据类型和数据值完全匹配
三元运算:
3 > 2 ? 3 : 2;
void运算:
<a href="javascript:void(0)">点击我跳转</a>
类型运算符：
typeof:获取数据类型
instanceof:判断某一个数据是否为某种数据类型
逻辑语句:
1.if
if(x > 5){
alert("大于");
}
2.if else
if(x > 5){
alert("大于");
}else{
alert('小于');
}
3.switch(){
case "css":
alert("xxx");
break;
default:
alert("xxx");
}
4.for
for(var a = 0;a < 5;a++){
alert(a);
}
5.for in
var arr = [1,56,1,5,"s"];
for(s in arr){
//alert(s);//索引编号
alert(arr[s]);
}
————————————————
版权声明：本文为CSDN博主「苏绪」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41719737/article/details/81949812
