详解HTML

来源：互联网发布：手机遥控器软件下载编辑：程序博客网时间：2024/06/06 00:51

1. HTML

1.1. HTML概述

1.1.1. HTML是什么

Html(Hyper Text Mark-up Language)就是超文本标记语言的简写，是最基础的网页语言。

实验：查看网页的源代码

1.1.2. HTML基本结构

Html是通过标签来定义的语言，代码都是由标签所组成。

Html代码不用区分大小写。

Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。

头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。

体部分是真正存放页面数据的地方。

1.1.3. HTML语法细节

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

标签通常可以具有属性，通过对属性值的改变，控制标签具体功能效果。

属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。

格式：

<标签名属性名='属性值'> 数据内容 </标签名>

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

1.2. 字体标签

1.2.1. Font标签

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

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

图-1

Size，默认1-7，默认是3，也可以-2~+4

1.2.2. 标题标签

因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。

1.2.3. 特殊字符

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

“

™

空格

1.2.4. 颜色表示

color rgb(x,x,x) #xxxxxx colorname 不赞成使用。请使用样式取代它。规定文本的颜色。

size number 不赞成使用。请使用样式取代它。规定文本的大小。 px -2 +4

face font_family 不赞成使用。请使用样式取代它。规定文本的字体。

1.3. 列表标签

1.3.1. 定义列表

<dt>：上层项目

<dd>：下层项目

例：

<dl>

</dl>

效果，如图-2所示：

图-2

1.3.2. 有序列表

例：

<ol>

<li>Coffee</li>

</ol>

如图-3所示：

1.3.3. 无序列表

例：

<ul>

<li>Coffee</li>

</ul>

如图-4所示：

图-4

1.4. 图像

1.4.1. Img

如图-5所示：

图-5

1.4.2. Map

图像地图，可以将图像中的某一部分作为可点击的链接使用。

<map>

1.5. 超链接

1.5.1. 超链接概述

<a> 标签可定义锚。锚 (anchor) 有两种用法：

通过使用 href 属性，创建指向另外一个文档的链接（或超链接）

通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接），如图-8所示：

图-8

1.5.2. 链接资源<a href=””>

例：

href属性值可以是url，也可以是本地文件，也可使用其他协议如mailto、thunder等等。

target属性是指定在哪个窗口或者帧中打开。

1.5.3. 定位标记

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

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

例：

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

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

1.6. 表格

1.6.1. table

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元，如图-6所示：

图-6

1.6.2. caption

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

如图-7所示：

1.6.3. TBODY、THEAD、TFOOT

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

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

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

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

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

1.7. 框架标签

1.7.1. frameset

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

<html>

</frameset>

</html>

如图-9所示：

图-9

1.7.2. frame

<frame> 标签定义 frameset 中的一个特定的窗口（框架），如图-10所示：

图-10

1.7.3. iframe

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

</iframe>

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

1.8. 表单

1.8.1. form

表单标签是最常用的标签，用于与服务器端的交互，如图-11所示：

图-11

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

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

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

(1)get提交将数据显示在地址栏，对于敏感信息不安全。

post提交不显示在地址栏，对于敏感信息安全

(2)地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。

post可以提交大体积数据。

(3)对提交数据的封装方式不同：

get：将提交数据封装到了http消息头的第一行，请求行中。

post：将提交的数据封装到消息头后，在请求数据体中。

1.8.2. input

如图-12所示：

图-12

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

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

单选框 radio 如：性别选择。

复选框 checkbox 如：兴趣选择。

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

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

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

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

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

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

1.8.3. textarea

在w3school，你可以找到你所需要的所有的网站建设教程。

</textarea>

如图-13所示：

图-13

1.8.4. select option

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

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

<option value ="volvo">Volvo</option>

</select>

如图-14所示：

图-14

1.8.5. Filedset

组合框

1.9. 其他标签

1.9.1. <marquee> 让内容动起来。

<font color="red">走马灯效果...</font>

</marquee>

Direction(方向) 属性：left right down up

Behavior(行为) 属性：scroll alternate slide

1.9.2. <pre>标签

可以将文本内容按在代码区的样子显示在页面上

<pre>

public class FirstClass{

public static void main(String [] args){

System.out.println("Hello World~~");

}

</pre>

0 0