HTML5（入门）
目录
一、HTML5概念和基本的结构
二、基本标签学习
三、图像标签
四、连接标签
五、列表标签
六、表格标签 table
七、媒体标签
八、网页结构
九、内联框架 iframe
十、表单标签 form
十一、初级验证:
一、HTML5概念和基本的结构
1.概念：HTML全称叫超文本标签语言（Hyteper Text Markup Language）
HTML是一种标记语言，5代表版本号，现在已经是第五个版本了。通过 一系列标签 可以将网络上的文档格式统一，使分散的互联网资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
2.作用：前端领域，搭配css和js设计网页。
3.HTML5遵循的标准：
W3C标准：
1）结构化标准语言
2）表现标准语言
3）行为标准
//只要在浏览器上搜索相关词汇就能找到该网页
注释： //ctrl+/
//表示浏览器的使用规范，一般默认都是html的规范
网页一
Hello world!
块元素：无论内容多少，该元素独占一行（p\h1-h6...）,换行的间距比换行标签（br）要大块元素：无论内容多少，该元素独占一行（p\h1-h6...）,换行的间距比换行标签（br）要大块元素：无论内容多少，该元素独占一行（p\h1-h6...）,换行的间距比换行标签（br）要大块元素：无论内容多少，该元素独占一行（p\h1-h6...）,换行的间距比换行标签（br）要大块元素：无论内容多少，该元素独占一行（p\h1-h6...）,换行的间距比换行标签（br）要大块元素：无论内容多少，该元素独占一行（p\h1-h6...）,换行的间距比换行标签（br）要大块元素：无论内容多少，该元素独占一行（p\h1-h6...）,换行的间距比换行标签（br）要大块元素：无论内容多少，该元素独占一行（p\h1-h6...）,换行的间距比换行标签（br）要大块元素：无论内容多少，该元素独占一行（p\h1-h6...）,换行的间距比换行标签（br）要大块元素：无论内容多少，该元素独占一行（p\h1-h6...）,换行的间距比换行标签（br）要大
点击回到首页
二、基本标签学习：
一级标签
//标题标签，只有h1~h6,h6以后无效，字体默认加粗//段落标签ctrl+tab
//换行标签，在p标签中可以直接换行，直接换行后用
无效
//水平线标签
//字体样式标签
粗体字
斜体
//注释和特殊符号
//空格
>//大于符号 //> <可以直接打出来
<//小于
©//版权符号
注：（1）当换行标签写在标题标签的外面时，会换两行，因为每个标题标签自带换行
（2）换行标签的换行比两个标题标签之间的换行更紧凑
（3）写在主题标签里面的换行标签不能换相邻的两个主题标签，会直接默认使用主题标签的换行
块元素：无论内容多少，该元素独占一行（p\h1-h6\列表标签\...）,换行的间距比换行标签（br）要大
行内元素：内容撑开宽度，（换行数量由内容和长度决定的，内容一定，页面长度越短，换行越多；页面长度一定，内容越多，换行越多）。
左右都是行内元素可以排在一行（strong\em\a\媒体标签（video audio）\.....）
基本标签的使用
望岳
(杜甫)
岱宗夫如何，
齐鲁青未了。
会当临绝顶，
一览众山小。
1+1>2
君不见黄河之水天上来，
奔流到海不复回；
君不见高堂明镜悲白发，
朝如青丝暮成雪。
©著作权为孤影所属，请勿未经允许转载！
三、图像标签(image:图像 video:视频 audio：音频)
img +tab
src="":用来搜索图片地址的，图片地址有
相对地址，绝对地址（绝对地址是指从根目录开始的地址，相对地址从上一个开始）
../ 表示当前地址上一个地址，回退到上一个地址
alt="":如果图像地址未找到，显示文字
title="":悬停文字(鼠标停放在图片上会显示的文字) //可以用在图像标签、媒体签中
width="宽度"
height="高度 "//width\height属性也可以用于视频大小的设置、内联框架的大小设置
eg:
图像标签的学习
郭辉平
郭辉平
点击回到首页
四、连接标签
a标签：
点击我跳转到某网页（标注） //标注可以是文字、图片、视频
_self 在当前网页打开，一般未设置target都默认在当前网页打开
_blank 在新的网页中打开
功能性链接
（1）锚链接：首页
用来标记的，标记在哪就跳到哪
标记位置：首页
跳转位置：点击回到顶部
（2）邮件链接（可以点击直接向指定邮箱发送邮件）
（3）QQ链接（可以点击直接加指定QQ号）
………………
链接标签的学习
首页
链接标签的学习
点击跳转到基本标签的学习
图片超链接的学习
在新的网页中打开我的图片
点击跳转到图像标签的使用
功能性链接的使用
锚链接的使用
点击回到顶部
五、列表标签
1）列表的定义：列表是一种展示形式，它可以使信息结构化、条理化，并以列表的形式显示出来，以便浏览者更便捷的获得相应的信息。
2）列表分类：1、有序列表 (应用：试卷，问答...) ordered list
...
2、无序列表 （导航，侧边栏...）unordered list
...
3、自定义列表（公司，网站底部...）definition list
//列表名称 definition title （内容前面有空格）
//列表内容definition details （内容前面无空格）
...//dt与dd是可以嵌套使用的
...
...//dd,dt能够相互嵌套
...
列表标签的学习
有序列表
- 选择题
- 填空题
- 计算题
- 证明题
无序列表
- 选择题
- 计算题
- 填空题
- 证明题
自定义列表
- 小明的成绩单:
- 数学：98
- 英语：88
- 语文：85
- 小红的成绩单:
- 数学：89
- 英语：100
- 语文：92
dt和dd的嵌套使用
计科一班的成绩单
- 张三的成绩单：
- 数学：98
- 英语：88
- 语文：85
- 李四的成绩单:
- 数学：89
- 英语：100
- 语文：92
六、表格标签 table
| //列 table data cell(表格数据单元格) |
align属性保存表的对齐方式。可能的值是轴，基线，底部，中心和顶部。许多标签(标题标签、表格标签（dd\table都可以居中）...)都可以接受此属性。
//视频居中需要在body中设置样式信息：
用法:
align中的属性值：
1)axis+数字:此属性定义表接受的int编号的行对齐方式。
2)baseline:此属性设置表格在基线处的对齐方式。
3)bottom:此属性在底部设置表格的对齐方式。
4)center:此属性设置表格在中心的对齐方式。\\文字、图片居中
5)top:此属性将表格的对齐方式设置在顶部。
表格标签的学习
学生成绩
狂神
语文
59
数学
100
秦疆
语文
100
数学
100
七、媒体标签
媒体元素：音频（audio）、视频（video）
controls：控制条
autoplay：自动播放 //如今大多数浏览器都是禁止自动播放
媒体元素标签的学习
音频
视频
八、网页结构
1)header：网页头内容部
2)footer：网页底部内容
3)section：网页主题部分
4)article：独立的文章内容
5)aside：相关内容和应用（常用于侧边栏）
6)nav：导航类辅助内容
页面结构分析
元素名
描述
header
网页头部内容
<footer
网页底部部内容
section
网页中的一块独立区域
article
网页中的文章内容
aside
网页中相关内容或应用（常用于侧边栏）
nav
网页中导航类辅助内容
九、内联框架 iframe
iframe标签相当于是提供一个窗口，其他跳转标签使用target属性使待跳转的内容在iframe窗口中展现出来
内联框架学习
点击跳转
十、表单标签 form
1.表单的基本标签
1)action：表单提交的位置，可以是网站，也可以是一个请求处理的地址
2)method：表单提交的方式
get：表单提交的内容可以在url（网址输入框）中看到，安全性低，但是高效，只能提交小文件
post：表单提交的内容能够通过网页检查的方式看到，相对get更安全，并且能够提交大文件
3）input：输入框
type：输入框的种类
name：输入框的名字，用来区别不同的输入框（输入框必填）
\\提交按钮
\\重置按钮
//文本输入框
//密码输入框
//单选框，value必填（必须同属于一个组，才起到单选框的作用）
4）vaule="输入框初始值"
maxlength="该输入框可输入的最长字符" //限制输入字符的多少，maxlength=输入的的汉字数+英文数+数字数+符号（无法输入tab和回车）
size="输入框的长度"//只有视觉上的影响，不影响输入字符的多少
2.输入框和按钮标签
1)type：指定元素类型。text（文本框）、password（密码框）、checkbox（多选框）、radio（单选框）、submit（提交(表单)按钮）、reset（重置(表单)按钮）、
file、hidden、image(图片按钮,和submit一样点击会自动提交表单)和button(普通按钮)。默认为text
2)name：指定表单元素的名称，同时也是文本框分组的一个依据 //最好用英文命名，否则容易乱码
3)value：元素的初始值。type为radio时必须指定一个值（自动呈现出来的内容）
4)size：指定表单元素的初始宽度（width、height）。当type为text或password时，表单元素的宽度以字符为单位；对于其他类型，宽度以像素为单位
5)maxlength="该输入框可输入的最长字符" （type为text或password时） //限制输入字符的多少，maxlength=输入的的汉字数+英文数+数字数+符号（无法输入tab和回车）
6)checked：type为radio或checkbox时，指定按钮是否是被选中（默认选中）
7)selected:下拉框默认选中
8)readonly:只读 //默认值使用这个，会使默认值无法更改
9)disable:禁用 //禁止选择，会使一些选项无法选择
10)hidden:隐藏//会隐藏文本框，隐藏后会导致无法在文本框中输入数据，但是默认值仍然存在
11)placeholder:文本框提示语句//一旦输入信息后自动消失
12)required:非空判断//使文本框输入不能为空
13)pattern:正则表达式判断文本框输入格式
3.列表框文体域和文件域
1)下拉框标签：
2)文本域
//cols 文本域的行 rows 列 设置行和列只是默认展示值，实际大小可通过鼠标直接拉动
3)文件域
表单的学习
十一、初级验证:
1.邮件验证
邮箱：
2.网址验证
网址：
3.数字验证
1)min:数字最少输入的位数
2)max:数字最多输入的位数
3)step:数字步长从零开始，可加可减；（常用于购物车中商品数量的选择）默认为any，步长为1
4.滑块（常见于音量或亮度的设计）
5.搜索框
搜索：
6.增强鼠标可用性
1）通过id属性可以使鼠标点击字符直接跳转到文本框
