html复习-常用标签-表单

原创 已于 2023-06-04 20:25:08 修改 · 575 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vscode #ide #编辑器

于 2023-06-04 20:08:42 首次发布
本文详细介绍了VSCode的一些常用快捷键，包括新建、保存、撤销等操作，以及HTML的基本标签，如文本、格式化、图像、超链接和表格标签。此外，还讨论了HTML表单的使用，包括GET和POST方法的注意事项，以及input元素的各种类型，如text、password、submit等。文章还提及了HTML5的新特性，如input类型的date、color等，并提到了输入限制和验证的相关属性。

目录

VSCode常用快捷键

一、常用标签

HTML文本标签

HTML格式化标签

HTML图像标签

HTML超链接标签

HTML表格标签

二、表单

1.from

关于 GET 的注意事项：

关于 POST 的注意事项：

2.input

VSCode常用快捷键

快捷键作用
ctrl + n新建文件
ctrl + s保存文件
ctrl + z撤销
ctrl + shift + z恢复撤销
ctrl + 加号 / 减号放大 / 缩小
ctrl + c / v复制粘贴一行（不能选中文字）
ctrl + x删除一行
alt + ↑ / ↓上下移动代码
alt + shift + ↑ / ↓上下复制一行代码
ctrl + /注释
ctrl + d向后多选相同的内容
alt + z自动换行

一、常用标签

HTML文本标签

常⽤文本标签如下

<hn>...</hn>标题标签，其中n为1–6的值。
<i>...</i>斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 定义著作的标题
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线

注意：

  • HTML 中有⽤用的字符实体

  • 实体名称对⼤大⼩小写敏敏感

HTML格式化标签

常⻅见格式化标签如下：

<br/>换⾏行行
<p>...</p> 换段
<hr />⽔水平分割线
<ul>...</ul> ⽆无序列表
<ol>...</ol> 有序列表 其中type类型值：A a I i 1 start属性表示起始值
<li>...</li>列表项
<dl>...</dl>自定义列表
<dt>...</dt>自定义列表头
<dd>...</dd> 自定义列表内容
<div>...</div> 常⽤用于组合块级元素，以便便通过 CSS 来对这些元素进⾏行行格式化
<span>...</span> 常⽤用于包含的文本，您可以使⽤用 CSS 对它定义样式，或者使⽤JavaScript 对它进行操作。

HTML图像标签

在HTML网页中插入一张图片，使用img标签，他是一个单标签：

其中img标签中常用属性如下
src图⽚名及url地址
alt图⽚加载失败时的提示信息
title文字提示属性
width图片宽度
height图片⾼高度
border边框线粗细

绝对路径与相对路径

绝对路径 ：目标文件在硬盘上的真实路径（最精确路径）

相对路路径 ：相对于当前文件位置的路径

注意：相对路径：位置灵活，写法简单，只要在同盘中就可引用查找 绝对路径：用的较少，因为目录一定，除非引用文件从来不移动，否则你每次都要改。不适合上传web。

扩展：

举个栗子（绝对路径）：找到文件，右键点击后打开属性，可以看到我把喜欢的封面'cover1.jpg'储存在了路径C:\Users\80975\OneDrive\Desktop\cover 那么_C:\Users\80975\OneDrive\Desktop\cover\cover1.jpg _就是绝对路径

所以在html的图片引用中可以写

<!-- 用 / 或 \ 都可以 -->
<img src="C:\Users\80975\OneDrive\Desktop\cover\cover1.jpg" alt="cover1">

举个栗子（相对路径）：我不想用绝对路径，那么在html中要怎么写才能引用cover1.jpg呢？ 这里要介绍一个等级概念,目录的上级(父级)，同级，下级（子级）。从这里开始，我们管文件夹叫目录(directory)

下级（子目录）：在web目录下，可以看到有一个用chrome打开的文件，我把它叫做test.html，那么test.html就叫做web目录的下级。 上级：web是test.html的上级目录 同级：web和cover1.jpg在同目录中，成为同级

