前端学习（一）----1小时掌握html

已于 2022-03-18 09:45:02 修改
阅读量96 收藏
点赞数
文章标签： html5 前端
于 2022-03-13 11:30:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63057828/article/details/123456345
版权

学习目标：

100行代码学会html的语义化标签

学习内容：

html5的标签及简单搜索引擎的实现

掌握特殊符号的使用

学习时间：

1小时

学习内容：

<!--
 * @Date: 2022-03-13 10:17:20
-->
<!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>
    <style>
        img {
            width: 50px;
        }
    </style>
</head>

<body>
    <!-- 锚点定位（跳到想要的地方）id 与#搭配 -->
    <a href="#Kobe">科比</a>
    <h1>哈哈哈哈哈哈哈哈哈</h1>
    <hr/>横线单标签
    <h2>哈哈哈哈哈哈哈哈哈</h2>
    <h3>哈哈哈哈哈哈哈哈哈</h3>
    <h4>哈哈哈哈哈哈哈哈哈</h4>
    <h5>哈哈哈哈哈哈哈哈哈</h5>
    <p>p标签</p>

    <!-- pre预格式化文本可识别空格 -->
    <pre>
                        行路难·李白
金樽清酒斗十千，玉盘珍羞直万钱⑵。停杯投箸不能食⑶，拔剑四顾心茫然。
欲渡黄河冰塞川，将登太行雪满山⑷。闲来垂钓碧溪上⑸，忽复乘舟梦日边。
行路难！行路难！多歧路⑹，今安在？长风破浪会有时⑺，直挂云帆济沧海⑻ [1]  。
    <span>span标签</span>
    <div>div标签</div>
    <nav>nav标签</nav>
    <del>删除线</del>
    <b>加粗</b>
    <strong>加粗</strong>
    <i>斜体</i>
    <em>斜体</em>
    <s>删除线</s>
    <del>删除线</del>
    <br/>换行
    <u>下划线</u>
    <ins>下划线</ins>
    <a href="http://www.baidu.com/" target="_blank">百度一下</a>
    <!-- target默认self不新建页面打开 -->
    <a href="./infor.txt">跳转到文件</a>
    <!-- ./当前文件夹 ../返回上一级文件夹 -->
    <img src="./科比.jpg" alt="黑曼巴" title="黑曼巴" id="Kobe">
    <!-- alt为图片加载不出时显示的内容  title为悬停图片时显示的文字-->

    <ul>
        <h1>无序列表</h1>
        <li>小明</li>
        <li>小花</li>
        <li>小刚</li>
    </ul>
    <ol>
        <h1>有序列表</h1>
        <li>小明</li>
        <li>小花</li>
        <li>小刚</li>
    </ol>
    <dl>
        <h1>自定义列表</h1>
        <dt>中国</dt>
        <dd>北京</dd>
        <dd>台湾</dd>
        <dd>香港</dd>
    </dl>

    <table border="1px" cellpadding="0" cellspacing="0" width="100px" align="center">
        <!--
             cellpadding="0" cellspacing="0"取消内外边距 一般同时出现
            align属性设置表格所在页面的位置
            -->
        <tr>
            <td colspan="2">11</td>

            <td>13</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td rowspan="2">23</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>

        </tr>
        <!-- 
            colspan合并列
            rowspan合并行
            合并时注意要删除一个格子
         -->
    </table>

    <select>
        <option>--请选择你的城市--</option>
        <!-- 默认选项selected="selected" -->
        <option selected="selected">北京</option>
        <option>上海</option>
        <option>台湾</option>
        <option>广州</option>
        <option>香港</option>
    </select>
    <form>
        <input type="text" value="文本">
        <input type="password" value="密码">
        <input type="button" value="按钮">
        <input type="submit" value="登录">
        <textarea  cols="30" rows="10">文本域</textarea>
        <label for="c1">A</label>
        <input type="radio" name="yyds" id="c1">
        <label for="c2">B</label>
        <input type="radio" name="yyds" id="c2">
        <label for="c3">C</label>
        <input type="radio" name="yyds" id="c3">
        <h5>复选框</h5>
        <input type="checkbox" name="zz66">
        <input type="checkbox" name="zz66">
        <input type="checkbox" name="zz66">

        <button type="button">简单的按钮</button>
        <button type="submit">提交的按钮</button>

        <!-- 
            name将单选关联起来只能选一个 
            for id可实现点文字也能点上按钮 
        -->
        <!-- 
            type="button", "submit" - 定义按钮上的显示的文本
            type="text", "password"- 定义输入字段的初始值
         -->
    </form>
    <!-- 简单的搜索引擎实现 -->
    <form action="https://www.baidu.com/s?">
        <!-- 
            https协议
            www.baidu.com域名
            /s接口
            wd=...
            输入的text内容赋给name加到/s？后面实现简单搜索
        -->
        <input type="text" name="wd">
        <input type="submit" value="搜索">
    </form>
