继续HTML标签学习

已于 2022-03-11 15:17:59 修改
阅读量825 收藏
点赞数 1
分类专栏： 前端 文章标签： html css 前端
于 2022-03-10 18:02:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51924238/article/details/123407738
版权

三、表单标签

学习路径 ：

  1. input系列标签

  2. button按钮标签

  3. select下拉菜单标签

  4. texteare文本域标签

  5. lable标签

1.1 input标签的基本使用：

  1. 场景：在网页中显示收集用户信息的表单效果，如：登录页，注册页

  2. 标签名：input（可通过type属性值的不同，展示效果也不一样）

  3. type属性值：text 文本框，输入单行文本；password 密码框，输入密码；radio 单选框，多选一；Checkbox 多选框，多选多；file 文件选择，上传文件；submit 提交按钮；reset 重置；button 普通按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--写啥就是啥-->
    文本框:<input type="text">
    <br>
    <br>
    <!--书写内容都会变成点点点显示-->
    密码框:<input type="password">
     <br>
     <br>
    单选框：<input type="radio">
    <br>
    <br>
    多选框：<input type="checkbox">
    <br>
    <br>
    文件选择：<input type="file">
    <br>
    <br>
    提交按钮：<input type="submit">
    <br>
    <br>
    重置按钮：<input type="reset">

</body>
</html>

1.2 input系列标签—文本框：

  1. 场景：在网页中显示输入单行文本的表单控件

  2. type属性值：Text

  3. 常用属性：placeholder （占位符，提示用户输入内容的文本）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入用户名">
    <br>
    <input type="password" placeholder="请输入密码">
</body>
</html>

1.3 input系列标签—单选框：

  1. 场景：在网页中显示输入多选一的单选表单控件

  2. 属性值：radio

  3. 常用属性：name 分组，有相同name属性值的单选框为一组，一组中同时只能一个被选中。checked，默认选中。

  4. 注意：name属性对于单选框有分组功能；有相同name属性值的单选框为一组，一组中同时只能一个被选中

<body>
    性别：<input type="radio" name="sex">男 
         <input type="radio" name="sex" checked>女

    <input type="checkbox" checked>    
</body>

1.4 input系列标签—文件选择：

  1. 场景：在网页中显示文件选择表单控件

  2. 属性值：file

  3. 常用属性：multiple 多文件选择

<body>
     <input type="file" multiple >
</body>

1.5 input系列标签—按钮：

  1. 场景：在网页中显示不同功能的按钮表单控件

  2. 属性值：submit 提交按钮，点击提交数据给后端服务器；reset 重置按钮，点击之后恢复表单默认值；button，普通按钮。

  3. 注意：如果需要实现以上按钮功能，需配合form标签使用；form使用方法：用form标签把表单标签包裹起来即可

<body>
   <form action="">
    用户名：<input type="text">
    <br>
    <br>
    密码：  <input type="password">
    <br>
    <br>
    <!--按钮-->
    <input type="submit" value="免费注册">
    <input type="reset">
    <input type="button" value="普通按钮">
    <!-- 属性  xx="xxx"-->
    </form>
</body>

2.1 button按钮标签：

  1. 场景：在网页中显示用户点击的按钮

  2. 标签名：button

  3. type属性值：同input按钮属性值一样

  4. 注意：谷歌浏览器中button 默认是提交按钮；button 标签是双标签便于包裹其他内容，文字，图片等

<body>
    <button>我是按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮，无功能</button>
</body>

3.1 select下拉菜单标签：

  1. 场景：在网页中提供多种选择项的下拉菜单控件

  2. 标签组成：select标签，下拉菜单的整体；option标签，下拉菜单的每一项（二者父子关系）

  3. 常见属性：selected 下拉菜单的默认选中

<body>
    <select >
    <option >北京</option>
    <option >上海</option>
    <option >广州</option>
    <option selected >深圳</option> 
    </select>
</body>

4.1 textarea文本域标签：

  1. 场景：提供可输入多行文本的表单控件

  2. 标签名：textarea

  3. 常见属性：cols 规定文本域内可见宽度；rows 规定了文本域内可见行数

  4. 注意点：右下角可以拖拽改变大小；实际开发针对于样式效果推荐使用CSS设置

<body> 
    <textarea  cols="30" rows="10"> </textarea>
</body>

