HTML与CSS学习基础总结
HTML与CSS学习基础总结
先了解学习的知识点有哪些：
HTML
HTML指的是超⽂本标记语⾔（Hyper Text Markip Language），它不是⼀种编程语⾔⽽是⼀种标记语⾔，通过使⽤标签来描述⽹页。CSS
CSS （Cascading Style Sheets）是层叠样式表⽤来定义⽹页的显⽰效果。
可以解决html代码对样式定义的重复，提⾼了后期样式代码的可维护性，并增强了⽹页的显⽰效果功能。
简单⼀句话：CSS将⽹页内容和显⽰样式进⾏分离，提⾼了显⽰功能。
JS
JS 全称（javascript）中⽂是java脚本的意思 。
它的由来（在互联⽹刚兴起的时候，⽹络速度⽐较慢，⽽体验⼜是放在服务器端的，所以⽤户体验度⾮qq怎么恢复被删除的好友
常差，为了了解这⼀难题，⽹景公司发明了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 ⽂字标签
⽂字加粗:<b></b> <strong></strong>
⽂字斜体:<i></i> <em></em>
下划线:<u></u> <ins></ins>
删除线:<s></s> <del></del>
注意：上⾯多个实现⽅式，在xhtml1.0版本当中，明确推荐使⽤后者
因为后者是语义化标签，针对浏览器来说，更加喜爱后者。
9.2 功能标签
换⾏:<br/>
⽔平线:<hr/>
9.3 标题标签
<h1> ~ <h6>
h6以下的字体均为默认字体，h系列的标签，具备加粗和换⾏的功能
9.4 段落标签
<p></p>
段落标签，在每⼀个段落都是单独显⽰，除了进⾏分段，他还是⼀个容器(使⽤频率⾮常⼤)
图像标签:
<img src="图像的路径"
alt="当图⽚⽆法加载所给予⽤户的⽂字提⽰"
title="⿏标悬浮⾄图⽚所给予的⽂字提⽰"
width="设置图⽚的宽度(可以是像素也可以是百分⽐)"
height="设置图⽚的⾼度(可以是像素也可以是百分⽐)"
/>
超链接标签:祝高考成功的祝福语4字
<a href="路径" target="打开⽅式">点击我到百度</a>
打开⽅式:
_blank：新开窗⼝
_self：默认窗⼝
注意:
海参小米粥如果需要访问的是⼀个具体路径，你直接写路径就可以了
如果需要访问的是⽹络上的资源，则需要写上资源的协议名(www.baidu / 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>
实例练习:
我的电脑⽂件
<ul>
<li>我的电脑
<ul>
<li>本地磁盘C
<ul>
<li>我的电影</li>
<li>我的⾹格⾥拉</li>
</ul>
周一祝福语魔方的公式</li>
<li>本地磁盘D
<ul>
<li>我的资料</li>
<li>我的全家福</li>
</ul>
</li>
</ul>
</li>
</ul>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。