本文主要介绍了HTML的基础知识，包括HTML的概念、文档结构、语言特点，详细讲解了<!DOCTYPE>标签、META标记、TITLE标记、字体和背景设置、分隔线、图像标记、超链接、表格、input标签、form表单以及frame框架的使用，是JavaWeb初学者的入门指南。
文章目录
一、HTML
1.1 HTML介绍
超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言 （markup language），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
1.2 HTML的文档结构
1. <html>和</html>:
<html>标记用于html文件的最前面，用来表示html文件的开始。而</html>的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。
2. <head>和</head>:
<head>和</head>构成html文件的头部部分，在此标记对之间可以使用<title> </title>和<script> </script>等等标记对，这些标记都是描述html文档相关信息的标记对，<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。
3. <body>和</body>
<body>和</body>是html文档的主体部分，在此标记可以包括“<p>”,“</p>”,“<h1>”,“<br>”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。
1.3 HTML语言的特点
- 简易性：超级文本标记语言 版本升级采用 超集方式，从而更加灵活方便。
- 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加 标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
- 平台无关性：虽然 个人计算机大行其道，但使用 MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是 万维网（ WWW）盛行的另一个原因。
- 通用性：另外， HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
1.4 HTML的<!DOCTYPE> 标签
声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
作用：
- 声明位于文档的最前面，处于html标签之前，可以告诉浏览器的解析器，用什么文档类型规范来解析文档
1.5 META标记
META标记是html语言的head部分的一个辅助性的标记的，他位于head和title标记之间，他提供给用户不可见的信息。meta标记的用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie;可以用于来鉴别作者，设置页面格式，标注内容提要和一些关键字，还可以设置页面的自动刷新以及等级等等。
META属性有两种：分为name和http-equiv
name属性：把 content 属性关联到一个名称。主要用于描述网页，对应于content（网页内容）：最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词）
| name | content |
|---|---|
| Generator | 用以说明生成工具 |
| KEYWords | 网页的关键词 |
| Description | 用以说明生成工具 |
| Author | 站点的制作的作者 |
| Robots | all、none、index、noindex、follow、nofollow |
Robots的属性含义：
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
http-equiv属性 ：httpEquiv 属性把 content 属性连接到 HTTP 头部。
1.Content-Type和Content-Language(设置文件字符集)
说明： 设定页面使用的字符集，用以说明主页制作所使用的文字以及语言，浏览器会根据此来调用相应的字符集显示page的内容。
用法：
<meta http-equiv="Content-type" Content="text/html,Charset=gb2312">
<meta http-equiv="Content-Language" Content="zh-CN">
1.6 TITLE标记
在头部的<head></head>中，有另一组标签<title></title>。打在<title></title>这里面的文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题。
浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。
1.7 文字上的分隔标记
强制断行标记“<br>” <br> 可插入一个简单的换行符。
强制分段标记“<p>” <p> 标签定义段落。
空格“ ；”
1.8 字体标记
1.标题标记
使用方法：<h1>内容</h1>
<h2>内容</h2> 可以到h6，表示字体的大小
2.设置字体标记
使用方法：<font size=“2” color=“red” face=“黑体”>内容</font>
size表示字体的大小，color表示字体的颜色，face表示字体的样式
3.字体变化标记
使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
<b></b> 加粗 <i></i> 斜体 <u></u> 底线
<kbd>用粗体等宽字体显示文字</kbd>
<var>用较小的固定宽度显示字体</var>
1.9 字体变化标记
使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
<dfn>用于名词解释，斜体显示</dfn>
<sup></sup> 上标 <smap>用于字母序列等宽</smap>
<sub></sub> 下标
<em></em> 强调 <address>模拟信封上的字体</address>
<strong></strong> 加强
<s></s>删除线 <strike>删除线</strike>
<big>比默认字号大一号</big>
<small>比默认字号小一号</small>
<code>以等宽字体显示计算机程序代码</code>
1.10 背景标记
bgcolor：背景颜色，backgroud：背景图片
<html>
<head><title>背景颜色</title> </head>
<body bgcolor="red">
<font size="4" face="黑体" color="red">背景颜色</font>
</body> </html>
例子2：
<html>
<head><title>背景颜色</title> </head>
<body background="bg.jpg">
<font size="4" face="黑体" color="red">背景图片</font>
</body> </html>
1.11 分隔线标记
hr标签在 HTML 页面中创建一条水平线
color表示水平线的颜色，width表示水平线的宽度，size为水平线的厚度，noshade表示颜色为纯色
1.12 IMG标记
img 元素向网页中嵌入一幅图像。IMG标签有两个必需的属性：src 属性 和 alt 属性。
src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。
alt 属性是一个必需的属性， alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。
1.13 序列标记
1.无序序列：
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
2.有序序列：
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol
3.自定义列表
dl标签用于结合 dt （定义列表中的项目）和 dd （描述列表中的项目）。
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
1.14 特殊字符
html中有很多特殊的字符是需要特殊的处理。
下面看几个特殊的字符处理：
转义字符
< < > > & & &qout; “ 空格
1.15 超链接
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
1.连接到其他的文档
2.网页的内部链接
3.网页的外部链接
4.图片的锚点链接
1.连接到其他的文档
<a href=“特殊字符.html“ target=”_blank”>连接其他文件</a>
target=“_self” 在自身窗口打开
这里需要注意的就是文件的路径
绝对路径：是指从根目录到文件的完整路径。
相对路径：是指相对于当前文件的文件位置。
2.网页的内部链接
<a href="#c1">查看章节1</a>
<a name="c7">
<h2>章节1</h2>
<p>该章节是关于。。。。。。。。。。</p>
</a>
<h2>章节2</h2>
<p>该章节是关于。。。。。。。。。。</p>
</body>
</html>
3.网页的外部链接
<a href="http://www.baidu.com">链接的百度</a>
4.图片的锚点链接
<a href="http://www.baidu.com">
<img src="图片的路径" />
</a>
1.16 表格
table 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
border设置边框的属性
<table border="3" cellspacing="0" bordercolor="black" width="400px" height="300px">
<tr>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</table>
table属性中colspan和rowspan可以合并单元格，colspan横向合并，rowspan纵向合并
1.17 input标签
input 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
| type | 类型 |
|---|---|
| text | 文本输入框 |
| button | 点击按钮 |
| radio | 单选框 |
| checkbox 复选框 | |
| file | 选择本地文件上传网络 |
| password | 密码输入框 |
| date | 日期表（选择年月日） |
| reset | 重置 |
| submit | 提交 |
| textarea | 区域文本输入框 |
| select选择 option 子标签 | 下拉列表 |
| number | 定义最大最小值，进行选择 |
input标签中的内容要提交到后台，必须要有一个name属性
type=“radio”：单选框，在多个选项中只能选择一个。（注：要给单选框加入相同的name属性）
当我们需要在点击选项是也能被选中时，应该在input标签中加个id属性，然后设置一个lable属性，将两个的属性值相同。
下面在表单介绍完毕之后，设置一个表单使用input属性。
1.18 form表单
表单在网页上用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的浏览器上，这样网页就具有交互性了。
form标记具有action，metnod,target属性。 action属性是处理处理程序的程序名称。method属性是用来定义处理程序的从表单中获取信息的方法，通常有两种分别是GET和POST两种。
action； 把数据提交给服务器的地址，若没有就提交给自己
method ； 提交的方式（post , get ）
其中post与get的区别：
内容可见性：get通过URL地址传递数据，表单所有的内容在URL都可以看到。而POST在url地址里无法看见。
安全性：get传递数据不安全，而POST传递数据安全。
数据量：get只能传递文本信息。POST可以传递大量数据，并且可以传递图片，文件等其他内容。
传输速度get的传输速度要比post快。
使用form表单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form用户注册</title>
</head>
<body >
<table border="1" cellspacing="0" width="300px" height="600px" align="center">
<tr><th colspan="2">用户注册表</th></tr>
<form action="#" method="get">
<tr>
<td width="80px">用户名</td>
<td><input type="text" id="" name="username" value="" placeholder="输入用户名" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" placeholder="请输入密码" /></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="0" checked="checked"/>男
<input type="radio" name="sex" value="1" checked="checked"/>女文字不可选取
<input type="radio" name="sex" value="2" id="yes"/><label for="yes">女</label>
</td>
</tr>
<tr>
<td>爱好</td>
<td><div class="mui-input-row mui-checkbox ">
<input type="checkbox" name="hobby" value="basketball" checked="checked"/>篮球
<input type="checkbox" name="hobby" value="scoccer" />足球
<input type="checkbox" name="hobby" value="pingpang" />乒乓球不可选
<input type="checkbox" name="hobby" value="pingpang2" id="pp" /><label for="pp">乒乓球</label>
</div>
</td>
</tr>
<tr>
<td>学历</td>
<td><select name="xueli">
<option value ="幼儿园" ></option>
<option value ="小学"></option>
<option value ="初中"></option>
<option value ="高中"></option>
<option value ="大学"></option>
</select></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="email" name="email"/></td>
</tr>
<tr>
<td>你有过几年的工作经验</td>
<td><input type="number" name="num" max="10" min="1" value="1" /></td>
</tr>
<tr>
<td>个人描述</td>
<td><textarea rows="5" cols="20" name="desc">
</textarea></td>
</tr>
<tr>
<td>生日日期</td>
<td><input type="date" name="birthday" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="" value="提交按钮" align="left"/><input type="reset" value="重置选项内容" align="right" /></td>
</tr>
</form>
</table>
</body>
</html>
1.19 frame框架
frame标签通过src元素的属性值定义框架中放置的HTML页面，可为相对地址或URL。
frameset为框架结构标签，定义如何定位框架。可通过修改frameset中cols或rows元素的属性值，设置框架的垂直或水平布局，以及每个框架所占用的比例大小。
frame的属性列表：
| 属性 | 取值 | 描述 |
|---|---|---|
| frameborder | 0或1 | 规定是否显示框架周围的边框 |
| marginheight | pixels | 定义框架的上方和下方的边距 |
| marginwidth | pixels | 定义框架的左侧和右侧的边距 |
| name | name | 规定框架的名称 |
| noresize | noresize | 规定无法调整框架的大小 |
| scrolling | yes no auto | 规定是否在框架中显示滚动条 |
| src | URL | 规定在框架中显示的文档的 URL |
案例：
frame.html
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- frameset 不能和body共存
frame 代表你切割的每一个小块
rows 为高
cols为水平
-->
<frameset rows="25%,*" border="3" bordercolor="green">
<frame src="top.html">
<frameset cols="20%,*">
<frame src="left.html" noresize="noresize"/>
<!-- name="content" 可以跳转对应的名称的网页 -->
<!-- 显示的URL 设置显示滚动条为自动 name为content noresize规定无法调整框架的大小 -->
<frame src="http://www.sina.com" scrolling="auto" name="content" noresize="noresize"/>
</frameset>
</frameset>
</html>
left.html
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<!-- 设置两个超链接 target属性值为打开链接的frame的name值 -->
<li><a href="https://www.baidu.com" target="content" >进入百度</a></li>
<li><a href="form表单.html" target="content" >表单页面</a></li>
</ul>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
