前端学习day01--HTML标签02

最新推荐文章于 2024-06-14 11:01:38 发布
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量38 收藏
点赞数
分类专栏： 前端 文章标签： 前端 学习 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50833617/article/details/131344781
版权

1.列表标签、表格标签、表单标签

<!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>Demo03</title>
</head>
<body>
    <!-- 没有语义标签 -->
    <div>1</div>
    <span>2</span>
    <hr>
    <!-- 有语义标签（手机端常用） -->
    <head>头部</head>
    <nav>导航</nav>
    <footer>底部</footer>
    <aside>侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>
    <hr>
    <!-- 字符实体 -->
    哗啦哗啦 &nbsp;&nbsp; 哗啦哗啦
    <hr>


    <!-- 列表标签 -->
    <!-- 无序 -->
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>火龙果</li>
    </ul>
    <!-- 有序 -->
    <ol>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>火龙果</li>
    </ol>
    <!-- 自定义 -->
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
        <dd>自助服务</dd>
    </dl>
<hr>




    <!-- 表格标签 -->
    <table border="1" width="300" height="150">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>

       <tbody>
        <tr>
            <td>001</td>
            <td>小明</td>
            <td rowspan="2">88</td>
        </tr>
        <tr>
            <td>002</td>
            <td>小红</td>

        </tr>
       </tbody>

       <tfoot>
        <tr>
            <td>总结</td>
            <td colspan="2">不错</td>
            
           </tr>
       </tfoot>
    </table>
   <!-- 合并单元格   左上原则---保留左边或上边的单元格,同一个结构标签中的单元格才能合并-->
<hr>



    <!-- 表单标签 -->
    <form action="">
    <!-- 文本框 -->
    账号：<input type="text" placeholder="请输入用户名">
    <br><br>
    <!-- 密码框 -->
    密码：<input type="password" placeholder="请输入密码">
    <br><br>
    <!-- 单选框 -->
    性别：<input type="radio" name="gender" checked id="man"><label for="man">男</label>
          <label><input type="radio" name="gender">女</label>
    <br><br>
    <!-- 多选框 -->
    爱好：<input type="checkbox" checked>音乐<input type="checkbox">篮球
            <input type="checkbox">跑步
    <br><br>
    <!-- 文件选择框 -->
    <input type="file" multiple>
    <br><br>
    <!-- 下拉菜单 -->
    所在城市：
    <select>
        <option>北京</option>
        <option>上海</option>
        <option selected>郑州</option>
        <option>武汉</option>
    </select>
    <br><br>
    自我介绍：<br><br>
    <textarea rows="5" cols="40" ></textarea>
    <br><br>
    <!-- 提交按钮 -->
    <input type="submit" value="提交注册">
    <!-- 重置按钮 -->
    <input type="reset">
    <!-- 普通按钮 -->
    <input type="button" value="普通按钮">
    <hr>
    <button type="submit">提交注册</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>
    </form>
</body>
</html>

2.案例_注册

<!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>注册</title>
</head>
<body>
    
    <form>
        <!-- 文本框 -->
        账号：<input type="text" placeholder="请输入用户名">
        <br><br>
        <!-- 密码框 -->
        密码：<input type="password" placeholder="请输入密码">
        <br><br>
        <!-- 单选框 -->
        性别：<input type="radio" name="gender" checked id="man"><label for="man">男</label>
              <label><input type="radio" name="gender">女</label>
        <br><br>
        <!-- 多选框 -->
        音乐标签：
                <input type="checkbox" checked>流行
                <input type="checkbox">民谣
                <input type="checkbox">摇滚
                <input type="checkbox">说唱
                <input type="checkbox">R&B
                <input type="checkbox">古风
        <br><br>

        <!-- 文件选择框 -->
        上传头像：
        <input type="file" multiple>
        <br><br>

        <!-- 下拉菜单 -->
        所在城市：
        <select>
            <option>北京</option>
            <option>上海</option>
            <option selected>郑州</option>
            <option>武汉</option>
        </select>
        <br><br>
        
        自我介绍：<br><br>
        <textarea rows="5" cols="40" ></textarea>
        <br><br>

        <!-- 提交按钮 -->
        <input type="submit" value="提交注册">
        <!-- 重置按钮 -->
        <input type="reset">
        <!-- 普通按钮 -->
        </form>
        
</body>
</html>

 

