前端学习篇——HTML5的复习

原创于 2025-01-24 20:59:02 发布 · 693 阅读

25 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端学习

一、引言

各位UU们晚上好呀！大家今天过得怎么样呢？在今天下午我进行了HTML5的复习（爬虫不会漏下滴，待会儿再看啦~）正如我在上篇所说，我是学习过HTML5的，在这里我把视频链接再附一次吧：前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员_哔哩哔哩_bilibili，同时下文举的例子也是来源于网课哦。今天主要是复习了一下我的纸质笔记和VS Code 上的代码，这里就不多说废话了，简单地过一下就行了

二、HTML5的复习

在正式开始前，这里我先简单说一下，HTML5入门是比较简单的，在菜鸟教程上看解析或者B站上找个视频就很快可以学完，所以感兴趣的uu可以去尝试一下呢

以下内容是基于VS Code编辑器进行说明的，可能和其他编辑器不一样，所以请读者多加注意，同时HTML5作为超文本标签语言，语法是真的挺简单的，可能就是需要记一些英文单词吧哈哈哈哈，在这里我就很简单地列举下就行了，同时一些标签的属性我也不介绍了，希望读者自行去了解加深印象。在列举完后就是附上两个综合案例，大家感兴趣的也可以自行敲一下代码哦！

1. Day1

(1) HTML骨架（快捷键：! + Tab）

(2) 标题标签（h1---h6）

(3) 段落标签（p）

(4) 换行（br）

(5) 水平线标签（hr）

(6) 文本格式化标签（这里是展示的常用的，其实还有一种标记方法，这里希望读者自行查找）

1) 加粗（strong）

2) 倾斜（em）

3) 下划线（ins）

4) 删除线（del）

(7) 图像（img）

(8) 音频（audio）

(9) 视频（video）

(10) 超链接（a href）

附上一个综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简介</title>
</head>
<body>
    <h1>尤雨溪</h1>
    <hr>
    <p>尤雨溪，前端框架<a href="./第一天项目2.html" target="_blank">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，
        独立开源开发者。
        曾就职于Google Creative Labs和Meteor Development Group。
        由于工作中大量接触开源的项目<a href="">JavaScript</a>，
        最后自己也走上了开源之路，
        现全职开发和维护<a href="./第一天项目2.html" target="_blank">Vue.js</a>。</p>
    <img src="./16-综合案例一/photo.jpg" alt="尤雨溪的照片" title="尤雨溪">
    <h2>学习经历</h2>
    <p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。</p>
    <h2>主要成就</h2>
    <p>尤雨溪<strong>大学专业并非是计算机专业</strong>
        ，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，
    <ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯 </ins> </p>
    <p>2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p>
    <h2>社会任职</h2>
    <p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>
    <!-- alt+z表示折行 -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue简介</title>
</head>

<body>
    <h1>Vue.js</h1>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue
        的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>其作者为<a href="./第一天项目1.html" target="_blank">尤雨溪</a></p>
    <h2>主要功能</h2>
    <p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue
        完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p>
    <p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
    <p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。</p>
    <video src="./media/vue.mp4" controls></video>
</body>
</html>

2.Day2

(1) 列表

1) 无序列表（ul、li）

2) 有序列表（ol、li）

3) 定义列表（dl、dd、dt）

(2) 表格（table、tr、th、td）

(3) 表单（input）

(4) 单选（input type="radio"）

(5) 上传（input type="file"）

(6) 多选（input type="checkbox"）

(7) 下拉菜单（select、option）

(8) 文本域（textarea）

(9) label标签（label）

(10) 按钮（button）

3. div 和 span

4. 空格（ ）

附上一个综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册信息</title>
</head>
<body>
    <!-- 提示文本用label标签去放 -->
    <form action="">
    <h1>注册信息</h1>
    <h2>个人信息</h2>
    <label>姓名：</label><input type="text" placeholder="请输入真实姓名">
    <br><br>
    <label>密码：</label><input type="password" placeholder="请输入密码">
    <br><br>
    <label>确认密码：</label><input type="password" placeholder="请确认输入密码">
    <br><br>
    <label>性别：</label><label><input type="radio" name="gnder">男</label>
    <label><input type="radio" name="gnder" checked>女</label>
    <br><br>
    <label>居住城市：</label>
    <select>
        <option selected>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>武汉</option>
    </select>
    <br><br>
    <h2>教育经历</h2>
    <label>最高学历：</label><select>
        <option selected>博士</option>
        <option>硕士</option>
        <option>本科</option>
        <option>大专</option>
    </select>
    <br><br>
    <label>学校名称：</label><input type="text">
    <br><br>
    <label>所学专业：</label><input type="text">
    <br><br>
    <label>在校时间：</label>
    <select>
        <option selected>2015</option>
        <option>2016</option>
        <option>2017</option>
        <option>2018</option>
    </select>
    --
    <select>
        <option selected>2019</option>
        <option>2020</option>
        <option>2021</option>
        <option>2022</option>
    </select>
    <br><br>
    <h2>工作经历</h2>
    <label>公司名称：</label><input type="text">
    <br><br>
    <label>工作描述：</label>
    <br>
    <textarea></textarea>
    <br><br>
    <input type="checkbox">已阅读并同意以下协议：
    <br><br>
    <ul>
        <li><a href="#">《用户服务协议》</a> </li>
        <li><a href="#">《隐私政策》</a></li>
    </ul>
    <br><br>
    <div>
        <button>免费注册</button>
        <button type="reset">隐私政策</button>
    </div>
</form>
</body>
</html>