黑马程序员—java基础之html-js-dom
------- android培训、java培训、期待与您交流！ ----------
幸运之神的降临，往往只是因为你多看了一眼，多想了一下，多走了一步,机会永远是给有准备的人.
html
Html(Hyper Text Markup Language)就是超文本标记语言的简写，是最基础的网页语言。
Html的版本升级：HTML2.0(IETF)、HTML3.0(W3C)、HTML4.01、HTML5
Html是通过标签来定义的语言，代码都是由标签所组成。Html代码不用区分大小写,
Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成
头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。
体部分是真正存放页面数据的地方。
多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择
属性名与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范
字 体
1. 字体标签：<font>
例：<fontsize=5 color=red>字体标签示例</font>
注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具选取。
2. 标题标签：<h1><h2>…..<h6>
因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。
3. 特殊字符：
如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。
< < > > & &
" “ ® ? © ?
™ ? 空格
列 表
4. 列表标签：<dl>
<dt>：上层项目
<dd>：下层项目
例：
<dl>
<dt>游戏名称</dt>
<dd>星际争霸</dd>
<dd>红色警戒</dd>
<dt>部门名称</dt>
<dd>技术部</dd>
<dd>培训部</dd>
</dl>
效果：
列表中项目符号对应的标签
<ol>：数字标签（a A 1 i I）
<ul>：符号标签（○●■）
<li>：具体项目内容标签。此标签只在<ol> <ul>中有效。
通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。
图 像
5. 图像标签：<img>
例：<img src=”1.jpg” align=”right” border=”3” alt=”图片说明文字”/>
align:属性定义图片的排列方式，border用来设置图像的边框。Src 连接一个文件
6. 图像地图：<map>
应用：当要在图像中选取某一部分作为链接的时候。如：中国地图每个省所对应的区域。
map标签要和img标签联合使用。Href是超连接
<img src="Sunset.jpg" alt="图片说明文字" usemap="#Map" />
<map name=”Map”>
<area shape="rect" coords="50,59,116,104"href="1.html" />
<area shape="circle" coords="118,203,40"href="2.html" />
</map>
表 格
7. 表格标签：<table>
组成：标题标签：<caption>，给表格提供标题。
表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。
行标签：<tr>
单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。
格式：
<table border="1" width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->
<caption>表格标题</caption>
<tr><!--第一行 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<tralgin=”center”><!-- 第二行 -->
<td>张三</td>
<td>23</td>
</tr>
</table>
效果：
<table border="1"width="40%">
<tr>
<tr>
<thcolspan="2"> <!-- colspan：th标签占两列 -->
个人信息
</th>
</tr>
<tralign="center">
<td>张三</td>
<td>23</td>
</tr>
</tr>
</table>
效果：
每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。
THEAD、TFOOT包含关于表格列的信息。
TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）
使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。
TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。
超 链 接
8. 超链接标签：<a>
两种用法：
一、 超链接<a href=””>
例：
<a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>
<!-- href属性值可以是url，也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。 -->
target四个属性值的区别：
_blank:在一个新开的空白窗口中打开链接，此窗口匿名。
_parent：在父级窗口中打开
_self:在自身页面中打开链接
_top:在整个浏览器的最顶端(前端)开始打开链接
二、 定位标记<a name=””>
一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。
注：定位标记要和超链接结合使用才有效。
例：
<a name=”标记”>标记位置</a>
<p>…….<!--很多空行以制造网页过长的效果 -->
<a href=”#标记”>返回标记位置</a>
注：使用定位标记时一定在href值的开始加入#标记名。
框架
9. 框架标签：<frameset>
注：框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。
例：
<frameset rows="10%,*">
<framesrc="1.html" name="top" />
<framesetcols="30%,*">
<framesrc="2.html" name="left" />
<framesrc="3.html" name="right" />
</frameset>
</frameset>
这段代码会需要已经存在的3个html页面，分别是：1.html,2,html,3.html
效果：
注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身，如：noresize=”noresize”
画中画标签：<iframe>
<iframe src=”1.html” >
很遗憾，画中画你没有看到，因为你的浏览器不支持iframe标签。
</iframe>
框架标签现在不是很常用，布局都用div+css+table。框架很少使用了。
表单
表单标签：<form>
表单标签是最常用的标签，用于与服务器端的交互。
<input>：输入标签 ：接收用户输入信息。
其中的type属性指定输入标签的类型。
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。
单选框 radio 如：性别选择。
复选框 checkbox 如：兴趣选择。
隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值。
按钮 button 可以为其自定义事件。
文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
图像 image 它可以替代submit按钮。
<select>：选择标签提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。
<option>：子项标签属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。
<textarea>：多行文本框。如：个人信息描述。
<label>：用于给各元素定义快捷键。
for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。
accesskey 属性：指定快捷键，此快捷键需要和alt键组合使用。
例：
<label for="user"accesskey="u">用户名(u)</label>
<input type="text"id="user" />
头 标 签
头标签都放在<head></head>头部分之间。包括：title base meta link
. <title>：指定浏览器的标题栏显示的内容。
. <base>：
href 属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。
target 属性：指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。
<meta>：
name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。
http-equiv 属性：模拟HTTP协议的响应消息头。
例：
<meta http-equiv="refresh"content="3;url=http://www.sina.com.cn" />
表示打开此页面3秒后自动转到新浪页面。
. <link>：
rel 属性：描述目标文档与当前文档的关系。
type 属性：文档类型。
media：指定目标文档在哪种设备上起作用。
例：
<link rel="stylesheet"type="text/css" media="screen,print" href="a.css"/>
Other
<marquee>让内容动起来。
direction 属性：left right down up
behavior 属性：scroll alternate slide
<pre>：可以将文本内容按在代码区的样子显示在页面上。
XHTML XML
XHTML是可扩展的超文本标记语言（Extensible HyperText Markup Language）。
XHTML是w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂！可以理解为它是HTML一个升级版（HTML4.01）。
XHTML的代码结构更为严谨，是基于XML的一种应用。
XML是可扩展标记语言（Extensible Markup Language）
XML是对数据信息的描述。HTML是数据显示的描述。
XML代码规定的更为严格，如：标签不结束被视为错误。
XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。
各个服务器，框架都将XML作为配置文件。
css
1.定义方式:
a.style属性: 在每个HTML标签的style属性中定义
b.style标签: 在head标签中定义一个style标签, 在style标签中对页面元素统一指定样式
c.import:在style标签中使用@import方式导入一个css文件
d.link:在head标签中使用link标签引入一个css文件
2.优先级
style属性 > style标签 > 文件
3.选择器
a.标签选择器: 直接指定标签名, 选择页面中所有指定类型的标签
b.类选择器: 使用".类名"的方式选择页面中class属性为指定值的标签
c.ID选择器: 使用"#ID"的方式选择页面中ID为指定值的标签
d.包含选择器: "标签名 标签名" 选择指定标签下的所有子标签
e.子元素选择器: "标签名 > 标签名" 选择指定标签下的直接子标签
f.属性选择器: "标签[属性]" 选择包含指定属性的, 或者指定属性的值为指定值的标签
g.组合选择器: "选择器,选择器,选择器" 选择多个选择器选中的标签
h.伪元素选择器: "元素:状态" 选择指定标签的某种状态
JavaScript
1.定义方式
<scirpt>标签中定义
<scirpt>标签引用一个js文件
2.数据类型
number:数字, 所有数字都是number
boolean:布尔
string:字符串, 没有字符类型
object:对象
3.变量
JS变量不区分数据类型, 用var定义一个变量可以接收任意类型的数据.
JS变量即使没有初始化, 也能使用, 它的值是undefined
4.运算符
JS的number类型在做除法运算时, 不会忽略小数部分
JS的string类型在参与运算时会自动转换为number
JS的boolean类型在参与运算时也会自动转换为number
5.函数
JS的函数用function定义, 没有返回值类型, 没有形参类型
JS的函数不能重载, 如果两个函数同名, 后写的会覆盖先写的
JS函数调用时, 实参个数可以不和形参匹配
JS函数调用时, 实参会被封装在一个名为arguments的数组中, 传入几个实参, 数组的length就是几
JS中可以定义匿名函数, 当一个函数只使用一次时, 就可以匿名, 通常在事件处理的时候使用
6.数组
JS的数组用[]定义, 不区分数据类型, 长度可变
如果要定义一个指定长度, 但没有初始值的数组, 可以用new Array(size)的方式
DOM
window对象
1.属性
name窗口的名字
opener打开当前窗口的窗口
parent当前窗口的父级窗口
2.方法
alert()弹出消息对话框
confirm()弹出确认对话框
prompt()弹出输入对话框
setInterval()设置计时器, 每隔指定时间执行一次
clearInterval()清除由setInterval()设置的计时器
setTimeout()设置计时器, 等待指定时间之后执行一次(仅一次)
clearTimeout()清除由clearTimeout()设置的计时器
open()打开新窗口
close()关闭窗口
3.对象
history浏览器的浏览历史, 可以控制浏览器前进或后退
location浏览器的地址栏, href属性即是URL路径, 可以用来获取当前路径或者跳转到指定的路径
event事件对象, 可以用来获取事件发生时的鼠标坐标, 或者键盘按下的哪个按键
document页面中的文档, 可以用来获取页面中的元素, 创建一个新的元素
DOM(Document Object Mode)
1.什么是DOM
DOM就是文档对象模型的缩写, 在JavaScript中我们可以把HTML文档中每个节点都看作一个对象, 我们使用这些对象的属性和方法进行编程.
2.常用属性
childNodes 当前节点的所有子节点
parentNode 父级节点
previousSibling 前一个兄弟节点
nextSibling 下一个兄弟节点
firstChild 第一个子节点
lastChild 最后一个子节点
3.常用方法
document
getElementById() 根据ID获取文档中的元素, 得到1个对象或null
getElementsByName() 根据name属性获取文档中的元素, 得到1个数组, 有几个对象数组就有几个元素
getElementsByTagName() 根据标签名获取文档中的元素, 得到1个数组, 页面中有几个就得到几个元素
createElement() 创建新的元素
createTextNode() 创建新的文本节点
Element
replaceChild() 替换一个子节点
removeChild() 删除一个子节点
appendChild() 添加一个子节点
insertBefore() 插入一个子节点
cloneNode() 克隆节点
setAttribute() 设置属性
1241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
