Day21.Web前端简介一-优快云博客

本文链接：https://blog.youkuaiyun.com/Tomandjava/article/details/115396209

本文介绍了Web前端的基本概念，包括HTML的历史发展及HTML5的新特性。HTML5引入了原生多媒体支持、可编程内容、语义化标签等功能，极大提升了用户体验。此外，文章还详细列举了各种HTML标签的用途，如结构、文本、列表、链接、图像、表格、表单、音视频等，展示了Web前端开发的基础内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web前端简介一

文章目录

Web前端简介一
前言
一. HTML简史
二. HTML5的新特性
三. 使用标签承载内容
总结

前言

前端就是网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。而且网页以后肯定是一种趋势，这在几年前就有这样的想法，以后肯定软件会减少，直接在网页上会更方便，就像现在的小程序一样。

一. HTML简史

1991年10月：一个非正式CERN（欧洲核子研究中心）文件首次公开18个HTML标签，这个文件的作者是物理学家蒂姆·伯纳斯-李，因此他是万维网的发明者，也是万维网联盟的主席。
1995年11月：HTML 2.0标准发布（RFC 1866）。
1997年1月：HTML 3.2作为W3C推荐标准发布。
1997年12月：HTML 4.0作为W3C推荐标准发布。
1999年12月：HTML4.01作为W3C推荐标准发布。
2008年1月：HTML5由W3C作为工作草案发布。
2011年5月：W3C将HTML5推进至“最终征求”（Last Call）阶段。
2012年12月：W3C指定HTML5作为“候选推荐”阶段。
2014年10月：HTML5作为稳定W3C推荐标准发布，这意味着HTML5的标准化已经完成。

二. HTML5的新特性

引入原生多媒体支持（audio和video标签）
引入可编程内容（canvas标签）
引入语义Web（article、aside、details、figure、footer、header、nav、section、summary等标签）
引入新的表单控件（日历、邮箱、搜索、滑条等）
引入对离线存储更好的支持（localStorage和sessionStorage）
引入对定位、拖放、WebSocket、后台任务等的支持

三. 使用标签承载内容

3.1 结构

html
- head
  - title
  - meta
- body

3.2 文本

标题（heading）和段落（paragraph）
- h1 ~ h6
- p
上标（superscript）和下标（subscript）
- sup
- sub
空白（白色空间折叠）
折行（break）和水平标尺（horizontal ruler）
- br
- hr
语义化标签
- 加粗和强调 - strong
- 引用 - blockquote
- 缩写词和首字母缩写词 - abbr / acronym
- 引文 - cite
- 所有者联系信息 - address
- 内容的修改 - ins / del

3.3 列表（list）

有序列表（ordered list）- ol / li
无序列表（unordered list）- ul / li
定义列表（definition list）- dl / dt / dd

3.4 链接（anchor）

页面链接
锚链接
功能链接

3.5 图像（image）

图像存储位置
图像及其宽高
选择正确的图像格式
- JPEG
- GIF
- PNG
矢量图
语义化标签 - figure / figcaption

3.6 表格（table）

基本的表格结构 - table / tr / td / th
表格的标题 - caption
跨行和跨列 - rowspan属性 / colspan属性
长表格 - thead / tbody / tfoot

3.7 表单（form）

重要属性 - action / method / enctype
表单控件（input）- type属性
- 文本框 - text / 密码框 - password / 数字框 - number
- 邮箱 - email / 电话 - tel / 日期 - date / 滑条 - range / URL - url / 搜索 - search
- 单选按钮 - radio / 复选按钮 - checkbox
- 文件上传 - file / 隐藏域 - hidden
- 提交按钮 - submit / 图像按钮 - image / 重置按钮 - reset
下拉列表 - select / option
文本域（多行文本）- textarea
组合表单元素 - fieldset / legend

3.8 音视频（audio / video）

视频格式和播放器
视频托管服务
添加视频的准备工作
video标签和属性 - autoplay / controls / loop / muted / preload / src
audio标签和属性 - autoplay / controls / loop / muted / preload / src / width / height / poster

3.9 窗口（frame）

框架集（过时，不建议使用） - frameset / frame
内嵌窗口 - iframe

3.10 其他

文档类型

<!doctype html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

注释

<!-- 这是一段注释，注释不能够嵌套 -->

属性
- id：唯一标识
- class：元素所属的类，用于区分不同的元素
- title：元素的额外信息（鼠标悬浮时会显示工具提示文本）
- tabindex：Tab键切换顺序
- contenteditable：元素是否可编辑
- draggable：元素是否可拖拽
块级元素 / 行级元素
字符实体（实体替换符）