5.1 lable标签：

  1. 场景：常用于绑定内容与表单标签的关系

  2. 标签名：lable

  3. 使用方法(1)：使用lable标签把内容（如文本）包裹起来；在表单标签上添加id属性；在lable标签的for属性中设置对应的ID属性。

  4. 使用方法(2)：直接使用lable标签把内容(如文本)和表单标签一起包裹起来；需要把lable标签的for属性删除即可。

<body>
     性别：
     <input type="radio" name="sex" id="nan "><label for="nan">男</label> 
     <label ><input type="radio"name="sex">女</label>
</body>

四、语义化标签

学习路径：

  • 没有语义的布局标签

  • 有语义的布局标签(了解)

1.1 没有语义的布局标签：

  1. 场景：实际开发网页时会大量频繁的使用到div和span两个没有语义的布局标签

  2. div标签：一行只显示一个(独占一行)

  3. span标签：一行可以显示多个

<body>
    <div>这是div标签</div>
    <div>这是div标签</div>

    <span>这是span标签</span>
    <span>这是span标签</span>

2.1 有语义的布局标签(了解)：

  1. 场景：在HTML5新版中，推出一些有语义的布局标签开发使用

  2. 标签：header 网页的头部；Nav 网页的导航；footer 网页的底部；aside 网页的侧边栏；section 网页区块；article 网页的文章

  3. 注意：以上标签显示特点和div一致，但比div多了不同的语义

<body>
    <header>网页的头部</header>
    <nav>网页导航</nav>
    <footer>网页的底部</footer>
    <aside>网页的侧边栏</aside>
    <section>网页区块</section>
    <article>网页的文章</article>
</body>

五、字符实体

学习路径：

  1. HTML中的合并现象

  2. 常见字符实体

1.1 HTML中的合并现象:

  1. 场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格

2.1常见字符实体：

  1. 场景场景：在网页中展示特殊符号效果时，需要使用字符实体替代

  2. 结构：&英文;

  3. 常见的字符实体： 空格，&nbsp；< 小于号 &lt； > 大于号 &gt；& 和号 & amp；“ 引号 &quot；‘ 撇号 &apos；(IE 不支持) ￥(元) &yen；

<body>
    <!--网页不是认识多个空格，只认识一个-->
    
    这是HTML文档,现在学习&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字符实体
</body>

六、综合案例

优秀学生信息表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table border="1" width="400" height="400">
     <caption><h3>优秀学生信息表格</h3></caption>
     <thead>
      <tr>
        <th>年级</th>
        <th>姓名</th>
        <th>学号</th>
        <th>班级</th>
      </tr>
    </thead>
<tbody>
      <tr>
        <td rowspan="2">高三</td>
        <td>张三</td>
        <td>110</td>
        <td>三年二班</td>
      </tr>
      <tr>
         <td>赵四</td>
        <td>120</td>
        <td>三年三班</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>评语</td>
        <td colspan="3">你们都很优秀</td> 
      </tr>
    </tfoot>
  </table>
</body>
</html>

效果图：

会员注册表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="">
        昵称：<input type="text" placeholder="请输入昵称">
        <br>
        <br>
       性别：<label ><input type="radio" name="sex" checked>男</label>
            <label > <input type="radio" name="sex">女</label>
            <br>
            <br>
        所在城市：
        <select >
            <option >北京</option>
            <option  >上海</option>
            <option selected>广州</option>
            <option >深圳</option>
        </select>
        <br>
        <br>
        婚姻状况：<label ><input type="radio" name="sex" checked>未婚</label>
                 <label > <input type="radio" name="sex">已婚</label>
                 <label > <input type="radio" name="sex">单身</label>
        <br>
         <br>
        喜欢的类型： <label><input type="checkbox" checked>可爱</label>
                    <label><input type="checkbox">性感</label>
                    <label><input type="checkbox">清纯</label>
            
         <br>
        <br>
        个人介绍：<br>
        <textarea name="" id="" cols="60" rows="10"></textarea>
        <h3>我承诺</h3>
         <ul>
           <li>年满18岁，单身</li>
           <li>抱着严肃的态度</li>
           <li>真诚寻找另一半</li>
        </ul>
        <br>
        <input type="checkbox" >我同意所有条款
        <br>
        <input type="submit"value="免费注册" >
        <button type="reset" >重置</button>
</body>
</html>
            
      

效果图：

