黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM

我会带着你远行 2022-08-06 15:29 14阅读 0赞

—————————— [ASP.Net+Android+IOS开发][ASP.Net_Android_IOS]、[.Net培训][ASP.Net_Android_IOS]、期待与您交流！ ——————————

基本标签（a、p、img、li、table、div、span）、表单标签、iframe、frameset、样式

1：Html  (Hypertext Markup Language) 超文本标记语言

2：CSS   (Cascading Style Sheet)层叠样式表

3：JavaScript

4：DOM (document object model)文档对象模型

![091922267069799.jpg][]

一：Html  （Hypertext Markup Language ）

①：是超文本标记语言的简写，是最基础的网页语言。

②：是通过标签来定义的语言，代码都是由标签所组成。

③：代码不用区分大小写。

④：代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。

⑤：头部是给Html页面增加一些辅助或者属性信息，它里面的内容最先加载。

⑥：体部分是真正存放页面数据的地方。

Ⅰ：多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。

Ⅱ：想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性指的改变，增加了更多的效果选择。

Ⅲ：属性与属性值之间用"="连接，属性值可以用双引号或者不用引号，一般都会用双引号。或公司规定书写规范。

Ⅳ：格式：<标签名 属性名 = '属性值'> 数据内容 </标签名>

<标签名 属性名 = '属性值' />

Ⅴ：操作思想：

为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作，就是在不断的改变容器的属性值。

常用标签的使用

1：字体标签<font>

例：<font size=5 color=red>字体标签示例</font>

注：简单颜色可以直接写对应的英文，复杂颜色用16进制表示，表现形式\#FF0000两个数为一组，按红，绿，蓝排列，如：00FF00表示绿色。建议用工具选取。

2：标题标签：<h1><h2>......<h6>

因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。

3：特殊字符：

如果要在网页上显示一些特殊符号，比如<> & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来标识。

<　　　　  <　　　　>　　　　>　　　　　 　&　　　 　&

"  　 　"　　　　&req;　　　 ®　　　　　 　&copy;　　　　©

&trade;  　  ™　　　 &nbsp;　　　空格

注：在Dreamweaver8中都有联想功能。

4：列表标签：<dl>

<dt>：上层项目

<dd>：下层项目

例：

</dl>

效果：

游戏名称

星际争霸

红色警戒

部门名称

技术部

培训部

列表中项目符号对应的标签

<ol>：数字标签（a  A  1  i  I）

<ul>：符号标签（ ο • ■）

<li>：具体项目内容标签。此标签只在<ol> <ul>中有效。

通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到css

5：图像标签：<img>

例：<img stc="1.jpg" align=" middle" border="3" alt="图片说明文字"/>

align：属性定义图片的排列方式，border用来设置图像的边框。src连接一个文件。

6：图像地图：<map>

应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。

map标签和img标签联合使用。Href是超链接

<map>

</map>

7：表格标签<table>

组成：标题标签：<caption>，给表格提供标题

表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。

行标签：<tr>

单元格标签：<td>，加载行标签的额里面。可以简单理解为先有行，在行中在加入单元格。

格式：

</tr>

</tr>

</table>

每个表格可以有一个表头一个表尾和一个表体（即正文），分别以THEAD,TFOOR和TBODY元素表示。

THEAD,TFOOR包含关于表格列的信息。

TBODY作用是：可以控制表格分行下载，从而提高下载速度。（页面的打开是先表格的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）

使用TBODY的目的是可以使得这些包含在内在的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。

TBODY这个标签可以控制表格分行下载，当表格内容很大时比较使用，在需要进行下载处加上<tbody>和</tbody>。

8：超链接标签：<a>

两种用法：

一：超链接<a href="">

例：

<!——href 属性值可以是url，也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。——>

二：定位标记<a name="">

一般在本页面中使用，当页面内容过长，定位标记会比拖动滚动条方便快捷。

注：定位标记要和超链接结合使用才有效。

例：

<a href="\#标记">返回标记位置</a>

注：使用定位标记时一定在href值的开始加入\#标记名。

9.框架标签：<frameset>

注：框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。

10.画中画标签：<iframe>

很遗憾，画中画你没有看到，因为你的浏览器不支持iframe标签。

