HTML5
HTML
什么是HTML及其标准
-
HTML
- Hyper Text Markup Language（超文本标记语言）
- 超文本：文字、图片、音频、视频、动画等
-
HTML5的优势
- 世界知名浏览器厂商对HTML5的支持：微软，苹果，Google，Opera，Mozilla
- 市场的需求
- 跨平台
-
W3C标准
- W3C
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/或者http://www.chinaw3c.org/
- W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
- W3C
-
常见IDE
- 记事本、Dreamweaver、IDEA、WebStorm
HTML基本结构
-
、等成对的标签，分别叫开放标签和闭合标签。单独呈现的标签（空元素），如
; 意为用 / 来关闭空元素
我的第一个网页
Hello,Word!
常用快捷键
段落标签Tab+p；图像标签Tab+img；注释标签Ctrl+/；自动补全
网页基本标签
- 标题标签
一级标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
基本标签学习
一级标签
二级标签
三级标签
四级标签
五级标签
六级标签
两只老虎 两只老虎
跑得快 跑得快
一只没有眼睛 一只没有尾巴
真奇怪！ 真奇怪！
两只老虎 两只老虎
跑得快 跑得快
一只没有耳朵 一只没有尾巴
真奇怪！ 真奇怪！
两只老虎 两只老虎
跑得快 跑得快
一只没有眼睛 一只没有尾巴
真奇怪！ 真奇怪！
两只老虎 两只老虎
跑得快 跑得快
一只没有耳朵 一只没有尾巴
真奇怪！ 真奇怪！
字体样式标签
粗体： i love you
斜体： i love you
空 格
空 格
>
<
©版权所有
&
图像标签
- 常见的图像格式：JPG、GIF、PNG、BMP.....
图像标签学习
链接标签
超链接
- 页面间链接
- 从一个页面链接到另一个页面
- 锚链接
- 功能性链接
链接标签学习
顶部
点击我跳转到页面一
点击我跳转到百度
回到顶部
down
点击联系我
行内元素和块元素
- 块元素
- 无论内容多少，该元素独占一行
- （p、h1-h6...）
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以再排在一行
- （a.strong.em...）
列表
- 什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
- 列表的分类
- 无序列表
- 有序列表
- 定义列表
列表学习
- Java
- Python
- 运维
- 前端
- C/C++
- Java
- Python
- 运维
- 前端
- C/C++
- 学科
- Java
- Python
- Linux
- C
- 位置
- 西安
- 重庆
- 新疆
表格
- 为什么使用表格
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
表格学习
学生成绩
狂神
语文
100
数学
100
秦疆
语文
100
数学
100
视频和音频
- 视频元素
- video
- 音频元素
- audio
媒体元素学习
页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
页面结构分析
网页头部
网页主体
iframe内联框架
Title
点击跳转
表单语法
登陆注册
注册
表单元素格式
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text或password时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否是被选中 |
登陆注册
注册
表单的应用
- 隐藏域 hidden
- 只读 readonly
- 禁用 disabled
登陆注册
注册
表单初级验证
- 思考？为什么要进行表单验证
- 常用方式
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
登陆注册
注册
总结
