HTML-----学习----整里旧笔记

最新推荐文章于 2021-06-01 13:32:29 发布

书耳朵

最新推荐文章于 2021-06-01 13:32:29 发布

阅读量1.8k

点赞数

分类专栏：码农的成长笔记

本文链接：https://blog.csdn.net/qq_34067504/article/details/82121282

版权

码农的成长笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML简介
1. HTML超文本标记语言

HTML能用来做什么

如果你要制作网站的话，学习HTML是不可避免的。HTML是用来制作网站的

HTML是Internet上用于设计网页的主要语言,网页可以由文本,图片,动画等内容组成,基础架构都是HTML. 从事网页制作或者相关工作,就要学习HTML

HTML是“HyperText Mark-up Language（超文本标记语言）”的缩写

要制作网页,就需要使用超文本标记语言编写以.html 或者.htm结尾的文件

1. 人物简介

Tim Berners-Lee蒂姆·伯纳斯·李是HTML创始人，www之父，w3c创始人

HTML

HTML是由一名叫蒂姆·伯纳斯·李的科学家发明的。他发明HTML的目的，是为了方便世界各地的物理学家们可以更容易地获取彼此的研究文档。

蒂姆·伯纳斯-李为使世界各地的物理学家能够方便的进行合作研究，在1982年发明了HTML。HTML取得了的巨大成功，大大超出了蒂姆·伯纳斯-李的原本预计,后来成为国际标准，由万维网联盟（W3C）维护。

HTML是一门语言, 它令我们可以在因特网上展示信息（例如科学研究信息）。

浏览器

在1990年, 蒂姆·伯纳斯·李在日内瓦的欧洲粒子物理实验室里开发出了世界上第一个网页浏览器。我们所看到的网页，是浏览器对HTML进行解释的结果。

WWW(万维网)

也叫做“Web”、“WWW” 中文叫做万维网。也叫环球信息网.

有了网页,有了显示网页的浏览器,如何获取网页,如何发布网页. 蒂姆·伯纳斯·李在瑞士的欧洲粒子物理实验室发明了World Wide Web，即我们熟悉的WWW 简单来说: 它允许用户在一台计算机上通过互联网存取另一台计算机上的信息(网页)。

万维网

