【1】HTML5入门
HTML5入门
1.初识HTML
- HyperTextMarkupLanguage(超文本标记语言)
- 超文本包括:文字、图片、音频、视频、动画。
- HTML5的优势
- 世界知名浏览器厂商对HTML5的支持
- 市场的需求
- 跨平台
- W3C标准
- W3C
- 万维网联盟 (World Wide Web Consortium) 。
- 成立于1994年,Web领域最权威和最具影响力的国际中立性技术标准机构。
- https://www.w3.org/
- https://www.chinaw3c.org/
- W3C标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准语言(DOM、ECMAScript)
- W3C
- 常见IDE
- 记事本
- Dreamweaver
- IDEA
- WebStorm
- ……
- < body >、< /body>等成对的标签,分别叫做开放标签和闭合标签。
- 单独呈现的标签(空元素),如< hr/ >;意为用/来关闭空元素。
- html注释:< !–注释内容–>
2.网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
3.图像,超链接,网页布局
-
图像标签
-
链接标签
- href: 必填,表示要跳转到那个页面;
- target:表示窗口在哪里打开;
- _blank:在新标签中打开;
- _self: 在自己的网页中打开;
行内元素和块元素
-
块元素
- 无论内容多少,该元素独占一行。
- 行内元素:内容撑开宽度,左右都是行内元素的可以排在一行。
4.列表、表格、媒体元素
1.列表
什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。
列表的分类
- 无序列表
- 有序列表
- 自定义列表
2.表格
为什么使用表格:
- 简单通用
- 结构稳定
表格的基本结构:
- 单元格
- 行
- 列
- 跨行
- 跨列
3.媒体元素
视频和音频
- video
- audio
页面结构
元素名 | 描述 |
---|---|
header | 标题头部区域的内容(用于页面或者页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用 |
nav | 导航类辅助内容 |
iframe内联框架
- ifram标签,必须要有src属性即引用页面的地址。
- 给标签加上name属性后,可以做a标签的target属性,即在内联窗口中打开链接。
5.表单及表单应用
标签 | 说明 |
---|---|
input | 大部分表单元素对应的标签有text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text,可以提交用户名、密码等等 |
select | 下拉选择框 |
textarea | 文本域 |
- from标签,action属性为所提交的目的地址,method选择提交方式,可以选择使用post或者get方式提交。
- get效率高,但在url中可以看到提交的内容,不安全,不能提交大文件;
- post比较安全且可以提交大文件。
文本框和单选框
属性 | 说明 |
---|---|
type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text。 |
name | 指定表单元素的名称(提交时所对应的key)。 |
value | 元素的初始值,radio必须提供。 |
size | 指定表单元素的初始宽度。当type为text或者password时,以字符为单位;其他type以像素为单位。 |
maxlength | type为text或者password时,输入的最大字符数。 |
check | type为radio或者checkbox时,指定按钮是否被选中。 |
按钮和多选框
列表文本框和文件域
搜索框滑块和简单验证
表单的应用
属性 | 说明 |
---|---|
readonly | 只读,不可更改 |
disable | 禁用 |
hidden | 隐藏,虽然不可见但是会提交 |
id | 标识符,可以配合label的for属性增加鼠标的可用性 |
placehoder | text 文字域等输入框内的提示信息 |
required | 不能为空 |
patten | 正则表达式验证 |
6.表单初级验证
- 常用方式
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
HTML5快速入门完结🎉🎉🎉
深入学习,请参考:Web前端HTML5&CSS3初学者零基础入门全套完整版
__EOF__

本文作者:The1Yu
本文链接:https://www.cnblogs.com/The1Yu/p/15968758.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
本文链接:https://www.cnblogs.com/The1Yu/p/15968758.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!