HTML5

本文主要是介绍HTML5，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

HTML5

HTML5
- 初识HTML
- 网页基本信息
- 网页基本标签
- 图像标签
- 超链接标签
- 网页布局
- 列表
- 表格
- 媒体元素
- 页面结构分析
- iframe内联框架
- 表单及表单应用
- - 表单的元素格式
  - 表单的应用
  - 表单初级验证
笔记

HTML5

初识HTML

HTML
- Hyper Text Markup Language(超文本标记语言)
W3C标准
- W3C
  - World Wide Web Consortium （万维网）
  - 成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构
  - http://www.w3.org/
  - http://www.chinaw3c.org/
- W3C标准包括
  - 结构化标准语言（HTML、XML）
  - 表现标准语言（CSS）
  - 行为标准（DOM、ECMAScript）

网页基本信息

DOCTYPE声名
- html中的注释快捷键 ctrl + /
标签
标签

<!-- DOCTYPE:告诉浏览器，我们要使用什么规范-->

<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部 -->
<head>
<!-- meta描述性标签，它用来描述我们网站的一些信息 -->
<!-- meta一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="zy学html">
    <meta name="description" content="学完java，学html">

<!-- titile网页标题 -->
    <title>我的第一个网页</title>
</head>
<!-- body标签代表网页主体 -->
<body>

hello，world！

</body>
</html>

网页基本标签

标题标签
段落标签
换行标签
水平标签
字体样式标签

注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!--标题标签-->

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->

<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>

<!--换行标签-->

两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有耳朵，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>

<!--水平线标签-->
<hr/>

<!--字体样式标签-->
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：  <strong>i love you</strong>
<br/>
斜体：  <em>i love you</em>

<br/>
<!--特殊符号-->
空      格：
<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：

<br/>
<!--大于号，小于号-->
&gt;
<br/>
&lt;

<br>
<!--版权符号-->
&copy;


</body>
</html>

图像标签

常见的图像格式

JPG、GIF、PNG、BMP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>

<!--img学习
src：图片地址(必填)
    相对地址(推荐使用)，绝对地址
    ../     上一级目录
alt：图片名字(必填)

-->

<img src="../RESOURCES/IMAGE/1.jpg" alt="学林街秋景" title="悬停文字" width="1024" height=768">

</body>
</html>

超链接标签

文本超链接
图像超链接
页面间链接
锚链接

功能性链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>

<!--使用name作为标记-->
<a name="top">顶部</a>


<!--
href:必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
  _blank  在新标签中打开
  _self   在自己的网页中打开(默认)

-->

<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="http://www.baidu.com">点击我跳转到百度</a>
<br/>


<a href="1.我的第一个网页.html">
  <img src="../RESOURCES/IMAGE/1.jpg" alt="学林街秋景" title="悬停文字" width="1024" height=768">
</a>

<p>
  <img src="../RESOURCES/IMAGE/1.jpg" alt="学林街秋景" title="悬停文字" width="1024" height=768">
</p>

<p>
  <img src="../RESOURCES/IMAGE/1.jpg" alt="学林街秋景" title="悬停文字" width="1024" height=768">
</p>

<p>
  <img src="../RESOURCES/IMAGE/1.jpg" alt="学林街秋景" title="悬停文字" width="1024" height=768">
</p>

<p>
  <img src="../RESOURCES/IMAGE/1.jpg" alt="学林街秋景" title="悬停文字" width="1024" height=768">
</p>

<p>
  <img src="../RESOURCES/IMAGE/1.jpg" alt="学林街秋景" title="悬停文字" width="1024" height=768">
</p>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>

<!--功能性链接
邮件链接：mailto
QQ链接：QQ推广(了解)

-->

<a href="mailto:2286602650@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2286602650&site=qq&menu=yes">
  <img border="0" src="http://wpa.qq.com/pa?p=2:2286602650:53" alt="加我看美羊羊洗澡视频" title="加我看美羊羊洗澡视频"/>
</a>


</body>
</html>

网页布局

行内元素和块元素
- 块元素
  - 无论内容多少，该元素独占一行
  - (p、h1-h6…)
- 行内元素
  - 内容撑开宽度，左右都是行内元素的可以排在一行
  - (a、strong、em…)

列表

什么是列表
- 列表就是信息资源的一种展现形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者更快捷的获得相应的信息
列表的分类
- 无序列表
- 有序列表
- 定义列表

表格

简单通用
结构稳定

基本结构

单元格
行
列
跨行
跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格table
行：tr
列：td
border：边框
-->

<table border="1px">
  <tr>
<!-- colspan 跨列 -->
    <td colspan="3">1-1</td>
  </tr>
  <tr>
<!-- rowspan 跨列-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
  </tr>

