HTML5
初识HTML
什么是HTML
Hyper Text Markup Language (超文本标记语言)
HTML发展史
HTML取代了早期的flash
HTML5的优势
世界知名浏览器厂商对HTML5的支持
微软
苹果
Opera
Mozilla
市场的需求
跨平台
W3C标准
w3c
World Wide Web Consortium (万维网联盟)
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
w3C标准包括
结构化标准语言(HTML、XML)
表现标准语言(css)
行为标准(DOM、ECMAScript )
常见IDE
一个IDE走天下
修改访问的浏览器
HTML的基本结构
网页基本信息
注释
＜！注释内容＞快捷键：Ctrl + /
DOCTYPE：文档类型
＜title＞标签
＜meta＞标签
<!DOCTYPE html> //告诉浏览器，我们要使用什么规范，默认是HTML <html lang="en"> //总的标签，所有的HTML代码必须在标签里面，外面写的东西不会显示 <head> //头部 <meta charset="UTF-8"> //meta描述性标签，用来描述网站的一些信息 <meta name="keywords" content="HTML学习"> //关键词 <meta name="description" content="菜鸟真菜"> //描述性语言 <title>Title</title> //网页标题 </head> <body> //主体 Hello， World！ </body> </html>
网页基本标签
标题标签
<!--标题标签 h1 + tab键 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
<!--p：段落标签 P + tab键-->
<p>
本来是师者，所以传道受业解惑也，本来是一直秉承“教育不是灌输，而是点燃火焰”，本来是一直坚信“优秀的老师教授知识只是基本，还要对学生的人生观价值观产生积极正向的影响”
</p>
换行标签
<!--换行标签 自闭和标签-->
身为教学负责人， <br/>这样的问题必然会引起我的关注
//段落之间的空白很大，换行很紧凑
水平线标签
<!--水平线标签 hr + tab键 自闭和标签-->
<hr/>
字体样式标签
<!--粗体，斜体-->
<h1>字体样式标签</h1>
Hello，World！<br/>
<strong>Hello，World！</strong>
<em>Hello，World！</em>
注释和特殊符号
<!--特殊符号 ：空格 >：大于号 <：小于号-->
<!--©：版权符号-->
空格<br/>
空 格<br/>
><br/>
©版权所有
图像标签
- JPG
- GIF：动态图
- PNG
- BMP：位图
<img src=”path” alt=”text”（图像如果没有显示出来的替代的文字） title=”text” width=”x” height=”y” ,>
良好的编码习惯：资源单独放到一个文件（新建一个目录）
直接右键粘贴图片，完全脱离Windows文件管理，太方便了
<!--
src： 资源图片 ： 图片的路径：相对路径（推荐），绝对路径
../ : 上一级目录，用于同级目录的切换
alt： 图片加载失败，表示图片的问题，也即图片描述
title： 鼠标放在图片上的悬浮提示
width： 宽
height：高
-->
<img src="../resource/image/1.jpeg" alt="头像" width="300" height="300">
链接标签
文本超链接
图像超链接
<!--
超链接：表示从一个地方跳转到另外一个地方 hao123导航
href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
_self : 在自己的窗口打开
_blank： 在新窗口中打开
和图片嵌套使用
-->
<a href="https://www.baidu.com/">百度一下
<img src="../resource/image/1.jpeg" alt="头像" width="300" height="300">
</a>
<!--锚链接
1.需要一个锚标记
2.跳转到这个标记
-->
<!--使用name作为标记-->
<a href="top">回到顶部</a>
<!--通过#+标记名跳转-->
<a href="#top"></a>
<!--
功能性链接：邮件链接：mailto；
-->
<a href="mailto:24736743@qq.com">联系我们</a>
块元素和行内元素
块元素
无论内容多少，该元素独占一行
(p（段落）、h1-h6…)
行内元素
内容撑开宽度﹐左右都是行内元素的可以在排在一行
( a . strong . em …)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--块元素, 会自动换行-->
<p>我是P标签</p>
<h1>我是H1标签</h1>
<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>
</body>
</html>
列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息.
列表的分类:
无序列表
有序列表
定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--title-->
<!--无序 ul-li
导航
侧边栏新闻
在文章中，一般会使用它来排列
-->
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>Java</li>
</ul>
<hr>
<!--有序 ol-li(order list)
问答试卷、测试题....卷子，或者需要排序的。微博热搜，榜单
-->
<ol>
<li>====</li>
<li>====</li>
<li>====</li>
<li>====</li>
</ol>
<hr>
<!--自定义列表
网站的底部，用于标记项
dt的t是title的意思，列表名称
dd：列表内容
-->
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>梨子</dd>
<dd>香蕉</dd>
<dd>葡萄</dd>
</dl>
</body>
</html>
表格
为什么使用表格
简单通用
结构稳定
基本结构
-
单元格
-
行
-
列
-
跨行（Excel中的合并单元格）
-
跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格标签table
border="1px" 边框属性，给表格加边框
行：row
-->
<table border="1px">
<!--行和列-->
<!--第一行 tr,列 td-->
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<hr>
<table border="1px">
<tr>
<!--实现跨列
colspan 对应的值:就是要跨几列
-->
<td colspan="2">学生成绩</td>
<td>学生成绩</td>
</tr>
<tr>
<!--科目名称-->
<td>语文</td>
<td>100</td>
</tr>
<tr>
<!--成绩-->
<td>数学</td>
<td>100</td>
</tr>
</table>
<hr>
<table border="1px">
<tr>
<!--rowspan 所跨的行数-->
<td rowspan="2">张三</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>0</td>
</tr>
<tr>
<td>数学</td>
<td>0</td>
</tr>
</table>
</body>
</html>
媒体元素
视频元素
video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频</title>
</head>
<body>
<!--video 视频标签
这里放到视频，或者音乐，都是必须要能够直接播放的。
src：视频的路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay： 自动播放
loop: 循环播放
-->
<video src="../resources/video/china.mp4" controls autoplay></video>
<video src="//player.bilibili.com/player.html?aid=68373450&cid=118499718&page=1" controls autoplay>
<!--</video>-->
<iframe src="//player.bilibili.com/player.html?aid=68373450&cid=118499718&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"
width="1000px" height="500px">
</iframe>
</body>
</html>
音频元素
audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--音频播放-->
<audio src="../statics/audio/ab410f7bbbb0955e7ae476ae89527a5d.m4a" autoplay controls>
</audio>
</body>
</html>
页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--这些标签都是一些行业规范-->
<header>
<h2>我是头部</h2>
</header>
<nav>导航栏</nav>
<aside>侧边栏</aside>
<article>文章主题</article>
<section> 独立区域 </section>
<footer>
<h2>我是尾部</h2>
</footer>
</body>
</html>
iframe 内联框架
在一个网页里面嵌套另外一个网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--iframe 内联框架
src： 地址
直接跳转
-->
<iframe src="https://www.baidu.com/" width="1000px" height="600px"></iframe>
<!--通过和a标签配合使用，实现跳转
-->
<iframe name="mainFrame"></iframe>
<a href="https://www.cnblogs.com/flying-birds-xyg/" target="mainFrame">点击跳转</a>
<!--Ajax-->
</body>
</html>
表单
表单语法
通过提交表单产生一些事件，比如注册和登陆
input的type和name可以理解为一个键值对，成对出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
提交请求：
携带的参数
key: 控件的name。这个属性不要忘记
get：携带参数，参数可以在url中看到，不安全，但是高效，大小有限
https://www.baidu.com/?username=kuangshen&password=123456
post：参数不可见、安全，大小没有限制，可以传输大文件 （表单提交常用方式post）
-->
<!--form 表单
action： 提交地址：可以是网站也可以是一个请求处理地址
method：提交的方式（get，post）
-->
<form action="test.html" method="post">
<!--输入框
input 标签
name： 必须写上
type：
text ： 文本框
password： 密码框
submit： 提交按钮
reset： 重置
-->
<p>名字：<input type="text" name="username"> </p>
<p>密码：<input type="password" name="password"> </p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
表单元素格式
文本框和单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="test.html" method="get">
<!--文本框 type="text"
value ：文本框默认的初始值
size： 文本框的长度
maxlength： 文本框的最大输入长度,最多可以写几个字符
-->
<p>
<input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>
<!--密码框 type="password"
size="20" 密码框的长度
-->
<p>
<input type="password" name="pwd" size="20">
</p>
<!--单选框Group type="radio"
-->
<!--单选框type="radio"
value： 表单提交的值
name： 名字相同，则自动分组，必须要分组，单选框中同一组的元素只能选一个
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="radio" 后增加单选框的属性
-->
<p>
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex" disabled>女
</p>
</form>
</body>
</html>
按钮和多选框
<!--多选框 type="checkbox"
name： 必填项，如果是分组，则名称一致
value： 表单提交的值
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="checkbox" 后增加多选框的属性
-->
<p>
<input type="checkbox" name="hobby" value="code">敲代码
<input type="checkbox" name="hobby" value="music" checked>听音乐
<input type="checkbox" name="hobby" value="girl" disabled>女孩
</p>
<!--按钮
value：按钮上的文字
-->
<p>
<!--提交按钮-->
<input type="submit" value="登录">
<!--重置按钮--使用-->
<input type="reset" value="清空">
<!--普通按钮：一般后来我们会和javascript结合使用，点击按钮xxx-->
<input type="button" value="点我">
<!--图片按钮
type="image"
-->
<input type="image" src="../statics/images/bd.png">
</p>
列表框、文本域和文件域
<!--下拉列表框
select
name： 组件名字 必填
size: 显示的数量，默认为1
option： 选项
value 必填
option标签中间写下拉框的值
selected： 默认选中
-->
<select name="科目">
<option value="1"></option>
<option value="2">数学</option>
<option value="3" selected>英语</option>
<option value="4">英语</option>
<option value="5">英语</option>
</select>
<!--文本域 可以在浏览器输入的文本 cols rows-->
<p>反馈：
<textarea name="textarea" cols="10" rows="10">
</textarea>
</p>
<!--文件域，用于在浏览器上传文件-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
功能标签(自动验证)
<!--邮箱-->
<p>
邮箱：<input type="email" name="email">
</p>
<!--url网址-->
<p>
url：<input type="url" name="url">
</p>
<!--数字：商品数量，计数 type="number"
最小值 min="0"
最大值 max="100"
步长 step="10"
-->
<p>
数字：<input type="number" min="0" max="100" step="10">
</p>
<!--滑块
默认值0~100
-->
<p>
<input type="range" name="range" min="0" max="1000" step="2">
</p>
<!--搜索框-->
<p>
搜索： <input type="search" name="search">
</p>
表单应用
隐藏域
只读
禁用
增强鼠标可用性
<!--value是默认属性，即默认值，readonly：只读-->
<p>
<input type="text" name="username" value="admin" readonly>
</p>
<!--disabled：禁用，不允许选择这个标签-->
<p>
<input type="radio" value="男" name="sex" >男
<input type="radio" value="女" name="sex" disabled>女
</p>
<!--hidden：隐藏，密码标签的输入框就没了-->
<p>密码：
<input type="password" name="pwd" size="20" hidden>
</p>
<!--增强鼠标可用性
label标签的for可以指向id
-->
<label for="mark">你点我试试，点了就进入input</label>
<input type="text" id="mark">
表单初级验证
placeholder
提示信息
required
元素不能为空，非空判断
pattern
正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>登录</h1>
<hr>
<form action="test.html" method="get">
<p>
<!--通过 for="name" 来链接到 表单中的指定ID -->
<!--placeholder="必须是url格式" 默认提示，告诉用户应该这么做-->
用户名：
<input type="url" name="username" placeholder="必须是url格式">
</p>
<p>
<!--required必须要填写这个字段-->
密码： <input type="password" name="pwd" required>
</p>
<p>
<!--pattern:正则表达式
百度搜索常用正则表达式，不需要强制去记
https://tool.oschina.net/uploads/apidocs/jquery/regexp.html
-->
手机号码： <input type="password" name="tel" required pattern="^1[358]\d{9}">
</p>
<!--隐藏域-->
<p>
<input type="hidden" name="count" value="10">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
人们总爱追问人生的意义，其实人生本无所谓意义，因为存在先于本质，本质之前的存在是禁绝思考的。人生的无意义赋予了人的自由，倘若人生有一个注定的意义，那么人人都如同一具机器。
版权声明：本文为Sail away' Blogs原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。