当前位置 博文首页 > 苏绪的博客：HTML与CSS学习基础总结
?
HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。
CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。
可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
JS?全称（javascript）中文是java脚本的意思 。
它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript? ? liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。
但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript.? ?后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。
为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））
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比较少)
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年开始火爆，而且这个版本跟之前所有的版本都不同，改变太大
?? ?而且是一个完全新的团队在做(火爆的主要原因还是因为移动端)。
?? ?
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的开发，用着很舒服)
文字加粗:<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="设置图片的高度(可以是像素也可以是百分比)"
?? ??? ??? ?/> ?<a href="路径" target="打开方式">点击我到百度</a>
?? ??? ?打开方式:
?? ??? ??? ?_blank:新开窗口
?? ??? ??? ?_self:默认窗口??<!-- ?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>
?? ??? ??? ?
?? ???
?<!--说明这是一个表格的结构-->
?? ??? ?<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"
?? ??? ?
<table>
?? ??? ??? ?<thead></thead> -- 表头
?? ??? ??? ?<tbody></tbody> -- 表身
?? ??? ??? ?<tfoot></tfoot> -- 表尾
?? ??? ?</table>?? ?
?? ??
网页的常用设置:
?? ???
?<!--设置网页关键字-->
?? ??? ?<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并不会直接显示?? ?账号:<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?
? ?1. CSS是指层叠样式
? ?2. CSS的作用是用于美化HTML页面的中的内容(字体、颜色、高宽、大小)
? ?3. CSS另外的作用就是可以对网页进行布局(CSS+DIV)
?? ?
CSS的优势?
?? ?1.内容与表现分离
?? ?2.网页的表现形式高度统一，便于后期维护
?? ?3.具备极为丰富的样式，页面美化更加灵活
?? ?4.减少网页的代码量，增加网页的浏览速度 可以节省网络带宽
?? ?5.用于独立于页面的CSS,有利于搜索引擎的收录
?? ?
CSS如何去写？
?? ?选择器:就是你要选择谁，然后改变什么
?? ?CSS的导入方式:
?? ??? ?内部样式:
?? ??? ??? ?位置:<head>范围内
?? ??? ??? ?格式:
?? ??? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ??? ?...
?? ??? ??? ??? ?</style>
?? ??? ?特点:
?? ??? ??? ?适合同一个页面的效果实现，其他页面无效
?? ??? ??? ?
?? ??? ?行内样式:
?? ??? ??? ?位置:所需要实现的标签内
?? ??? ??? ?格式:
?? ??? ??? ??? ?<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会出现问题)
?? ??? ??? ??? ?
?? ??? ??? ??? ?
??? ?
?? ??? ??? ??? ?
实例练习：
?? ?望庐山瀑布:
?? ??? ??? ? 诗正文使用14px字体，颜色为绿色
?? ?水调歌头:
?? ??? ??? ? 标题为红色，字体大小为18px，
?? ??? ??? ? 正文第一段字体大小为12px,字体为红色
?? ??? ??? ? 第二段字体颜色为黑色，字体大小为12px
?? ?如梦令:
?? ??? ??? ? 使用标签选择器设置标题字体大小为20px
?? ??? ??? ? 页面当中所有段落的文字为16px
?? ??? ??? ? 使用类选择器设置译文和正文内容字体颜色为绿色
?? ??? ??? ? 想办法将译文字体颜色改变为蓝色? ? ??
?? ?指两个及两个以上的选择器进行组合使用。
?? ?
?? ?交集选择器:
?? ??? ?标签选择器+类(ID)选择器{
?? ??? ??? ?属性:属性值;
?? ??? ?}
?? ?特点:既要满足是否使用了某个标签选择器，也要满足是否使用了某个类或者ID选择器(也就说明标签选择器和类或者ID选择器必须同时满足)
?? ?
?? ?
?? ?后代选择器:
?? ??? ?选择器+空格+选择器{
?? ??? ??? ?属性:属性值;
?? ??? ?}
?? ?特点:无隔代限制，必须包含嵌套关系，例如p标签下面的span标签
?? ?
?? ?子代选择器:
?? ??? ?选择器>选择器{
?? ??? ??? ?属性:属性值;
?? ??? ?}
?? ?特点:子代必须是父类的直接子代，不能存在隔代关系
?? ?
?? ?并集选择器:
?? ??? ?选择器,选择器,选择器,选择器,选择器,选择器{
?? ??? ??? ?属性:属性值;
?? ??? ?}
?? ?特点:所有的选择器都实现同一个效果。
?? ?
?? ?
CSS继承性的问题:
?? ?html -> head ->title
?? ??? ??? ?body ->h1?
?? ??? ??? ??? ? ? p
?? ??? ??? ??? ? ? ul ? -> ?li ?-> ol ?->li ?->ul
?? ??? ??? ??? ? ? div
?? ??? ??? ??? ? ??
?
文本样式:
?? ??? ??? ???
?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:异步加载
?
?? ?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的自动拆装箱)
