HTML学习

最新推荐文章于 2024-10-09 23:02:44 发布
最新推荐文章于 2024-10-09 23:02:44 发布
阅读量54 收藏
点赞数
分类专栏： 分享 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57102339/article/details/118972353
版权

按钮和多选框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登陆注册页面</title>
</head>
<body>
<h1>注册</h1>
<!--表单：form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，但是快
post方式提交：比较安全，可以传输大文件
-->
<form action="Test08.html" method="get">
<!--  文本输入框： input type="text"
value: 默认初始值
maxlength： 最长能写几个字符
size： 文本框的长度
-->
  <p>名字：<input type="text" name="username" value="liqingdong" maxlength="8" size="20"></p>
<!--  密码框： input type="password"-->
  <p>密码：<input type="password" name="pwd"></p>
  <p>性别：
<!--    使用name分组，name一样的表示一个组，否则会变成多选框  -->
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
  </p>
<!--  多选框
input type="checkbox"
-->
  <p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="play" name="hobby">玩
    <input type="checkbox" value="happy" name="hobby">开心
    <input type="checkbox" value="unhappy" name="hobby">不开心
  </p>
<!--按钮
value: 按钮名字
image：图片按钮，点击会进行跳转
-->
  <p>按钮：
    <input type="button" name="btn1" value="点击">
    <input type="image" src="resource/img/dong.gif">
  </p>

  <p>
<!--    submit：提交按钮
        reset： 重置按钮，清空表单
        -->
    <input type="submit">
    <input type="reset">
  </p>
</form>
</body>
</html>

列表框文本域和文件域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登陆注册页面</title>
</head>
<body>
<h1>注册</h1>
<!--表单：form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，但是快
post方式提交：比较安全，可以传输大文件
-->
<form action="Test08.html" method="get">
<!--  文本输入框： input type="text"
value: 默认初始值
maxlength： 最长能写几个字符
size： 文本框的长度
-->
  <p>名字：<input type="text" name="username" value="liqingdong" maxlength="8" size="20"></p>
<!--  密码框： input type="password"-->
  <p>密码：<input type="password" name="pwd"></p>
  <p>性别：
<!--    使用name分组，name一样的表示一个组，否则会变成多选框  -->
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
  </p>
<!--  多选框
input type="checkbox"
-->
  <p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="play" name="hobby">玩
    <input type="checkbox" value="happy" name="hobby">开心
    <input type="checkbox" value="unhappy" name="hobby">不开心
  </p>
<!--按钮
value: 按钮名字
image：图片按钮，点击会进行跳转
-->
  <p>按钮：
    <input type="button" name="btn1" value="点击">
    <input type="image" src="resource/img/dong.gif">
  </p>

<!--  下拉框、列表框
selected: 表示默认选中的值

-->
  <p>  下拉框
    <select name="列表名称">
      <option value="选项的值">中国</option>
      <option value="选项的值">美国</option>
      <option value="选项的值">雅典</option>
      <option value="选项的值" selected>日本</option>
    </select>
  </p>
<!--  文本域
-->
  <p>
    <p>反馈
  <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>
  
</p>
<!--  文件域
input type="file" name="files"
-->
  <p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
  </p>
  
<!--    submit：提交按钮
        reset： 重置按钮，清空表单
        -->
    <input type="submit">
    <input type="reset">
  </p>
</form>
</body>
</html>

功能性标签：搜索框滑块和简单验证

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登陆注册页面</title>
</head>
<body>
<h1>注册</h1>
<!--表单：form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，但是快
post方式提交：比较安全，可以传输大文件
-->
<form action="Test08.html" method="get">
<!--  文本输入框： input type="text"
value: 默认初始值
maxlength： 最长能写几个字符
size： 文本框的长度
-->
  <p>名字：<input type="text" name="username" value="liqingdong" maxlength="8" size="20"></p>
<!--  密码框： input type="password"-->
  <p>密码：<input type="password" name="pwd"></p>
  <p>性别：
<!--    使用name分组，name一样的表示一个组，否则会变成多选框  -->
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
  </p>
<!--  多选框
input type="checkbox"
-->
  <p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="play" name="hobby">玩
    <input type="checkbox" value="happy" name="hobby">开心
    <input type="checkbox" value="unhappy" name="hobby">不开心
  </p>
<!--按钮
value: 按钮名字
image：图片按钮，点击会进行跳转
-->
  <p>按钮：
    <input type="button" name="btn1" value="点击">
    <input type="image" src="resource/img/dong.gif">
  </p>

<!--  下拉框、列表框
selected: 表示默认选中的值

-->
  <p>  下拉框
    <select name="列表名称">
      <option value="选项的值">中国</option>
      <option value="选项的值">美国</option>
      <option value="选项的值">雅典</option>
      <option value="选项的值" selected>日本</option>
    </select>
  </p>
<!--  文本域
-->
  <p>
    <p>反馈
  <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>

</p>
<!--  文件域
input type="file" name="files"
-->
  <p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
  </p>
<!--  邮件验证-->
  <p>邮箱：
    <input type="email" name="email">
  </p>
