当前位置：首页 > news >正文

一、HTML学习（基础知识学习）

news 2024/11/15 0:18:59

文章目录

一、HTML基础
- 1 简介
- 2、HTML基本结构
- 3、常用的HTML标签
- 4、实际应用
二、HTML进阶
- 1、表单元素
- 2、实践：在简历中添加一个联系表单
三、HTML高级特性
- 1、语义化标签
- 2、多媒体元素
- 3、实践：优化简历页面
四、结合CSS美化页面
- 1、HTML语义化标签
- 2、实践：创建一个带有语义化标签的简历页面
五、多媒体元素与表单验证
- 1、多媒体元素
- 2、表单验证
- 3、实践验证
六、高级特性与交互
- 1、高级表单元素
- 2、交互元素
- 3、实践：添加高级表单元素和交互

一、HTML基础

1 简介

HTML是用于创建网页的标准标记语言。它使用标签（tags）来定义网页的结构和内容。

2、HTML基本结构

一个基本的HTML文档通常包含以下结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的简历</title>
</head>
<body><h1>我的简历</h1><p>欢迎来到我的简历页面！</p>
</body>
</html>

（1）<!DOCTYPE html>：声明文档类型为HTML5
（2）<html>：HTML文档的根元素
（3）<head>：包含文档的元数据（meta-data），如字符集、标题等。
（4）<body>：包含网页的主要内容
问：什么是字符集？
答：也被叫做字符编码，是一种标准，它定义了如何将字符映射到计算机可以理解的数字。它决定了网页中文本内容的显示是否正确。特别是对于不同语言和符号的支持。
常见的字符集包括：
ASCII：仅支持英语字母，数字和一些符号，最多支持128个字符。
ISO-8859-1：也叫做Latin-1，支持西欧的语言字符
UTF-8：是一种Unicode编码方案，能支持几乎所有语言的字符，包括中文等。是现代网页最长用的字符集。

3、常用的HTML标签

<h1>到<h6>：标题标签，<h1>是最大的标题，<h6>是最小的标题。
<p>：段落标签
<a>：超链接标签，用于创建连接
<img>：图像标签，用于插入图片
<ul>和<li>：无序列表标签
<ol>和<li>：有序列表标签
<div>：块级容器标签，用于分组内容
<span>：行内容器标签，用于分组行内内容。

4、实际应用

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charest="UTF-8"><meta name="viewport" cotent="width=device-width", initial-scale=1.0><title>我的简历</title>
</head>

这些代码一定不要手敲，上边短短几行，我已经敲错了很多个字母了，不知道大家有没有看出来。

<body><h1>张三的简历</h1><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28岁</p><p>联系方式：123-4567-8901</p><p>邮箱：zhangsan@example.com</p><h2>教育背景</h2><p>北京大学 - 计算机科学 - 2010-2014</p><h2>工作经历</h2><p>ABC公司 - 软件工程师 - 2014-2018</p><p>XYZ公司 - 高级软件工程师 - 2018-至今</p><h2>技能</h2><ul><li>HTML/CSS</li><li>JavaScript</li><li>Python</li><li>数据库管理</li></ul>
</body>
</html>

二、HTML进阶

1、表单元素

表单是HTML中用于收集用户输入的重要元素。常用的表单元素包括

<form>：表单容器
<input>：输入框，可以由多种类型（如text，passwor， email，submit等）。
<textarea>：多行文本输入框
<select>和<option>：下拉菜单
<button>：按钮

2、实践：在简历中添加一个联系表单

<h2>联系我</h2>
<form action="/submit-form" method="post"><label for="name">姓名</label><input type="text" id="name" name="name" required><br><br><label for="email">邮箱:</label><input type="email" id="email" name="email" required><br><br><label for="message">留言:</label><br><textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br><button type="submit">提交</button>
</form>

当点击提交按钮的时候，表单中的信息会被提交到/submit-form这个URL地址中。如果我们当前的网站地址为：
http://example.com，那么表单数据将会被提交到http://example.com/submit-form
如果action的属性不是相对路径，而是绝对路径，如http://example.com/submit-form123，那么表单就会将数据提交到这个具体地址中。
一般情况下，form表单会和Flask后端一个使用，达到数据传输的目的，后端可以这样写：

