1 概念
- HTML是HyperText Markup Language的简称,中文名称:超文本标记语言,它是一种用于创建网页的标准标记语言。
- 标记语言是由标签构成的语言。<标签名称>例如html,xml;标记语言不是编程语言。
- HTML 运行在浏览器上,由浏览器来解析。
- HTML 是构建网页的基础,它定义了文档的结构和语义。开发者可以使用 HTML 标记语言来创建各种元素,包括标题、段落、链接、图像等,以及布局和样式处理,使网页看起来更加丰富和交互。
- 标签(Tags):HTML 中的基本单位,用于定义不同类型的元素。标签由尖括号包围,通常成对出现,包括一个开始标签和一个结束标签。例如,<p> 是一个段落标签,</p> 是它的结束标签。
- 元素(Elements):由标签及其内容组成的整体称为元素。元素可以包含文本、嵌套的元素,或者没有内容的空元素。例如,<p>Hello, World!</p> 是一个段落元素。
- 属性(Attributes):标签可以具有属性,属性提供了关于元素更多的信息。属性以键值对的形式存在,位于开始标签中。例如,<a href=“https://www.example.com”>Link</a> 中的 href 是链接的属性。
- 文档结构:HTML 文档由 <!DOCTYPE>, <html>, <head>, 和 <body> 等元素组成。<!DOCTYPE> 声明文档类型,<html> 是根元素,<head> 包含文档的元信息,<body> 包含实际的可见内容。
- 块级元素(Block-level Elements):表示一块内容,通常独占一行,可以包含内联元素和其他块级元素。例如,<p>、<div> 是块级元素。
- 内联元素(Inline Elements):表示文本中的一部分,不会独占一行,通常被包含在块级元素中。例如,<span>、<a> 是内联元素。
- 注释(Comments):在 HTML 中使用 <!-- --> 来添加注释,注释内容不会在浏览器中显示,仅用于开发者之间的解释和说明。
2 快速入门
2.1 html文档的后缀名
.html和.htm两种都可以,没有区别。
2.2 标签的分类
- 结构标签(Structural Tags):这些标签用于定义文档的整体结构,包括网页的头部和主体部分。常见的结构标签有 <html>、<head>、<body>、<header>、<footer>、<nav>、<main> 等。
- 标题标签(Heading Tags):用于定义标题级别和层次结构。标题标签根据重要性从 <h1> 到 <h6> 进行递减。例如,<h1> 是最高级别的标题,<h2> 是稍微次要的标题,依此类推。
- 段落标签(Paragraph Tags):用于定义段落或文本块。最常用的段落标签是 <p>,它用于将一段文本包含在一个段落中。
- 超链接标签(Link Tags):用于创建文本或图像的超链接。 <a> 标签是最常见的超链接标签,通过 href 属性指定链接的目标 URL。
- 列表标签(List Tags):用于创建有序或无序列表。<ul> 和 <li> 标签用于创建无序列表,<ol> 和 <li> 标签用于创建有序列表。
- 表格标签(Table Tags):用于创建表格。标签包括 <table>(整个表格)、<thead>(表头)、<tbody>(表体)、<tr>(表格行)、<th>(表头单元格)、<td>(表格数据单元格) 等。
- 表单标签(Form Tags):用于创建表单以进行用户输入和数据提交。常见的表单标签有 <form>(表单),<input>(输入框)、<select>(下拉列表)、<textarea>(文本区域)、<button>(按钮) 等。
- 多媒体标签(Media Tags):用于插入多媒体内容,如图像、音频和视频。常见的多媒体标签有 <img>(图像)、<audio>(音频)、<video>(视频) 等。
- 样式标签(Style Tags):用于定义内部样式或引用外部样式表。常见的样式标签有 <style>(内部样式表)和 <link>(外部样式表)。
- 其他标签:还有许多其他类型的标签,如 <div>(通用容器)、<span>(行内容器)、<label>(标签)、<script>(脚本) 等,它们用于更详细地控制和定义网页的不同部分和功能。
2.3 标签的使用
标签可以嵌套,但是嵌套的语法要正确
正确案例:<p><a></a></p>
错误案例:<p><a></p></a>
标签的内部是可以定义属性的,属性由键值对组成,值需要用双引号引起来,多个属性用空格隔开
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
<p id="p1" name="p1">
</p>
html标签不区分大小写,但是推荐全小写
3 HTML文档的基本结构
HTML文档也叫web页面
3.1 基本结构
- <!DOCTYPE> 声明:该声明位于文档的最开始,用于告诉浏览器使用哪个 HTML 版本来解析文档。示例:<!DOCTYPE html>
- <html> 标签:<html> 标签是整个 HTML 文档的根元素,包含了整个文档的内容。它包括 <head> 和 <body> 两个子元素。
- <head> 标签:<head> 标签用于定义文档的元信息和头部信息,不会在页面中显示。比如,可以在 <head> 中设置文档的标题、引入外部样式表和脚本文件等。
- <body> 标签:<body> 标签包含了实际要显示在浏览器中的内容,如文本、图像、链接等。大部分的可见内容都应该放在 <body> 中。
示例:
<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ,围堵标签-->
<html>
<!--
head,头元素:
作用:
1、用于指定HTML文章中的一些元数据,例如元数据 meta:定义页面的编码格式
title:定义页面的标题
2、引入外部的资源文件--未来讲解
-->
<head>
<meta charset="utf-8" />
<title>这是我的第一个HTML页面</title>
</head>
<!--body,主体:浏览器显示的内容都将在这里编写格式化代码的快捷键:ctrl+shift+f(英文状态下使用)-->
<body>
hello html 这是我的第一个HTML页面
</body>
</html>
3.2 HTML的注释
3.2.1语法
HTML注释以<!-- 开头 ,以-->结尾。
3.2.2示例
<!--
这里编写HTML注释,
可以是一行,也可以是多行
-->
3.2.3作用
- 说明代码:注释可以帮助开发者理解代码的含义、作用和逻辑。
- 调试代码:可以使用注释来暂时禁用或排除某些代码,以便进行调试。
- 临时修改:通过注释掉部分代码,你可以暂时隐藏或取消某些元素或功能,用于临时修改或测试页面。
4 HTML中常用标签
4.1 文本标签
标签 | 介绍 |
---|---|
<h1> 到 <h6> | 用于定义标题,其中 <h1> 是最高级别的标题,而 <h6> 是最低级别的标题。 |
<p> | 用于定义段落,将文本包围在 <p> 和 </p> 标签之间。 |
<br> | 用于插入换行符,它是一个单标签,不需要闭合。 |
<strong> | 用于强调文本,通常以粗体显示。 |
<em> | 用于强调文本,通常以斜体显示。 |
<u> | 用于在文本下方添加下划线。 |
<s> | 用于在文本中添加删除线。 |
<mark> | 用于突出显示文本,通常以黄色或其他背景色高亮显示。 |
<sub> | 用于显示下标文本。 |
<sup> | 用于显示上标文本。 |
<blockquote> | 用于引用长篇文本,通常在屏幕上缩进并显示为引用块。 |
<cite> | 用于标记引用的作品名称或标题等。 |
4.2 图片标签
4.2.1 基本属性
<img src="image.jpg" alt="描述文本" width="300" height="200">
<!--
src:指定图片文件的路径或 URL。可以是相对路径(相对于 HTML 文件所在位置)或绝对路径。
alt:提供一个替代文本,在图片无法显示时将显示这段文本。这对于可访问性很重要,也有助于搜索引擎理解图片内容。
width:设置图片的宽度(单位为像素)。可以指定具体的数值或使用百分比,如 width="50%"。
height:设置图片的高度(单位为像素)。同样可以指定具体的数值或使用百分比。
-->
4.2.2 设置图片的热点区域
<img src="image.jpg" alt="描述文本" usemap="#hotspots">
<map name="hotspots">
<area shape="rect" coords="0,0,100,100" href="page1.html" alt="热点区域1">
<area shape="circle" coords="150,150,50" href="page2.html" alt="热点区域2">
</map>
<!--
shape 属性指定了热点区域的形状,可以是 "rect"(矩形)、"circle"(圆形)、"poly"(多边形)等。
coords 属性指定了热点区域相对于图片左上角的坐标和尺寸。对于不同形状的热点区域,该值的含义有所不同,如矩形的坐标值为 x1,y1,x2,y2,圆形的坐标值为 x,y,radius,多边形的坐标值为 x1,y1,x2,y2,x3,y3,...。
href 属性指定了当用户点击热点区域时要跳转的链接地址。
alt 属性提供了热点区域的描述文本,在图像无法显示时将显示这段文本。
-->
4.3 列表标签
4.3.1 无序列表
无序列表使用 <ul> 标签,并同样使用 <li> 标签表示列表项。
<ul>
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ul>
4.3.2 有序列表
有序列表使用 <ol> 标签,并使用 <li> 标签来表示列表项。
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
4.3.3 列表的嵌套
在列表中使用的 <li> 标签是列表项的容器,每个 <li> 元素代表一个单独的列表项。
可以嵌套使用列表标签,创建嵌套的有序列表或无序列表。例如,可以在一个 <li> 元素中放置另一个 <ol> 或 <ul> 元素,形成嵌套列表的结构。
<ol>
<li>列表项 1</li>
<li>
列表项 2
<ul>
<li>子项 A</li>
<li>子项 B</li>
</ul>
</li>
<li>列表项 3</li>
</ol>
4.4 定义描述标签
- <dl> 元素用于创建一个描述列表(Description List),其中包含一系列术语和对应的描述。
- <dt> 元素用于定义术语(Term),通常是粗体显示。
- <dd> 元素用于给前面定义的术语提供描述(Description),通常是正常显示。
<dl>
<dt>HTML</dt>
<dd>HTML 是超文本标记语言,用于创建网页结构。</dd>
<dt>CSS</dt>
<dd>CSS 是层叠样式表,用于控制网页的外观和样式。</dd>
<dt>JavaScript</dt>
<dd>JavaScript 是一种基于对象和事件驱动的脚本语言,用于实现网页交互和动态效果。</dd>
</dl>
术语使用 <dt> 标签定义,描述使用 <dd> 标签定义。在浏览器中呈现时,术语通常以粗体显示,而描述以正常文本显示。
4.5 表格标签
4.5.1 标准表格
常用元素
- <table>:定义表格。
- <tr>:定义表格中的行。
- <th>:定义表头单元格,通常在表的第一行使用。
- <td>:定义数据单元格,表示表格中的普通数据。
常用属性
- border:设置表格边框的大小。可以设置为一个整数值来指定边框的像素宽度,或者设置为0来隐藏边框。例如:<table border=“1”>。
- width:设置表格的宽度。可以使用百分比(如 “100%”)或固定像素值(如 “500px”)。例如:<table width=“100%”>。
- cellspacing:设置单元格之间的间距。可以设置为一个整数值来指定间距的像素大小。例如:<table cellspacing=“10”>。
- cellpadding:设置单元格内容与单元格边框之间的间距。可以设置为一个整数值来指定间距的像素大小。例如:<table cellpadding=“5”>。
- align:设置表格在水平方向上的对齐方式。可以设置为 “left”(左对齐)、“center”(居中对齐)或 “right”(右对齐)。例如:- <table align=“center”>。
- valign:设置表格在垂直方向上的对齐方式。可以设置为 “top”(顶部对齐)、“middle”(居中对齐)或 “bottom”(底部对齐)。例如:<table valign=“middle”>。
- colspan:设置单元格横跨的列数。可以设置为一个整数值来指定横跨的列数。例如:<td colspan=“2”>。
- rowspan:设置单元格纵跨的行数。可以设置为一个整数值来指定纵跨的行数。例如:<td rowspan=“2”>。
<table border="1" cellspacing="0" cellpadding="5" width="90%" height="200px">
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
</tr>
<tr>
<td>数据2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">表尾内容</td>
</tr>
</tfoot>
</table>
4.5.2 不规则表格–跨行和跨列
使用 rowspan 和 colspan 属性来实现跨行和跨列
- colspan:设置单元格横跨的列数。可以设置为一个整数值来指定横跨的列数。例如:<td colspan=“2”>。
- rowspan:设置单元格纵跨的行数。可以设置为一个整数值来指定纵跨的行数。例如:<td rowspan=“2”>。
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td rowspan="2">单元格 1</td>
<td>单元格 2</td>
<td colspan="2">单元格 3-4</td>
</tr>
<tr>
<td rowspan="2" colspan="2">单元格 5-6</td>
</tr>
<tr>
<td colspan="2">单元格 7-8</td>
<td>单元格 9</td>
</tr>
</table>
4.5.3 表格的高级标签
<caption> 标签:用于为表格提供一个标题,位于 <table> 标签之前。它能够描述表格的内容概要或关键信息。
<table>
<caption>销售统计数据</caption>
<!-- 表格内容 -->
</table>
<thead>, <tbody>, <tfoot> 标签:用于将表格的内容划分为头部、主体和尾部三个逻辑分区。这些标签可以帮助屏幕阅读器和搜索引擎理解表格的结构,提高可访问性。
<table>
<caption>销售统计数据</caption>
<thead>
<tr>
<th>日期</th>
<th>产品</th>
</tr>
</thead>
<tbody>
<tr>
<td>2023-09-01</td>
<td>商品 A</td>
</tr>
<!-- 其他数据行 -->
</tbody>
<tfoot>
<tr>
<td colspan="2">总计</td>
</tr>
</tfoot>
</table>
<colgroup> 和 <col> 标签:用于定义表格的列组和列属性。<colgroup> 可以将一组相邻的列进行分组,而 <col> 则用于定义每一列的样式和属性。
<table>
<caption>销售统计数据</caption>
<colgroup>
<col style="background-color: yellow;">
<col span="2" style="text-align: center;">
</colgroup>
<thead>
<tr>
<th>日期</th>
<th>产品 A</th>
<th>产品 B</th>
</tr>
</thead>
<tbody>
<!-- 表格数据 -->
</tbody>
</table>
4.6 lable标签
<label> 标签用于在 HTML 表单中创建一个标注(label)元素,用于关联表单控件(如输入字段、复选框、单选按钮等)和其相应的说明文本。
<label> 标签通常与表单控件配对使用,并通过一定的布局方式将标注文本显示在控件旁边或上方,以提供更好的可读性和用户体验。同时,当用户点击标注文本时,关联的表单控件会获得焦点,增加了交互的便利性。
<label for="username">Username:</label>
<input type="text" id="username" name="username">
4.7 布局标签
标签 | 介绍 |
---|---|
<div> | <div> 元素可以看作是一个容器,它不带有任何特殊含义或语义,仅用于分组或布局其他 HTML 元素。通过设置样式,可以对 <div> 元素进行定位、大小、背景等方面的控制,从而实现网页的布局效果。 |
<span> | 与 <div> 元素相似,<span> 元素也是一个通用性容器元素,不带有特殊含义和语义。通常用于对文本或其他内联元素进行分组或样式设置,例如通过设置 <span> 的样式来改变文本颜色、字体等。 |
<header>、<footer>、<nav>、<aside> 和 <article> | HTML5 中新增的语义化标签,主要用于定义页面布局和结构。其中 <header> 元素用于定义页面或区域的页眉部分,<footer> 元素用于定义页面或区域的页脚部分;<nav> 元素用于定义导航部分,通常包含一组链接;<aside> 元素定义一个侧边栏,通常用于展示一些相关联内容;<article> 元素定义了一个独立的文章或内容块。 |
<section> | <section> 标签用于定义一个区块或部分,通常包含一个主题或相关联的内容,可以视为一个独立的组件。在语义化方面,<section> 元素比 <div> 更具有意义,表达了更明确的文档结构。 |
<table> | <table> 元素用于定义表格,通常包含若干行和列,用于展示数据和信息。使用 <table> 元素时,通常需要配合使用 <tr>、<th>、<td> 等子元素来定义表格的行、表头和单元格。 |
4.8 块状元素和行内元素
HTML 标签可以分为块状元素(block-level elements)和行级元素(inline elements)两类。
区分的简单方法:是否独占一行。
4.8.1 块状元素
- 块状元素通常以新行开始,占据一整行的宽度,独自在页面上形成一个块。
- 块状元素可以设置宽度、高度、外边距和内边距等样式属性。
- 常见的块状元素包括 <div>、<p>、<h1> 到 <h6>、<ul>、<ol>、<li>、<table>、<form> 等。
4.8.2 行内元素
- 行级元素不会独占一行,它们在行内显示,仅占据自身内容所需的空间。
- 行级元素不能直接设置宽度、高度、上下外边距等样式属性。但可以设置左右外边距和内边距。
- 常见的行级元素包括 <span>、<a>、<strong>、<em>、<img>、<input>、<button>、<label> 等。
4.9 音乐与视频
4.9.1 音乐
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
Format | MIME-type |
---|---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
4.9.2 视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
Format | MIME-type |
---|---|
MP4 | video/mp4 |
Ogg | audio/ogg |
WebM | video/webm |
5 超链接
5.1 作用
- 导航到其他页面:通过设置 href 属性,可以将用户跳转到指定的 URL。这可以是同一网站内的其他页面,也可以是外部网站。用户点击链接后,会加载并显示目标页面。
- 导航到同一页面的不同部分:通过设置 href 属性为页面内的锚点,可以在同一页面内进行导航。用户点击链接后,页面将滚动到指定的锚点所在位置,使用户直接跳转到该部分。
- 下载文件或打开外部资源:通过设置 href 属性为文件的 URL,可以让用户下载文件或在新标签页中打开外部资源,如文档、图片、视频等。用户点击链接后,会执行相应的操作。
- 发送电子邮件:通过设置 href 属性为 mailto: 加上邮件地址,可以创建一个邮箱链接,让用户点击链接后自动打开默认的邮件客户端,并填充收件人地址。
5.2 属性
- href:表示链接跳转的目标 URL,可以是绝对路径、相对路径或者一个特殊的标识符(如 #top)。
- target:表示链接的打开方式,可以是 _self(在当前窗口中打开,默认值)、_blank(在新窗口中打开)、_parent(在父级框架中打开)、_top(在顶级框架中打开)等取值。
- download:表示链接是否要下载目标资源,如果指定了该属性,浏览器会直接下载目标资源,而不是打开页面。
- rel:表示链接与当前页面之间的关系,通常用于 SEO 和安全相关目的,常见取值包括 nofollow、-noopener、noreferrer 等。
- title:表示链接的标题,当鼠标悬停在链接上时会显示该文本。
- id:表示链接的唯一标识符,通常在 JavaScript 中使用。
- class:表示链接的 CSS 类名,用于为链接设置样式。
5.3 页面间的跳转
使用 <a> 标签创建超链接。通过设置 href 属性为目标页面的 URL,用户点击链接后将跳转到目标页面。
<a href="target-page.html">跳转到目标页面</a>
5.4 锚链接
在同一页面内创建内部链接,让用户直接跳转到页面的特定部分。首先,需要为目标位置添加一个带有 id 属性的元素,然后在链接中使用 # 符号和该 id 值来指示目标位置。
在目标部分添加一个具有唯一标识符(ID)的元素。可以是标题、段落、div 或任何其他需要进行导航的部分。
<h2 id="section1">第一节内容</h2>
使用 <a> 标签创建锚链接。在 href 属性中,使用 # 后面接上目标部分的 ID。
<a href="#section1">跳转到第一节</a>
锚链接只能在同一页面内起作用,因为它们是用于在当前页面中进行导航。同时,确保 ID 是唯一的,以便浏览器可以正确地找到目标部分。 除了使用
ID 进行导航外,还可以将链接的 href 设置为 #,这将导致页面返回顶部。这在创建“回到顶部”按钮等功能时很有用。
6 表单
6.1 表单介绍
表单(Form)是网页中用于收集用户输入数据的一种交互元素。它通常由一系列表单控件和提交按钮组成。
基本属性:
- id:元素的唯一表示,不重复
- name:表单项元素的名称,很重要–提交数据到服务器之后,服务器获取数据通过该名称
- value:表单项元素的值,服务器获取数据通过name获取到的就是value
- type:表示表单项元素的呈现形式
- class:表示样式名称
- readonly:表示只读,用户只能看不能改
- disabled:表示禁用,该元素不能改而且背景是灰色
- target:规定在何处打开提交后返回的响应。可以是 _blank 在新窗口中打开,或者 _self 在当前窗口中打开(默认值)。
- autocomplete:指示浏览器是否应启用表单字段的自动完成功能。可以设置为 on 或 off。
- enctype:指定在将数据提交到服务器时浏览器使用的编码类型。常见的值有 application/x-www-form-urlencoded(默认值)和 multipart/form-data(用于文件上传)。
- placeholder :是一个用于为文本框提供提示信息的属性。它在文本框中显示一段灰色的占位文本,并在用户开始输入时自动消失。
- required :是一个在 HTML 表单中常用的属性,用于指定输入字段是否为必填项。
使用 标签创建一个表单,并通过 action 属性指定数据提交的目标 URL。
<form action="/submit" method="post">
<!-- 表单内容 -->
</form>
6.2 文本框
文本框 (<input type=“text”>) 用于单行文本输入。
<!-- 示例:用户名输入框 -->
<input type="text" name="username" placeholder="请输入用户名">
6.3 密码框
密码框(<input type=“password”>)创建一个密码输入框,输入的字符会被隐藏。
<!-- 示例:密码输入框 -->
<input type="password" id="password" name="password" required>
6.4 复选框
复选框 (<input type=“checkbox”>) 用于多选项选择。
<!-- 示例:多选框 -->
<input type="checkbox" name="hobbies" value="football">
<label for="hobbies">足球</label>
<input type="checkbox" name="hobbies" value="basketball">
<label for="hobbies">篮球</label>
6.5 单选按钮
单选按钮 (<input type=“radio”>) 用于单选项选择。
<!-- 示例:单选按钮 -->
<input type="radio" name="gender" value="male">
<label for="gender">男性</label>
<input type="radio" name="gender" value="female">
<label for="gender">女性</label>
6.6 下拉列表
下拉列表 (<select>) 和选项 (<option>) 用于从预定义选项中选择一项。
<!-- 示例:下拉列表 -->
<select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select>
6.7 多行文本框
多行文本框 (<textarea>) 用于多行文本输入。
<!-- 示例:多行文本框 -->
<textarea name="message" rows="4" cols="40"></textarea>
6.8 日期与时间框
(<input type=“date”>)创建一个用于输入日期的文本框,浏览器会对其格式进行验证。
<!-- 示例:日期框 -->
<input type="date" id="birthday" name="birthday">
(<input type=“time”>)创建一个用于输入时间的文本框,浏览器会对其格式进行验证。
<!-- 示例:时间框 -->
<input type="date" id="birthday" name="birthday">
6.9 电话与邮件框
(<input type=“tel”>)创建一个用于输入电话号码的文本框,浏览器会对其格式进行验证,确保输入的是有效的电话号码。
<!-- 示例:电话框 -->
<input type="tel" id="phone" name="phone">
(<input type=“email”>)创建一个用于输入电子邮件地址的文本框,浏览器会对其格式进行验证,确保输入的是有效的电子邮件地址。
<!-- 示例:邮件框 -->
<input type="email" id="email" name="email">
6.10 文件域
(<input type=“file”>)一个用于选择上传文件的输入字段。它允许用户从本地计算机选择一个或多个文件,并将它们上传到服务器。
<!-- 示例:文件域 -->
<input type="file" id="file" name="file">
6.11 隐藏域
(<input type=“hidden”>)在 HTML 表单中用于存储数据但对用户不可见的输入字段。隐藏域通常用于在表单提交时将额外的数据传递到服务器端,而无需用户手动输入或选择。
<!-- 示例:隐藏域 -->
<input type="hidden" name="secret_data" value="123456789">
6.12 按钮
6.12.1 提交按钮
(<input type=“submit”>) 提交按钮供用户提交表单数据。
<!-- 示例:提交按钮 -->
<input type="submit" value="提交">
6.12.2 图片按钮
(<input type=“image”>) 提交图片按钮供用户提交表单数据。
<!-- 示例:图片按钮 -->
<input type="image" src="button-image.png" alt="Submit">
6.12.3 重置按钮
(<input type=“reset”>) 用于重置表单字段的交互元素。当用户点击重置按钮时,表单中的所有字段都会恢复到它们的默认值。
<!-- 示例:重置按钮 -->
<input type="reset" value="Reset">
6.12.4 普通按钮
普通按钮是一个在 HTML 页面中用于用户交互的基本按钮元素。普通按钮通常用于执行自定义的 JavaScript 函数或触发其他操作,而不会涉及表单的提交或重置。
<!-- 示例:普通按钮 -->
<button onclick="myFunction()">Click Me</button>
可以在 onclick 属性中指定任何自定义的 JavaScript 代码,以实现按钮被点击时的相应功能。例如,可以调用函数、切换页面元素的可见性、修改数据等等。
7 框架
7.1 框架概念
“HTML框架”(HTML framework)是指一种基于HTML和CSS的前端框架,它提供了一套预定义的布局、样式和组件,用于快速构建响应式的Web页面。
HTML框架通常包含了一系列的CSS样式表和JavaScript库,以及可复用的HTML组件,如导航栏、按钮、表单元素、卡片、网格系统等。通过使用这些组件和样式,开发人员可以更快速地构建Web页面,而无需从头编写所有的代码。
HTML框架的设计目标之一是提供一致的外观和用户体验,使不同的Web页面具有相似的样式和交互方式。这有助于确保整个网站的一致性,减少开发人员需要编写重复样式的工作,并提高用户对网站的熟悉度。
一些流行的HTML框架:
- Bootstrap: Bootstrap是一个广泛使用的HTML、CSS和JavaScript框架,提供了丰富的组件和样式,以及响应式的网格系统。
- Foundation: Foundation是另一个流行的HTML和CSS框架,也提供了许多可定制的组件和样式。
- Bulma: Bulma是一个轻量级的CSS框架,提供了易于使用和自定义的组件,适合构建简洁的Web页面。
- Semantic UI: Semantic UI是一个语义化的HTML框架,注重易读易理解的代码和命名规范。
使用HTML框架的优点:
- 快速开发:通过使用预定义的组件和样式,可以更快速地构建Web页面,减少从头编写代码的工作量。
- 响应式设计:HTML框架提供了响应式的网格系统和组件,以确保页面在不同设备上具有良好的显示效果。
- 一致性和可维护性:框架提供了一致的样式和组件,使得多个页面之间的风格保持一致,同时也方便后续的维护和更新。
7.2 框架语法
- 网格系统(Grid System):HTML框架通常提供了网格系统,用于将页面划分为行和列,并控制不同元素的布局位置。网格系统通常使用CSS样式,例如Bootstrap中使用的.container、.row和.col-*类。
- 组件(Components):HTML框架提供了常见的UI组件,例如导航栏、按钮、卡片、表单元素等,这些组件通常是预定义的HTML元素和CSS样式的组合。例如,Bootstrap中使用的导航栏组件可以通过<nav>和<ul>元素以及各种类来定义。
- 响应式设计(Responsive Design):HTML框架通常支持响应式设计,使得页面在不同设备上呈现出适当的布局和样式。响应式设计通常使用媒体查询(Media Query)和CSS规则,以根据屏幕大小和方向定义不同的样式。
- 模态框(Modal):一些HTML框架提供了模态框组件,用于在不离开当前页面的情况下显示弹出窗口。模态框通常使用JavaScript代码来实现交互效果和动态内容的加载。
- 轮播图(Carousel):HTML框架中常见的轮播图组件,用于在一组图片或内容之间进行循环切换。轮播图可以通过HTML、CSS和JavaScript来定义,并且通常支持响应式设计和自动播放等功能。
- 插件(Plugins):HTML框架通常提供了一些可选的插件和库,用于增强页面的交互和功能。例如,Bootstrap提供了用于表单验证、弹出提示框、日期选择器等插件。
7.3 框架的使用
- 下载和引入框架:首先,你需要从框架的官方网站下载所需的文件,通常包括CSS和JavaScript文件。将这些文件引入你的HTML文件中,以便使用框架提供的功能和样式。
- 设置基本结构:根据框架的要求,在HTML文件中设置框架的基本结构。这可能涉及创建容器元素(如.container)和行元素-(如.row),以及在这些容器中放置内容。
- 使用组件:框架会提供一些预定义的UI组件,如导航栏、按钮和卡片等。你可以通过在HTML文件中使用相应的类来使用这些组件。例如,若要创建一个导航栏,你可以使用框架提供的导航栏类。
- 自定义样式:虽然框架提供了一些默认的样式和组件,但你也可以根据自己的需求进行自定义。通过在HTML文件中添加额外的CSS样式或修改框架提供的类,可以修改组件的外观和布局。
- 响应式设计:如果你的项目需要支持不同设备上的响应式布局,框架通常提供了相应的类或工具,用于设置不同屏幕尺寸下的布局和样式。使用这些类和工具可以使你的页面适应不同的屏幕大小和方向。
- 添加交互功能:如果需要为网页添加交互功能,框架可能提供了相关的JavaScript插件或库。你可以按照框架文档中的说明,引入这些插件并使用它们来实现所需的交互效果。
- 测试和调试:在完成页面设计和开发后,进行测试和调试是很重要的。确保所有组件、样式和功能都按预期工作,并根据需要进行必要的更改和修复。