WWW是一个资料空间。在这个空间中一样有用的事物，称为一样“资源”；并且由一个叫做“统一资源标识符”（URI）来标识。这些资源通过超文本传输协议(Hypertext Transfer Protocol）传送给使用者，而后者通过点击链接来获得资源。

简单的说WWW就是一个世界性的信息库。在这个信息库中，信息不仅能被全球的人们存取，而且能轻松地链接到其他地方的信息，使用户可以方便快捷地获得重要的信息。

W3C

万维网联盟（World Wide Web Consortium，简称W3C），又称W3C理事会。1994年10月蒂姆·伯纳斯·李在麻省理工学院计算机科学实验室成立了该组织。

万维网联盟是国际著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。

官方网址是：www.w3c.org

1. HTML体验

打开浏览器：输入www.baidu.com

在页面处点击一下鼠标右键会出现一个下拉菜单，然后选择“查看源代码”（注意：有些浏览器是“源代码” 或者“源码”）；如下图：

之后，你就可以看到如下的代码：

我们再举一个例子，大家先创建一个txt文档，比如test.txt,之后在此文档里面输入如下内容（注意：大家先不要去理会这些代码是什么意思，后面我们会逐步学习的）：

<html>

<head>

<title>这是我的第一个网页</title>

</head>

<body>

</body>

</html>

之后更改文件的后缀，把txt更改为html，之后双击此文件，或者选用一个浏览器打开此文件（先运行浏览器，然后把test.html的完整目录拷贝到浏览器的地址栏中，然后回车就可以了），那么就会出现一个网页如下的显示：

显示之后，你就可以用鼠标左键点击一下“好好学习“，那么就会跳转到另外一个网页，这个网页的网址就是http://www.sztopit.com/，上面就是一个网页的html代码，下面我们开始逐步来学习它。

1. HTML运行原理

使用记事本编写一个简单的页面进行体验（如上述test.html）。

运行原理：

本地运行：直接通过浏览器打开本地以.Html后缀的文件。

远程访问（Tomcat）通过浏览器，输入打开web服务器上的文件(此种方法我们后面会学习到)。

1. 开发HTML

需要使用HTML编辑工具开发HTML页面：

一:基本文本编辑软件：如记事本、Editplus等

二:所见即所得软件：如dreamweaver Aptana 等

由于我们学习的重点不是html本身，所以我们就使用一个能立即上手的编辑工具，使用记事本、Editplus、或者eclipse

HTML的语法

HTML是一门标记语言,用于控制页面结构,HTML 通过标记告诉了浏览器以什么方式或者结构显示内容,作为初学者掌握HTML的一些常用标记是必要的.需要告诉大家的是，html学习起来非常容易，html的语法规则非常像我们之前学习的xml语法。它们本来就属于类语言。

1. 标记（标签）
  1. <> </>

HTML用于描述功能的符号称为“标记”。如“HTML”、“BODY”、“TABLE”等。

标记是由W3C组织定义好的并具有特定的含义的符号.

格式：

标记在使用时必须用尖括号“<>”括起来，而且是成对出现，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。

所以应当遵循：<开始标签> 标签体 </结束标签>

特点

标签的特点：不区分大小写，标签名是固定的。

例如<TABLE>表示一个表格的开始，</TABLE>表标一个表格的结束。如<TABLE>和<table>都是表示一个表格的开始。不区分大小写。

1. 1. 标签分类

带标签体的标签如： <p> XX </p>

不带标签体的标签如： <br/>

所谓标签体，就是指标签中间的内容，比如上面的XX

1. 1. 标签属性

写在开始标签上的名=“值”对代表该标签的属性 <font color=“red”></font>。

一个标签可以有多个属性，多个属性之间使用空格隔开。

注意：属性值最好使用单引号或者双引号引起来。

注意事项：

1:所有标记都要用<> 尖括号括起来

2:成对出现的标记,最好开始和结束标记同时写完.

3:HTML中不区分大小写

4: 5:标记中不要有空格.

错误的例子：

<html>

<head>

<title>这是我的第一个网页</title>

</head>

<body>

</body>

</html>

1. HTML注释

1. HTML正文

HTML正文分为文档头和文档体两部分。文档头<head> 可以定义标题,关键字等等.文档体<body> 定义要将要显示在浏览器中的各种信息。

案例：

<html>

<head>

<title>这是我的第一个html</title>

</head>

<body>

<p>HelloWorld</p>

<body>

</html>

注释：

<html> 与 </html> 之间的文本描述网页

<head> 与 </head> 之间的用于定义文档的头部

<title> 与 </title> 定义文档的标题

<body> 与 </body> 之间的文本是可见的页面内容

<p> 与 </p> 之间的文本被显示为段落

1. 1. 文件头<head>

一个完整的html文件包括头部文件(head)和文件主体(body),头部标记是<head></head>。在这对标记中的内容为头部内容,HTML中的头部内容不直接在网页上显示。

可以用在 head 部分的标签：<title>,<base>, <link>, <meta>, <script>, <style>, 以及文本标签

例如: title

代码：

<html>

<head>

<title>这是网页的标题</title>

</head>

<body>

</body>

</html>

本例中：在<head><head>标签中中包含了<title></title> 标签。<title>中的内容是网页的标题,没有显示在网页中,显示在了网页的标题栏上。

1. 1. 文件体<body>

我们可以可以直接在body中添加文件并编辑内容

<html>

<head>

<title>这是网页的标题</title>

</head>

<body>

hello,world

</body>

</html>

可以改变颜色的背景

<html>

<head>

</head>

请看: 改变了颜色的背景。

</body>

</html>

可以添加背景图片

<html>

有了背景图片

</body>

</html>

style="background-repeat:no-repeat;(不平铺)

background-position:center;(定位居中)

background-attachment:fixed" (绝对定位)

但是这样的文本内容是用浏览器打开后没有任何的效果，想要换行，想要段落，等等怎么办？就需要学习文本标签了。

1. 文本标签
  1. 标题(h1~h6)

<h1> - <h6> 标签可定义标题<h1> 定义最大的标题。<h6> 定义最小的标题。

<html>

<body>

</body>

</html>

注意：标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。

1. 1. 段落(p)

<p> 标签定义段落。p 元素会自动在其前后创建一些空白。

<html>

<body>

<p>这是段落一。</p>

<p>这是段落二。</p>

<p>这是段落三。</p>

<p>段落元素由 p 标签定义。</p>

</body>

</html>

属性:title

例如: <p title="段落的说明">这是一个段落</p

1. 1. 段落缩进(blockquote)

<html>

<body>

这是长的引用：

孙子曰:兵者，国之大事，死生之地，存亡之道，不可不察也。故经之以五事，校之以计，而索其情：一曰道，二曰天，三曰地，四曰将，五曰法。兵者，诡道也。

故能而示之不能，用而示之不用，近而示之远，远而示之近。</blockquote>

这是短的引用：孔子曰:

<q>三人行必有我师</q>

<p>使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。</p>

</body>

</html>

使用 blockquote 元素的话，浏览器会插入换行(两个br)和外边距(&nbsp)，而 q 元素不会有任何特殊的呈现。

关于：q

<html>

<body>

孔子曰:

<q>三人行必有我师</q>

<br />

孔子曰:三人行必有我师

</body>

</html>

1. 1. 上下标(sup和sub)

Superscript 上标

Subscript 下标

当需要在网页中显示：

x1=1

23=8

的文本时，可以使用上下标

<html>

<body>

</body>

</html>

<sub> 标签可定义下标文本。 Subscript 下标

<sup> 标签可定义上标文本。 Superscript 上标

1. 1. 换行(br)

<br> 回车换行

<br> 可插入一个简单的换行符。br标记没有任何内容,作用就是换行,所以是空的.由于没有内容所以只写一个<br>即可。

例如:

<html>

<body>

中国<br />

美国<br />

日本<br />

俄罗斯<br />

</body>

</html>

1. 1. 原样输出(pre)

pre 元素可定义预格式化的文本。

<html>

<body>

<pre>

class Demo{

public static void main(String[] args){

System.out.println("hello,world");

}

</pre>

<p>pre 标签很适合显示计算机代码：</p>

<pre>

for (int i = 1; i<10;i++){

System.out.println("hello,world");

}

</pre>

</body>

</html>

1. 1. 线条(hr)

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分

可以通过属性设置线条的颜色,粗细,宽度,对齐方式.

color="#FF0000" size="5" width="400" align="left"

<html>

<body>

<p>hr 标签定义水平线：</p>

<hr />

<hr />

<hr />

</body>

</html>

1. 1. 文本列表(ul和ol)

列表标签：<dl>

<dt>：上层项目

<dd>：下层项目

<dl>

</dl>

效果：

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

<ul>：符号标签（○●■）

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

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

<ul> 默认的是●

<html>

<body>

<h4>一个无序列表：</h4>

<ul>

</ul>

</body>

</html>

通过type属性更改项目符号可以更改项目符号，分别显示○●■

<html>

<body>

<h4>Disc 项目符号列表：</h4>

</ul>

<h4>Circle 项目符号列表：</h4>

</ul>

<h4>Square 项目符号列表：</h4>

</ul>

</body>

</html>

嵌套列表：

<html>

<body>

<h4>一个嵌套列表：</h4>

<ul>

<li>茶

<ul>

</ul>

</li>

</ul>

</body>

</html>

数字编号

<ol>

<li>Coffee</li>

</ol>

案例：可以使用数字，字母，罗马字母等进行编号。

<html>

<body>

<ol>

</ol>

</ol>

<h4>小写字母列表：</h4>

</ol>

<h4>罗马字母列表：</h4>

</ol>

<h4>小写罗马字母列表：</h4>

</ol>

</body>

</html>

1. 1. 字体(font)

设置文字的字体,字号,颜色

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

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

<html>

<body>

<h1><font face="Courier New" ,size="6" ,color="#00aaaa">hello,world</font>

</h1>

<p></p>

</body>

</html>

1. 特殊字符

如何在HTML 中空格? 在html中空格无效,想要实现空格有专用标记,例如: &nbsp

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

<	<	>	>	&	&
"	“	®	®	©	©
™	™		空格

1. 表格标签

我们可以将表单想象为网格,表由行和列组成.

<table>标记表示表格,以<table>开始以</table>结束

<caption>标题标签,给表格提供标题。

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

<tr> 行标签

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

1. 1. 简单的表格

<body>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

效果如下:

1. 1. table的border属性

我们可以做在table中使用 border 以像素为单位,会在单元格和表的周围创建边框.如果将该值设置为0,或者没有使用该属性,就会出现上述的效果.

<tr>

</tr>

<tr>

</tr>

</table>

效果:

1. 1. table的width 属性

该属性可以指定表的宽度,单位是像素或者百分比.区别在于百分比百分比可以让

表格的宽度随浏览器窗口的大小变化

<tr>

</tr>

<tr>

</tr>

</table>

效果:

1. 1. table的align属性:

可以指定 center left right

<tr>

</tr>

<tr>

</tr>

</table>

指定center会显示在浏览器中间.

注意:也可以通过 bordercolor 属性设置边框颜色

1. 1. <caption>标签添加表头标题

<body>

员工信息表

</caption>

<tr>

</tr>

<tr>

</tr>

</table>

效果:

1. 1. <th>表头标签

粗体显示并居中.

<body>

员工信息表

</caption>

<tr>

</tr>

<tr>

</tr>

</table>

效果如下:

1. 1. <tr>的align 属性

可以指定该行中所有单元格的内容的位置.

员工信息表

</caption>

<tr >

</tr>

</tr>

</table>

效果如下:

1. 1. <table>标签的cellspacing

单元格间距,单元格和边框之间的空格,单位是像素或者百分比

员工信息表

</caption>

<tr >

</tr>

<tr >

</tr>

</table>

效果如下:

1. 1. <table>标签的cellspadding

单元格的边和它的内容之间的间隔,单位是像素或者百分比

员工信息表

</caption>

<tr >

</tr>

<tr >

</tr>

</table>

效果如下:

1. 1. 合并列colspan

合并列合并单元格

<td>和<th> 的colspan属性

colspan属性用于指定一个单元格将跨越的列的数量.

效果:

1. 1. 合并行rowspan

<td>和<th> 的rowspan属性

<tr >

</tr>

<tr >

</tr>

<tr >

</tr>

</table>

效果如下:

注意：

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

THEAD、TFOOT包含关于表格列的信息。

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

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

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

以下表格的书写可以提高表格在下载的显示效率

<html>

<head>

</head>

<body>

<caption>表格的标题</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>XML基础</td>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</body>

</html>

效果如下:

1. HTML表单

表单，在网页中主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。

表单以<form> 开始,以</form>结束,主要有一些表单控件(文本输入框,密码框,单选框,复选框,下拉列表,文本域,提交按钮等)

1. 1. <form>的Action属性

action属性表明提交表单时如何处理数据,通常用户注册完表单时,需要数据提交给web服务器,就需要将action的值定义为服务器的url

1. 1. <form>的method属性:

将表单数据提交给服务器的方式有2种,get 和post

get 方法它将数据作为URL的一部分进行发送

post方法,将数据隐藏发送.

1. 1. 常见的表单控件
  2. input标签

 type 属性

指定创建的输入控件的类型,例如文本框是text 密码是password

单选是radio多选是checkbox 上传文件时file

name 属性

用户输入的值对应的名称,会以name=用户输入值的形式发送给服务器.

value 文本输入框的默认显示信息

size 指定文本输入框的宽度,字符为单位.

1. 1. 文本字段

例如: google 主页的文本输入框.

如何在网页中做出一个文本框?需要使用input 标签,并且将input的属性值设置为text.

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

例如: <input type=“text” name=“” value=“”/>

1. 1. 密码字段

input的属性值设置为password.

password。输入的文本以原点或者星号的形式显示。

注意:虽然密码在屏幕上是隐藏的,但是他们仍然是以纯文本形式发送的.

1. 1. 单选按钮

input的属性值设置为radio 例如：性别选择。

单选按钮需要使用相同的名称,这样一次就只能选择一个选项.也就是相同name的radio只能选一个

上传数据需要使用name 和value属性.

注意:同一个组中的单选按钮name应该一直, 使用value区分.

1. 1. 多选按钮

input的属性值设置为checkbox 如：兴趣选择。

上传数据需要使用name 和value属性

注意：同一个多选范围的，应该使用同一个name,每个具体选项指定具体的value.

1. 1. 文件选择框

Input 的属性值为file

需要上传文件到服务器,需要使用文件选项框会自动生成一个文本框，和一个浏览按钮。

1. 1. 下拉列表

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

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

服务器如何获取该下拉列表数据:

需要给select 中添加name属性.在每个option中添加value属性.即可

1. 1. 文本输入域

如果希望用户输入多行文本信息,就需要使用文本域.

<textarea>如：个人信息描述

<textarea> 的属性

name 该文本域的名称.

rows 指定文本域大小,指定行数.

Cols 指定文本域大小,指定列数.

提交数据需要给指定文本域的name属性

name=文本信息.

1. 1. 按钮

按钮通常用于提交表单,也可以清除表单.可以使用三种形式创建按钮

使用<input>元素,type属性值设置为 submit reset

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

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

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

按钮的属性:

name 设置按钮的名称

value 按钮上显示的文本

size 按钮的宽度,像素为单位.

使用图像作为按钮:

可以使用图像作为按钮,例如

1. 1. 隐藏字段hidden

有时候需要页面传递信息不希望用户看到,可以使用隐藏字段,在页面上不显示，但在提交的时候随其他内容一起提交。

1. 1. 代码

<form>

用户名:

<br />

密码:

<br/>

性别:

男

女

<br/>

爱好:

吃饭

睡觉

看电影

<br>

城市:

</select>

<br/>

上传文件:

</input>

<br/>

自我介绍:

<br />

<br/>

</form>

1. 1. 表单提交数据

需要指定form表单的actin属性

form表单的actin属性

一般是表单提交的服务器

form表单的method属性

可以是get 和post

get 可以再地址栏中看到用户提交的数据以键值对形式.

服务器如何识别用户提交的数据?

我们需要给所有的控件起名字就是input的name属性

input中的name属性.

例如: 用户名 name=”username”

密码框 name=”pwd”

　如果默认不填传递的字符串是空.

注意: 由于性别和兴趣等是单选框和多选框,name属性的值一样,必须一样,才可以实现单input的value属性

例如:单选和多选.性别的input 的name属性都是 name=”gender”; 服务器如何区分用户选择的数据,很显然,我们需要给每个选项定义一个值,这就是属性value

当用户选择具体的选项时,会向服务器传递 name =value 的形式.

value 值确定了要向服务器传递具体的值.

select 的name属性

同样道理,列表中的选项是不固定的,我们也需要给每一个具体的option 都定义一个值.同时在selct 中使用name属性. 如果用户有了具体的选择,那么向服务器发送的数据就是 name=value 的形式.

代码:

姓名:

<br />

密码:

<br />

性别: 男

女

<br />

爱好: 吃饭

睡觉

看电影

<br />

城市:

<option value="">请选择城市</option>

</select>

<br />

文件路径:

自我介绍:

<br />

<br />

</form>

效果如下：

提交数据:

GET

POST

最后使用

<fieldset> <lengend> 元素来结构化表单

<fieldset> 元素用于创建边框

<lengend> 元素用于为<fieldset>指定一个标题

代码:

<legend>注册新用户:</legend>

姓名:

<br />

密码:

<br />

性别: 男

女

<br />

爱好: 吃饭

睡觉

看电影

<br />

城市:

<option value="">请选择城市</option>

</select>

<br />

文件路径:

自我介绍:

<br />

<br />

</fieldset>

</form>

效果如下:

作业:

实现下图注册表单

1. HTML超链接
  1. 链接标签

<a></a>

1. 1. 基本连接

通过标签<a>和<a/>和在<a>和<a/>中的文本组成连接内容,用户在浏览器中可以点击.

超链接格式： <a href=" E:\java\html_book"></a>

超链接也称之为超级链接。

1. 1. 连接到其他文档

<a>标签的属性href

使用<a> 标签开始, 需要使用属性href

href 属性的值是连接目的页面的地址.

例如:

</head>

<body>

</body>

</html>

效果:

点击百度一下就会跳转到百度页面

<a>标签的属性title

title 属性的值能够描述连接的目的页面.

<body>

</body>

<a>标签的target属性:

该属性指定连接指定的页面应当以和汇总方式在哪一个窗口中打开,如果想要再新窗口中打开,需要经target属性的值设置为_blank

target="_self"默认。在相同的框架中打开被链接文档。

1. 1. 连接到e-mail

邮件格式： <a href="mailto:email"></a>

使用<a>标签,使用href 属性,但是href属性的值要以关键字mailto 开头.然后是右键地址.

<body>

<a href="mailto:make@sztopit.cn" title="发送邮件">发送邮件make@sztopit.cn</a>

</body>

打开QQ:

<a href="tencent://message?uin=1299148007">QQ联系我</a>

启动迅雷:

1. 1. <a>锚链接

锚链接：<a name=“标记名”></a> 和 <a href="#标记名"></a>

普通的连接,连接会从一个页面到达另外一个页面.如果页面很长,希望连接页面的特定部分.就可以使用锚链接.

例如: 长页面底部的返回顶部连接

可以使用<a>标签创建目的锚.需要使用到name 和id属性

<h1 id="top">链接和导航</h1>

1. 1. 连接的目标位置

URL : 统一资源定位符, 也被称为网页地址

URL组成: http://www.sztopit.cn

模式:

Http://

表示连接到URL的类型,Web页面使用HTTP协议传递信息,所以就是以http://开头.

模式:

HTTP: //超文本传输协议(HTTP)向web服务器请求页面,并将页面从web服务器发送回浏览器.

HTTPS:// 安全的超文本传输协议,使用数字证书加密在浏览器和web服务器之间发送数据

FTP:// 文件传输协议.上传和下载文件

file:// 文件位于本地硬盘或者局域网中.

主机地址:

www.sztopit.cn

主机地址是Web站点的地址. 主机地址可以是ip地址也可以是域名.

文件路径:

文件路径以/ 开始.可能是包含一个或者多个目录名

每个目录名以/隔开.

例如: http://www.sztopit.com/index.html

1. 图像标签

使用<img> 标签将图像添加到网页中,该标签要使用src属性指定图片的来源,并且需要附带alt属性. alt属性是用于,当用户加载图片失败时显示的文字信息.

图像标签格式： <img src="" alt="“ title=“” width=“”/>

src属性
1. src=”url”;

可以是相对路径也可以是绝对路径.

alt属性

图片说明,由于浏览器无法下载图片,找不到图片,就会显示该信息.

align属性

图像的对其方式,

left right top 等

border属性

指定图像的边框的宽度,以像素为单位

例如 border=”2”;

height和width属性

指定图像的高度和宽度,以像素为单位

height=”100”
width=”50”;

1. 图像地图：<map>

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

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

</map>

1. 框架
框架标签：<frameset>

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

例：

</frameset>

这段代码会需要已经存在的3个html页面，分别是：1.html,2,html,3.html

效果：

注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身，如：noresize=”noresize”

画中画标签：<iframe>

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

</iframe>

属性: src="../success.html" frameborder="1" height="300" width="400" scrolling="no"

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

HTML版本

超文本置标语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）

HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

HTML 3.2——1996年1月14日，W3C推荐标准

HTML 4.0——1997年12月18日，W3C推荐标准

HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准

ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准。

HTML 5现在仍处于发展阶段,用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本但由于HTML5并没有正式发布所以目前最新版仍为HTML 4.01,

不过现在最新的浏览器支持部分html5的标签与属性了。

4文档类型的声明

DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；

<!DOCTYPE>声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

简单来说:<!DOCTYPE> 声明可以帮助浏览器正确地显示网页。

文档类型告知浏览器当前文档所使用的是哪种超文本或可扩展超文本规范。

语法：<!DOCTYPE HTML PUBLIC|SYSTEM "URI" "具体的约束文档的路径">

特点：可以不写

细节：要保证整个网站中所有的页面的文档类型声明保持一致

例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Transitional(过渡)

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

HTML Strict DTD(严格)

Strict DTD(严格型)要求，你不能使用任何表现层(样式)的标识和属性。

HTML Transitional DTD(过渡)

过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识。

HTML Frameset DTD(框架)

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。

HTML 和XHTML

HTML语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生语法要求更加严格的XHTML。

XHTML扩展超文本标签语言（The Extensible HyperText Markup Language ）XHTML 的目标是取代 HTML。但是Internet上用HTML写的网页太多，无法替代。XHTML 与 HTML 4.01 几乎是相同的。XHTML 是更严格更纯净的 HTML 版本。同时XHTML 是一个 W3C 标准。

XHTML和HMTL最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

XHTML 元素必须被嵌套于 <html> 根元素中

书耳朵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML-----学习----整里旧笔记

HTML简介 HTML超文本标记语言 HTML能用来做什么如果你要制作网站的话，学习HTML是不可避免的。HTML是用来制作网站的HTML是Internet上用于设计网页的主要语言,网页可以由文本,图片,动画等内容组成,基础架构都是HTML. 从事网页制作或者相关工作,就要学习HTMLHTML是“HyperText Mark-up Language（超文本标记语言）”的缩写...
复制链接

扫一扫