2023年6月20日发(作者：)

WEB_HTML⽹页基本语法⽂章⽬录HTML介绍1. 什么是HTML?超⽂本标记语⾔ ( Hyper Text Markup Language )超⽂本包括 : ⽂字 , 图⽚ , ⾳频 , 视频 , 动画 ,…2. 发展历史HTML2.0 --> ⽂字 , 特别丑的⽂本框HTML 5 ---- > 动画 , 渲染…3. HTML的优势1. 所有的浏览器都⽀持2. 市场的需求—从C/S—>B/S架构3. 跨平台4. W3C标准1. 万维⽹联盟( World Wide Web Consortium )2. 三个标准1. 结构化标准—>HTML , xml等2. 表现标准—>CSS3. ⾏为标准 —> ( ECMA Script )5. ⽹页编辑⼯具1. 记事本2. Notpat++3. Hbuilder4. IDEA5. WebStorm6. VScode7. …HTML的基本结构Html注释 :Html的基本结构 : Hello,World!< title > 标签 : ⽹页的标题< meta > 标签 : 关键字标签(为什么我们可以在⽹上搜关键字就会出现相应的内容)gb2312 ----> 包含全部的中⽂字符utf-8 ---->包含了全世界所有地⽅的⽂字和符号⽹页的基本标签标题标签

⼀级标题

⼆级标题

三级标题

四级标题

五级标题

六级标题

段落标签标识⼀个段落,其中可以包含其他⾏标签

段落标签

晓看天⾊暮看云,⾏也思君,坐也思君

晓看天⾊暮看云,⾏也思君,坐也思君

晓看天⾊暮看云,⾏也思君,坐也思君

晓看天⾊暮看云,⾏也思君,坐也思君

晓看天⾊暮看云,⾏也思君,坐也思君

换⾏标签因为存在⾏标签,因此也就引出了换⾏标签

换⾏标签

晓看天⾊暮看云,⾏也思君,坐也思君晓看天⾊暮看云
⾏也思君
坐也思君
⽔平线标签

⽔平线标签

---

晓看天⾊暮看云,⾏也思君,坐也思君字体标签

字体字体样式

晓看天⾊暮看云,⾏也思君,坐也思君加粗后 : 晓看天⾊暮看云,⾏也思君,坐也思君斜体 : 晓看天⾊暮看云,⾏也思君,坐也思君特殊符号的表⽰

特殊符号

⼤于号 : >

⼩于号 : <

空格 : 你 好 | 你          好

引号 : ""

版权符号 : © 版权所有...

