首页 > 其他分享> > HTML5详解

HTML5详解

2021-03-09 09:03:17 作者：互联网

HTML5详解

HTML
- Hyper Text Markup Language(超文本标记语言) 超文本包括：文字，图片，音频，视频，动画等

HTML 5，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素，特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形，图表，图像和动画。以及不需要安装任何插件直接使用网页播放视频等。

HTML5的优势

世界知名浏览器厂商对HTML5的支持
- 微软
- Google
- 苹果
- Opera
- Mazilla
市场的需求
跨平台

W3C

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

常见IDE

记事本
Dreamweaver
IDEA
WebStorm
...

网页基本信息

DOCTYPE声明

网页基本标签

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

注释和特殊符号

<!-- DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--    meta描述性标签，它用来描述我们网站的一些信息-->
<!--    meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="晓华说Java">
    <meta name="description" content="这个地方可以学习Java">
<!-- title网页标题   -->
    <title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
hello,word!
</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加tab键-->
<p>两只老虎，两只老虎，跑得快，</p>
<p>两只老虎，两只老虎，跑得快，</p>

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

<!--换行标签-->
两只老虎，两只老虎，跑得快，<br/>
两只老虎，两只老虎，跑得快，<br/>
两只老虎，两只老虎，跑得快，<br/>
两只老虎，两只老虎，跑得快，<br/>

<!--粗体，斜体-->
<h1>两只老虎，两只老虎，跑得快，</h1>
粗体：i love you <strong>i love you</strong>
斜体：i love you <em>i love you</em>
<br/>
<!--注释和特殊符号-->
空格：
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
大于号
&gt;
<br/>
小于号
&lt;
<br/>
版权
&copy;
<!--
特殊符号记忆方式
&+一个字母

-->

</body>
</html>

图像标签

常见的图像格式
- JPG
- GIF
- PNG
- BMP
- <img src="pathalt"图像地址 alt="text"图像的替代文字title="text"鼠标悬停提示文字 width="x"图像宽度height="y"图像高度 />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址
相对地址(推荐使用)，绝对地址
../  --上一级目录
-->
<img src="../resources/image/W0002.png" alt="他的图像" title="yyyy" width="300" height="300">
</body>
</html>

链接标签

链接文本或图像

文本超链接

图像超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--
a标签
href: 必填，表示要跳转到那个页面
_blank 在一个新的标签打开
_self 在自己的网页中打开

-->
<a href="1.我的第一个网业.html" target="-_blank">点击我跳转到页面</a>
<a href="https://www.baidu.com" target="-_self">点击我跳转到百度</a>
<a href="1.我的第一个网业.html">
    <img src="../resources/image/W0002.png" alt="他的图像" title="yyyy" width="300" height="300">
</a>
</body>
</html>

超链接

页面间链接
- 从一个页面链接到另一个页面
锚链接
功能性链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name做一个标记-->
<a name="top">顶部</a>

<!--
a标签
href: 必填，表示要跳转到那个页面
_blank 在一个新的标签打开
_self 在自己的网页中打开

-->
<a href="1.我的第一个网业.html" target="-_blank">点击我跳转到页面</a>
<a href="https://www.baidu.com" target="-_self">点击我跳转到百度</a>
<a href="1.我的第一个网业.html">
    <img src="../resources/image/W0002.png" alt="他的图像" title="yyyy" width="300" height="300">
<p>
    <a href="1.我的第一个网业.html">
        <img src="../resources/image/W0002.png" alt="他的图像" title="yyyy" width="300" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网业.html">
        <img src="../resources/image/W0002.png" alt="他的图像" title="yyyy" width="300" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网业.html">
        <img src="../resources/image/W0002.png" alt="他的图像" title="yyyy" width="300" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网业.html">
        <img src="../resources/image/W0002.png" alt="他的图像" title="yyyy" width="300" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网业.html">
        <img src="../resources/image/W0002.png" alt="他的图像" title="yyyy" width="300" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网业.html">
        <img src="../resources/image/W0002.png" alt="他的图像" title="yyyy" width="300" height="300">
    </a>
</p>
</a>
<!--
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件链接：，mailto;
QQ链接

-->
<a href="mailto:1143578263@qq.com">点击连系我</a>

</body>
</html>

行内元素和块元素

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

列表

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>动机</li>
    <li>有不</li>
    <li>欸哦</li>
</ol>
<hr/>

<!--无序列表
应用范围：导航，侧边栏。。。
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>动机</li>
    <li>有不</li>
    <li>欸哦</li>
</ul>


<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
公司网站底部

-->
<dl>
    <dt>Ja</dt>

    <dd>动机</dd>
    <dd>有不</dd>
    <dd>欸哦</dd>
    <dd>Py</dd>
    <dd>Py</dd>
</dl>
</body>
</html>

表格

为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="1px">
    <tr>
<!--        colspan 跨列-->
        <td colspan="4">1-1</td>

    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>4-2</td>
    </tr>
    <tr>
        <td rowspan="2">3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-2</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        
    </tr>
</table>
</body>
</html>

视频和音频

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

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

