HTML 笔记大全.docx

《HTML 笔记大全.docx》由会员分享，可在线阅读，更多相关《HTML 笔记大全.docx（33页珍藏版）》请在冰豆网上搜索。

HTML笔记大全

1.HTML的简介

HTML:

超文本标记语言，网页语言。

超文本标记语言：

超出文本的范畴。

标记：

HTML所有操作都是通过标签实现的。

标签就是标记。

<标签>

HTML的后缀.htm或者.html。

HTML规范：

开始结束。

成对出现。

特殊的标签单个出现
换行。

内容：

1.设置相关内容

2.显示在页面上的内容

3.标签成对出现

4.标签不区分大小写。

5.有些标签没有结束标签，在标签内结束，

HTML的核心思想（*****）

网页很多数据，不同的数据需要显示的效果不一样，这个时候需要使用标签把要操作的数据（包装起来），通过修改标签的属性值实现标签数据样式的变化。

一个标签相当于一个容器，想要修改容器内的样式，只需要改变容器的属性值，就可以实现容器内数据的样式变化。

HTML最常用的标签

2.文字标签和注释标签

*文字标签：

修改文字的样式

-

属性size:

文字的大小范围1-7超出默认为7。

color：

文字颜色两种表示：

1.英文单词：

redgreen。

2.使用16进制表示#ffffff

*注释标签：

--html的注释-->。

3.标题标签，水平线标签和特殊字符

标题标签：

大小依次变小自动换行

水平线标签：

**Size:

水平线粗细**Color:

颜色

代码

换2行。

特殊字符:

<:

<>:

>空格：

 &:

&

4.列表标签展示效果

传智播客

传智播客

财务部

财务部

学工部

学工部

人事部

人事部

***

表示列表范围

***

表示上层内容

***

表示下层内容

***

表示下层内容

***………………………………………..

****

有序列表的范围

属性type:

设置排序方式1（默认）ai。

**在ol标签里面

代码：

1. 财务部
2. 学工部
3. 人事部

****

有序列表的范围

属性type:

实心圆circle空心圆disc实心方块square,默认disc

5、图像标签（******）

--src:

图片的路径

--width:

图片的宽度–height：

图片的高度–alt：

图片上显示的文字。

6、路径的介绍

**绝对路径：

完整的路径。

**相对路径：

一个文件相对于类外一个文件的位置。

**html文件和图片在同一个路径下，直接把名字写在路径下。

**图片在html下一层的路径，把后面的路径拿过来用。

**图片在html上一层的路径，../加上图片的名字。

../../表示上2层路径。

7、案例联系

*

原样输出标签

8、超链接标签（*****）

***链接资源

顶部

href:

链接的资源的地址，里面的如果是空链接时”#”表示。

target:

设置目标打开的方式，默认在当前页打开。

_blank:

在新的页面打开。

_self:

在当前页面打开。

***定位资源

***如果想定位资源：

定义一个位置

顶部

**回到这个位置

回到顶部

9、表格标签（*****重要的很******）

属性：

border=”1”bordercolor=”blue”cellspacing=”0”width=”40”height=”40”.

border:

表格线bordercolor:

表格线颜色cellspacing:

单元格之间的距离。

表示行

在tr和td标签下属性：

显示方式align:

leftcenterright

***

***表格标题写着table里面

***

表格技巧：

先数有几行有几行就有几个，在数每行有多少个单元格。

**合并单元格

跨行:

rowspan=”几行”

跨列:

colspan=”几列”

10、表单标签

******form里面的属性

***action=”路径”数据跳到页面。

***method=”请求的方式”有以下2种。

1.get和post,默认是get。

2.get请求携带提交数据，安全性低，数据大小有限制。

Post相反。

*****enctype:

做文件上传需要设置这个属性。

**输入项：

可以输入内容和选择内容的部分。

必须加一个name属性。

必须有一个value属性值

--大部分的输入项使用

***普通输入项：

***密码输入项：

***单选输入项：

***文件输入项：

上传用。

---在里面加属性：

name=””----Name属性值一定要一样

**实现默认选项checked=”checked”放在想选择的属性上。

***多选输入项：

---在里面加属性：

name=””----Name属性值一定要一样

----必须有一个value属性值。

必须加一个name属性。

***下拉输入项（不是在input标签里面的）。

1992selected=”selected”***选项

1993

1993

**实现默认选项selected=”selected”放在想选择的属性上

***文本域

***隐藏项（代码中有而在页面上不会显示）

***提交按钮

?

输入项name的值=输入的值

***参数类似于key=value形式.

***图片提交按钮：

**重置按钮（回到输入项的初始状态）

**普通按钮

11、案例：

使用表单来实现注册页面。

-------使用表格实现页面效果。

-------超链接不想要她有结果href=”#”

-------如果表格里面的单元格没有内容，使用空格作为占位符&nasp;

-------使用图片提交表单。

12、html中其他的常用标签的使用

b：

加粗

s：

删除线

u：

下划线

i：

斜体

pre:

原样输出

sub:

下标

sup:

上标

div:

自动换行显示块

span:

不会自动换行在一行显示块

p:

段落标签比br标签多换一行。

13、html的头标签的使用

*html两部分组成head和body

**在head里面的标签是头标签

**title:

表示游览器显示的内容。

**meta:

设置页面上的一些内容。

**content:

内容的意思。

refresh:

刷新后面3表示内容刷新的时间为3秒.

**base标签：

设置超链接的基本设置

**link标签：

引入外部文件

**明天css，可以使用link标签引入css文件。

14、框架标签的使用

*

--row:

按照行进行划分

***

-cols:

按照列划分

***

*

-具体显示的页面

---

***使用框架标签的时候，不能写在body里面，使用框架标签，需要把body去掉。

例子：

//把页面划分成上下2部分

//上面页面

//把下面页面划分成左右2部分。

//左边页面

//右边页面

**如果在左边的页面设置超链接，让内容显示在右边的页面中

⏹设置超链接里面的属性，target值成名称

⏹超链接1

15、a标签的扩展

-XX是网络资源

-当a标签里面访问网路资源的时候，必须要家一个协议http:

表示一个网路的公共协议。

-如果加上http协议之后，自动识别访问资源是一个网络资源。

-当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。

-如果不是公共协议，回去本地电脑支持这个协议的应用程序。

1、css的简介

**css:

层叠样式表

**层叠：

一层一层的

***样式表：

很多属性和属性值

*使页面显示效果更加好

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

2、css和html的结合方式（4种结合方式）

*.在每个html标签上面都有一个属性style，把css和html结合在一起。

---

red;color:

green;”>

----<标签style=”属性:

属性值;属性:

属性值;属性:

属性值;”>

**.使用html的一个标签实现

**

div{

background-color:

blue;

color:

red;

}

***.在style标签里面使用语句（在某些浏览器下不起作用）

@importurl（css文件路径）；

-----第一步，创建一个css文件

@improturl（div.css）;

****.使用头标签link，引入外部css文件

第一步，创建一个css文件

-

****第三种结合方式，缺点：

在某些浏览器下不起作用，一般使用第四种方式。

****优先级（一般情况）

由上到下，由外到内，优先级由低到高。

***后加载的优先级高。

***格式选择器名称{属性名:

属性值;属性名:

属性值;……….}

3、css的基本选择器（3种）

*****要对哪个标签里面的数据进行操作

A:

标签选择器

*使用标签名作为选择器的名称

div{

background-color:

gray;

color:

white;

}

B:

class选择器

*每个html标签都有一个属性class

-aaaaa