<!--  URL验证-->
  <p>
    URL:
    <input type="url" name="url">
  </p>
<!--  数字验证
max:最大值
min：最小值
step：步长
-->
  <p>数字：
    <input type="number" name="num" max="100" min="0" step="10">
  </p>
<!--  滑块-->
  <p>滑块：
    <input type="range" min="0" max="100" name="voice" step="10"></p>
<!--  搜索框-->
<p>搜索：
  <input type="search" name="search">
</p>
<!--    submit：提交按钮
        reset： 重置按钮，清空表单
        -->
    <input type="submit">
    <input type="reset">
  </p>
</form>
</body>
</html>

表单的应用

· readonly 只读控件，不可修改
· disable 不可选择，禁用
· hidden 隐藏
· value 默认值

<!--  增强鼠标可用性,指向点击位置-->
  <label for="mark"></label>
  <input type="text" id="mark">

表单初级验证

常用方式

· placeholder：表单的提示信息
· required： 表示元素不能为空
· pattern： 正则表达式 判断输入是否有误

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登陆注册页面</title>
</head>
<body>
<h1>注册</h1>
<!--表单：form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，但是快
post方式提交：比较安全，可以传输大文件
-->
<form action="Test08.html" method="get">
<!--  文本输入框： input type="text"
value: 默认初始值
maxlength： 最长能写几个字符
size： 文本框的长度
-->
  <p>名字：<input type="text" name="username" value="liqingdong" maxlength="8" size="20" required placeholder="请填入用户名"></p>
<!--  密码框： input type="password"-->
  <p>密码：<input type="password" name="pwd"></p>
  <p>性别：
<!--    使用name分组，name一样的表示一个组，否则会变成多选框  -->
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
  </p>
<!--  多选框
input type="checkbox"
-->
  <p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="play" name="hobby">玩
    <input type="checkbox" value="happy" name="hobby">开心
    <input type="checkbox" value="unhappy" name="hobby">不开心
  </p>
<!--按钮
value: 按钮名字
image：图片按钮，点击会进行跳转
-->
  <p>按钮：
    <input type="button" name="btn1" value="点击">
    <input type="image" src="resource/img/dong.gif">
  </p>

<!--  下拉框、列表框
selected: 表示默认选中的值

-->
  <p>  下拉框
    <select name="列表名称">
      <option value="选项的值">中国</option>
      <option value="选项的值">美国</option>
      <option value="选项的值">雅典</option>
      <option value="选项的值" selected>日本</option>
    </select>
  </p>
<!--  文本域
-->
  <p>
    <p>反馈
  <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>

</p>
<!--  文件域
input type="file" name="files"
-->
  <p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
  </p>
<!--  邮件验证-->
  <p>邮箱：
    <input type="email" name="email">
  </p>
<!--  URL验证-->
  <p>
    URL:
    <input type="url" name="url">
  </p>
<!--  数字验证
max:最大值
min：最小值
step：步长
-->
  <p>数字：
    <input type="number" name="num" max="100" min="0" step="10">
  </p>
<!--  滑块-->
  <p>滑块：
    <input type="range" min="0" max="100" name="voice" step="10"></p>
<!--  搜索框-->
<p>搜索：
  <input type="search" name="search">
</p>
<!--  增强鼠标可用性,指向点击位置-->
  <label for="mark"></label>
  <input type="text" id="mark">
  <p>自定义邮箱
    <input type="text" name="diymail" pattern=""></p>
<!--    submit：提交按钮
        reset： 重置按钮，清空表单
        -->
    <input type="submit">
    <input type="reset">
  </p>