</iframe>

框架标签现在不是很常用，布局都用dir+css+table.框架很少用了。

11：表单标签<form>

表单标签是最常用的标签，用于与服务器端的交互。

<input>：输入标签：接受用户输入信息。

其中的type属性指定输入标签的类型。

①：文本框text。输入的文本信息直接显示在框中。

②：密码框 password。输入的文本以原点或者星号的形式显示。

③：单选框 redio 如：性别选择。

④：复选框 checkbox 如：兴趣选择。

⑤：隐藏字段 hidden 在页面上不显示，但在提交的时候随其它内容一起提交。

⑥：提交按钮 submit 用于提交表单中的内容。

⑦：重置按钮 reset 将表单中填写的内容设置为初始值。

⑧：按钮 button 可以为其自定义事件。

⑨：文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。

⑩：图像 image 它可以替代 submit 按钮。

<select>:选择标签 提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。

<option>:子项标签 属性 selected 没有属性值，加在子项上，其中一个子项，子项就变成默认被选项。

<textarea>:多行文本框。如：个人信息描述。

for 属性：指定快捷键作用的表单元素。必须与作用的表单元素的id值相同。

accesskey 属性：指定快捷键，此快捷键需要和alt建结合使用。

例：

表单提交：

1.先定义form表单中的action属性值，指定标点数据提交的目的地（服务端）。

2,明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get。

get和post这两种最常用的提交方式的区别:

1，get提交将数据现在的地址栏，对于敏感信息不安全。

post提交不显示在地址栏。

2，地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。

post可以提交大面积数据。

3，对提交数据的封装方式不同：

get将提交数据封装到消息头前，请求行中。

post将提交数据封装到消息头后，数据体中。

注意：通常表单使用post提交，因为编码方便。

对于Tomcat服务器端，默认的解码方式是ISo8859—1，那么中文会出现乱码。

通过post提交，可以使用request.setCharacterEncoding("GBK");来解决乱码问题，该方法只对数据体有效。

如果是get提交，request.setCharacterEncoding("GBK");该方法对乱码解决不了，必须先进行ISO8859—1编码，然后在进行GBK的编码。这种方式虽然对post提交的乱码也通用，但是麻烦，所以建立表单提交使用post。

头标签  都放在<head></head>头部分之间。包括：title base meta link

12.<title>:指定浏览器的标题栏显示的内容。

13.<base>:

href属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值的结尾处一定要用/表示目录。只作用于相对路径的找链接文件。

target属性：指定打开超链接的方式。如\_blank表示所有的超链接都用新窗口打开显示。

14.<mata>

name 属性：网页的描述信息。当取keywords时，content属的内容就作为搜索引擎的关键字进行搜索。

http—equiv属性：模拟HTTP协议的响应消息头。

例：

表示打开此页面3秒后自动转到新浪页面。

15.<link>:

rel 属性：描述目标文档与当前文档的关系。

type 属性：文档类型。

media :指定目标文档在哪种设备上起作用。

例：

16.<marquee>让内容动起来

direction 属性：left right down up

behavior 属性：sceoll alternate slide

17.<pre>:可以将文本内容按在代码区的样子显示在页面上。

XHTML和XML

XHTML是可宽展的超文本标记语言（Extensible HyperText Markup Language）。

①：w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂。可以理解为他是HTML一个升级版（HTML4.01）

②：HTML的代码结构更严谨，是基于XML的一种应用。

XML是可扩展标记语言(Extensible Markup Language)

①：是对数据信息的描述。HTML是数据显示的描述。

②：XML代码规定的更严格，如：标签不结束被视为错误。

③：XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。

④：各个服务器，框架都将XML作为配置文件。

二：CSS   (Cascading Style Sheet)层叠样式表

样式表(StyleSheets)技术诞生于1996年，全称是层叠样式表(Cascading StyleSheets，简称CSS)。

将网页中的样式分离出来，完全由css来控制，增强样式的复用性以及可扩展性。

格式：选择器｛属性名：属性值; 属性名：属性值...｝

css和html代码相结合的四种方式：

1，每一个html标签都有一个style属性。

2，当页面有多个标签有相同样式时，可以进行复用。

