html知识点.docx

html知识点.docx

《html知识点.docx》由会员分享，可在线阅读，更多相关《html知识点.docx（17页珍藏版）》请在冰豆网上搜索。

html知识点

HTML基本标签

:

开始标签，以<开始，以>结束，这代表一个开始标签。

<标签名>，标签在HTML一般是成对，在XML或其他标签语言中必须成对。

html标签意味一份html文档的开始

:

结束标签

html标签的内容一般有两部分：

head\body

head里有一个很重要的标签：

标题title

页面内容

成对标签：

<标签名属性名="属性值"属性名="属性值">

标签内容

...

bgcolor="red":

背景色为红，颜色用单词

bgcolor="#FF0000"可以用6位16进制数表示，前面2位表示红色部分中间2位表示绿色部分最后2位表示蓝色部分

background表示背景图片

单独标签：

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

例如：

hr:

align属性表示对齐方式（有：

left、right、center）默认是居中（center），width表示宽度，可以用像素或百分比，size表示大小，noshade使得横线进行填充。

相对路径与绝对路径：

绝对路径：

以驱动器开始出发到达目的地的一串地址

相对路径：

以当前路径为出发地到达目的地的一串地址（路径）

例如：

\myhtml\图片\1.jpg”>绝对路径

相对路径

获取网上的图片

HTML中的注释：

--注释内容-->

:

段落，段前段后都要换行，同样可以通过align设置对齐方向。

注意：

在html文本中不管你输入多少个空格和或者回车，网页结果只空一格，要想空多格或回车需要有特殊字符或者标签。

特殊字符：

>（>全称：

greatthan）<（<全称：

lessthan）空格（ ）&（&）引号（"）©（©）

预定义格式，能够保持html文本中的格式，把空格转为 ；把回车转为
.

字体：

:

size属性值是1~7，由小到大字体越来越大，不会换行，并且3号是正常大小的字体，color属性可以设置字体颜色，size=“+1”表示在size=“3”的基础上加大一号，“-1”表示减少一号,face设置字体的样式。

:

h1~h6,由小到大字体是越来越小，会换行，并且h4是正常的大小字体。

:

斜体字。

、:

粗体字。

:

字体有下划线。

:

字体有删除线。

:

字体移动、跑马灯。

与其上二流大学不如读硅谷学院Direction：

方向left、right、up、down

Scrolldelay:

移动的速度

Scrollamount:

每次移动的长度

onMouseOver="this.stop（）;"鼠标移上去就停止滚动

onMouseOut="this.start（）;"鼠标离开就继续滚动

超链接：

普通链接（内部链接、外部链接）：

例如：

链接第二个页面链接本地（站点内部）的网页

XX页面链接网络上（站点外部）的一个网页

下载下载文件

锚链接（书签链接）：

1、设置锚的链接（抛锚）文本

2、创建一个连接本网页的锚的超链接文本

例如：

down

top

3、创建一个连接到别的网页的锚的超链接：

链接第一个网页的抛锚处

邮件链接：

123@">联系站长

其他：

链接记事本链接其他的文件

下载下载文件

标签的嵌套使用：

超链接的target属性：

Target属性值有：

_blank、_self、_top、_parent、框架的名称

在默认情况下超链接的target属性是_self.

_self:

在本窗口打开目标页面。

_blank:

在新窗口打开目标页面。

框架的名称:

在设置的框架中打开目标页面。

_parent:

在父窗口打开目标页面。

_top:

在最顶部的窗口打开目标页面。

表格

表格

表格标签的先后顺序：

table->tr->td

表格中存储数据的标签是：

td

表格中设置Bgcolor、Background属性的优先级：

td>tr>table

Table的属性：

Border：

边框的粗细的大小

Width：

表格的宽度，可以是像素和百分比。

Align：

设置整个表格的对齐方式。

Height：

整个表格的高度。

Bgcolor：

表格的背景颜色。

Background：

表格的背景图片。

Cellspacing:

单元格之间的间距。

Cellpadding：

单元格中文本与单元格边框的间距。

Tr的属性中有个属性valign（垂直方向的对齐方式top、bottom、middle）。

表格中的跨行、跨列：

Rowspan:

跨行（纵向）

Colspan：

跨列（横向）

例如：

学员信息

张三

23

李四

24

王五

表单

表单的作用：

客户端（浏览器）与服务器进行信息交互。

哪些地方使用了表单？

搜索、注册、登陆………..

表单：

表单的元素：

文本框：

Type：

设置标签类型。

Name：

给标签取个名字，可以使服务器通过名字来取得标签中的信息。

Size：

文本框的宽度。

Maxlength：

文本框中最多能输入几个字符。

Value：

文本框初始时的文本。

密码框：

单选框：

男

女

注意：

name属性值要相同，value属性是单选框的值。

复选框：

篮球

音乐

排球

旅游

注意：

name属性值可以不相同，如果不相同服务器获取数据时需要一个一个获取，checked属性是设置复选框初始时被选中。

文本区域：

本人喜欢IT行业，IT行业好前景

注意：

textarea要设置初始的文本，是将文本写在标签中间，而不是通过value属性来设置，cols设置一行能显示多少个字母的宽度，rows设置可以显示多少行。

文件上传：

选择框（下拉列表）：

广东

北京

湖南

纽约

华盛顿

注意：

size属性不是设置宽度，而是设置初始显示的选项的个数，value设置值，selected设置初始时被选中，optgroup对选项进行分组。

提交按钮：