<!--音频和视频
stc:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../jjjj/jjk/jjkl.mp4" controls autoplay></video>


<audio src="../jjjj/jjk/jjkl.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="path" frameborder="0" width="1000px" height="800px"   name="main Frame"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
</body>
</html>

表单语法

<!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"></form>

<!--文本输入框：input type="text"-->
<p>名字<input type="text" name="username"></p>
<!--密码框：input type="password"-->
<p>密码<input type="password" name="pwd"></p>

<p>
    <input type="submit">
    <input type="reset">
</p>
</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时，指定按钮是否是被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1></h1>
<!--表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post,get 提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post:比较安全，传输大文件。
value="wei"  默认初始值
maxlength"8" 最长能写几个字符
sixe="30"      文本框的长度

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

<!--文本输入框：input type="text"-->
<p>名字<input type="text" name="username" value="你好" maxlength="8" size="30"></p>
<!--密码框：input type="password"-->
<p>密码<input type="password" name="pwd"></p>
<!--单各专柜标签
input type="radio"
value : 单选框的值
name:表示组

-->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl"name="sex"/>女
    </p>
<!--    多选框
input type="checkbox"
-->

<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">话题的
    <input type="checkbox" value="sleep" name="hobby" checked>不要
    <input type="checkbox" value="sleep" name="hobby">要的
    <input type="checkbox" value="sleep" name="hobby">不玩
</p>

<!-- 按钮
  input type="button"  普通按钮
  input type="image"  图像按钮
  input type="submit"  提交按键
  input type="reset"  重置
  -->
    <p>
        <input type="button" name="btna" value="点击变长">
        <input type="image" src="加图片的地址">

    </p>
<!--下拉框，列表框

-->
<p>下拉框：
    <select name="列表名称" >
        <option value="jdksl">中国</option>
        <option value="noch">美国</option>
        <option value="buffer" selected>两款</option>
        <option value="set">印度</option>

    </select>
    
</p>
<!--文本域
cols="30" rows="10"
-->

<p>
    <textarea name="textarea" cols="30" rows="10">文本内容
    </textarea>
</p>
    
<!--文件域
input type="file"  name="files"
-->
<p>
    <input type="file" name="files">
    <input type="file" 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="10">
    </p>
    <!--滑块
    input type="range"
    -->
    <p>滑块
        <input type="range" name="num" max="100" min="0" step="2">
    </p>

    <!--搜索框

    -->
    <p>搜索框
        <input type="search" name="num" max="100" min="0" step="2">
    </p>
<p>
    <input type="submit">
    <input type="reset" value="清空表单">
</p>
</form>

</body>
</html>

表单的应用

隐藏域 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:比较安全，传输大文件。
value="wei"  默认初始值
maxlength"8" 最长能写几个字符
sixe="30"      文本框的长度

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

<!--文本输入框：input type="text"-->
<p>名字<input type="text" name="username" placeholder="请输入用户名" ></p>
<!--密码框：input type="password"-->
<p>密码<input type="password" name="pwd" hidden></p>
<!--单各专柜标签
input type="radio"
value : 单选框的值
name:表示组

-->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl"name="sex"/>女
    </p>
<!--    多选框
input type="checkbox"


-->

<p>爱好：
    <input type="checkbox" value="sleep" name="hobby" >话题的
    <input type="checkbox" value="sleep" name="hobby" checked>不要
    <input type="checkbox" value="sleep" name="hobby">要的
    <input type="checkbox" value="sleep" name="hobby">不玩
</p>

<!-- 按钮
  input type="button"  普通按钮
  input type="image"  图像按钮
  input type="submit"  提交按键
  input type="reset"  重置
  -->
    <p>
        <input type="button" name="btna" value="点击变长">
        <input type="image" src="加图片的地址">

    </p>
<!--下拉框，列表框

-->
<p>下拉框：
    <select name="列表名称" >
        <option value="jdksl">中国</option>
        <option value="noch">美国</option>
        <option value="buffer" selected>两款</option>
        <option value="set">印度</option>

    </select>  
</p>
<!--文本域
cols="30" rows="10"
-->

<p>
    <textarea name="textarea" cols="30" rows="10" required>文本内容
    </textarea>
</p>
    
<!--文件域
input type="file"  name="files"
-->
<p>
    <input type="file" name="files">
    <input type="file" 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="10">
    </p>
    <!--滑块
    input type="range"
    -->
    <p>滑块
        <input type="range" name="num" max="100" min="0" step="2">
    </p>

    <!--搜索框

    -->
    <p>搜索框
        <input type="search" name="num" max="100" min="0" step="2">
    </p>

<!--    增强鼠标可用性-->
    <p>
        <label for="mare"></label>
        <input type="text" id="mare">
    </p>
    
    <p>自定义邮箱
        <input type="text" name="diymail" pattern="正则表达试">
        
    </p>
<p>
    <input type="submit">
    <input type="reset" value="清空表单">
</p>
</form>

</body>
</html>

HTML5概要与新增标签

标签：两只,标签,元素,老虎,详解,HTML5,表单,页面
来源： https://www.cnblogs.com/202116xi/p/14503566.html