王壮_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端学习day01-HTML标签01
06-21
端学习day01--HTML标签01源码
练习前端-HTML标签进阶篇-day02-03
08-19
练习前端-HTML标签进阶篇-day02-03
WEB前端学习day1-HTML
qq_44850230的博客
03-19 1325
HTML基础知识 1.HTML语法规范 <html> <head></head> <body></body> </html> <br/> 标签是尖括号包围的关键字。 通常是双标签，开始和结束标签，如<html>等； 也有单标签，如<br/> 也可写为<br> (转义标签用``) 2.网页初始化 DOCTYPE:声明文档类型 告诉浏览器使用哪种HTML版本来显示网页 lang：定义文档
前端学习笔记day01--基本标签
m0_38077048的博客
09-22 330
前端学习笔记day01 W3C(World Wide Web Consortium)万维网联盟，制定标准 1.结构标准（XHTML，XML）–html 2.表现标准（CSS）–css 3.交互标准（DOM，ECMAscript）–js（JavaScript） 动态效果 标准的目的：达到表现与结构、交互的分离 HTML（Hyper Text Markup Language） 超文本标记语言 超文本：支持视频、音频、图片等多种格式 标记语言：用标签组成->浏览器解析->网页 不区分大小写 93
前端学习day01：基础认知+HTML标签学习
qq_46244116的博客
05-02 1063
文章目录前言一、基础认知Web标准的构成HTML初体验1、HTML的感知2、HTML骨架结构HTML骨架结构由哪些标签组成3、开发工具的使用VS Code的基本快捷键语法规范1、 HTML的注释注释的作用和写法2、 HTML标签的构成HTML标签的结构二、HTML标签学习1. 排版标签1. 标题标签2. 段落标签3. 换行标签4. 水平线标签2. 文本格式化标签3. 媒体标签1. 图片标签图片标签的介绍图片标签的src属性图片标签的alt属性图片标签的title属性图片标签的width和height属性➢
web前端学习-day03 html标签属性
starbiu的博客
12-21 135
专心学习 只为搞钱 web前端学习总页面 网页基础布局 html基础结构 html基础标签 htm标签属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 标签属性： 1.由属性名=“属性值"组成 2.起附加信息作用
系统学习前端之CSS---day01
weixin_63522291的博客
12-24 1312
和
Web前端day02-html标签
Habc5050的博客
04-18 706
html标签
day01-02前端基础
weixin_46164192的博客
06-04 941
AJavaScriptAndXML，异步JavaScript和XML数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据异步交换：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等快速入门：访问官网、复制组件代码，调整。
大前端学习笔记-day02-HTML
qq_41692467的博客
05-26 247
HTML学习笔记-day02 6. Html 核心课程，前端三要素： HTML、 结构 身材 头[眉毛、眼睛、鼻子、嘴巴]、体、脚 CSS、 样式 化妆 Javascript 交互 才艺 元素 <html> <head> <meta/> <title></title> </head> <body> </body> </html>
前端学习--Day2 | HTML标签（上）
csyldjy的博客
02-11 872
1、HTML语法规范 1.1 基本语法概述 1、HTML标签是由尖括号包围的关键词，例如<html>。 2、HTML标签通常成对出现，例如<html></html>，我们称为双标签。 标签对中第一个标签是开始标签，第二个标签是结束标签。 3、有些特殊标签必须是单个标签（极少情况），例如<br />，我们称为单标签。 1.2 标签关系 双标签可以分为两类：包含关系（嵌套）和并列关系（并行）。 包含关系 <head> <
前端学习--day3 HTML标签 | 表格、列表、表单
csyldjy的博客
03-12 1604
1 表格标签 1.1 表格主要作用 表格主要用于清晰整洁地展示数据。 1.2 表格基本语法 1、<table></table>适用于定义表格的标签。 2、<tr></tr>用于定义行，必须嵌套在table标签中。 3、<td></td>用于定义单元格，必须嵌套在tr标签中。 [ td → table data ] eg：图① <table> <tr><td>姓名&
day01（html01-认知）.pdf
02-14
HTML，全称Hyper Text Markup Language...总之，HTML是构建网页的基础，理解和掌握HTML的语法、标签以及Web标准是成为前端开发者的首要步骤。通过实践和学习，我们可以创建出功能丰富、表现力强且跨浏览器兼容的网页。
day02-HTML&CSS.pdf
03-22
HTML（超文本标记语言）和CSS（层叠样式表）是构建网页的基础技术。在HTML中，表单（form）标签用于创建用户交互界面，允许用户输入...学习这些基础知识点，有助于深入理解网页开发，并为进阶的前端技术打下坚实基础。
【前端学习笔记day13】2.9. html表格
01-08
标签：声明一个表格，它的常用属性如下： - border属性 定义表格的边框，设置值是数值 - cellpadding属性 定义单元格内容与边框的距离，设置值是数值 - cellspacing属性 定义单元格与单元格之间的距离，设置值是数值...
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 473
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1468
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 577
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
Vue3-滑动到最右验证功能
地理信息的专栏
06-13 511
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
day--和--day区别
04-18
"day--"和"day"是两种不同的操作符，它们在编程中有着不同的含义和用法。 1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值