将表单中的数据提交给服务器处理。

重置按钮：

将表单还原成初始的状态。

普通按钮：

Fieldset的使用

Tabindex:

用来设定按下tab键时焦点的移动顺序,数字越小越先访问。

Title：

用弹出式帮助来给用户提示。

Accesskey：

设定页面快捷键，IE为alt+accesskey属性值，FireFox为alt+shift+accesskey属性值

Readonly：

用户不能修改表单控件，控件值将被传送到服务器，控件可以被鼠标和通过tab键选定。

Disabled：

用户不能修改表单控件，控件值将不会被传送到服务器

，控件不能被鼠标和通过tab键选定。

表单的属性：

Action（必选属性）：

表单数据要提交的页面。

Method：

提交数据的方法。

Get（默认）：

数据提交，url会显示数据，不安全，并且url字符<=255,例如：

file:

///D:

/MyHTML/

表单.html?

uid=aaa&pwd=123&sex=male&hobby=on

Post：

数据提交，url不会显示提交的数据。

例如：

D:

\MyHTML\表单.html

ID与name属性的区别：

name的值可以相同（姓名），会传给服务器，方便服务器获取数据，id一般情况下不提倡取相同的值（学号）不会传给服务器。

列表和框架

无序列表：

Type:

设置无序列表的显示情况，属性值有：

disc（默认，实心圆）、square（实心正方形）、circle（空心圆）。

有序列表：

Type:

设置有序列表的显示情况，属性值有：

1（默认）、a、A、i、I。

框架：

对不起，您使用的浏览器不支持框架！

frameset:

设置框架的布局。

Cols：

纵向设计框架。

Rows：

横向设计框架

Bordercolor:

设置框架的边框颜色。

Border：

设置边框的宽度。

Frame：

框架。

Src：

框架中要显示的页面。

Noresize：

设置不能让客户调节框架的大小。

Scrolling：

设置框架中不出现滚动条，属性值：

no、yes（默认）。

Noframe：

如果使用的浏览器不支持框架页，就显示noframe中的文本。

Iframe:

可以单独的作为一个框架插入到网页中。

Src用来指定内联框架中显示的网页

Align设置内联框架在相邻文档中的位置

Width，height设置内联框架区域的宽度和高度

Frameborder设置是否有3维边框（“yes”或”no”）

Scrolling设置是否有滚动条（同）

Base标签：

作用：

为没有包含显示的target属性的当前文档中的每一个超链接设置一个默认目标。

例如：

学员

老师

层叠样式表（CSS）：

行内样式：

语法：

style=”属性：

属性值；属性：

属性值；…..”

例如：

30px;color:

red;font-family:

宋体">这句是加了样式表的

和下面的类似：

这句是加了属性的

注意：

其他的样式属性，请参考ftp中的“常用样式属性.txt”文件。

内嵌样式：

语法：

选择器{属性：

属性值；属性：

属性值；…..}

分类：

标签选择器、类选择器、ID选择器、伪类选择器

标签选择器（HTML选择器）：

h2{color:

red;text-align:

center;font-style:

italic}

类选择器：

.myfont{color:

green;font-family:

隶书;font-size:

50px}

使用的地方：

硅谷学院

注意：

调用类选择器样式的时候，需要在标签中加入class=“类选择器名称”。

ID选择器：

#mh{color:

yellow;font-family:

隶书;font-size:

30px}

好好学习天天向上

注意：

id属性为以后程序员获取标签设置的，同时也可以设置id的ID选择器样式。

伪类选择器：

a:

link{color:

black;text-decoration:

none}//正常情况下

a:

hover{color:

red;text-decoration:

underline}//鼠标悬浮

a:

active{color:

green;text-decoration:

underline}//鼠标点击

a:

visited{color:

yellow;text-decoration:

none}//访问后

超级链接

注意：

并不是只有超链接可以设置伪类样式，其他的选择器也可以设置伪类样式，比如.myfont:

link、.myfont:

hover……

外部样式表：

作用：

外部样式表其实就是将网页中的样式进行封装，一个外部样式表可以在多个网页中使用，使得样式的编写和html（页面显示）实现了分离。

样式表的引入：

1、

@import"外部样式表.css";

2、

注意：

rel="stylesheet"主要表示外部的意思。

type="text/css"表示类型是样式表。

样式表的创建步骤：

1、创建样式表文件（文件名.css），并对样式进行设计。

2、将样式表与网页关联。

3、浏览网页，看效果。

样式表混合使用时要注意的：

从优先级方面：

行内>内嵌>外部

从范围方面：

外部>内嵌>行内

细边框：

方法一：

1px;border-color:

gray；border-style:

solid"/>

方法二：

1pxsolidgray"/>

注意：

使用border属性，语法boder:

边框宽度边框的样式边框的颜色

Div标签：

Div既可以在平面设计（xy轴），也可以立体设计（xyz轴）。

有一个比较重要的属性：

position:

absolute

设置了这个属性后就能在z轴上进行页面的布局。

其他属性：

Top：

设置div与顶部的距离。

Left：

设置div与左边的距离。

Right：

设置div与右边的距离。

Bottom：

设置div与底部的距离。

z-index:

设置div在Z轴上的高度，越大高度就越高。

filter:

alpha（opacity=不透明值）设置div不透明度，适用IE。

例如：

filter:

alpha（opacity=60）

Div使用：

red;width:

100px;height:

100px;position:

absolute;top:

50px;z-index:

10;filter:

alpha（opacity=60）">这是第一个区域