- 标识文本,如定义标题,段落、列表、预定义文本等。
- 建立超链接,点击超链接可直接跳转到页面。
- 创建列表。
- 在网页中显示图像、视频、动画。
- 制作表格。
- 制作表单,允许在网页中输入文本信息,执行其他用户操作,方便信息互动。
- HTML结构
文本HTML文档一般包含两部分:头部分和主体区域。HTML文档基本由三个标签负责组织:
<html>标签标识HTML文档
<head>标签标识头部区域
<body>标签标识主体区域
完整的html文档基本结构如下:
<html><!--语法开始--> <head> <!--头部信息,如<title>标签定义的网页标题--> </head> <body> <!--主体信息,包含网页显示内容> </body> </html><!--语法结束-->
(HTML文档所有信息必须包含在<html>标签中,所有文档的元信息应包含在<head>子标签中,而HTML传递信息和网页显示内容应包含在<body>子标签中)
- HTML文档主要包含的内容:
1.必须在首行定义文档类型,过渡型文档可省略。
2.<html>标签应设置文档名字空间,过渡型文档可省略。
3.必须定义文档的字符编码,一般使用<meta>标签在头部定义,常用字符编码包括中文简体(gb123)、中文繁体(big5)、通用字符编码(utf-8)。
4.应设置文档的标题,可以用<title>标签定义在头部。
- HTML标签
1.文档结构标签
<html></html>标识HTML文档的起始和终止。
<head></head>标识HTML文档的头部区域。
<body></body>标识HTML文档的主体区域。
<!DOCTYPE>必须是HTML文档的第一行,在<html>标签之前//它不是HTML标签,它是指示web浏览器关于页面使用了哪个版本的HTML进行编写的指令。
<br>定义简单的折行。
<hr>定义水平线。
<!--。。。-->注释。
2.文本格式标签(标识文本区块,并附带一定的显示格式)
<title></title> 标识网页标题
<hi></hi>(i=1...6) 标识文本标题
<p></p> 标识段落
<pre></pre> 标识预定义文本
<blockquote></blockquote> 标识引用文本
3.字符格式标签(标识部分文本字符语义,很多字符格式标签可以呈现出一定的显示效果)
<b> 定义粗体字
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<blink> 标识闪烁文字
<html> <body> <b>这是粗体<br></b> <em>这是着重字<br></em> <ins>插入字<br></ins> <del>删除<br></del> <blink>blingbling</blink> </html> </body>
4.列表标签(有序列表、无序列表、定义列表)
<ul></ul>标识无序列表。<ul type="disc"/circle/square/>
<ol></ol>标识有序列表。<ol type="A"/"a"/"I"/“i”>
<li></li>标识列表项目。
定义定义列表(定义列表不仅仅是一列项目,而是项目及其注释):
<dl></dl>标识定义列表
<dt></dt>标识词条
<dd></dd>标识解释
<html> <body> <!--无序列表--> <ul> <h1>学习项目</h1> <li>CSS</li> <li>JS</li> <li>HTML</li> </ul> <!--有序列表与定义列表嵌套的列表--> <ol> <dl> <h2>电子产品</h2> <li> <dt>计算器</dt> <dd>可用来计算加减乘数法</dd> </li> <li> <dt>电脑</dt> <dd>上网、看视频、打游戏</dd> </li> <li> <dt>耳机</dt> <dd>听音乐</dd> </li> </dl> </ol> </body> </html>
5.链接标签
<a></a>标识超链接
HTML链接-target属性
HTML链接-name属性(定义锚点的名称(特殊的超链接,可直接定义到网页中的某个具体的位置。name属性创建HTML页面中的书签,书签不会以任何特殊方式显示,它对读者不可见,当使用命名锚时,我们可以创建直接跳至该命名锚的链接,这样读者就不用滚动页面寻找信息了)
属性name的使用:
<html> <body> <a href="#tips">跳转到13</a> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p><a name="tips">13</a></p> <p>14</p> </html> </body>
属性target的使用
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <a href="http://www.baidu.com" target="_top">百度一下,你就知道</a> </body> </html>
6.多媒体标签
<img src=”路径” width=”” height=””/>嵌入图片。
<embed></embed>嵌入多媒体。
<object></object>嵌入多媒体。
7.表格标签
<table></table>定义表格结构。
<caption></caption>定义表格标题。
<th></th>定义表头。
<tr></tr>定义表格行。
<td></td>定义表格单元格。(使用 " " 处理没有内容的单元格。<td> </td)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <table border=1> <tr> <td> 100</td> <td>200 </td> <td>300 </td> </tr> </table> </body> </html>
8.表单标签
<form></form> 定义表单结构
<input></input>定义文本域、按钮和复选。
<textarea></textarea>定义多行文本框
<select></select>定义下拉列表
<option></option>定义下拉列表中的选择项目
9.HTML "计算机输出" 标签
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本(可识别空格与换行)
10.HTML 引文, 引用, 及标签定义
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。
- HTML属性
1.基本属性
这三个基本属性大部分元素都拥有:
Class 定义类规则或央视规则
Id 定义元素的唯一标识
Style 定义元素的样式声明
这些元素不拥有基本属性:html、head、title(网页标题)、base(网页基准信息)、meta(网页元信息)、param(元素参数信息)、script、style(网页的脚本和样式)
2.语言属性
Lang 定义元素的语言代码或编码
Dir 定义文本的方向,(ltr、rtl)
这些元素不拥有语言属性:frameset、frame、iframe(网页框架结构)、br(换行标识)、hr(结构装饰线)、base(网页基准信息)、param(元素参数信息)、script(网页的脚本)
3.键盘属性
Accesskey 定义访问某元素的键盘快捷键
Tabindex 定义元素的tab键索引编号
4.内容属性
Alt 定义元素的替换文本
Title 定义元素的提示文本
Longdesc 定义元素包含内容的大段描述信息
Cite 定义元素包含内容的引用信息
Datetime 定义元素包含内容的日期和时间
当图像无法显示时,必须准备替换的文本来显示无法显示的图像,这对于图像和图像热点是必须的,因此alt属性只能用在img、area、input元素中。对于input元素,alt属性用来替换提交按钮的图片。
Tilte属性不能用于以下元素:
html、head、title(网页标题)、base、basefont(网页基准信息)、meta(网页元信息)、param(元素参数信息)、script、style(网页的脚本和样式)