HTML和CSS是去年学习的了，可能有一些知识已经忘掉了（……），索性今天又复习了一遍，去W3C做了一个测试发现记住得东西还不算少，测试了一下sql数据库的知识发现正确率95%，看来我上学期有好好学习数据库啊，对得起飞飞老师了hhh（得意.jpg）。

1.介绍

  • HTML：超文本标记语言

  • Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

（通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。）

  • XHTML：可扩展超文本标签语言（EXtensible HyperText Markup Language），XML+HTML，XML 描述数据，HTML 显示数据。

  • SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

  • CSS：层叠样式表。（Cascading Style Sheets ）

    将网页内容和显示样式进行分离，提高了显示功能。

2.关系

“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为”

3.内容

1）Html的五个规范：

> 一个HTML文件开始和结束的标签。<html></html>
> HTML包含：<head></head>  <body></body>
> HTML要有开始标签，也要有结束标签。
> HTML的代码不区分大小写。
> 有些标签没有结束标签，例如：换行<br/>水平线<hr/>
>

2）HTML操作思想

网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要用标签把要操作的数据包起来，通过修改标签属性来实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。

3）HTML中常用的标签。

  1. 文字标签和注释标签：
■ 文字：修改文字的样式。
   -<font></font>
   -属性：
      ·size：文字大小 （1-7）超出7还是默认7.
      ·color：颜色（十六进制数）#  （RGB）
■ 注释：<!—文字-->（！是英文的感叹号）
■ 标题标签：（自动换行）<h1></h1>
■ 水平线标签：<hr size=""/>
   -属性：size（水平线粗细）、color
■ 特殊字符 尖括号等特殊字符进行转义：
<     &lt;
>     &gt;
空格   &nbsp;
&      &amp;
■ 列表标签
<dl></dl>：列表的范围
<dt></dt>：上层内容
<dd></dd>：下层内容（缩进）
如：
<dl>
	<dt>科目</dt>
		<dd>数学</dd>
		<dd>语文</dd>
</dl>
●有序列表：
<ol></ol>：范围【属性：type：1（默认） a i（罗马数字）】
<li>具体内容</li>
●<ul></ul>：无序列表的范围
属性：type：空心圆circle、实心圆disc、实心方块square，默认是disc
Ul里面 <li></li>
■ 图像标签
<img src=""/>
属性：
·src：路径
·width：宽度
·height：高度
·alt：图片上显示的文字（鼠标移动到图片上显示）【兼容性很差】
■ 路径
分类：
·绝对路径（如：c:\…… http：\\）
·相对路径：一个文件相对于另外一个文件的位置。
（1.图片和html文件在一个路径下，可以直接写文件名称。
 2.下层目录里：在html中使用img文件中的a.jpg文件：img\a.jpg
 3.上层目录里：图片和html文件的关系：图片在html所在目录的上层目录  ../c.png
 4.上层的上层：../../）
■ 超链接标签
·超链接资源
<a href="">文字</a>
属性：target：设置打开方式（默认是当前页面打开）：_blank、_self
<a href="#"></a>（当超链接不需要到任何的地址时）
·定位资源
<a name="top">顶部</a>【先定义一个位置】
<a href="#top">回到顶部</a>
<pre></pre>原样输出【就是比如代码带有缩进的格式，里面的文字将会以原样输出】
■ 表格标签
对数据进行格式化，使数据显示更加清晰。
<table></table>：表格的范围
table 里面<tr></tr>(代表几行)
tr里面<td></td>（单元格[列]）
cellspacing（单元格间隔）
例：
<table border = "1" bordercolor="black" cellspacing="0" width="40" height="15">
<caption>标题</caption>
<tr align="center">
		<td align="right">性别</td>
		<td>年龄</td>
</tr>
<tr>
		<td>女</td>
		<td>18</td>
</tr>
</table>

th可以居中和加粗。
表格标题：<caption></caption>
■ 合并单元格
rowsoan：跨行
<td rowspan="3">人员信息</td>
colspan：跨列
<td colspan="3">人员信息</td>
    ■ 表单标签【非常重要】（可以提交数据）