八九。
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML标签学习
qq_43710889的博客
04-10 2892
HTML标签学习 文章目录HTML标签学习head标签学习body标签学习body文本标签1.标题标签2.水平线标签3.段落标签4.换行符标签文本标签全部代码body列表标签1.无序列表2.有序列表3.自定义列表列表标签全部代码图片标签学习代码粘贴超链接标签学习a标签锚点学习代码粘贴表格标签的学习表格的合并代码粘贴表格标签练习（绘出求职简历表）内嵌标签的学习框架标签的学习form表单标签的学习from表单域标签学习注册页面练习 head标签学习 网页标题标签 <title>HTML学习&lt
html中没有语义的布局标签
xiaotai1234的博客
06-04 2438
html中没有语义的布局标签 div和span是没有语义的标签，一般用于页面布局使用（项目中会经常使用到） div：div盒子 <div>长亭外</div><div>古道边</div> 特点： width由屏幕宽度决定（独占一行）height自适应（由内容撑开） 默认占一整行（一行只能显示一个） 页面布局中用的最多~ span <span>芳草碧连天</span> 特点： width、height由内容来决定（都由内容撑开）
打卡HTML5+CSS3学习（2）
weixin_64665051的博客
03-14 407
09-列表 <body> <!--(1)无序列表 (ul只能包裹li)--> <ul> <li>榴莲</li> <li>香蕉</li> <li>苹果</li> <li>桔子</li> </ul> <!--(2)有序列表 (ol只能包裹li)-->
Web前端学习笔记02 —— HTML基础
m0_67570919的博客
01-14 331
一、列表标签 1.1 无序列表 1.2 有序列表 1.3 自定义列表 二、表格标签 2.1 表格的基本标签 2.2 表格的相关属性 2.3 表格标题和表头单元格标签 2.5 合并单元格 三、表单标签 3.1 input系列 3.2 button按钮 3.3 select下拉菜单 3.4 textarea文本域 3.5 label标签 四、语义化标签 五、常见字符实体 【综合案例】
HTML标签
qq_61900577的博客
12-16 329
黑马程序员前端开发学习笔记——HTML
关于html和css的学习笔记
m0_62598965的博客
02-03 128
可以通过点击文字的单选框: 第一个 第二个
html学习笔记
03-28
3. HTML标签 - 常见的文本元素：`<h1>`至`<h6>`表示标题，`<p>`表示段落，`<em>`表示强调，`<strong>`表示重要性。 - 图像元素：`<img>`用于插入图片，`src`属性指定图片源。 - 链接元素：`<a>`定义超链接，`href`...
HTML标签属性大全
12-29
本文将详细介绍一些常见的HTML标签属性，帮助你更好地理解和掌握HTML语言。 首先，我们来看`<marquee>`标签，它用于创建跑马灯效果。`behavior`属性控制跑马灯的...继续深入学习，你将能够构建出复杂的交互式网站。
HTML学习代码
10-25
HTML，全称HyperText Markup Language，是用于创建网页的标准标记语言。它构成了互联网的基础，让开发者能够构建结构化的文档，并通过超链接将不同的页面连接...继续探索，掌握HTML的精髓，你就能开启网页开发的大门。
请继续学习.github.io
02-07
10. **Web标准与语义化**：遵循W3C制定的Web标准，使用语义化的HTML标签（如`<header>`、`<footer>`、`<article>`等）有助于提高网页可访问性和SEO优化。 综上所述，"请继续学习.github.io"这个项目可能是为了教授...
html基础学习快速掌握.doc
02-03
了解这些基础知识后，你可以继续深入学习HTML5的新特性，如语义化标签、多媒体支持、离线存储等，以及如何结合CSS和JavaScript实现更复杂的网页效果。不断实践和学习，你将逐渐掌握HTML，并向全栈开发迈进。
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1180
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 1020
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 412
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 252
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
前端入门知识分享：如何在HTML或CSS文件中引用CSS文件。
uu0216的博客
07-09 780
行内样式：使用 HTML 标签的 style 属性定义 CSS 样式； 内嵌样式：使用 style 标签在 HTML 文档头部（ 通常在 head 之间）定义 CSS 样式； 链接式：使用 link 标签引入外部 CSS 样式表文件。 导入式：使用 @import 命令导入外部 CSS 样式表文件。
html&css基础
antyuki的博客
07-09 744
/
HTML(29)——立体呈现
m0_74386799的博客
07-09 533
作用：设置元素的子元素是位于3D空间中还是平面中。将两个盒子分开，添加一个旋转的效果使其更明显。属性名：transform-style。为了更好的视觉效果我又添加了视距。原则给它们定位，最后。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值