html学习笔记

来源：互联网发布：美国驾照在中国知乎编辑：程序博客网时间：2024/06/04 18:29

1.HTML简介

（1）HTML，Hypertext Markup Language 超文本标注语言（超文本-->不止有文本，还有图片视频等标注-->是一种标记，是一种标志如：红绿灯语言-->跟程序语言没有关系）

（2）HTML是一种规范，是一种标准，编写网页的一种标准

（3）HTML主要目的：用来显示网页的不同效果，不同部分如：<b>文本</b> b:bold 粗体

2.代码编码器简介

（1）中文操作系统的默认字符集（字符编码），就是GB2312,使用记事本写的网页，默认字符集也是GB2312

（2）增强的文本编辑器：Editplus Notepad+

（3）IDE集成开发环境：Dreamweaver Zend Studio

3.HTML文件结构

（1）

<html>

<head>

</head>

<body>

网页正文....

</body>

</html>

（2）HTML文件结构说明：

<html></html>：告诉浏览器，其中的内容用什么格式来编译

<head></head>：汉字用什么字符集显示（GB2312简体中文,BIG5繁体中文,JIS日文）显示，否则会出现乱码

<body></body>:网页大部分内容在body

4.HTML标签格式

（1）HTML标记，大致分两类：（1）双边标记（2）单边标记

（2）双边标记：是指有开始和结束标记，内容放在开始和结束标记之间如:<b>内容</b>

语法格式：<标签属性1="值1" 属性2 ="值2">内容</标签>

（3）单边标记：只有开始标记，没有结束标记，单边标记一般没内容如：<br>换行

语法格式：<标签属性1="值1" 属性2 ="值2">

5.HTML标签编写规范

HTML 标记不区分大小写如：<font> <FONT>

HTML标记属性可有可无，有的标记是没有属性的如：<html> <head><title>等

双边标记的内容在开始和结束标签之间，单边标记没有内容

HTML标签可以相互嵌套，但一定注意顺序嵌套，外层套内层，一层套一层

6.<body>的常用属性

bgColor:网页背景色

Background:网页背景图片地址如：<body background ="images/bg.gif">

7.HTML文本标记

<b></b>(bold):加粗

<i></i>( italic)：斜体

<u></u>(underline):下划线

<s></s>(strike): 删除线

<sup></sup>(superscript):上标

<sub></sub>(superscript):下标

<font></font>:字体标记属性：size 1-7 color：字体颜色 face：字体

8.HTML排版标记

<p></p>(page):表示一个段落属性：align:水平对齐方式，取值 left,center,right

<br> (break row ):换行标记

<hr>(horizonal rule):水平线标记属性：（1）size 视平线粗细（2）color水平线颜色 (3)noshade去掉阴影

（4）width水平线宽度 width="50%"

<pre></pre>(predefined):预排版标记(原封不动的输出)

<h1>...<h6> 六级标题属性：aline="center"

&nbsp (non-breaking space)空格

9.<div>和<span>标记

<div>是没有任何意义的标记，但是又是使用最多的标记 <div>一般要与CSS配合使用。<div>是一个块元素

<span>是没有任何意义的标记，但是又是使用最多的标记 <div>一般要与CSS配合使用。<span>是一个行内元素

（1）块元素

块元素：一般单独占一行，不管内容多少 <div> <p> <h1><pre>

（2）行内元素

行内元素：多个行内元素会排在同一行 <font> <b> <i> <u> <sub> <sup>

结论：在标记嵌套时，一般是块中元素嵌套行内元素

（行内元素没有width和heigth）(表单中各元素都是行内元素，但可指定width和heigth)

10.HTML字符实体

空格： &nbsp (non-breaking space) 代表一个半角空格

< : &lt (less-than) 小于号

> : &gt (greater-than)大于号

&： &amp (ampersand)

￥: &yen 日元和人名币的标号

X： &times

÷ ： &divide

11.HTML项目符号(无序列表)

<ul>

<ul>

<il><li>属性： Type:disc小黑点 circle小圆圈 square实心方块

注意：<ul><li>是块元素

12.HTML编号列表（有序列表）

<ol>

<ol>

<ol><li>属性：type : 编号类型（取值1，a,A,i,I） start: 从第几个开始编号

13.滚动字幕标记<marquee>

语法格式:<marquee>滚动的内容</marquee>

属性： direction 滚动方向：up down left right

width:滚动宽度

heigh:滚动高度

bgcolor:滚动背景色

scrollAmount:滚动步长值

scrollDelay:两步之间停留时间

loop:循环滚动的次数

14.图片标记(行内元素)

语法：<img 属性="值">

常用属性：width:图片宽度

height:图片高度

border：图片边框粗细

Src:图片路径（相对路径）

align：图片水平对齐取值：left center right

注意事项：如果图片想等比例缩放，只需要指定width 或height中的一个

Align属性只能让文本居中。不能让图片单独居中

