前端学习之路第一节----HTML-CSDN博客

HTML5是HTML的第五版，用于网页开发、小程序、混合应用、原生应用和游戏开发等。项目开发流程包括产品经理、UI设计、前端和后端开发以及测试。网页主要由HTML结构、CSS表现和JavaScript行为组成。常用编辑器有DW、Sublime、VSCode等，HTML标签如<h1>、、<a>等用于文本格式和交互。HTML5的发展涉及W3C和WHATWG等组织。

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

首先抛下5个问题？

什么是HTML5
HTML5能做什么
项目开发流程
网页的组成部分
HTML的发展历史

开始：回到问题

一：什么是HTML5

HTML5是HTML的第5个版本
HTML5是一门技术总称，可以简称为H5

二：HTML5能做什么

网页开发（用的最多的，只要是浏览器能看到的，都需要用到前端）
小程序，公众号（微信，支付宝，头条等好多都用前端语言进行开发）
Hybrid App(混合应用开发，手机应用例如，支付宝，淘宝等)
Native App(原生应用开发，例如React Native 等框架的开发）
桌面应用开发（电脑软件）
游戏开发（例如，微信小游戏，其实好多游戏都可以用前端语言进行编写）
后端开发（前端学到的nodejs可以实现后端的开发）

三：项目开发流程

产品经理：确定需求，产出PRD（Product Requirement Document 产品需求文档）、原型图
UI设计：根据产品设计效果，产出效果图、标注图（markman或sketch）
前端开发：根据效果图、需求转换成相关代码
后端开发：数据处理，产出接口文档
测试：性能测试、安全性测试等

四：网页的组成部分

HTML结构
CSS表现
Javascript行为

注：W3C制定了结构HTML和表现CSS的语法及标准、ECMA制定了JS行为标准

五：HTML5的发展历史

HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言
HTML5指的是HTML的第五次重大修改（第5个版本）(HTML5 是 W3C 与 WHATWG 合作的结果)
XHTML指可扩展超文本标签语言，XHTML 的目标是取代 HTML

XHTML与 HTML4.01几乎是相同的
XHTML是更严格更纯净的HTML版本

注：发展历史中的组织机构的认识

IETF：国际互联网工程任务组是一个公开性质的大型民间国际团体，汇集了与互联网架构和互联网顺利运作相关的网络设计者、运营者、投资人和研究人员，并欢迎所有对此行业感兴趣的人士参与
W3C：万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构
WHATWG：网页超文本应用技术工作小组，是一个以推动HTML5标准为目的而成立的组织，在2004年由Opera、Mozilla基金会和苹果这些浏览器厂商组成

接下来的大家需要看三遍消化已经实际操作：

一、编辑器的认识

二、HTML理论基础

三、HTML相关标签【重点】

一.编辑器的认识

前端开发中常用的编辑器：DW、sublime、webstrom、nodepad、Hbuilder X、Vscode
建立站点：为了规范资源
文件的命名规范

文件命名规则：用英文，不建议使用中文
名称全部用小写英文字母、数字、下划线_或者-的组合，其中不得包含汉字、空格和特殊字符
必须以英文字母开头，命名的时候最好使用语义化比较强的英文

二：HTML基础语法

第一种：常规标记/双标记 <标记属性1=“属性值1” 属性2=“属性值2”></标记>
第二种：空标记/单标记 <标记属性1=“属性值1” 属性2=“属性值2” />

三：HTML常见的标签

<h1></h1> 文本标题
段落标签
、 加粗标签
、 倾斜标签
<del></del> 、<s></s> 删除线
、 上标和下标
下划线
强制换行
<hr/> 水平线

九：HTML常用的标签

列表名称	无序列表	有序列表		自定义列表
标签名称	ul>li	ol>li		dl>dt+dd
属性使用	type	type	start	/
属性值	circle空心圆 \| disc实心圆 \| square方形	默认为1、a、A 、i、I	number	/

图片名称	img
标签属性	title	alt
属性值	鼠标悬停上去之后的提示信息	图片不显示之后的提示信息

路径的使用方法：绝对路径、相对路径

绝对路径：是指文件在硬盘上真正存在的路径
相对路径：是相对于自己的目标文件位置

同级找同级：当前文件与目标文件在同一目录下（直接书写目标文件的文件名+扩展名）
父级找子级：当前文件与目标文件所处的文件夹在同一目录下（文件夹名/目标文件全称+扩展名）
子级找父级：当前文件所处的文件夹和目标文件在同一目录下（../目标文件文件名+扩展名）

注：路径一些常见其他的情况

./ 表示当前目录，可以省略不写
../ 表示跳出当前文件夹，有几个文件夹可以写几次
.../ 错误写法

超链接标签名称

标签属性

href

title

target

属性值

路径

鼠标悬停上去之后的提示信息

规定在何处打开文档

target=“_self“ 默认值

target=“_blank“ 新窗口打开

标签名称	div	span
含义	没有具体含义，用来划分页面的区域	没有具体含义，存放一些文本内容

一些转义字符

&lt：小于号
&gt：大于号
&amp：&
&quot：引号
&reg：已注册
&copy：版权
&nbsp；不换行空格

表单常用标签

<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果