首页 > 其他分享> 文章详细

HTML5详解

2021-03-09 09:03:17 阅读：178 来源： 互联网

标签：两只标签元素老虎详解 HTML5 表单页面

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML5详解

HTML5的优势

W3C

网页基本信息

网页基本标签

图像标签

行内元素和块元素

列表

表格

视频和音频

页面结构分析

iframe内联框架

表单的应用

表单初级验证

HTML5概要与新增标签