<form action="路径"></form>：定义一个表单的范围
-action是指提交到什么页面。
-method表单提交方式：（常用两种）get，post（默认get）
【get post区别：get请求地址栏会携带提交的数据，post不会携带（请求体里面。）
get请求安全级别较低，post较高。
get请求数据大小的限制，post没有限制。】
-enctype：一般请求下不需要这个属性，做文件上传的时候需要设置。
-输入项：<input type="输入项的类型"/>
-普通：<input type="text"/>
-密码：<input type="password"/>
-单选输入项：<input type="radio" name="sex"/>女<input type="radio" name="sex"/>男
【属性：checked="checked" 表示默认选择】
【属性：name（属性值要一样）】
-复选输入项：<input type="checkbox"/>
-文件输入项：<input type="file"/>
-下拉输入项（不是在input里）
<select name="birth">
<option value="1991"select="selected">请选择</option>
		<option value="1991">1991</option>
</select>
-文本域：
<textarea cols="10" rows="10"></textarea>
-隐藏项：
<input type="hidden"/>
-提交按钮：
<input type="submit" value="注册"/>
【输入项里需要一个name属性，单选里需要一个values来判断是什么内容】
-使用图片提交按钮：<input type="image" src="a.jpg"/>
-重置按钮
<input type="reset" value="重置"/>
-普通按钮
<input type="button"/>

4）其他
b：加粗
s：删除线
u：下划线
i：斜体
pre：原样输出
sub：上标 例如：

3<sub>100</sub>

sup：下标

p：段落（比br标签多一行）

div：【自动换行】
span：【一行显示】

5）html头标签

head里的标签。

-title

-meta标签：设置页面相关内容。

<head>
<meta http-equiv="Content-Type" content="text/html/>
<meta name="author" content="fangmuheng">
<meta name="generator" content="sublime text">
</head>

-base标签：设置超链接基本属性。

例如：

<base target="_blank"/>

-link：引入外部文件。

6）框架标签
<frameset rows="80,*">（划分为上下两部分）
<frame name="lower_left" src="a,html">
框架标签不能写在body标签里。
案例1：（点击2中的内容，在1中会产生相应的页面）
<frameset rows="8,*"><!--把页面划分为上下两部分-->
		<frame name="top" src="a.html"><!--上下页面-->
		<frameset cols="150,*"><!--把下面的部分划分为左右-->
			<frame name="lower_left" src="b.html">
			<frame name="lower_right" src="c.html">
		</frameset>
</frameset>
·要实现点击2中的超链接在1中展示出来，要在超链接的标签里加入：<a harf ="a.html" target="right">
案例2:
<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

7）

CSS和HTML结合方式：
（1）	每个html标签上面都有一个属性：style可以和css结合。
（2）	使用html标签：<style> 写在head里面。
<style type="text/css">
      <!--css代码-->
</style>
例如：
    <head>
        <title>HTML实例</title>
        <style type="text/css">
            div {
                background-color:blue;color:red;
            }
        </style>
    </head>
（3）	在style 标签里面适用语句：【某些浏览器下不起作用，所以一般用第四种。】
@import url(css文件的路径);
（4）	使用头标签 link，引入一个外部css文件。
<link rel="stylesheet" type="text/css" href="css文件的路径。">

8）

-优先级【针对(7)】
由上到下，从外到内，优先级由低到高。（后加载的优先级高）
格式：   选择器名称  {属性名：属性值；属性名：属性值：……}
-css选择器
（1）	标签选择器。【标签名】
（2）	class选择器。<div class="haha">aaa</div> haha就可以是一个选择器。
style里面：div.haha{}

.haha{}//只要选择器是haha的，都用这个效果。
（3）	id选择器。【每个html标签上都有这个属性id】
<div id="hhh">aaa</div>
style里面：div#hhh{}

#hhh{}//只要选择器是hhh的，都用这个效果。
优先级：style>id>class>标签选择器
-css扩展选择器。
（1）	关联选择器。【嵌套标签】
div p{}//修改div里面p标签的内容
（2）	组合选择器。【不同标签设置相同的样式】
div,p{}//修改div和p标签里的内容
（3）	伪元素选择器
css里面提供了一些定义好的样式，可以直接拿来使用。【如：超链接】

9）盒子模型

在进行布局前需要把数据封装到一块一块的区域内。（div）

【1】边框

​ border：2px solid blue;

上：border-top

