Web应用课 表单、列表、表格、语义标签,特殊符号标签小结
表单标签
<form>标签
<form>
是HTML中的一个标签,用于创建网页上的表单。表单用于收集用户输入的数据,例如文本字段、复选框、单选按钮等。
<label>标签
<label>
标签是HTML中用于创建表单元素的标签文本标签。它用于为表单元素提供标签文本,并与相应的表单元素建立关联。
以下是一个示例,展示了如何使用 <label>
标签:
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
在上面的示例中,<label>
标签用于为文本输入字段(<input type="text">
)提供标签文本。for
属性指定了与该标签关联的表单元素的 id
值,以便建立关联。
当用户单击标签文本时,关联的表单元素会获得焦点(即光标会自动定位到该表单元素),从而提升表单的可用性和易用性。
此外,<label>
标签还可以通过嵌套表单元素来关联,而不使用 for
属性。例如:
<label>
<input type="checkbox" name="agree">
我同意相关条款和条件
</label>
在上述示例中,复选框(<input type="checkbox">
)与包含文本的 <label>
标签嵌套在一起。这样,单击文本时会切换复选框的选中状态。
使用 <label>
标签有助于提升表单的可访问性,并改善用户体验。它还使得通过点击文本来激活关联的表单元素更容易。
<input>标签
<input>
是HTML中的一个标签,用于创建各种类型的输入字段。它是在表单中最常用的元素之一。
<input>
标签有多个属性,用于指定输入字段的类型、名称、默认值、是否必填等等。以下是一些常见的 <input>
类型和示例用法:
- 文本输入字段 (
type="text"
):
<input type="text" id="name" name="name" placeholder="请输入姓名" required>
上面的示例创建了一个文本输入字段,用户可以在该字段中输入文本。id
属性用于标识字段,name
属性用于在提交表单时标识字段的名称,placeholder
属性用于在输入字段为空时显示提示文本,required
属性指定该字段为必填项。
- 密码输入字段 (
type="password"
):
<input type="password" id="password" name="password" required>
上面的示例创建了一个密码输入字段,输入的内容会以掩码形式显示(通常是圆点或星号)。该字段也被设置为必填项。
- 单选按钮 (
type="radio"
):
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>
上面的示例创建了两个单选按钮,用户可以从中选择一个选项。name
属性用于指定这些单选按钮属于同一个组,value
属性指定每个选项的值,checked
属性指定默认选中的选项。
- 复选框 (
type="checkbox"
):
<input type="checkbox" id="newsletter" name="newsletter" checked>
<label for="newsletter">订阅电子报</label>
上面的示例创建了一个复选框,用户可以选择或取消选择该选项。name
属性用于在提交表单时标识该复选框的名称,checked
属性指定默认选中该选项。
<textarea>标签
HTML <textarea>
元素表示一个多行纯文本编辑控件,当你希望用户输入一段相当长的、不限格式的文本,例如评论或反馈表单中的一段意见时,这很有用。
<select>与<option>标签
<select>
元素是HTML中表示提供选项菜单的控件的标签。它通常与 <option>
元素一起使用,用于创建下拉列表或下拉框。
以下是一个示例,展示了如何使用 <select>
和 <option>
创建一个简单的下拉列表:
<select id="country" name="country">
<option value="usa">美国</option>
<option value="canada">加拿大</option>
<option value="uk">英国</option>
<option value="australia">澳大利亚</option>
</select>
在上面的示例中,<select>
元素表示一个下拉列表,name
属性用于在提交表单时标识该字段的名称,id
属性用于标识该字段。
<option>
元素用于定义下拉列表中的选项。value
属性定义了选项的值,该值在提交表单时被发送到服务器。选项的文本内容位于 <option>
和 </option>
标签之间。
用户可以通过点击下拉列表展开并选择其中的一个选项。选中的选项将显示在下拉列表上方的文本区域中。
除了基本的下拉列表外,<select>
和 <option>
元素还支持多选菜单、禁用选项、默认选中项等更多功能。
<button>标签
<button>
标签是HTML中用于创建按钮的元素。它可以在网页上添加交互性,用户可以单击按钮来触发特定的操作或执行特定的功能。
以下是一个简单的示例,展示如何使用 <button>
标签创建一个按钮:
<button type="button">点击我</button>
在上面的示例中,<button>
标签创建了一个按钮,并使用 type="button"
属性指定按钮的类型为普通按钮。按钮的文本内容位于 <button>
和 </button>
标签之间。
按钮的默认类型是 “submit”,如果没有显式指定 type
属性为 “button”,则按钮会被视为提交按钮,会触发表单的提交操作。
可以通过添加其他属性和内容来进一步定制按钮的行为和样式。下面是一些常用的 <button>
元素的属性:
disabled
: 禁用按钮,使其不可点击。onclick
: 指定按钮被点击时要执行的JavaScript代码。class
或id
: 用于添加自定义的CSS类或标识按钮元素。
示例:
<button type="button" onclick="alert('Hello!')">点击我</button>
<button type="button" class="custom-button" id="my-button">自定义按钮</button>
在上述示例中,第一个按钮被点击时会弹出一个包含 “Hello!” 的警告框。第二个按钮使用了自定义的CSS类和标识。
通过使用CSS样式,你可以进一步美化和定制按钮的外观和交互效果。
<ul>&&<ol>列表标签
<ul>
和 <ol>
是HTML中的两种列表标签,用于创建无序列表和有序列表。
<ul>
标签用于创建无序列表,列表项默认以项目符号(通常是圆点)进行标记。以下是一个无序列表的示例:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
在上面的示例中,<ul>
标签用于创建一个无序列表,其中包含了三个列表项。每个列表项由 <li>
标签包裹。
<ol>
标签用于创建有序列表,列表项会按照一定的顺序进行标记。以下是一个有序列表的示例:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
在上面的示例中,<ol>
标签用于创建一个有序列表,其中包含了三个列表项。同样,每个列表项由 <li>
标签包裹。
无论是无序列表还是有序列表,都可以包含任意数量的列表项,每个列表项都使用 <li>
标签标记。
如果你想自定义列表的样式,你可以使用CSS来进行样式调整。
表格标签
<table>标签
HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。
<caption>标签
HTML <caption>
元素 (or HTML 表格标题元素) 展示一个表格的标题, 它常常作为 <table>
的第一个子元素出现,同时显示在表格内容的最前面,但是,它同样可以被 CSS 样式化,所以,它同样可以出现在相对于表格的任意位置。
<thead>标签
HTML的<thead>
元素定义了一组定义表格的列头的行。
<tbody>标签
HTML的<tbody>
元素定义一组数据行。
<tr>标签
HTML<tr>
元素定义表格中的行。 同一行可同时出现<td>
和<th>
元素。
<th>标签
HTML <th>
元素定义表格内的表头单元格。
<td>标签
HTML <td>
元素 定义了一个包含数据的表格单元格。
举个例子
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
成品图:
+--------+------+--------+
| 姓名 | 年龄 | 城市 |
+--------+------+--------+
| 张三 | 25 | 北京 |
+--------+------+--------+
| 李四 | 30 | 上海 |
+--------+------+--------+
在这个示意表格中,使用 “+”、”-” 和 “|” 字符来表示表格的边框和分隔线。第一行使用表头单元格的标题,后续的行包含了实际的数据。
语义标签
<header>标签
<header>
是HTML中的一个标签,用于定义网页或者区域的页眉部分。通常情况下,<header>
标签包含了网页的标题、导航菜单、搜索框等头部内容。
以下是一个简单的 <header>
标签的示例:
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<header>
<h1>这是网页的标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<!-- 网页的其他内容 -->
</body>
</html>
在上面的示例中,<header>
标签包含了 <h1>
标签用于显示网页的标题,以及 <nav>
标签用于创建导航菜单。你可以根据自己的需要在 <header>
中添加其他元素和内容。
请注意,<header>
标签通常出现在 <body>
元素的顶部,但可以根据需要放置在其他位置。
<nav>标签
<nav>
是HTML中的一个标签,用于定义网页或者区域的导航部分。<nav>
标签通常包含网页的导航链接、菜单或者其他导航相关的内容。
以下是一个简单的 <nav>
标签的示例:
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<header>
<h1>这是网页的标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<!-- 网页的其他内容 -->
</body>
</html>
在上面的示例中,<nav>
标签包含了一个无序列表 <ul>
,其中每个列表项是一个导航链接,使用 <li>
和 <a>
标签表示。你可以根据需要在 <nav>
中添加或修改导航链接。
请注意,<nav>
标签通常出现在 <header>
元素内,但可以根据你的网页结构和设计需要放置在其他位置。
<section>标签
<section>
是HTML中的一个标签,用于定义网页中的一个独立的区块或部分。<section>
标签通常用于将内容分组,以便更好地组织和语义化网页的结构。
以下是一个简单的 <section>
标签的示例:
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<header>
<h1>这是网页的标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<section>
<h2>欢迎访问我们的网站!</h2>
<p>这里是网站的欢迎内容。</p>
</section>
<section>
<h2>关于我们</h2>
<p>这里是关于我们的介绍。</p>
</section>
<!-- 网页的其他内容 -->
</body>
</html>
在上面的示例中,<section>
标签用于创建两个独立的区块,分别是欢迎内容和关于我们的介绍。每个 <section>
内部可以包含任意的HTML内容,例如标题 <h2>
、段落 <p>
等。
使用 <section>
标签有助于更好地划分和组织网页的内容结构,提高可读性和可维护性。根据具体的网页设计和需求,你可以根据需要添加更多的 <section>
标签和相应的内容。
<figure> 标签
<figure>
是HTML中的一个标签,用于表示独立的内容块,通常与图像、插图、图表等相关。该标签还可以结合 <figcaption>
标签用于提供关于内容块的说明性文字。
以下是一个示例,展示了如何使用 <figure>
和 <figcaption>
标签:
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<header>
<h1>这是网页的标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<section>
<h2>图片展示</h2>
<figure>
<img src="image.jpg" alt="图片描述">
<figcaption>这是一张漂亮的图片</figcaption>
</figure>
</section>
<!-- 网页的其他内容 -->
</body>
</html>
在上面的示例中,<figure>
标签用于包裹一个图像,并使用 <figcaption>
标签提供了关于图像的描述文字。
使用 <figure>
和 <figcaption>
标签有助于为图像等内容块提供语义化的结构,并将相关的说明文字与内容关联起来。
请注意,<figure>
和 <figcaption>
标签并不仅限于图像,也可以用于其他类型的独立内容块。
<figcaption>标签
<figcaption>
是HTML中的一个标签,用于为 <figure>
元素提供说明性文字。<figcaption>
标签通常出现在 <figure>
元素内部,用于描述与 <figure>
相关的内容。
以下是一个简单的示例,展示了如何使用 <figure>
和 <figcaption>
标签:
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<header>
<h1>这是网页的标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<section>
<h2>图片展示</h2>
<figure>
<img src="image.jpg" alt="图片描述">
<figcaption>这是一张漂亮的图片</figcaption>
</figure>
</section>
<!-- 网页的其他内容 -->
</body>
</html>
在上面的示例中,<figure>
标签用于包裹一个图像,并使用 <figcaption>
标签提供了关于图像的描述文字。
请注意,<figcaption>
标签必须直接位于 <figure>
标签的内部,以确保说明文字与相关的内容块关联起来。
<aside>标签
<aside>
是HTML中的一个标签,用于表示与主要内容有关但又可以独立存在的辅助内容。<aside>
标签通常用于侧边栏、引用、广告、相关链接、附注等内容。
以下是一个简单的示例,展示了如何使用 <aside>
标签:
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<header>
<h1>这是网页的标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<section>
<h2>主要内容</h2>
<p>这是网页的主要内容。</p>
<aside>
<h3>相关链接</h3>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</aside>
</section>
<!-- 网页的其他内容 -->
</body>
</html>
在上面的示例中,<aside>
标签用于包含了一组相关链接,作为主要内容的辅助信息。
请注意,<aside>
标签通常出现在包含它的父元素内部,但在视觉上可能会呈现为侧边栏或独立区域。它可以位于 <section>
、<article>
或其他适当的父元素内,根据网页的结构和设计来决定。
<footer>标签
<footer>
是HTML中的一个标签,用于表示网页或者区域的页脚部分。<footer>
标签通常包含与页面相关的信息,如版权声明、联系方式、导航链接等。
以下是一个简单的示例,展示了如何使用 <footer>
标签:
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<header>
<h1>这是网页的标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<section>
<h2>主要内容</h2>
<p>这是网页的主要内容。</p>
</section>
<footer>
<p>© 2023 版权所有</p>
<p>联系方式:example@example.com</p>
</footer>
</body>
</html>
在上面的示例中,<footer>
标签包含了版权声明和联系方式。这些信息会显示在网页的页脚部分,提供给用户使用。
请注意,<footer>
标签通常位于网页的最底部,但可以根据需要放置在其他位置。它可以包含任意的HTML内容,如段落、链接、图标等。
特殊符号标签
y总的讲义总结的很全,orz