Align可以实现"图文混排"效果（center基本无用）

15.链接

（1）语法格式：<a 属性="值">内容</a>

（2）常用属性：href 目标文件地址URL,该URL可以是相对地址，也可以是绝对地址

Target:目标文件显示的窗口

_blank:在新窗口中打开目标文件

_self:在当前窗口打开目标文件

_parent:在父级窗口打开

_top：在最顶级窗口打开

（3）绝对地址URL

远程绝对地址：访问远程的文件，总是以:http://:域名，主机名开头

本地绝对地址：访问本地的文件，总是以file://开头（很少使用）

（4）相对地址URL

当前文件和目标文件是同级关系：链接地址直接写目标文件名

当前文件与目标文件所在的文件夹同级：先找文件夹名，再找文件民

目标文件位于上一层目录中：../ ../../上两级目录

（5）特殊的链接

下载链接：浏览器不能直接执行的，如：doc,xls,ppt,rar,psd

邮箱链接：href = " mailto:邮箱地址 "

普通空链接: href="#"

JS链接:href="javascript:window.close()"添加JS功能代码

16.HTML颜色表示

（1）颜色单词：blue green red yellow

（2）十进制表示：rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)

（3）十六进制表示：#FF0000红 #00FF00绿 #0000FF蓝

17.锚点链接

含义：在一个网页的不同区域进行跳转

定义锚点：<a name="锚点名称"></a>

语法：<a href="文件名#锚点名称">....</a> (文件名可有可无，如果是同一网页不同部分跳转，不需要文件名，如果跳到不同网页，需要文件名)

锚点名称的命名规则：可以包含字母，数字，下划线（以字母开头）

注意：<a></a>之间没有内容，换句话说，这个记号不是给我们看的，而是给链接用的

18.<meta>标记

作用：提供网页的元信息。比如：指定网页的搜索关键字

属性（1）http-equiv:模拟HTTP协议文件头信息，当信息从服务器端传到客户端，告诉浏览器如何正确显示网页内容

http-equiv 属性一般与content属性配合使用。content属性指定信息的详细参数

应用：（1）设置网页字符集 <meta http-equiv="content-type" content="text/html;charset=utf-8">

（2）网页的自动刷新<meta http-equiv ="refresh" content="2"> （美两秒刷新一次）

（2）name:主要用于网页的搜索关键字，版权信息，作者等

应用：（1）设置网页搜索关键字

（2）设置网页描述信息

19.XHTML简介（可扩展超文本标注语言）

（1）传统的HTML开发的初衷面向PC机，随着移动端出现,HTML已经满足不了需求

XHTML是新一代HTML，是为了取代HTML，标记与HTML一样，只是语法更严格

（2）XHTML编写规范

所有的标记和属性全要小写

单边标记必须关闭。如：<br>----><br/>

所有属性值都必须加引号

所有属性都必须有值如<hr noshade>--><hr noshade="noshade" />

标记之间顺序嵌套

XHTML网页必须要有DTD文档类型定义代码

20.DPD文档类型定义

（1）DTD文档类型定义的目的：是一种验证机制，也就是说检验以下你写的XHTML标记语法是否合法

（2）DTD有三类：严格型不能再使用各种表现标记如：<font> <b> <body bgColor> 必须使用CSS来取代表现标记

<!DOCTYPE html PUBLIC"_//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/ahtml1-strict.dtd">

过度型还可以继续使用HTML中表现的写法

<!DOCTYPE html PUBLIC"_//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/ahtml1-transitional.dtd">

框架型