所以在html的图片引用中可以写

<!-- 1.引用上级文件,为图片中例子 -->
<img src="../cover1.jpg" alt="cover1">

<!-- 2.引用同级文件  -->
<img src="cover1.jpg" alt="cover1">

HTML超链接标签

超链接标签基本样式<a>

<a href="链接⽬标url地址">显示⽂字</a>

a标签的属性：

  • href: 必须，指的是链接跳转地址

  • target: 表示链接的打开⽅式：

    • _blank 新窗⼝

    • _parent ⽗窗⼝

    • _self 本窗⼝（默认）

    • _top 顶级窗⼝

  • framename 窗⼝名

  • title：⽂字提示属性（详情）

链接到同一个页面的不同位置

锚点链接：
定义⼀个锚点：<a id="a1"></a> 以前使⽤的是 <a name="a1"></a>
使⽤锚点：<a href="#a1">跳到a1处</a>

扩展：

创建电子邮件链接

这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

注意：本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

HTML表格标签

表格的基本标签

序号标签名说明
1table表格标签，用于包含多个 tr
4th同样可以存放内容，但是默认会被加粗并且居中显示
2tr定义表格中的行，用于包含多个 td
3td定义表格中的单元格，用于存放单元格内容

表格<table>的常用属性

属性名属性值描述
alignleft、center、right对齐方式
border宽度像素值或 “”表格边框，默认 “” 无边框
width像素值宽度
height像素值高度
cellspacing像素值单元格之间的间距，默认 2 像素
cellpadding像素值内容与边框之间的距离，默认 1 像素

<table align="center" border="1" cellpadding="50" cellspacing="20" width="500" height="100"></table>

th中的常用属性

跨行合并（rowspan）把多个行的单元格合并 → 纵向合并
跨列合并（colspan）把多个列的单元格合并 → 横向合并
 <th colspan="4">学生信息</th>

基本形式

<table>
        <th>
            <td>序号</td>
            <td>姓名</td>
            <td>性别</td>
        </th>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>男</td>
        </tr>

注意

  • table 和 tr 是用来搭建表格结构的，不能存放实际内容；

  • td 是用来存放单元格数据的。

表格的细分扩展（目前浏览器还不支持）

带有 thead、tbody 以及 tfoot 元素的 HTML 表格

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

提示和注释：

注释：<thead> 内部必须拥有 <tr> 标签！

注释：<thead>、<tbody> 以及 <tfoot> 很少被使用，这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。假如您使用 Internet Explorer 5.0 或更新的浏览器，可以在我们的 XML 教程中查看一个例子。

二、表单

1.from

<form>...</form> 表单标签

form标签常⽤属性

属性名称作用
action属性提交后，将表单数据发送到 "action_page.php" 提示：如果省略 action 属性，则将 action 设置为当前页面。
method提交⽅式:get(默认)和post
enctype提交类型
target在何处打开新的页面
name:属性为表单起个名字.在HTML5中使⽤ id 代替

注意：get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全 post⽅式是URL地址不可⻅,⻓度不受限制,相对安全

target的属性

值描述
_blank响应显示在新窗口或选项卡中。
_self响应显示在当前窗口中。
_parent响应显示在父框架中。
_top响应显示在窗口的整个 body 中。
framename响应显示在命名的 iframe 中。

扩展：

关于 GET 的注意事项：

  • 以名称/值对的形式将表单数据追加到 URL

  • 永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）

  • URL 的长度受到限制（2048 个字符）

  • 对于用户希望将结果添加为书签的表单提交很有用

  • GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

  • 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）

  • POST 没有大小限制，可用于发送大量数据。

  • 带有 POST 的表单提交无法添加书签

提示：如果表单数据包含敏感信息或个人信息，请务必使用 POST！

2.input

