HTML5基础

最新推荐文章于 2021-12-23 11:08:00 发布

luke9012

最新推荐文章于 2021-12-23 11:08:00 发布

阅读量155

点赞数

分类专栏： web前端基础

本文链接：https://blog.csdn.net/weixin_42194337/article/details/100169117

版权

本文详细介绍了HTML5的基础知识，包括HTML5的优势、语法特征、文档结构、表单元素及其属性。重点讲解了HTML5的新特性，如语义化标签、拖放API、新增的input类型和自定义表单验证等，旨在帮助读者深入理解HTML5的核心概念。

摘要由CSDN通过智能技术生成

HTML5基础

HTML5概述

HTML5优势

新技术特征：

语义特性：页面更加丰富
本地存储特性：启动时间更短，加载速度更快，拥有了离线操作
设备访问特性：设备感知能力有所增强
通信特性：基于页面的聊天程序实时性更高，游戏体验更加流畅
多媒体特性：引入原生态的多媒体支持，可以直接播放音频，视频
三维及图形特征：3D功能渲染更加方便高效
性能与集成特性：Web Worker，使浏览器支持多线程和后台任务运行，XMLHTTPRequest，使跨域请求与表单操作更加简单
CSS3特性：提供了圆角，半透明，阴影，渐变，多背景图，更强大的选择器，变形动画
移动特性：开发成本低，开发周期短，编写一次代码，能够运行在不同系统的设备上

HTML5语法特征

HTML5提供了最大程度的兼容

HTML5标记方式

DOCTYPE声明

HTML4.01文档声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

HTML5文档声明

<!DOCTYPE html>

指定字符编码

HTML4文档编码格式的指定

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

HTML5文档编码格式的指定

<meta charset="utf-8">

HTML5语法差异

最大程度的兼容不规范页面

标签不区分大小写

<div>前后标签大小写不一致</Div>
<div>前后标签大小写不一致</DIV>

结束标签可省略

允许部分标签省略结束部分，甚至还允许同时省略开始标签和结束标签
1. 空元素
允许使用单标签，且可以省略标签的结束符（/）

例如：<img …/>可以写成<img … >
1. 结束标签省略
允许省略结束标签有：<p>，<option>，<optgroup>，<colgroup>，<li>，<dt>，<dd>，<tr>，<td>，<th>等
1. 开始标签和结束标签一起省略
如：<html>，<head>，<body>

boolean属性的设置

readonly，disabled，checked，selected，multiple有boolean属性

设置boolean属性存在三种情况：

只写属性名，默认为true
属性值和属性名相同，true
缺省（属性值为空）boolean属性，false

<input type="button" value="按钮" disabled/>             <!-- true -->
<input type="button" value="按钮" disabled="disabled"/>  <!-- true -->
<input type="button" value="按钮" disabled=""/>          <!-- false -->
<input type="button" value="按钮"/>                      <!-- false -->

属性引号允许省略

当属性中不包含一些特殊字符（空格，<，>，=，单引号，双引号），引号可以省略

<img src=my_logo.jpg alt=my_logo>
<img src="my_logo.jpg" alt="my_logo">
<!-- 错误写法 -->
<img src=my_logo.jpg alt=my logo>

HTML5文档结构

HTML5新增了许多文档结构方面的标签

HTML4和HTML5完档结构

为了让文档结构更加清晰，HTML5新增了<header>，<nav>，<article>，<section>，<aside>，<footer>等标签作为区块元素

HTML5文档结构元素

新的语义化标签有利于简化页面设计，更有利于搜索引擎对页面的检索与抓取

<article>标签

用于文档，页面，应用程序中，可以独自被外部引用的内容
- 用<header>定义文章的标题
- 用<footer>定义文章的注脚
- 用多个<section>将文章分为多个子块
- 可以嵌套多个<article>，例如：一个影视海报后面有多个评论
<header>标签

用于定义文章的页眉信息

包含：
- 多个标题（<h1>~<h6>）
- 导航部分（<nav>）
- 普通内容（<p>和<span>）
<hgroup>标签

用于网页或区段（section）的标题进行组合

当<header>标签包含多个标题，可以考虑使用<hgroup>标签将标题组成一组
<nav>标签

用于定义页面中的各种导航

一个页面可以有多个<nav>元素，作为不同部分的内容导航

常见的导航有：顶部导航，侧边栏导航，页内导航，翻页导航
<section>标签

用于对文章的内容进行分块，例如：章节，页眉，页脚
- 在标签中，通常包含一个标题（<h1>~<h6）
- 在标签中，可以包含多个<article>标签，表示该分块中包含多篇文章
- 在标签中，也可以嵌套<section>标签，表示该分块中包含多个子分块
- 当对页面容器设置样式时，尽量采用<div>标签，而不是<section>标签
<aside>标签

用于定义当前页面或当前文章的附属信息
- 位于<body>内部时，作为整个页面的侧边栏
- 位于<article>内部时，作为整篇文章的侧边栏
<footer>标签

用于定义脚注部分，包括文章的版权信息，作者授权等信息

HTML5其他标签

标签	描述	IE	FireFox	Chrome	Opera	Safari
<datalist>	定义选项列表，与<input>配合使用	×	√	√	√	×
<ditails>	描述文档或文档某个部分细节	×	×	√	×	√
<summary>	包含<details>的标题部分	×	×	√	×	√
<mark>	定义带有标记的文本	IE9+	√	√	√	√
<meter>	度量给定范围（gauge）内的数据	×	√	√	√	√
<progress>	用于标识任务的进度（进程）	IE10+	√	√	√	√
<ruby>	用于定义ruby注释	IE9+	√	√	√	√
<rt>	定义字符的解释或发音，与<ruby>一起用	IE9+	√	√	√	√
<rp>	在<ruby>中使用，当浏览器不支持<ruby>时显示该标签的内容	IE9+

最低0.47元/天解锁文章

luke9012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础

HTML5基础HTML5概述HTML5优势新技术特征：语义特性：页面更加丰富本地存储特性：启动时间更短，加载速度更快，拥有了离线操作设备访问特性：设备感知能力有所增强通信特性：基于页面的聊天程序实时性更高，游戏体验更加流畅多媒体特性：引入原生态的多媒体支持，可以直接播放音频，视频三维及图形特征：3D功能渲染更加方便高效性能与集成特性：Web Worker，使浏览器支持多线程和...
复制链接

扫一扫

专栏目录