HTML基础

山月见光

已于 2023-09-14 19:16:44 修改

阅读量635

点赞数 1

文章标签： html 前端

于 2023-09-04 20:56:45 首次发布

本文链接：https://blog.csdn.net/qq_58216564/article/details/132638781

版权

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插件或库。你可以按照框架文档中的说明，引入这些插件并使用它们来实现所需的交互效果。
测试和调试：在完成页面设计和开发后，进行测试和调试是很重要的。确保所有组件、样式和功能都按预期工作，并根据需要进行必要的更改和修复。

山月见光

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

标签名称属性名1 = " 属性值 " 属性名2 = " 属性值 " > < p id = " p1 " name = " p1 " > < 标签名称属性名1 = " 属性值 " 属性名2 = " 属性值 " > < p id = " p1 " name = " p1 " >
复制链接

扫一扫