本文深入介绍了HTML5的基本概念、优势和浏览器支持情况。详细讲解了HTML5的结构、元数据、标题、段落、图像、链接、表格、媒体元素、表单以及表单验证等核心内容。此外，还涵盖了常见的开发工具和网页布局技巧，为读者提供了一份全面的HTML5学习指南。
HTML5
HTML
-
HTML：Hyper Text Markup Language（超文本语言）
- 超文本包括：文字、图片、音频、视频、动画等等。
-
HTML5 的优势
- 世界知名的浏览器厂商对 HTML5 的支持
- 市场的需求
- 跨平台
-
W3C
- World Wide Web Consortium（万维网联盟，中立性技术标准机构）
- W3C 标准包括：
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
-
常见的开发工具
- 记事本
- Dreamweaver
- IDEA
- WebStorm
- 等等
-
HTML 基本结构
-
网页头部
<head> <meta charset="UTF-8"> <title>Title</title> </head> -
主体部分
<body> </body>
-
网页基本标签
-
<>、</>，这种成对的标签，分别叫开放标签和闭合标签。
-
单独呈现的标签，为空元素，如 hr/；意为用 / 来关闭空元素
-
注释：
<!-- 这里是注释 --> -
使用规范（告诉浏览器应该使用什么规范），不写也没事
<!DOCTYPE html> -
总标签 html
<html></html> -
head 标签：代表网页头部
<head> </head> -
body 标签：代表网页主体
<body> </body> -
title 标签：网页标题
<title>这里是网页标题</title> -
meta 标签：描述性标签，用来描述网站的一些信息，一般用来做 SEO
<meta charset="UTF-8"> <meta name="keywords" content="这里写关键词的描述"> -
标题标签
<!--标题标签--> <h1>这里是一级标签</h1> <h2>这里是二级标签</h2> <h3>这里是三级标签</h3> <h4>这里是四级级标签</h4> <h5>这里是五级级标签</h5> <!--以此类推--> -
段落标签：
<!--段落标签--> <p>我爱你中国</p> <p>亲爱的母亲</p> <p>我为你流泪也</p> <p>为你自豪</p> -
水平线标签（单标签）：
<!--水平线标签--> <hr/> -
换行标签（单标签）：
<!--换行标签（单标签）--> 我爱你中国<br/> 亲爱的母亲<br/> 我为你流泪也<br> 为你自豪<br> -
粗体标签：
<!--粗体--> <strong>这里是粗体字</strong><br/> -
斜体标签
<!--斜体--> <em>这里是斜体字</em><br/> -
特殊标签：
-
空格：
%nbsp; -
大写，小写：
大写：> 小写：< -
版权：
版权符：©
-
图像（img）
-
图像标签
- src（必填）：图像路径（推荐使用相对路径）
- alt（必填）：图像的代替文字（图像名）
- title：鼠标悬停显示的文字
- 等等
<!--img标签--> <img src="../resources/image/文件名.png" alt="图像名" title="悬停文字" width="宽度" height="高度">
超链接（a）
页面间链接
- href（必填）：要跳转页面的地址
- target：表示窗口带哪里打开
- _blank：在新标签中打开
- _self（默认）：在自己这个窗口打开
<!--超链接标签（a标签）-->
<a href="https://www.baidu.com" target="_blank">跳转百度</a>
<!--图片超链接-->
<a href="https://www.baidu.com">
<img src="../resources/image/dog.png" alt="小狗" title="小狗在游泳！" width="638" height="384">
</a>
锚链接
- 需要一个锚标记
- 跳转到标记处
- name：设置锚标记
- href：# + 锚标记名
- 只需要在地址后加上 #锚标记，就可以跳转到其他页面的指定位置
<!--使用 name 作为标记-->
<a name="top"></a>
<!--锚链接-->
<a href="#top">回到顶部</a>
功能性链接
-
邮箱链接：mailto
<!--邮箱链接--> <a href="mailto:邮箱地址">这里是邮箱链接</a> -
QQ链接：
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=这里写QQ号&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:这里写QQ号:41" alt="点击联系" title="点击联系"/> </a>
网页布局
行内元素和块元素
- 行内元素：
- 内容撑开宽度，左右都是行内元素的可以在同一排上
- 例如：a（链接标签）、strong（粗体标签）、em（斜体标签）、等等
- 块元素：
- 无论内容有多少，该元素独占一行
- 例如：p（段落标签）、h1~h3…（标题标签）、等等
页面结构
- header：标题头部区域的内容（用于页面或页面中的一块区域）
- footer：标记脚部区域的内容（用于整个页面或页面的一块区域）
- section：Web 页面中的一块独立区域
- article：独立的文章内容
- aside：相关内容或应用（常用与侧边栏）
- nav：导航类辅助内容
iframe 内联框架
- 一个网页中，嵌套另一个网页
<iframe src="引用页面地址" name="框架标示名"></iframe>
<iframe src="" name="4399" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.4399.com" target="4399">点击跳转至4399</a>
<iframe src="//player.bilibili.com/player.html?aid=504918879&bvid=BV1Vg41157SF&cid=393066428&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
列表、表格
列表
-
列表：就是信息资源的一中展示形式。他可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获取相应的信息。
-
列表分类：
-
无序列表：ol
<!--有序列表--> <ol> <li>有</li> <li>序</li> <li>列</li> <li>表</li> </ol> -
有序列表：ul
<!--无序列表--> <ul> <li>无</li> <li>序</li> <li>列</li> <li>表</li> </ul> -
定义列表：dl
- dl：标签
- dt：列表名称
- dd：列表内容
<!--自定义列表--> <dl> <dt>列表名</dt> <dd>自</dd> <dd>定</dd> <dd>义</dd> <dd>列</dd> <dd>表</dd> </dl>
-
表格（table）
-
基本结构：
- 单元格：
- 行：tr
- 列：td
- 跨行：colspan
- 跨列：rowspan
<!--表格 table 行：tr 列：td --> <table border="2px"> <tr> <!--colspan 跨列--> <td colspan="4" align="center">学生成绩</td> </tr> <tr> <!--rowspan 跨行--> <td rowspan="2">A同学</td> <td>语文</td> <td>90</td> <td>A</td> </tr> <tr> <td>数学</td> <td>60</td> <td>B</td> </tr> </table>
媒体元素
视频（video）
-
视频标签元素：
-
src（必填）：视频路径（推荐使用相对路径）
-
controls：控制视频播放
-
autoplay：自动播放
-
等等
-
<!--视频标签 video
controls 控制视频
autoplay 自动播放
-->
<video src="../resources/video/视频.mp4" controls autoplay></video>
<br/>
音频（audio）
- 音频元素（和视频元素差不多）：
- src（必填）：音频路径
- contros：音频播放控制
- autoplay：自动播放
- 等等
<!--音频标签 audio-->
<audio src="../resources/audio/陈奕迅-稳稳的幸福.mp3" controls autoplay></audio>
表单及表单应用
表单（form）
- action：表单提交的位置，位置可以是网站，也可以是请求处理地址
- method：提交方式
- get：可以在 URL 中看到提交的信息，高效，但不安全
- post：较为安全，传输大文件
- 表单元素格式：
- type：指定元素的类型。例如：text（文本框）、password（密码框）、checkbox（单选框）、radio（多选框）、submit（按钮）、reset（重置按钮）、file（文件）、hidden（隐藏）、imag（图片）和 button，默认的是text。
- name（必填）：指定表单元素的名称，也表示组
- value：元素的初始值。type 为 radio 时，必须指定一个值
- size：指定表单元素的初始宽度。当 type 为 text 或 password 时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
- maxlength：type 为 text 或 password 时，输入的最大字符数
- checked：type 为 radio 或 checkbox 时，指定按钮是否被选中
输入框：input
<form action="1、第一个网页.html" method="post">
<!--输入框 input
type：文本框类型，例如：(文本框)type="text"，(密码框)type="password"
name：命名
-->
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<!--提交-->
<input type="submit">
<!--重置-->
<input type="reset">
</p>
</form>
单选框（radio）
<!--单选框 radio
input type="radio"
value：单选框的值
name：表示组
checked：默认选择
-->
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
多选框（checkbox）
<!--多选框 checkbox
input type="checkbox"
value：选项的值
name：表示组
checked：默认选中
-->
<p>爱好：
<input type="checkbox" value="basketball" name="hobby"/>打篮球
<input type="checkbox" value="football" name="hobby"/>足球
<input type="checkbox" value="computer" name="hobby" checked/>打游戏
<input type="checkbox" value="something" name="hobby"/>其他<input type="text" name="hobby" maxlength="4" size="4">
</p>
按钮（button、imag、submit、reset…）
<!--按钮
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/dog.png" name="btn2">
</p>
<p>
<!--提交-->
<input type="submit">
<!--重置-->
<input type="reset">
</p>
下拉框（select）
<!--下拉框，列表框
name：列表名称
-->
<p>下拉框
<select name="列表名称">
<!--下拉框中的值 option
value：选项的值
selected：默认选项
-->
<option value="选项的值" selected>-请选择-</option>
<option value="shanghai">上海</option>
<option value="hongkong">香港</option>
<option value="heilongjiang">黑龙江</option>
</select>
</p>
文本域（textarea）
<!--文本域 textarea
name：文本域名称
rows：行
cols：列
-->
<p>意见：
<textarea name="文本域名称" cols="50" rows="10"></textarea>
</p>
文件域（file）
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" value="上传文件" name="upload">
</p>
邮箱验证、URL验证
<!--邮件验证-->
<p>邮箱：
<input type="email" name="email">
</p>
<!--URL验证-->
<p>网站：
<input type="url" name="url">
</p>
数字（number）
<!--数字
step：按一下加减多少
-->
<p>商品：
<input type="number" name="num" max="100" min="0" step="1">
</p>
滑块（range）
<!--滑块 range-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="5">
</p>
搜索框（search）
<!--搜索框-->
<p>搜索：
<input type="search" name="search">
</p>
表单应用
-
隐藏域（hidden）
-
只读（readonly）
-
禁用（disable）
增强鼠标可用性：点击标签，即可实现进入指定id中
<!--增强鼠标可用性-->
<p>
<label for="word">点我这里</label>
<input type="text" id="word">
</p>
表单初级验证
常用方式：
- placeholder：默认提示信息，用在所有的输入框中
- required：非空判断，不允许为空
- pattern：正则表达式，可以从网上查找，复制粘贴
扫一扫
3532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