2.最重要的表单元素是 <input> 元素。元素根据不同的 type 属性，可以变化为多种形态。
类型作用
text供文本输入的单行输入字段
password密码字段
submit提交表单数据至表单处理程序的按钮（如果您省略了提交按钮的 value 属性，那么该按钮将获得默认文本）
radio单选按钮
checkbox复选框，允许多选和不选
button按钮
number用于应该包含数字值的输入字段 注释：IE9 及早期版本不支持 type="number"。 min="1" max="5" 根据浏览器支持，限制可应用到输入字段

html5新增type:

类型作用
date

用于应该包含日期的输入字段,根据浏览器支持 max="1979-12-31" min="2000-01-02" 注释： Internet Explorer 不支持 type="date"。

color颜色选择
range显示为滑块控件，可以设置min、max、step、value
month用户选择月份和年份,根据浏览器支持
week允许用户选择周和年,根据浏览器支持

time用户选择时间（无时区）,根据浏览器支持

datetime允许用户选择日期和时间（有时区）,根据浏览器支持 注释：</b>Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。

datetime-local允许用户选择日期和时间（无时区）,根据浏览器支持 注释：Firefox 或者 Internet Explorer 不支持 type="datetime-local"。

email电子邮件地址的输入字段,根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证 某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入 注释：IE9 及更早版本不支持 type="email"。

search搜索字段。

tel包含电话号码的输入字段, 注释：Safari 8 及更新版本支持 type="tel"。

url包含 URL 地址的输入字段， 注释：及其更早版本不支持 type="url"。

注释：html5新增的type，老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

想要了解更多处理表单输入的知识，学习 ASP 教程和 PHP 教程：W3School TIY Editor

输入限制

这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：

属性描述
disabled被禁用,被禁用的元素不会被提交
max字段的最大值
maxlength能输入的最大字符数，则输入控件不会接受超过所允许数的字符 注释：输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。
min字段的最小值
pattern检查输入值的正则表达式
readonly字段为只读（无法修改）
required字段是必需的（必需填写）
size字段的宽度（以字符计）
step字段的合法数字间隔
value字段的默认值

您将在下一章学到更多有关输入限制的知识。

HTML5 属性

HTML5 为 <input> 增加了如下属性：

  • autocomplete

  • autofocus

  • form

  • formaction

  • formenctype

  • formmethod

  • formnovalidate

  • formtarget

  • height 和 width

  • list

  • min 和 max

  • multiple

  • pattern (regexp)

  • placeholder

  • required

  • step

并为 <form> 增加如需属性：

  • autocomplete

  • novalidate

属性名作用
formaction属性规定当提交表单时，对输入（数据）进行处理的文件的 URL。 formaction 属性适用于以下输入类型：submit 和 image。

注释：该属性会覆盖 <form> 元素的 action 属性。
formenctype属性指定提交时应如何编码表单数据（仅适用于 method="post" 的表单）。 属性适用于以下输入类型：submit 和 image。

注释：此属性将覆盖 <form> 元素的 enctype 属性。
formmethod定义了将表单数据发送到 action URL 的 HTTP 方法， formmethod 属性适用于以下输入类型：submit 和 image。 表单数据可以作为 URL 变量（method="get"）或作为 HTTP post 事务（method="post"）发送。

注释：此属性将覆盖 <form> 元素的 method 属性。
formtarget

input 的 formtarget 属性指定一个名称或关键字，该名称或关键字规定在提交表单后在何处显示收到的响应。 注释：此属性将覆盖 <form> 元素的 target 属性。
formnovalidate

input属性，不做验证的提交 注释：Safari 10 或更早的版本不支持 input 标签的 formnovalidate 属性。
novalidateform表单的属性novalidate,不验证表单提交。 如果已设置，novalidate 属性规定在提交时不应验证所有表单数据。 注释：Safari 10 或更早的版本不支持 form 标签的 novalidate 属性。