</form>
</body>
</html>
进击的小鸡仔
关注
专栏目录
html如何制作左侧导航栏,Html学习之十三（导航栏的制作）
weixin_29968283的博客
05-31 6497
导航效果.tab-item{list-style: none;font-family: "宋体";font-size: 18px;text-decoration: none;cursor: pointer;float: left;border: 1px darkgray solid;overflow: hidden;background-image: none;margin: 0px 5px;}....
HTML学习 第一部分（前端学习）
qq_55928086的博客
07-09 1万+
HTML学习 （前端学习）
html学习心得一
fengqing0527的博客
12-07 1万+
菜鸟的心得体会~
HTML 学习笔记——插入音频、视频标签
m0_55394328的博客
08-04 7633
今天学习了尚硅谷老师的html基础课程，主要是音视频的标签的属性和使用方法。html中插入音频和视频的方法基本相同，这里以音频为例进行演示音频格式：mp3、ogg、wav视频格式：mp4、ogv、webmaudio标签用来向页面中引入一个外部的音频文件。音视频文件引入时，默认情况下不允许用户自己控制播放按钮。以上就是今天的学习笔记啦，希望对大家有帮助~...
HTML学习第八章(HTML图像--＜img＞标签)
Baileys_99的博客
03-05 5031
HTML学习第八章：HTML 图像标签：在 HTML 中，图像由 标签定义。img代表单词image，意为图像。 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。2.绝对路径与相对路径。相对路径：资源相对于当前网页的地址。绝对路径：资源的完整地址。
HTML学习（一）
qq1164014750
05-23 1万+
h1 在一个页面里最好只出现一次。       理论是不做过多的限制。建议还是不要多用，一般一个页面用一个H1标签对就可以了。就如同你做论文的排版格式一样，写得再长，也只允许出现一个标题1是一个道理。标题1转到HTML代码里面就是H1标签对，这H1就是老大！如果一个页面中过多的使用H1，就相当于有N个老大，这样老大一多肯定会打架的！蜘蛛爬进来一看：纳尼？！这多老大！老夫先拿哪个开刀呢。。。然后再一...
HTML标签学习
qq_43203949的博客
05-01 8762
HTML标签学习 1.HTML标签初步认识 HTML是以一个一个标签组成的，标签中可以添加属性，来改变他们的样式。 <!--双便签--> <标签> <标签 属性名="属性值" 属性名="属性值"> </标签> </标签> <!--单便签--> <便签/> <便签> 2.HTML注释 多行注释： ...
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
网页制作基础学习——HTML+CSS常用代码
热门推荐
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
html学习心得
SmcWjm的专栏
08-26 1万+
经过1天多的艰苦奋战，终于把html（Hypertext markup language）的基础教程给看完了。 这次为了xml而看了这“古老”的技术，还是有点收获的。。总体来说，虽然不是很熟练，但是看懂一般的html网页源文件已经不是问题了。闲来无事，就写写笔记吧，说说感受也好！ html给我的感觉是很标准，很有格式的。最主要的代码特点就是标记成对的出现，虽然有些可以省略，但是建议除非太
几个HTML5入门学习的好例子(代码)
10-16
HTML5是现代网页开发的核心，它为开发者提供了更强大、更灵活的功能，使得网页应用程序能够实现前所未有的交互性和用户体验。...每个特性都有其独特的应用场景，结合实际案例学习，将有助于快速掌握HTML5的精髓。
HTML学习内容总结
qq_48681023的博客
07-10 2278
HTML学习总结
学习html的心得体会
weixin_47978224的博客
03-19 1万+
1、HTML的简介及大体介绍： HTML 是用来描述网页的一种语言。 它是一种超文本标记语言，并不是一种编程语言。它包含了一套标记标签，并用此来描述网页。因此HTML文档包含了HTML标签和文本内容。 HTML标签是由尖括号包围的关键词， HTML 标签通常是成对出现的，比如 <p> 和 </p> 标签对中的第一个标签是开始标签，第二个标签是结束标签 一个HTML元素包含了开始标签、内容、结束标签。例如：<p>这是一个段落。</p> 2、HTML的运用
【FastAdmin】全栈视角下的页面跳转实现：从原生html、javascrpt、php技术到jQuery、FastAdmin框架
田辛_DensinTian的专栏
10-09 454
页面跳转是Web开发中的基本操作，不同的技术栈提供了不同的实现方法。本文将详细介绍在原生JavaScript、原生HTML、原生PHP、jQuery以及FastAdmin框架中实现页面跳转的各种方法，并分析每种方法的优势、劣势和适用场景。
html 之 relative 和 absolute
u010194271的博客
10-09 186
结合 relative 和 absolute 的工作原理当一个父元素使用 relative 定位，并且其子元素或伪元素使用 absolute 定位时，子元素会根据父元素的边界进行定位，而不是根据视口或文档流。这个模式非常常见，用于创建复杂的布局效果。
XHTML 简介
wjs2024的博客
10-04 529
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
MySQL(SQLite3)数据库+Flask框架+HTML搭建个人博客网站
最新发布
2301_80892630的博客
10-09 513
搭建一个博客并实现文章的发送功能，涉及到前后端开发和数据库操作。以下是一个简单的示例，使用Python的Flask框架作为后端，HTML和JavaScript作为前端，SQLite作为数据库。
使用 HTML 和 CSS 创建 3D 菜单效果
bjjgff的博客
10-09 534
通过几行简单的 HTML 和 CSS，我们就能创建一个非常有视觉吸引力的 3D 菜单效果。我们在一个 div 容器中使用无序列表（），每个菜单项是一个链接（），并且通过 data-text 属性来存储与文本内容相同的值，用于后续创建 3D 效果。通过 ::before 和 ::after 伪元素，我们在主文本后方生成额外的文本层，并在鼠标悬停时移动这些层次，呈现出深度效果。3. 通过 ::before 和 ::after 伪元素创建 3D 文本效果，并使用 CSS 过渡效果增强动画效果。
HTML 常用的块级元素和行内元素
u010194271的博客
10-09 195
块级元素行内元素divspanpah1-h6strongul,olli,emtablei,b,ublockquoteimgbrcodenavlabelaside。
HTML学习指南：从基础到实践总结
在本文档中，我们将会深入探讨HTML学习的基础知识和重要性，特别针对初学者可能遇到的困惑，如HTML标签的记忆和理解。HTML，全称为HyperText Markup Language，是构建网页结构的核心语言，对于前端开发至关重要。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值