HTML知识点概括——一篇文章带你完全掌握HTML
HTML知识点概括
前端三件套分别是HTML3，CSS5，JavaScript
稍微介绍一下W3C标准：
- 结构化标准语言（HTML）
- 表现标准语言（CSS）
- 行为标准（DOM，JavaScript）
HTML是超文本标记语言，负责网页最基本信息的构造
HTML的优势：
- 市场需求量
- 跨平台使用
- 浏览器支持
我们使用的工具依旧选择老朋友：
- IDEA
因为内容过多，大部分内容可能都在代码中详细介绍，请仔细阅读代码
HTML基本框架
下面我们稍微介绍以下HTML的基本框架：
我的第一个网页
Hello，World！
其中<>这种成对出现的标签，我们称为开放标签和闭合标签
其中<>这种单个出现的标签，我们称为单个标签
块元素和行内元素
我们简单介绍一下块元素和行内元素：
- 块元素：
- 无论内容多少，该元素独占一行
- 例如：p，h1，h2
- 行内元素：
- 内容撑开宽度，当左右都是行内元素时，可以排在一行
- 例如：a，strong，em
页面结构分析
下面给出页面结构分析：
| 元素名 | 描述 |
|---|---|
| header | 标记头部区域的内容 |
| footer | 标记脚部区域的内容 |
| section | Web页面中一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用 |
| nav | 导航类辅导内容 |
代码展示：
页面结构分析
网页基本标签
网页基本信息：
| 代码 | 说明 |
|---|---|
| 注释；用来注解内容，不被编译器读取 | |
| 大标题；分为h1~h6 | |
| 分段符号； | |
| 换行符号; | |
| 水平线符号; | |
| 加粗符号； | |
| 斜体符号； | |
| &~~~~； | 特殊符号格式； |
代码展示：
网页基本标签
一级标签
二级标签
三级标签
四级标签
五级标签
六级标签
1
2
3
1
2
3
-----------------
1
2
3
字体样式标签
粗体：我是粗体
斜体：我是斜体
空格： 空格
大于：>
小于：<
网页基本标签-图片标签
代码展示：
图片标签
网页基本标签-链接标签
链接类标签分为三种：
- 1.超链接：
- 2.锚链接：
- 3.功能性链接：
代码展示：
链接标签
Top
点击返回顶部
点击与邮箱交互
网页基本标签-列表标签
列表的定义：
- 列表就是信息资源的一种展示形式
列表的分类：
- 有序列表
- ol是有序列表的框架标签
- li是有序列表的内容标签
- 无序列表
- ul是无序列表的框架标签
- li是无序列表的内容标签
- 自定义列表
- dl是自定义列表的框架标签
- dt是自定义列表的内容标题
- dd是自定义列表的内容标签
代码展示：
列表标签
- Java
- Python
- Web
- Java
- Python
- Web
- 我是小标题
- 我是列表1
- 我是列表2
网页基本标签-表格标签
使用表格的好处：
- 简单通用
- 结构稳定
表格的组成以及HTML中的格式：
- 表格标签：
- 单元格：由行列组成
- 行：
- 列：
- 跨行：rowspan=""
- 跨列：colspan=""
代码展示：
表格标签
1-1
2-1
2-2
2-3
2-4
3-1
3-2
3-3
网页基本标签-视频和音频
视频元素：
音频元素：
代码展示：
媒体标签
网页基本标签-表单
表单作用：
- 用于收集用户信息
表单组成：
- 表单域
- 表单控件
- 提示信息
表单域
表单域是一个包含表单元素的区域
表单域格式：
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指出接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 名称 | 用于指定表单的名称，用来区分同一页面的多个表单 |
表单挂件
最常用的表单挂件：
我们再来介绍以下input的属性包括哪些：
| 属性值 | 说明 |
|---|---|
| button | 定义可点击按钮（配合js使用） |
| checkbox | 定义复选框 |
| file | 定义输入字段和浏览按钮，负责上传文件 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，输入内容不可见 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，点击后重置表单内所有内容 |
| submit | 定义提交按钮，点击后将数据发送至后台 |
| text | 定义单行输入的字段，默认20字节 |
代码展示：
表单标签
label标记
label标记可以连接其他元素（常用于与button，checkbox，radio等点击性标签使用）
label格式：
代码展示：
label标签
select下拉表单
select可以单独形成下拉表单
select格式：
代码展示：
select标签
请选择性别：
textare文本域
textare负责创建一大片文本域，用于大规模的书写
textare格式：
代码展示：
textare
HTML综合练习
下面给出案例图，请依照案例图写出相关代码：
代码展示：
综合案例
青春不常在，抓紧谈恋爱
姓名:
生日：
所在地区:
婚姻状况
未婚 已婚 离婚
学历：
喜欢的类型:
可爱的 妖娆的 放荡的 都喜欢
自我介绍：
自我介绍
我同意注册条款并遵守
我是会员，立即登录
我承诺
- 年满18，单身
- 抱着严肃的态度
- 真诚寻找另一半
结束语
好的，关于HTML的介绍就到这里了，恭喜你迈进了前端的第一步！