<style>

css代码。

</style>

3，当有多个页面中的标签的样式相同时，还可以将样式单独封装成一个css文件。

<style>

@import utl("1.css");

</style>

4，通过html中head标签中的link标签连接一个css文件。

技巧：为了提高相同的样式的复用性以及可扩展性，可以将多个标签样式进行单独定义，并封装成css文件。

p.css,  div.css ...

在一个css文件中使用css的import将多个标签样式文件导入。然后在html页面上，使用link标签导入这个总的css文件即可。

1.css

@import url("p.css");

@import url("div.css");

选择器：样式要作用的标签容器。当样式分离后，html作用在于用标签封装数据，然后将css加载到指定标签上。

选择器的基本分类：

1，标签选择器：html 中的每一个标签名。

2，类选择器：每一个标签中的class属性。用 . 的形式表示。只用来给css所使用，可以对不同标签进行相同样式设定。

3，ID 选择器：每一个标签中的ID属性。但是要保证ID唯一性。用\#来标识。ID不仅可以被css所使用，还可以被javascript所使用。

选择器优先级：ID>class>标签

扩展选择器：

1，关联选择器：对标签中的标签进行样式定义。选择器  选择器...

2，组合选择器：对多个选择器进行相同样式定义。将多个选择器通过，隔开的形式。

3，伪元素选择器：元素的一种状态。

a:link ：超链接被点前状态。

a：visited ：超链接点击后状态。

a：hover ：悬停在超链接上。

a：active ：点击超链接时。

在定义这些状态时，有一个顺序： L  V  H  A

p：first—letter

p：first—line

：focus ：很遗憾，IE6不支持。但FF支持。

css滤镜：通过一些代码完成丰富了样式。当使用到css的更多属性时，还需要查阅css api。

网页设计的时候。 div + css

div：行级区域

span：快级区域

p：行级区域，p中不要嵌套div

三：JavaScript   ： 是Netscape公司语言，基于对象和事件驱动。和java的不同之处：

1：所属公司不一样，java是sun公司，现在是Orcale公司。

2：js是基于对象，java是面向对象。

3：js是由浏览器解析并执行，java是由jvm解析并执行。

4：js是弱类型的语言，java是强类型。

5：js是非严谨的，java是严谨的。

javascript运行在客户端。

javascript需要被浏览器所解释执行，就必须要将代码和html相结合。结合方式：

1：通过定义<script>标签将js代码存入其中。并指定type属性。方便与浏览器启动指定的解析引擎。

2：也可以通过<script>标签，使用src属性连接一个指定的js文件进来。

javascript的基本语法：

1：变量。

通过var关键字定义变量，该变量可以赋予不同类型的常量。

var x = 3;

x = "abc";

特殊的常量：undefined

2：语句。

if，switch，while，do while，for。

使用逻辑运算符进行布尔表达式连接的时候，需要是短路与 和短路或。&&  ||

因为在js中，非0即为true，0为false，非null为true，null为false，

js特有的语句：

with（对象）｛｝：可以确定对象所使用的范围。在范围内，可以直接使用指定对象的属性和行为，而不用，对象.的形式调用。简化了对象的操作。

for（变量  in  对象）：可以对对象的属性及行为进行遍历。

3：数组。

对于js的数组特点在于：该数组的长度是可变的，相对与java中的集合。该数组中可以存放的元素类型是可以不同的。

格式：

var arr = \[3,true,"abc"\];

var arr = new Array();

var arr = \[\[3,2,9\],\[5,6\]\];//二维数组

操作形式和java一样。都是通过for进行遍历，同时也使用了指针思想。

4：函数。

通过function关键字定义函数。

a，一般函数：

格式：function  函数名  （形式参数...）｛

执行语句；

return  返回值；

｝

通常提供代码复用可以将代码封装成函数。

两个明确：

明确该功能实现后的结果。   该功能在实现过程中是否有未知内容参与运算。

b，动态函数。

使用的function对象。

var show = new function ("x","y","return x+y;");

动态函数的特点：可以将参数列表，和方法体作为参数传递。

c，匿名函数。

一般函数的简写形式。

function()\{\}

匿名函数通常可以用于事件的处理的

如：

