黑马程序员--html（一）

最新推荐文章于 2023-05-04 14:24:28 发布

afdafsdfa

最新推荐文章于 2023-05-04 14:24:28 发布

阅读量468

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/afdafsdfa/article/details/8236579

本文详细介绍了HTML的基本概念和常用标签，包括标签的结构、属性的使用、图像、表格、超链接、表单以及CSS的基础知识。还提到了JavaScript的重要性和基本语法，强调了DOM对象和函数的使用，以及如何通过JavaScript操作HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

------- android培训、java培训、期待与您交流！ ----------

Html内容

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

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

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

4. 格式: <标签名属性名 = ’属性值’>数据内容</标签名>

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

5. 操作思想：

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

列表<dl>

<dt>:上层标签

<dd>:下层标签

<ol>::数字标签

<ul>:符号标签

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

图像：

1. 图像标签<img>：

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

2. 图像地图<map>:

表格标签：<table>

1. 组成：

a) 标题标签：<caption>，给表格提供标题。

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

c) 行标签：<tr>

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

2. 格式：

<tr/>

<tralgin=”center”>

<tr/>

超链接

1. 超链接<a href=””>

2. 定位标记<a name=””>

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

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

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

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

表单

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

<input>:输入标签：接收用户输入的信息。

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

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

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

3. 单选框radio。如：性别选择

4. 复选框checkbox，如：兴趣爱好

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

6. 提交按钮submit用于提交表单内容

7. 重置按钮reset将表单中填写的内容设置为初始值

8. 按钮button可以为其自定义事件

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

10. 图像image可以代替submit按钮

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

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

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

14. <lable>：多行文本框。如个人信息描述。

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

16. accesskey属性：指定快捷键，需要和alt键组合使用。

例：

<input type=”text” id=”user”/>\

17. 表单提交

a) 先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。

b) 明确提交方式，通过method属性值。如果不定义，那么method的默认值为get。

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

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

b) post提交不显示在地址栏。

注：由于编码问题，尽量用psot提交，可以使用request.setCharacterEncoding(“GBK”)方式解决

其他标签

1. <marquee>让内容动起来

direction属性：left right down up

behavior属性：scroll alternate slide

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

头标签

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

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

2. <base>:

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

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

3. <meta>：

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

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

例：<meta http-equiv="refresh"content="3;url=http://www.baidu.com"/>

三秒后转到百度

4. <link>:

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

b) type属性：文档类型。

c) media属性：指定目标文档在那种设备上起作用

例：<link rel=”stylesheet” type=”text/css” media=”sceen,print” href=”a.css”/>

Css层叠样式表：

将网页中的样式分离出来，完全由css来控制

增强样式的复用性以及可扩展性。

格式：

选择器{属性名：属性值; 属性名：属性值;…}

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

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

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

<style>

Css代码

</style>

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

通过在每个页面中定义

<style>

@import url(“1.css”);

</style>

4. 通过html中head标签中的link标签连接一个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：

是Netspcape公司语言，基于对象和事件驱动

和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,dowhile,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,1,9],[3,4]];

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

4.通过function关键字定义函数。

a) 一般函数。

格式：function函数名(形式参数…)

{

执行语句;

return 返回值;

}

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

两个明确:

1. 明确该功能实现后的结果

2. 该功能在实现过程中是否有未知内容参与运算。

b) 动态函数

使用的function对象

var show = newFunction(“x”,”y”,”x+y;”);

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

c) 匿名函数

一般函数的简写形式。

function(){}

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

如：

window.onload =function(){alert(‘onload over’);}

在函数使用时需要注意的部分：

functionshow(){

return “show run”

}

var method = show();

var method = show;

两句代码都是正确的，

第一句表示的是show方法运行后的结果赋值给method。那么method也指向了该对象。

第二句话表示的是将show指向的对象的地址赋值给method。那么method也指向了该对象。那么就可以通过method();的形式来调用这个show方法。

--------------------------------------------

js可以通过对象形式将数据进行封装。

首先对对象进行描述，通过函数来完成。

function Person(name,age){

this.name =name;

this.age = age;

}

var p = new Person(“lisi”,”30”);

alert(p[“name”] + ”…” + p.age);\

p.how = function(){

alert(“show run”);

}

----------------------------------------------

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

1. String、Math、Date、Array、Funtion

这些对象都有一个属性叫做prototype原型

prototype可以获取指定的对象引用

可以通过该引用给已有的对象赋予一些新的功能。

那么在使用该对象时，可以直接调用定义好的新功能。

function getMax(){

var max = 0;

fot(var x = 1;x< this.lengyh; x++){

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

max = x;

}

returnthis[max];

}

var arr = [5,6,9,2];

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

那么可以可以像调用sort方法一样调用getMax方法呢？

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

Array.prototype.getMax = getMax;

var x = arr.getMax();

alert(“max=” + x);

var str = “abc”;

str.substring(1,2);

str.bold();//<b>str</b>

/*//模拟一下String中fontcolor方法。

function mycolor(color){

return“<font color = ‘”+color+”’>”+this+”</font>”;

}

String.prototype.color = mycolor;

str.color(“red”);

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

function trim(){

var start,end;

strart = 0;

end =this.length – 1;

while(start<=end && this.charAt(start) == “ ”)

start++;

while(start<=end&& this.charAt(end) == “ ”)

end--;

returnthis.substring(start,end+1);

}

String.prototype.trim = trim;

var s = “ av c ”;

s = s.trim();

alert(“--” + s +“--”);//av c

------------------------------------------------

常见的全局方法。

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

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

alert(“num=” + num);//num = 6;

var x = 6;

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