下：border-bottom

左：border-left

右：border-right

【2】内边距

​ padding：20px

【3】外边距

​ margin：20px

10）

-css布局漂浮：
float
float:left; 文本流向对象的右边。
-css布局定位：
position:
属性值：
absolute：将对象从文档流中拖出。可以用top bottom等属性进行定位。
relative：直接用top、bottom定位。

例如：

<html>
<head>
<style type="text/css">
h2.ha
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2 class="ha">正文</h2>
</body>
</html>

4.少部分JS内容

1）Javascript：基于对象和事件驱动的语言，应用于客户端。
基于对象：提供好了很多对象，可以直接拿来使用。
事件驱动：html做的网站静态效果。javascript是动态。
客户端：浏览器。
2）js的特点：
-交互性。信息动态交互。
-安全性。不能访问本地磁盘文件。
-跨平台。java里面跨平台：虚拟机 js只需要浏览器即可。

3）js和java的区别【没有任何关系】
-java是oracle公司 js是网景公司
-js基于对象，java面向对象。
-java强类型语言，js是弱类型的语言。
-java需要先编译。js只需要解析。

4）js的组成
【ECMAScript
-ECMA：欧洲计算机协会
-由该组织制定的js语法
【BOM
-浏览器对象模型
【DOM
-文档对象模型
5）js和html的结合方式
-使用一个标签：

<script type="text/javascript">js代码</script>

​ -使用script标签引入外部一个js文件。

<script type="text/javascript" src=1.js></script>
//不要在script里再写内容了

6）js的原始类型和声明变量。
定义变量都是用关键字 var
■ 原始类型：
-string：var str=”abc”
-number：var m=”123”
-boolean：var f=”true”
-null：var date=new Date();
获取对象的引用，null表示对象引用为空，所有对象的引用也是object。
-undefined
定义一个变量，没有赋值。
var aa;
■ typeof();查看当前变量的数据类型。
7）js的语句
-if判断语句
-switch语句
-循环语句（while for）
-i++和++i和java一样
8）js的运算符
-js里面不区分整数和小数，123/1000=0.123
-字符串的操作：相加 和java一样（字符串连接），但相减即数字相减。NaN:不是一个数字进行相减
-boolean类型的相加减。true=1，false=0；
-==和===的区别：（都是判断）两个等号比较的是值 三个等号比较的是值和类型。
-引入知识：直接向页面输出的语句（内容显示在页面上）

document.write("aaa");
document.write("<br/>");

​ 可以向页面输出变量、固定值和html代码。
9）99乘法表案例

<html>
<head>
<title>99乘法表</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
document.write("<table border='1' bordercolor='blue'>");
//循环行
for(var i=1;i<=9;i++){
	document.write("<tr>");
	for(var j=1;j<=i;j++){
		document.write("<td>");
		document.write(j+"*"+i+"="+i*j);
		document.write("</td>");
	}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>

-document.write里面是双引号，如果设置标签的属性需要使用单引号。
-document.write可以输出变量，还可以输出html代码。
10）js的数组
定义方式（3种）

▼var arr=[1,2,3];
▼使用内置对象Array。  var arr1=new Array(5);//定义一个数组长度为5的数组。
arr1[0]="1";
▼var arr2=new Array(3,4,5);//定义一个数组，括号里面是元素。

-数组里面有一个属性length，可以查询数组长度。
-数组可以存放不同的数据类型的数据。
11）js的函数
定义函数（3种）

函数的参数列表里面，不需要写var，直接写参数名称。
■	function 方法名(参数列表){
		方法体；
	返回值可有可无；
}
■	匿名函数 
	var add = function(参数列表){
	方法体和返回值；
}
■	使用js里面的一个内置对象Function【动态函数】
var a = new Function("参数列表"，"方法体和返回值")；

12）js的全局变量和局部变量
全局变量：在script标签中定义一个变量，这个变量在页面中js部分都可以用.
局部变量：方法内部定义一个变量，只能在方法内部使用。
ie自带调试工具：F12
13）script标签所在位置

放到<body>的位置。
技术
html css

本博客所有文章除特别声明外，均采用 CC BY-SA 3.0协议 。转载请注明出处！

js学习笔记-初识js 上一篇
年终总结 下一篇