<span style="background-color:#f8f8f8"><span style="color:#333333">重点单词
序号  英语  中文
1   table   表格
2   row     行
3   data    数据
4   align   对齐
5   left    左
6   center  中
7   right   右
8   cell    单元格
9   spacing 外部彼此间的间距
10  padding 内边距（填充物）内容距离边框的距离
11  row     行
12  col / column    列
13  term    术语
14  input   输入
15  select  选择
16  selected    已选中
17  area    区域
18  type    类型
19  submit  提交
20  reset   重置
21  name    姓名、名称
22  value   值
23  radio   单选框
24  checkbox    多选框
25  option  选项</span></span>

seo搜索优化

Google SEO教程:Google SEO教程：让谷歌排名第一的五大步骤｜Google搜索引擎优化教程（实战经验总结！）_哔哩哔哩_bilibili

全套SEO优化学习教程:【全套SEO优化学习教程】从SEO是什么到网站优化排名_哔哩哔哩_bilibili

进阶的CC
关注
【前端基础篇】快速学习HTML常用标签和属性
前端知识分享喵
06-12 1803
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure-html）、表现（Presentation-css）和行为（Behavior-javascript）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
SpringMvc表单标签库简单运用（fm:input）
qq_51404400的博客
09-29 947
前言：简单使用表单标签库 在 JSP 页面使用 Spring 表单标签库时，必须在 JSP 页面开头处声明 taglib 指令： <%@ taglib prefix=“fm” uri=“http://www.springframework.org/tags/form” %> | 名称 | 作用 | |--|--| |form| |渲染表单元素| |input| |渲染 元素| |password| |渲染 元素| |hidden| |渲染 元素| |textarea| |渲染 texta
HTML5--表格、表单标签
Lance2574的博客
08-09 521
一、表格标签 <table> <thead>--tr>th <tbody>--tr>td <tfoot> caption：作为table的子元素，表示表格的标题信息 colgroup：列分组，定义一个表中的一组列，作为table的子元素，同时放在caption的后面，其它元素的前面。 col：经常作为colgroup的子元素，又span属性...
VsCode使用Ctrl+S保存代码自动格式化Html/Css/JS
qq_38210427的博客
03-17 3920
vscode
HTML表单标签大全并附有详细代码+案例
鱼干的博客
08-13 6814
HTML表单标签 HTML 表单用于搜集不同类型的用户输入。 一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。 1. 表单标签 HTML 表单用于收集用户输入，表单使用 标签创建。表单可包含文本字段、复选框、单选框、提交按钮等等。 注意：元素是块级元素，其前后会产生折行。
MVC---表单标签库
聚沙成塔
02-07 277
前言 spring MVC表单标签库，能够简化我们的代码开发，提高开发效率，那么如何简化代码开发呢？一起来看看吧???? EL获取业务数据 我们首先做一个小案例，用EL表达式获取业务数据，以此来体现出spring MVC表单标签库特点。 案例背景：控制器返回业务数据到视图层，视图层通过EL获取业务数据绑定到JSP页面表单中。 （1）创建student实体类 public cl...
Spring的表单标签库
howareyouo的专栏
03-12 2147
Spring的表单标签库 从2.0版本开始，如果使用JSP和Spring Web MVC的话，Spring提供了一套支持数据绑定的标签集合，用于处理表单元素。每个标签所支持的属性集合和与其对应的HTML标签相同，这就让这些标签看起来很熟悉，而且用起来很直观。 由这些标签库生成的HTML页面符合HTML 4.01/XHTML 1.0标准。与其它表单/输入标签库不同，Spring的表单标签库与Sp
北大青鸟ACCP6.0 S1 HTML基础复习：标签与表单详解
本资源是北大青鸟ACCP6.0 S1 HTML总复习的PPT，主要针对HTML语言的第二章——基本标签(二)和表单进行深入讲解。章节内容涵盖了以下几个知识点： 1. 超链接标签：这部分介绍了HTML中的标签，其基本语法包括链接地址...
精选-HTML期末复习题含答案.doc
最新发布
07-09
通过以上内容的复习，我们能够掌握HTML的基本结构和常用标签的使用，为进一步学习HTML5及前端开发打下坚实的基础。此外，对于期末考试的复习而言，对单选题的针对性练习和理解是非常重要的，因为它们能够帮助考生...
北大青鸟ACCP6.0 S1 HTML基础与表单复习讲义
讲解了块级和行级标签，如标题标签~、段落、图像、超链接等，强调了W3C提倡的语义化网页结构和XHTML的基本规范，如标签命名规则、属性值的处理以及正确的标签嵌套。 接下来的章节二深化了HTML的应用，重点讨论了...
HTML基础知识精讲，常用标签与框架案例剖析
进一步的常用标签还包括标题标签（`<h1>`到`<h6>`）、段落标签（`<p>`）、链接标签（`<a>`）、图像标签（`<img>`）、列表标签（`<ul>`、`<ol>`、`<li>`）以及表单标签（`<form>`、`<input>`、`<button>`等）。...
SpringMVC 表单标签库
输入技术、输出想法
07-27 1146
Spring MVC 表单标签库声明表单标签库表单标签文本框密码框文本域复选框复选框（多选）单选按钮单选按钮（多选）下拉列表下拉列表（多选）隐藏字段域 声明表单标签库 在使用 SpringMVC 的时候我们可以使用 Spring 封装的一系列表单标签，这些标签都可以访问到ModelMap 中的内容。我们需要先在 JSP 中声明使用的标签，具体做法是在 JSP 文件的顶部加入以下指令： <%@ taglib prefix="form" uri="http://www.springframework.or
SpringMVC-13-表单标签库
时光
07-12 270
SpringMVC-13-表单标签库
Spring MVC_5
qq_37570991的博客
09-28 255
⽂件下载 JSP ⻚⾯中添加超链接，进⾏下载。 <%-- Created by IntelliJ IDEA. User: southwind Date: 2020-02-13 Time: 14:01 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <
【SpringMVC】表单库标签
lucashu的博客
08-06 736
本文目录创建工程引入标签库Controller表单标签form标签input标签password标签hidden标签textarea标签checkbox标签checkboxes标签radiobutton标签select、option、options标签errors标签 SpringMVC 提供了一些标签库，可以帮助我们实现数据绑定。使用方法如下 创建工程 参考 【SpringMVC】SpringMVC入门实例创建一个SpringMVC工程 创建完工程工程目录如下： 在pom.xml中引入标签库 <
23. Spring MVC 表单标签库
qq_41775769的博客
09-17 843
Spring MVC 表单标签库 ​ ​ Spring MVC 的表单标签库的语法与 JSTL 标签库的语法非常类似，包含了一组可以在 JSP 页面中渲染 form 表单元素的标签。在 JSP 页面中使用 Spring MVC 表单标签库时，必须在 JSP 页面的开头处声明 taglib 指令，指令代码如下： <!-- 前缀prefix可以自定义，通常为form --> <%@ taglib prefix="form" uri="http://www.springframework.org
【SpringMVC笔记整理八】表单标签库
小异常的博客
03-02 465
在 Spring MVC 中我们可以使用一组 Spring 已经封装好的表单标签库来提高我们的开发效率，通过这些标签我们可以访问到 ModelMap 中的内容。 ModelMap 是 ModelAndView 的底层实现，之前我们在业务方法中将对象保存到了 ModelAndView 中，其实底层是将对象保存到了 ModelMap 中。
Spring MVC的表单标签库详解
weixin_43748615的博客
02-23 331
表单标签库中包含了可以用在 JSP 页面中渲染 HTML 元素的标签。在 JSP 页面使用 Spring 表单标签库时，必须在 JSP 页面开头处声明 taglib 指令，指令代码如下： <%@ taglib prefix=“form” uri=“http://www.springframework.org/tags/form”%> 在表单标签库中有 form、input、pas...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值