</body>

</html>

小天才阿展
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
圣诞贺卡-前端三件套实现.html
12-20
资源介绍： 圣诞贺卡—前端三件套实现.html 是一个包含前端三件套（HTML、CSS、JavaScript...学习前端技术：通过该资源，开发者可以学习如何使用HTML、CSS、JavaScript制作圣诞贺卡，掌握前端技术的基本应用。 制作圣诞
开发类IT网站-前端源码文件-HTML.zip
02-29
代码的清晰结构和详尽注释，也使得即使是初学者也能快速掌握前端开发的核心技术。无论是面对课程设计、毕业设计的挑战，还是希望在专业领域展现自我，这份源代码文件都能成为您的得力伙伴。它的高效、实用和易用性，...
langlangDental::man_health_worker: HTML5_CSS3基础学习项目 - 朗朗口腔
08-04
熟练掌握常规属性，CSS3 选择器，定位 position，浮动 float，弹性布局 flex，过渡，圆角，阴影，以及 CSS3 新特性属性等； 应用学习：vscode，phpstudy，photoshop，ftp，koala sass 预编辑等； 学习成效：读懂布局...
Web前端开发技术-认识JQuery.pptx
07-07
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 1.什么是jQuery 认识jQuery 1.什么是jQuery 认识jQuery 什么是jQuery jQuery的特点： ...
Web前端实习报告-.docx
12-25
1实习背景 实习目的 了解软件开发的各种模式，开发流程，以及各种形式的建模 详细学习敏捷开发的各个流程，并通过实习来体会敏捷开发所带来的效率 掌握HTML5、CSS、JAVASCRIPT等技术 实习起止时间 开始时间：2015年...
【前端】HTML5基础
Sig的博客
06-15 496
详细介绍HTML5基础
HTML5的未来：掌握最新技术，打造炫酷网页体验
仰望苍穹
06-15 636
HTML5不仅为网页开发者提供了丰富的工具，还极大地提升了网页的交互性和用户体验。通过掌握上述技术，结合响应式设计和多媒体支持，开发者可以创造出更加炫酷的网页体验。随着技术的不断进步，HTML5将继续成为未来网页开发的基石。码克疯v1 | 技术界的疯狂探索者 | 在代码的宇宙中，我是那颗永不满足的探索星。
HTML5拖放（Drag and Drop）全面指南：让网页互动起来
艾恩小灰灰的博客
06-06 825
HTML5 引入了许多令人兴奋的新特性，其中之一便是原生支持的拖放（Drag and Drop）功能，它极大地丰富了网页的交互体验，允许用户直接在页面上通过鼠标操作来移动元素。本文将深入浅出地介绍如何在你的网页中实现拖放功能，包括基本概念、API使用、事件处理以及代码示例。
HTML5应用程序缓存：构建离线可用的Web应用
艾恩小灰灰的博客
06-15 311
HTML5应用程序缓存（Application Cache）是一种让Web应用在用户浏览器中存储文件（如HTML、CSS、JavaScript、图片等）的技术，使得应用在离线状态下也能访问这些资源。它通过一个manifest文件来指定需要缓存的资源列表。
HTML5表单元素：重塑数据收集的艺术
艾恩小灰灰的博客
06-08 419
HTML5表单元素和属性的引入，不仅简化了前端开发者的代码，更重要的是，它们为用户提供了更加友好和直观的交互体验。从自动验证到动态反馈，从自动完成到无障碍支持，HTML5表单功能的提升为现代Web应用设计奠定了坚实的基础。作为开发者，掌握并有效利用这些特性，将大大提升表单的数据收集效率和用户满意度。随着Web技术的不断发展，探索和实践这些新特性，将使我们的网页应用更加先进和富有竞争力。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 366
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 522
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 247
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 325
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
快速压缩前端项目
最新发布
lyd的博客
06-15 174
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
web前端拖拽工具：探索其复杂性、困惑度与爆发度
liyrbtqe_66w的博客
06-12 278
综上所述，Web前端拖拽工具虽然带来了便捷和效率，但同时也伴随着一定的复杂性、困惑度和挑战。对于开发者来说，深入了解拖拽工具的技术原理和应用场景，掌握其使用方法和优化技巧，是提升开发效率和降低项目风险的关键所在。然而，在实际项目中，由于项目需求、技术栈以及团队协作等多种因素的影响，开发者可能会遇到各种复杂的问题和挑战。然而，随着功能的增多和复杂化，开发者在使用拖拽工具时可能会遇到一些困惑和挑战。同时，随着Web组件化、模块化等趋势的普及，拖拽工具也可能会朝着更加标准化、可复用的方向发展。
vue基础P7-17
weixin_43883584的博客
06-09 581
{{xxxx}}用在标签体中，也就是<>{{xxx}}</>xxx是js表达式，有返回值，如num+1、Date.now()。不是js代码。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1248
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
使用【AbortController】终止请求
Web人
06-10 340
是一个 Web API，用于终止一个或多个 Web 请求。当你使用fetchAPI 发送异步请求时，你可能需要在某些情况下主动终止这些请求。使用可以实现这一功能。
学习前端第一个阶段html项目的复盘回顾目标
07-02
### 回答1： 学习前端的第一个阶段是学习HTML，而复盘回顾则是对所学知识的总结和反思。那么，学习HTML的复盘回顾目标可以包括以下几个方面。 首先，复盘回顾的目标是巩固和加深对HTML的理解。在学习HTML的过程中，我们通过了解HTML的语法规则、标签和属性等，掌握了如何创建网页的结构和内容。通过复盘回顾，可以巩固这些知识点，提高对HTML的理解和应用能力。 其次，复盘回顾的目标是发现和纠正自己在学习HTML过程中存在的问题和不足之处。可能在学习HTML的过程中，我们遇到了某些困难，或者对某些知识点理解不够透彻，或者在实践中出现了一些错误。通过复盘回顾，可以仔细检查自己的学习过程，找出问题所在，从而有针对性地进行纠正和改进。 另外，复盘回顾的目标是提升自己的实践能力。学习HTML不仅是理论知识的学习，更重要的是能够将所学知识应用到实际项目中。通过复盘回顾，可以回顾自己在实践中的表现，发现自己在实践中的不足之处，并通过实践的经验不断提升自己的实践能力。 最后，复盘回顾的目标还可以包括对学习HTML的感悟和未来的规划。通过复盘回顾，可以总结自己在学习HTML过程中的体会和收获，为以后的学习和发展做好规划。同时，也可以思考并规划下一个阶段的学习目标和计划，为之后的学习打下坚实的基础。 ### 回答2： 学习前端第一个阶段的HTML项目的复盘回顾目标主要包括以下几个方面。 首先，目标是回顾并巩固HTML的基本知识和技能。在这个阶段，我学习了HTML的基本标签、元素和属性的用法，以及如何创建网页的结构和布局。通过实际项目的练习，我巩固了这些知识，提高了对HTML的熟练程度。 其次，目标是学会使用常用的HTML标签和元素来构建网页内容。在项目中，我学习了如何使用标题、段落、链接、图片、表格等标签和元素来创建丰富多样的网页内容。我学会了使用这些标签和元素实现文本、图片和表格的显示和排版，同时也学会了如何添加链接和导航等功能。 另外，目标是了解并掌握HTML的语义化。在项目中，我学习了如何正确选择和使用HTML标签和元素，以达到更好的语义化效果。我了解到使用适当的标签能够提高网页的可读性和可访问性，对搜索引擎优化也有一定的帮助。 最后，目标是培养自我实践和解决问题的能力。在项目中，我遇到了一些技术问题和困难，但通过查找文档、搜索和尝试，我成功地解决了这些问题。这个过程提高了我自主学习和解决问题的能力，也为接下来的学习和项目打下了坚实的基础。 总的来说，学习前端第一个阶段的HTML项目的复盘回顾目标是回顾并巩固HTML的基本知识和技能，学会使用常用的HTML标签和元素，了解并掌握HTML的语义化，以及培养自我实践和解决问题的能力。通过这个项目的学习，我对HTML有了更深的理解和掌握，为接下来的学习打下了坚实的基础。 ### 回答3： 学习前端的第一个阶段，主要是学习HTML的基础知识和技能。在完成第一个HTML项目后，进行复盘回顾是为了总结学习经验并确定进一步的目标。 首先，复盘回顾的目标是回顾项目的整体结构和设计，并评估自己对HTML基础知识的掌握程度。通过回顾项目，可以了解自己在项目中的表现，发现并改正可能存在的问题，并提升项目的整体质量。同时，回顾还可以帮助我们深入了解HTML的各种标签和属性的使用方法，以及它们之间的关系和作用。 其次，复盘回顾的目标是梳理学习过程中遇到的困难和问题。学习HTML的过程中，可能会遇到一些难以理解或掌握的概念和技术，或者在项目中遇到了一些难以解决的问题。通过回顾这些困难和问题，可以找到学习的瓶颈和不足之处，然后有针对性地进行学习和提升。 最后，复盘回顾的目标是制定下一阶段学习的目标和计划。通过回顾项目，我们可以更好地了解自己在前端学习的过程中的进步和不足，并且确定下一个阶段需要学习和提升的重点。在制定学习目标和计划时，我们可以考虑自己的兴趣和职业发展方向，并选择相应的学习资源和实践项目。 总而言之，学习前端的第一个阶段完成一个HTML项目后，进行复盘回顾的目标是总结、评估和改进学习过程和成果，并制定下一阶段的学习目标和计划。通过不断的回顾和提升，我们可以逐渐成为一名优秀的前端开发者。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值