<!DOCTYPE html PUBLIC"_//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/ahtml1-frameset.dtd">`

21.表格标签

（1）表格结构

<tr>

</tr>

<tr>

</tr>

<table>

(2)table属性

width：表格宽度，单位可以是百分比，也可以是固定值

height：表格高度

border：边框粗细

bordercolor：边框颜色

bgcolor:表格背景色

background:背景图片 URL

cellpadding:单元格边线到内容间的距离（填充距离）

cellspacing:单元格间距离

rules: "all"合并边线

（3）<tr>属性————行标记

bgcolor:行的背景颜色

height:行的高度

align:行的文本水平居中

valign:垂直居中取值： top middle bottom

(4)<td>或<th>

<td>是普通单元格，<th>是标题单元格，居中加粗显示

width:单元格宽度

heigth:单元格高度

bgcolor：背景颜色

align:水平对齐

valign:垂直对齐

rowspan:上下单元格合并

colspan:水平单元格合并(合并属性放在第一个单元格)

注意：合并时有增就有减

22.表单

（1）表单的概念

表单主要用来获取客户端用户数据（信息）的。如：注册表单，查询表单，登陆表单等

（2）表单的工作原理

浏览有表单的网页，填写一些必要的信息，然后单机某个按钮进行提交

这些表单数据，通过互联网，传递到服务器上

服务器上有专门程序，对表单数据进行验证（如果验证成功，将数据存入数据库，失败返回错误信息）

由上可得：表单制作分两部分，一是前台页面的注册，而是后台PHP对表单处理

（3）表单的结构

（4）<form>标记属性 ---块元素

name:给表单起名字。主要给Javascript来用,JS主要用来做客户端表单验证

method:表单的提交方式。取值get或post

（1）get:将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求

get不能提交敏感数据（地址栏能看见） GET方式只提交少量数据（地址栏长度有限）

get方式下不能上传附件

（2）post：不是将表单数据追加到地址栏，而是直接传给表单处理程序

post提供的数据相对安全post可提交海量数据

post可以上传附件

action：指定表单的处理程序，一般是PHP文件（action为空，表单数据提供给自己处理）

enctype：指定表单数据的加密方式（解密方式）有两个取值（这个属性只用在method=“post”情况下）

application/x-www-form-urldecode//默认加密方式

multipart/form-data //如果上传文件，用它

（5）表单元素

单行文本域<input type="text" 属性="值"/>

常用属性：

name:文本框名字。命名规则是：字母数字下划线，只能字母开头

type:表单元素类型

value:文本框中的值

size:文本框长度，以“字符”为单位

maxLength: 最多可以输入多少个字符，超出的就输不进去了

readonly:只读属性，可以选中，不能修改（readonly="readonly"）

disabled:禁用属性，不能选中，不能修改

单行密码域<input type="password" 属性="值"/>

常用属性同上

单选按钮<input type="radio" 属性="值"/>

常用属性：

name:元素的名称（单选name 的值必须一致）

value:元素的值，该value中数据将发往服务器

checked:默认选择哪一项 checked = "checked"

复选框<input type="checkbox" 属性="值"/>

常用属性：属性同上

下拉表单<select name="名称">

</select>

常用属性：

<select>标记属性，只有name

<option>属性，value selected

文本区域

按钮

提交按钮：<input type="submit" value="提交表单"/>

重置按钮：<input type="reset" value="重新填写"/>

图片按钮：<input type="image" src="images/kaka.png"/>//和submit一样，也是提交表单

普通按钮：<input type="button" onclick="javascrip:window.close()" value="关闭窗口"/>本身不具备

上传文件域 <input type="file" 属性="属性"/>

常用属性：

name:表单元素名称

value:表单元素的值，这个值实际是上传的文件名，value是只读属性，这个value内容只能来自手动上传的文件，而不能用户自己指定

隐藏域<input type="hidden" name="id" value="123"/>

功能：隐藏域就是看不见的一个框，传递一些值，这些值又不想让别人看到

用处：主要用于PHP后面的程序如：修改某一条新闻内容时，需要传递一个新闻的ID 号

23.图像热点

定义：给一张图片加多个链接（默认情况下，一张图只能加一个链接）

结构：

</map>

<area>常用属性：

shape:热区形状，取值 rect(矩形) circle(圆形) polygon(多边形)

coords:热区的坐标（位置）

如果shape=rect 那么，coords="x1,y1,x2,y2"(对角线两个点)

如果shape=circle coords= "x,y,r"（圆心坐标和半径）

24.普通框架

（1）框架的概念

框架技术：将一个浏览器窗口划分成若干个小窗口，每个小窗口显示一个独立网页

（2）框架集和框架页

框架集<frameset>:主要用来划分窗口的（窗户）

框架页<frame>:主要用来指定窗口默认显示的网页地址（窗格）

（3）框架网页的DTD必须是框架型DTD

（4）<frameset>属性

cols:划分左右框架

cols="200,*" //左边框架宽度200px,剩下的都是右边框架

cols="20%,*"//左边占百分之二十，剩下右边

rows:划分上下框架

frameborder：是否显示边框线，取值：1或0，yes或no(默认无)

bordercolor：边框颜色

（5）<frame>属性

src:该小窗口中，默认显示的网页地址

noresize:不能调整窗口大小

scrolling:是否显示滚动条，取值：auto,yes,no

name:给当前小窗口起名字（这个name就是给<a>标记target属性来用的）

（6）<noframes>

描述：当浏览器不支持框架时，显示的提示信息。一般情况下，IE6不支持框架，高版本都支持

语法：<noframes>该浏览器不支持框架</noframes>

25.内嵌框架（行内框架）

描述：内嵌框架，相当于在现有的网页中，挖了一个窟窿，透过这个窟窿可以看见里面的内容

与普通框架的区别：<iframe>是<body>的子标记，所以放在<body>中

语法格式：<iframe 属性="值">对不起，浏览器版本太低</iframe>

常用属性：

src:引入的文件地址

width:框架的宽度

height:框架的高度

frameborder:是否显示边框线

name:指定小窗口名字（这个name就是给<a>标记target属性来用的）

alingn:框架在网页中对齐方式取值：left center right

阅读全文

0 0