图像标签常见的图像格式 :jpgpngbmp 位图gif…图像标签 :链接标签超链接点击跳转 锚链接可以从⼀个地⽅跳到锚指定的地⽅,需要的东西: 1.标记(打锚点) 2.跳转(#锚点名称)锚链接标记点击跳转跳转到demo页标记三功能性链接发送邮件target属性target ⽬标跳转的⽹页打开⽅式_blank : 打开新的⽹页_self : 在本⽹页打开-->

打开第⼀个⽹页_在新⽹页中打开 打开第⼀个⽹页_在⾃⼰⽹页中打开

⾏内元素和块元素独占⼀⾏的标签 : 块标签ph1~h6只有⾃⼰那⼀部分 , 可以在⾏内定义多个的标签 : ⾏内标签astrongimgem开放标签<—>闭合标签

⾃闭合标签
列表⽆序列表ul,有序列表ol,⾃定义列表dl

⽆序列表

• java
• C/C++
• Linux
• Python

有序列表

1. java
2. C/C++
3. Linux
4. Python

⾃定义列表

Java

OOP

Annotation

Reflection

Python

数据分析

数据挖掘

...

给出⾃定义列表⽰例结果:表格为什么使⽤表格 ?简单通⽤结构稳定表格结构单元格⾏列HTML表格的⽰例:

1-1			1-2	1-3
2-1	2-2	2-3	2-4	2-5
	3-1	3-2	3-3	3-4
	4-1	4-2	4-3	4-4

表格⽰例结果:视频/⾳频思考 : 如何在⽹页上播放视频和⾳频 ?结论 : 应该有⼀个标签控制⾳频或者视频 .video , audio⽹页结构分析⼀般⽹页分为:1. 头部2. 导航3. 主体内容4. 底部

头部

放⽂章

代码

独⽴区域

.......iframe内联框架iframe 内联框架百度HTML标签图像标签超链接表单元素什么叫表单 ?常见的应⽤:登录 , 注册 …常见表单元素⽂本框 密码框 按钮 单选框 多选框 ⽂本域 下拉框 ⽂件域邮箱 ⽹址 数字 滑块 搜索框

注册

⽤户名 :

密码 :

确认密码 :

性别 男 ⼥ ⼈妖

爱好 看电影 听歌 打游戏 敲代码

---

⼀ ⼆ 三 美国 中国 印度 西安 重庆 新疆

⽂本内容

---

邮箱 :
url :
数字 :
滑块 : 搜索框 :

表单其他应⽤隐藏域 , 只读 , 禁⽤hidden : 隐藏域readonly : 只读disabled : 禁⽤思考?为什么要表单验证降低服务器压⼒保证数据的安全性表单验证需要哪些东西 ?1. 提⽰信息placeholder-->默认提⽰信息

⽤户名 :

2. ⾮空判断 (必填项)required-->必须填写此项

密码 :

3. 正则表达式验证pattern-->正则表达式⾃定义验证 :

2023年6月20日发(作者：)

WEB_HTML⽹页基本语法⽂章⽬录HTML介绍1. 什么是HTML?超⽂本标记语⾔ ( Hyper Text Markup Language )超⽂本包括 : ⽂字 , 图⽚ , ⾳频 , 视频 , 动画 ,…2. 发展历史HTML2.0 --> ⽂字 , 特别丑的⽂本框HTML 5 ---- > 动画 , 渲染…3. HTML的优势1. 所有的浏览器都⽀持2. 市场的需求—从C/S—>B/S架构3. 跨平台4. W3C标准1. 万维⽹联盟( World Wide Web Consortium )2. 三个标准1. 结构化标准—>HTML , xml等2. 表现标准—>CSS3. ⾏为标准 —> ( ECMA Script )5. ⽹页编辑⼯具1. 记事本2. Notpat++3. Hbuilder4. IDEA5. WebStorm6. VScode7. …HTML的基本结构Html注释 :Html的基本结构 : Hello,World!< title > 标签 : ⽹页的标题< meta > 标签 : 关键字标签(为什么我们可以在⽹上搜关键字就会出现相应的内容)gb2312 ----> 包含全部的中⽂字符utf-8 ---->包含了全世界所有地⽅的⽂字和符号⽹页的基本标签标题标签

⼀级标题

⼆级标题

三级标题

四级标题

五级标题

六级标题

段落标签标识⼀个段落,其中可以包含其他⾏标签

段落标签

晓看天⾊暮看云,⾏也思君,坐也思君

晓看天⾊暮看云,⾏也思君,坐也思君

晓看天⾊暮看云,⾏也思君,坐也思君

晓看天⾊暮看云,⾏也思君,坐也思君

晓看天⾊暮看云,⾏也思君,坐也思君

换⾏标签因为存在⾏标签,因此也就引出了换⾏标签

换⾏标签

晓看天⾊暮看云,⾏也思君,坐也思君晓看天⾊暮看云
⾏也思君
坐也思君
⽔平线标签

⽔平线标签

---

晓看天⾊暮看云,⾏也思君,坐也思君字体标签

字体字体样式

晓看天⾊暮看云,⾏也思君,坐也思君加粗后 : 晓看天⾊暮看云,⾏也思君,坐也思君斜体 : 晓看天⾊暮看云,⾏也思君,坐也思君特殊符号的表⽰

特殊符号

⼤于号 : >

⼩于号 : <

空格 : 你 好 | 你          好

引号 : ""

版权符号 : © 版权所有...

图像标签常见的图像格式 :jpgpngbmp 位图gif…图像标签 :链接标签超链接点击跳转 锚链接可以从⼀个地⽅跳到锚指定的地⽅,需要的东西: 1.标记(打锚点) 2.跳转(#锚点名称)锚链接标记点击跳转跳转到demo页标记三功能性链接发送邮件target属性target ⽬标跳转的⽹页打开⽅式_blank : 打开新的⽹页_self : 在本⽹页打开-->

打开第⼀个⽹页_在新⽹页中打开 打开第⼀个⽹页_在⾃⼰⽹页中打开

⾏内元素和块元素独占⼀⾏的标签 : 块标签ph1~h6只有⾃⼰那⼀部分 , 可以在⾏内定义多个的标签 : ⾏内标签astrongimgem开放标签<—>闭合标签

⾃闭合标签
列表⽆序列表ul,有序列表ol,⾃定义列表dl

⽆序列表

• java
• C/C++
• Linux
• Python

有序列表

1. java
2. C/C++
3. Linux
4. Python

⾃定义列表

Java

OOP

Annotation

Reflection

Python

数据分析

数据挖掘

...

给出⾃定义列表⽰例结果:表格为什么使⽤表格 ?简单通⽤结构稳定表格结构单元格⾏列HTML表格的⽰例:

1-1			1-2	1-3
2-1	2-2	2-3	2-4	2-5
	3-1	3-2	3-3	3-4
	4-1	4-2	4-3	4-4

表格⽰例结果:视频/⾳频思考 : 如何在⽹页上播放视频和⾳频 ?结论 : 应该有⼀个标签控制⾳频或者视频 .video , audio⽹页结构分析⼀般⽹页分为:1. 头部2. 导航3. 主体内容4. 底部

头部

放⽂章

代码

独⽴区域

.......iframe内联框架iframe 内联框架百度HTML标签图像标签超链接表单元素什么叫表单 ?常见的应⽤:登录 , 注册 …常见表单元素⽂本框 密码框 按钮 单选框 多选框 ⽂本域 下拉框 ⽂件域邮箱 ⽹址 数字 滑块 搜索框

注册

⽤户名 :

密码 :

确认密码 :

性别 男 ⼥ ⼈妖

爱好 看电影 听歌 打游戏 敲代码

---

⼀ ⼆ 三 美国 中国 印度 西安 重庆 新疆

⽂本内容

---

邮箱 :
url :
数字 :
滑块 : 搜索框 :

表单其他应⽤隐藏域 , 只读 , 禁⽤hidden : 隐藏域readonly : 只读disabled : 禁⽤思考?为什么要表单验证降低服务器压⼒保证数据的安全性表单验证需要哪些东西 ?1. 提⽰信息placeholder-->默认提⽰信息

⽤户名 :

2. ⾮空判断 (必填项)required-->必须填写此项

密码 :

3. 正则表达式验证pattern-->正则表达式⾃定义验证 :