window.onload = function()\{alert('onload over');\}

javascript中的已定义好的一些对象。

1，String，Math，Date，Array，Function

这些对象都有一个属性叫做prototype原型。prototype可以获取指定的对象引用。可以通过该引用给已有的对象赋予一些新功能。

function getMax()\{

var max = 0;

for(var x = 1; x<this.length; x++)\{

if(this\[x\]>this\[max\])

max = x;

return this\[max\];

var arr = \[3,4,5,6,7,8,9\];

arr.sort();  //直接调用Array对象的sort方法对数组进行排序。

将getMax方法添加到Array对象当中。

Array>prototype.getMax = gtMax;

var x = arr.getMax();

alert("max="+x);

//反转

function reverse()\{

var str = "";

for(var x = this.length—1; x>=0; x——)\{

str+=this.charAt(x);

return str;

String.prototype.reverse=reverse;

//给字符串对象定义一个新功能，去掉字符串两端空格。

function trim()\{

var start,end;

start = 0;

end = this.length—1;

while(start<=end && this.charAt(start)==" ")

start++;

while(start<=end && this.chatAt(end)==" ")

end——；

return this.substring(start,end+1);

String.prototype.trim = trim;

var s = "     a    bc        "

s = s.trim();

alert(s);

常见的全局方法。

parseInt(numstr,\[radix\]);//将数字格式的字符串转换成整数。如果指定了基数，那么numstr，就会按照执行基数进行转换。

var num = parseInt("110",2);//表示"110"这个字符串会按照二进制进行转换。

alert(num);//num=6；

var x = 6;

alert(x.toString(2));//110；获取6对应的二进制表现形式。

四：DOM(document object model)    文档对象模型

——是将一些标记型的文档以及文档中的内容当成对象。可以在对象中定义其属性和行为，可以方便操作这些对象。

DOM在封装标记型文档时，有三层模型。

DOM1：针对html文档。

DOM2：针对xml文档。

DOM3：针对xml文档。

html，xhtml，xml：这些都是标记型文档。

DHTML:是多个技术的综合体，叫做动态的html。

html：负责将数据进行标签的封装。

css：负责标签的样式。

dom：负责将标签以及标签中的数据封装成对象。

javascript：负责通过程序设计方式来操作这些对象。

标签之间存在着层次关系：

html

|——head

|——title

|——base

|——link

|——meta

|——style

|——script

|——body

|——div

|——form

|——input

|——select

|——span

|——a

|——table

|——tbody

|——tr

|——td

|——th

|——dl

|——dt

|——dd

通过这个标签层次，可以形象的看作是一个树型结构。那么我也称标记型文档，加载进内存的是一颗DOM树。这些标签以及标签的数据都是这棵树上的节点。

当标记型文档加载进内存，那么内存中有了一个对应的DOM树。DOM对已标记型文档的解析有一个弊端就是文档过大，相当消耗资源。对于大型文档可以使用SAX这种方式解析。

节点类型：

标签型节点：类型：1

属性节点   ：类型：2

文本型节点：类型：3

注释型节点：类型：8

document：类型：9

注意：标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意。

节点的关系：

父节点：parentNode

子节点：childNodes：直接子节点。返回的是一个节点对象数组。

兄弟节点：

上一个兄弟节点。previousSibling

下一个兄弟节点。nextSibling

获取可以通过节点的层次关系完成。也可以通过document对象完成。

getElementById：通过id属性值获取对应的节点对象。如果有一个id值相同。获取到的是第一个id所属对象。尽量保证ID的唯一性。返回的是一个对象。

getElementsByName：通过标签的name属性值获取对象。返回的一堆对象。其实是一个对象数组。

总结：

DOM编程步骤：

1，定义界面：通过html的标签将数据进行封装。

2，定义一些静态的样式。通过class

3，需要动态的完成和用户的互动。

a，先明确事件源。

b，明确事件将事件注册到事件源上。

c，通过javascript的函数对象事件进行处理。

d，在处理过程需要明确被处理的区域。

table标签的示例。

一，在页面上通过按钮创建一个表格。

思路：

1，创建一个table节点。doocument.crateElement("table");

2，通过table节点的insertRow()方法创建表格的行对象添加到rows集合中。

3，通过行对象的insertCell()方法创建单元格对象，并添加到cells集合中。

4，给单元格中添加数据。

a，创建一个节点，如：文本节点，document.createTextNode("文本内容")，通过单元格对象appendChild方法将文本节点添加到单元格的尾部。

b，可以通过单元格的innerHTML，添加单元格中的元素。tdNode.innerHTML="<img src='1.jpg' alt='图片说明信息'/>";

5，建立好表格节点，添加到DOM树中，也就是页面的指定位置上。

二，如何删除表格中的行或者列。

思路：

1，删除行：获取表格对象，通过表格对象的deleteRow方法，将指定的行索引传入deleteRow方法中。

2，删除列：表格没有直接删除列的方法，要通过删除每一行中指定的单元格来完成删除列的动作，获取所有的行对象，并进行遍历，通过行对象的deleteCell方法将指定单元格删除。

三，对表格中的数据进行排序。

思路：

1，获取表格中的所有行对象。

2，定义临时存储，将需要进行排序的行对象存入到数组中。

3，对数组进行排序，通过比较每一个行对象中指定单元格中的数据，如果是整数需要通过parseInt转换。

4，将排序后的数组通过遍历，将每一个行对象重新添加回表格。通过tbody节点的appendChild方法。

5，其实排序就是每一个行对象的引用取出。

四，表格的行颜色间隔显示，并在鼠标指定的行上高亮显示。

思路：

1，获取所有的行对象，将需要间隔颜色显示的行对象进行动态的className属性的指定，那么前提是：先定义好类选择器。

2，为了完成高亮，需要用到两个事件，onmouseover(鼠标进入)，onmouseout(鼠标移出)。

3，为了方便可以在遍历行对象时，将每一个行对象都进行两个事件属性的指定。并通过匿名函数完成该事件的处理。

4，高亮的原理就是将鼠标进入时的指定颜色改变，改变前先将记录住原理行行对象的样式。这样在鼠标离开时，可以将原样式还原。

5，该样式需要在页面加载完后直接显示，所以使用的window.onload事件完成。

五，完成一个与css手册一样的示例。

通过下拉菜单选择先指定样式属性的使用效果。

六，表单中的组件。

单选框，复选框。

这两个组件都有一个属性来表示其选中与否的状态。checked

完成一个对多个复选框，进行全选的操作。  
　　思路：将全选那个复选框的checked状态付给所有的其他checkbox即可。

<input type="checkbox" name="all" οnclick="checkAll(0)" />全选

<input type="checkbox" name="all" οnclick="checkAll(1)" />全选

function checkAll(index)\{

var node = document.getElementsByName("all"\[index\]);

var items = document.getElementsByName("item");

for(var x =0; x<items.length; x++)\{

items\[x\].checked = node.checked;

</script>

七，获取鼠标的坐标，让指定区域随着鼠标移动

获取鼠标坐标：event.x , ecent.y

指定区域随鼠标移动其实就是改变了指定区域的left  top属性的值。

这里需要用到的事件：body对象的onmousemove事件。

还需要用到一个css样式，直接定义页面，所以区域都在同一层次。

为了对某一个区域进行定位，将该区域分离到另一个层次。用到css中position属性。

—————————— [ASP.Net+Android+IOS开发][ASP.Net_Android_IOS]、[.Net培训][ASP.Net_Android_IOS]、期待与您交流！ ——————————

详细请查看：[http://edu.csdn.net][ASP.Net_Android_IOS]

[ASP.Net_Android_IOS]: http://edu.csdn.net/
[091922267069799.jpg]: /images/20220805/2319e6672a2640f9a358e01774b9dab5.png

黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关黑马程序员——Java基础加强---反射

相关 HTML、CSS基础知识笔记

相关黑马程序员：Java运算符知识点总结

相关黑马程序员---html5入门

相关黑马程序员_java基础笔记(11)...反射

相关黑马程序员_java基础笔记(12)...内省（IntroSpector）

相关黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM

相关黑马程序员_java基础笔记(02)...java语言基础组成

相关黑马程序员_java基础笔记(03)...面向对象

相关黑马程序员_java基础笔记(06)...集合