</table>


<!--test-->
<table border="1px">
  <tr>
    <td colspan="3">学生成绩</td>
  </tr>
  <tr>
    <td rowspan="2">zy</td>
    <td>语文</td>
    <td>100</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>
  <tr>
    <td rowspan="2">yz</td>
    <td>语文</td>
    <td>100</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>
</table>


</body>
</html>

媒体元素

视频和音频

视频元素
- video
音频元素
- audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>

<!--视频和音频
src：资源路径
controls：控制进度
autoplay：自动播放
-->

<!--<video src="../RESOURCES/VIEDO/考试破防周.MP4" controls autoplay></video>-->

<audio src="../RESOURCES/AUDIO/Jeremy%20Zucker%20-%20comethru.mp3" controls autoplay></audio>

</body>
</html>

页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚步区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立的区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主题</h2>
</section>

<footer>
    <h2>网页脚步</h2>
</footer>

</body>
</html>

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<!--iframe内联框架
src：地址
w-h：宽度高度
-->

<iframe src="http://www.bilibili.com" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

<a href="https://blog.csdn.net/weixin_50860184?type=sub&subType=fans&spm=1010.2135.3001.5347" target="hello">点击跳转</a>

</body>
</html>

表单及表单应用

表单的元素格式

属性	说明
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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action：表单提交到的位置   可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
  get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
  post：比较安全，且可以传输大文件
-->

<form action="1.我的第一个网页.html" method="get">

<!--文本输入框 input type = "text"
    value = "zy"    默认初始值
    maxlength="8"   最长能写几个字符
    size="30"       文本框的长度
-->
<p>名字： <input type="text" name="username"></p>



<!--密码框 input type = "password" -->
<p>密码： <input type="password" name="password"></p>



<!--单选框标签
input type="radio"
value：单选框的值
name：表示组，不在一个组就可以多选
checked     默认选中
-->
<p>性别：
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</p>



<!--多选框
input type="checkbox"
checked     默认选中
-->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby" checked>编程
    <input type="checkbox" value="chat" name="hobby">聊天
</p>



<!--按钮
input type="button"     普通按钮
input type="image"      图像按钮
input type="submit"     提交按钮
input type="reset"      重置按钮
-->
<p>按钮：
    <input type="button" name="btn1" value="点击">
    <input type="image" src="../RESOURCES/IMAGE/1.jpg">
</p>

    
<p>
  <input type="submit">
  <input type="reset">
</p>



<!--下拉框，列表框
selected    默认选择
-->
<p>国家：
    <select name="列表名称">
        <option value="china" selected>中国</option>
        <option value="usa">美国</option>
        <option value="uk">英国</option>
        <option value="korea">韩国</option>
    </select>

</p>



<!--文本域
cols="20" rows="10" 必填
-->
<p>反馈：
    <textarea name="textarea"  cols="20" rows="10">文本内容</textarea>
</p>



<!--文件域
input type="file" name="files"
-->
<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>



<!--数字-->
<p>数字：
    <input type="number" name="num" max="100" min="0" step="1">
</p>



<!--滑块-->
<p>滑块：
    <input type="range" name="voice" min="0" max="100" step="10">
</p>



<!--搜索框-->
<p>搜索：
    <input type="search" name="search">
</p>



<!--表单的应用-->

<!--隐藏域
hidden  直接隐藏
hidden value=""   传递默认值
提交后可查看
-->
<p>隐藏内容： <input type="password" name="yincang" hidden value="123456"></p>

<!--只读-->
<p>只读内容： <input type="text" name="zhidu" value="admin" readonly></p>

<!--禁用-->
<p>禁用内容：
        <input type="radio" value="boy" name="sex" disabled/>男
        <input type="radio" value="girl" name="sex"/>女
</p>



<!--增强鼠标可用性
点击文字光标移到文本框内
-->
<p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
</p>



<!--表单初级验证-->

<!--placeholder 提示信息-->
<p>名字： <input type="text" name="username" placeholder="请输入用户名"></p>

<!--required 非空判断-->
<p>名字： <input type="text" name="username" required></p>

<!--正则表达式-->
<p>自定义邮箱：
    <input type="text" name="diymail" pattern="	/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">

</p>

</form>


</body>
</html>

笔记

HTML5.md网盘链接
提取码: 9ceq

点击跳转狂神说
视频详解HTML5

这篇关于HTML5的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

HTML5教程

HTML5

HTML5

HTML5

初识HTML

网页基本信息

网页基本标签

图像标签

超链接标签

网页布局

列表

表格

媒体元素

页面结构分析

iframe内联框架

表单及表单应用

表单的元素格式

表单的应用

表单初级验证

笔记

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