from flask import Flask, render_template, request, redirect, url_forapp = Flask(__name__)# 路由：展示表单页面
@app.route('/')
def index():return render_template('demo2.html')  # 渲染 HTML 表单页面# 路由：处理表单提交
@app.route('/submit-form', methods=['POST'])
def submit_form():# 获取用户提交的表单数据name = request.form.get('name')email = request.form.get('email')message = request.form.get('message')# 你可以在这里处理表单数据（如保存到数据库、发送邮件等）# 此处我们暂时只是打印数据print(f"Name: {name}, Email: {email}, Message: {message}")# 表单提交成功后，重定向到一个成功页面# return render_template('success.html', name=name)return "success"# 路由：展示成功页面
@app.route('/success')
def success():return render_template('success.html')# 启动 Flask 应用
if __name__ == '__main__':app.run(debug=True, )

这样，就搭建了一个服务器网站。【扯远了，回归正题！】

三、HTML高级特性

1、语义化标签

HTML5引入了一些语义化标签，用于更好的描述网页的结构。常用的语义化标签包括：

（1）<header>：页眉
（2）<footer>：页脚
（3）nav：导航栏
（3）article：文章
（3）section：章节
（3）aside：侧边栏

2、多媒体元素

（1）<audio>：音频播放器
（2）<video>：视频播放器
（3）<source>：用于指定多媒体文件的源

3、实践：优化简历页面

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的简历</title>
</head>
<body><header><h1>张三的简历</h1></header><section><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28岁</p><p>联系方式：123-4567-8901</p><p>邮箱：zhangsan@example.com</p></section><section><h2>教育背景</h2><p>北京大学 - 计算机科学 - 2010-2014</p></section><section><h2>工作经历</h2><p>ABC公司 - 软件工程师 - 2014-2018</p><p>XYZ公司 - 高级软件工程师 - 2018-至今</p></section><section><h2>技能</h2><ul><li>HTML/CSS</li><li>JavaScript</li><li>Python</li><li>数据库管理</li></ul></section><section><h2>联系我</h2><form action="/submit-form" method="post"><label for="name">姓名:</label><input type="text" id="name" name="name" required><br><br><label for="email">邮箱:</label><input type="email" id="email" name="email" required><br><br><label for="message">留言:</label><br><textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br><button type="submit">提交</button></form></section><footer><p>© 2023 张三. 保留所有权利。</p></footer>
</body>
</html>

四、结合CSS美化页面

1、HTML语义化标签

（1）<header>：页眉
（1）<footer>：页脚
（3）<main>: 主要内容区域。

