Html5超详细学习笔记

1初识HTML

HTM

Hyper Text Mark-up Language （超文本标记语言）超文本包括文字，图片，音频，视频，动画等。

优势

1. 世界知名浏览器厂商对HTML5的支持

• 微软
• google
• 苹果

2. 市场需求

3. 跨平台

W3C

W3C标准包括

• 结构化标准语言（html，xml）
• 表现标准语言（css）
• 行为标准（dom，ecmascript）

html基本结构

2网页基本信息

3网页基本标签

1. 标题标签

2. 段落标签

3. 换行标签

4. 水平线标签

5. 字体样式标签

6. 注释和特殊符号

4图像标签

常见图像格式

• JPG
• GIF
• PNG
• BMP

5.连接标签

• 文本超链接
• 图像超链接

超链接

1. 页面间链接
2. 锚链接
3. 功能性链接

6.块元素和行内元素

7.列表标签

8.表格标签

为什么要使用

• 简单通用
• 结构稳定

基本结构

• 单元格
• 行
• 列
• 跨行
• 跨列

9.媒体元素

• 视频元素：video
• 音频标签：qudio

10.页面结构分析

11.iframe内联框架

12.初始表单post和get提交

13.文本框和单选框

14表单应用

• 隐藏域：hidden
• 只读：readonly
• 禁用：disabled

15表单初级验证

为什么要验证？

• 保证数据安全性
• 缓解数据过多压力

常用方式

• placeholder ：隐形字符（请输入用户名灰色字体）
• required ：若输入为空，则会提示
• pattern：正则表达式

16HEML常用命令总结

1. html的基本结构

1. 网页的基本标签

• 标题标签：h1+tab
• 段落标签：p+tab
• 换行标签：br+tab
• 水平线标签：hr+tab
• 注释：ctrl+/
• 特殊符号：& ;

3. 图像标签

• image：img+tab

4. 超链接

• 普通链接
• • 图像超链接：a href +tab+img
  • 网页超链接：a href+tab (表示要跳转到哪个页面)
• 锚链接： 显示内容（此时意思是返回顶部）
• 功能行链接
• • 邮箱：a href+table mailto:邮件链接 在此后加上复制内容
  • QQ

5. 行内元素和块元素

6. 列表

• 有序列表 ol+tab
• 无序列表 ul+tab
• 自定义列表
• • dl +tab:标签
  • dt+ tab:列表名称
  • dd+tab：列表内容

7. 表格

• 行 tr
• 列 td
• 跨行 td rowspan
• 跨列 td colspan

8. 媒体元素

• 音频 audio+tab
• 视频 vedio+tab

9. 网页简单布局

• 头部 ：header
• 脚部：section
• 主体：footer

10. 内联框架

• iframe （src代表地址）

11. 表单

• 文本框：form +method（get+post）

• 单选框 input type=“radio” value=“” name=“”

• 多选框input type=“checkbox” +value+name

• 按钮

• • 普通按钮 input type=“button” -
  • 图像按钮input type=“image” 此时需要加src
  • 提交按钮
  • 重置按钮

• 下拉框select +option

• 滑块：input type=“range”

• 文本域 ：textarea

• 文件域：file

• 邮箱验证 ：input type=“email”

• url验证：input type=“url”

• 数字验证：input type=“number”

• 搜索框：search

12.表单应用

• 默认选择：checked

• 隐藏域：hidden

• 只读：readonly

• 禁用：disabled

13. 表单初级验证

• 用户提示：placeholder=“”
• 非空判断：required
• 正则表达式判断：pattern=“”