2、实践：创建一个带有语义化标签的简历页面

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的简历</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;}header {background-color: #333;color: #fff;padding: 10px 0;text-align: center;}section {padding: 20px;background-color: #fff;margin: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}footer {background-color: #333;color: #fff;text-align: center;padding: 10px 0;position: fixed;width: 100%;bottom: 0;}</style>
</head>
<body><header><h1>张三的简历</h1></header><main><section><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28岁</p><p>联系方式：123-4567-8901</p><p>邮箱：zhangsan@example.com</p></section><section><h2>教育背景</h2><p>北京大学 - 计算机科学 - 2010-2014</p></section><section><h2>工作经历</h2><p>ABC公司 - 软件工程师 - 2014-2018</p><p>XYZ公司 - 高级软件工程师 - 2018-至今</p></section><section><h2>技能</h2><ul><li>HTML/CSS</li><li>JavaScript</li><li>Python</li><li>数据库管理</li></ul></section><section><h2>联系我</h2><form action="/submit-form" method="post"><label for="name">姓名:</label><input type="text" id="name" name="name" required><br><br><label for="email">邮箱:</label><input type="email" id="email" name="email" required><br><br><label for="message">留言:</label><br><textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br><button type="submit">提交</button></form></section></main><footer><p>© 2023 张三. 保留所有权利。</p></footer>
</body>
</html>

五、多媒体元素与表单验证

1、多媒体元素

（1）<audio>：音频播放器
（1）<video>：视频播放器
（3）<source>: 用于指定多媒体文件的源

2、表单验证

HTML5提供了一些内置的表单验证功能，如required、pattern、min、max等。

3、实践验证

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的简历</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;}header {background-color: #138;color: #fff;padding: 10px 0;text-align: center;}section {padding: 20px;background-color: #fff;margin: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}footer {position: relative;  /* 或使用 position: static; */background-color: #138;color: #fff;text-align: center;padding: 10px 0;width: 100%;bottom: 0;}.container {display: flex; /* 使用 Flexbox 布局，确保子元素横向排列 */align-items: flex-start; /* 确保元素顶部对齐 */}.container p {flex: 1; /* 让 <p> 元素占据剩余空间 */margin-right: 20px; /* 给 <p> 和 <video> 之间添加间距 */max-width: 700px; /* 限制 <p> 元素的最大宽度为 700px *//* 设置文本格式 */text-align: justify; /* 两段对齐 */text-indent: 2em; /* 首行缩进两个字符 */line-height: 20pt; /* 设置固定行间距为 20磅 *//* 设置字体：中文使用宋体，英文使用 Times New Roman */font-family: "SimSun", "Times New Roman", serif;font-size: 20px;}.container video {height: auto; /* 保持视频的高度自动适应宽度 */width: 50%;max-width: 800px; /* 限制视频最大宽度为 600px */display: block; /* 让视频在容器中显示为块级元素 */margin: 20px auto; /* 自动水平居中，垂直添加 20px 的间距 */}</style>
</head>
<body><header><h1>张三的简历</h1></header><main><section><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28岁</p><p>联系方式：123-4567-8901</p><p>邮箱：zhangsan@example.com</p></section><section><h2>教育背景</h2><p>北京大学 - 计算机科学 - 2010-2014</p></section><section><h2>工作经历</h2><p>ABC公司 - 软件工程师 - 2014-2018</p><p>XYZ公司 - 高级软件工程师 - 2018-至今</p></section><section><h2>技能</h2><ul><li>HTML/CSS</li><li>JavaScript</li><li>Python</li><li>数据库管理</li></ul></section><section><h2>自我介绍视频</h2><div class="container"><p>这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍这是一段关于视频的自我介绍一段关于视频的自我介绍这是一段关于视频的自我介绍</p><video controls><source src="123321.mp4" type="video/mp4">您的浏览器不支持视频标签。</video></div></section><section><h2>联系我</h2><form action="/submit-form" method="post"><label for="name">姓名:</label><input type="text" id="name" name="name" required pattern="[A-Za-z\s]{2,}" title="请输入有效的姓名"><br><br><label for="email">邮箱:</label><input type="email" id="email" name="email" required><br><br><label for="message">留言:</label><br><textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br><button type="submit">提交</button></form></section></main><footer><p>© 2023 张三. 保留所有权利。</p></footer></body>
</html>

这是一个非常不错的HTML简历模板。

六、高级特性与交互

1、高级表单元素

（1）<datalist>：提供输入建议
（2）<progress>：进度条
（3）<meter>: 度量条

2、交互元素

（1）<details>和<summary>：折叠内容。
（2）<dialog>: 对话框

3、实践：添加高级表单元素和交互

<style>dialog {width: 50%;border: none;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 5px;}dialog::backdrop {background: rgba(0, 0, 0, 0.5);}
</style><section><h2>技能水平</h2><label for="html-skill">HTML/CSS:</label><meter id="html-skill" value="0.9">90%</meter><br><label for="js-skill">JavaScript:</label><meter id="js-skill" value="0.8">80%</meter><br><label for="python-skill">Python:</label><meter id="python-skill" value="0.7">70%</meter><br></section><section><h2>项目进度</h2><label for="project-progress">项目进度:</label><progress id="project-progress" value="70" max="100">70%</progress></section><section><h2>常见问题</h2><details><summary>如何联系我？</summary><p>您可以通过邮箱 zhangsan@example.com 或电话 123-4567-8901 联系我。</p></details><details><summary>我的技能水平如何？</summary><p>我在HTML/CSS、JavaScript和Python方面有丰富的经验，并且持续学习和提升。</p></details></section>