HTML5-基础知识点

qq_40626302

于 2024-02-19 23:18:11 发布

阅读量892

点赞数 21

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/qq_40626302/article/details/136180168

版权

本文介绍了HTML5的发展历程，从统一标准出发，详细讲解了HTML5的跨浏览器问题解决、新元素和表单控件、多媒体支持、用户优先设计等方面，并提供了HTML5文档的基本格式和关键标记的使用实例，帮助读者快速入门HTML5。

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

第一章：初识HTML5

概述

HTML5 是超文本标记语言(HyperText Markup Language) 的第五个版本，了解H5 的基本结构和语法，文本控制标记，图像标志，以及超链接标志。

H5之前：各个浏览器之间标准不统一，H5 的目标：统一互联网通用标准，将Web 带入一个成熟的应用平台，在H5 平台上，视频，音频，图像，动画，及电脑的交互都被标准化。

发展历程

1993 年HTML 首次以因特网的形式发布，1999年到 4.0.1 版本，随着HTML 的发展，万维网联盟（World Wide Web Consortium ，w3c)，掌握了对HTML 规范的掌控权。2004 年创建了 HTML5 规范，2008年发布了HTML5工作草案，2014年万维网联盟宣布HTML5标准规范制定完成，并且公开发布，使网络标准达到符合当代网络需求的同时，为桌面和移动平台带来无缝链接的丰富内容。

HTML5的优势：

解决了跨浏览器的问题：
- 跨平台功能
- 针对不支持新标签的老式 IE 浏览器，添加 JavaScript 代码就可以使用新的元素
新增了多个新特性
- 新的特殊内容元素：比如 header，nav , section, article，footer.
- 新的表单控件：calendar，date, time, email, url, search
- 用于绘画的 canvas 元素。
- 用于媒体回放的 video 和 audio 元素
- 对应本地离线存储（sessionStorage, localStorage ) 的更好支持。
- 地理位置，拖曳，摄像头等API。
用户优先原则
- 安全机制的设计
- 表现和内容分离
  - 避免可访问性差，代码高度复杂，文件过大

化繁为简的优势

新的简化的字符集声明
新的简化的 DOCTYPE
简单而强大的HTML5 API
以浏览器原生能力替换复杂的 JavaScript 代码

HTML5 基础

HTML5 文档基本格式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

( <!doctype > )标记（文档声明类型）
- （<!doctype> ）标记位于文档最前面，用于向浏览器声明当前文档使用哪种 HTML 标准规范，
- HTML5 文档的 DOCTYPE 声明为：<!doctype html>，会触发浏览器以标准兼容模式来显示页面
<html> 标记
- 位于（<!doctype> 标记之后，也称为根标记，用于告知浏览器其自身是 HTML 文档，<html> 标记着HTML 文档的开始，</html> 标记HTML文档的结束，在他们之间的是文档的头部和主体内容。
<head> 标记
- （<head> 用于定义HTML 文档的头部信息，也称为头部标记，紧跟在 <html> 标记后面，主要用于封装其他位于头部的标记，例如：<title> , <meta>, <link>, <style> 等，用来描述文档的标题，作者，以及与其他文档的关系等。一个 HTML 文档只能包含一对 <head> 标签，绝大多数的文档头部包含的数据都不会作为内容显示在页面中。
<body> 标记

用于定义 HTML 文档所要显示的内容，也称为主体标记，浏览器中所要显示的所有文本，图像，音频，视频等信息都必须位于 <body> 标记内，<body> 的信息才是最最显示给用户看的。

一个 HTML 文档只能包含一对 <body> 标记，且 <body> 标记位于 html 标记后面位于 <head> 后面，与 <head> 是并列关系。

HTML5 语法：

标签不区分大小写
允许属性值不适用引号 < input type=checked />
允许部分属性值的属性省略 < input checked="checked"> 可省略为 < input checked />

建议使用严谨的代码编写模式：保证代码的严谨性，完整性，有利后期团队的合作和代码维护。

在HTML5中，可以省略属性值的属性如表：

属性	描述
checked	省略属性值后，等价于 checked="checked"
readonly	省略属性值后，等价于 readonly="readonly"
defer	省略属性值后，等价于 defer="defer"
ismap	省略属性值后，等价于 ismap="ismap"
nohref	省略属性值后，等价于 nohref="nohref"
noshade	省略属性值后，等价于 noshade="noshade"
nowrap	省略属性值后，等价于 nowrap="nowrap"
selected	省略属性值后，等价于 selected="selected"
disabled	省略属性值后，等价于 disabled="disabled"
multiple	省略属性值后，等价于 multiple="multiple"
noresize	省略属性值后，等价于 noresize="noresize"

HTML5 标记

带有 “ < >" 符号的元素称为 HTML 标记，所谓标记就是放在 " < > " 标记符中表示某个功能的编码命令，也称为HTML标签或HTML 元素。

双标记：由开始和结束两个标记符组成的标记，
- 语法： <标记名>内容</标记名> <标记名>称为开始标记，</标记名>称为结束标记
单标记
- 单标记也称为空标记，是指使用一个标记符号即可完整的描述某个功能的标记，语法：<标记名 />
- 例如：<hr /> 单标记：表示一条水平线
注释标记： ，注释的内容不会显示到浏览器窗口中，但是源码中可以看到

标记的属性

< 标记名属性 1 = “属性值1" 属性2 = ” 属性值2 “ ....> 内容 </标记名> 属性和属性值以键值对的方式出现

标记可以拥有多个属性值，必须写在开始标记中，位于标记名后面，属性值之间不分先后顺序，标记名与属性，属性与属性之间均以空格分开，任何标记的属性都有默认值，省略该属性则取默认值。

例如：

<h1  align="center">文本标题</h1>

标记嵌套：标记间的包含关系 ( <p> <strong> 标记 </strong><strong> <p>，在标记的嵌套过程中，必须先结束最靠近内容的标记，再按照由内及外的顺序关闭标记

HTML5 文档头部相关标记

设置页面标题标记 <title>

<title>网页标题名</title>

给网页取一个名字：

必须位于 <head> 标记内，一个HTML文档只能包含一对 <title> 标记，<title></title>之间的内容将显示在浏览器窗口的标题栏中。
定义页面元信息标记 <meta />

用于定义页面的元信息，可以重复出现在 <head> 头部标=标记中，在 HTML 中是单标记，本身不包含任何内容，通过 "名称/值" 的形式成对的使用其属性，可定义页面的相关参数，如为搜索引擎提供网页的关键字，作者姓名，内容描述，以及定义网页的刷新时间等。

常用几组设置：

<meta name="名称" content="值"/>

在 meta 标记中使用 name/content 属性可以为搜索引擎提供信息，其中 name 属性提供搜索内容名称，content 属性提供对应的搜索内容值。

设置网页关键字

<meta name="keywords" content="草料二维码注册,二维码系统登录,手机注册二维码生成器, 手机注册二维码生成器, 微信注册二维码生成器,微信登录二维码生成器">
设置网页描述

<meta name="description" content="手机号登录,注册草料二维码生成器,绑定微信可扫码登录">

设置网页作者

<meta name="author" content="ccl">

<meta http-equiv="名称" content="值" />

在 <meta />中使用 http-equiv/content 属性可以设置服务器发送给浏览器的 HTTP 头部信息，为浏览器显示该页面提供相关参数，其中，http-equiv 属性提供参数类型，content 属性提供对应的参数值，默认会发送 <meta http-equiv="Content-Type" content="text/html" />,通知浏览器发送的文件类型是 HTML 。

设置字符集 <meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
utf-8 国际化编码，常用编码方式还有：gbk, gb2312
设置页面自动刷新与跳转

<meta http-equiv="refresh" content="10;url=www.baidu.com" />

其中 http-equiv 的属性值为 refresh，content 的属性值为数值和 url 地址，中间用 ; 隔开，用于指定时间后跳转到目标页面，时间单位默认为秒。

引用外部文件标记 <link>

一个页面往往需要多个外部文件配合，在 <head> 中使用 <link> 标记可以引用外部文件，一个页面中允许使用多个 <link> 标签

语法格式： <link 属性="属性值">

常用属性：

属性名	常用属性值	描述
href	URL(统一资源定位器)	指定引用外部文档的地址
rel	stylesheet	指定当前文档与外部引用文档的关系，该属性值通常为 stylesheet，表示定义一个外部样式表
type	text/css	引用外部文档的类型为 CSS 样式表
	text/javascript	引用类型为 javascript 脚本

<link rel="stylesheet" type="text/css" href="style.css">

内嵌样式标记 <style>

用于为 HTML 文档定义样式信息，位于 <head> 头部标签中。

语法<style type="text/css">样式内容</style>

文本控制标记

标题和段落标记

标题标记： h1~h6 重要性依次递减语法格式： <hn align="对齐方式" >标题文本</hn>
段落标记 <p></p>
水平线 <hr />
换行标记 <br />

文本格式化标记

文字加粗： ·<b> , <strong>

文字斜体： <i>, <em>

文字以删除线方式显示： <s>, <del> H5不赞成使用s

文字以下划线方式显示：· <u>, <ins> H5不赞成使用 u

特殊字符标记

特殊字符文本，如数学公式，版本信息等，如何显示：

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	商标注册	`®`
。	摄氏度	`°`
±	正负号	`±`
x	乘号	`×`
÷	除号	`&divide`
2	平方2 （上标2)	`²`
3	立方3 （上标3）	`&sup3`;

图片标记

常用图片格式： GIF, JPG, NPG

gif 支持动画，无损图像格式，也就是说修改图片后，图片质量几乎没有损失，gif 还支持透明（全透明或全不透明），但只能处理256 种颜色，在网页常用于 logo，小图标，以及色彩单一的图像。
png 格式：包括PNG-8，和真色彩PNG（PNG-24，PNG-32）。相对应gif，png 最大优势是体积更小，支持 alpha (全透明，半透明，全不透明)，颜色过渡更加平滑，半透明图片只能使用PNG-24
jpg 格式：能显示的颜色比gif 和 png 的多，可以保存超过 256中颜色图像，但是jpg 格式是一种有损压缩的图片格式，在网页中，横幅广告（banner),商品图片，较大的插图保存为 jpg 格式。在网页中小图片和网页基本元素如图标，按钮等考虑 gif，或PNG-8格式，半透明图像考虑PNG-24，类似照片的图像则考虑 JPG 格式。

<img /> 语法 <img src="图像 URL" />

img 标签属性

属性	属性值	描述
src	url	图像的路径
alt	文本	图像不能显示的替换文本
title	文本	鼠标悬停时显示的内容
width	像素
height	像素
border	数字	设置图像边框的宽度
vspace	像素	设置图像顶部和底部的空白（垂直边距
hspace	像素	设置图片左边和右边的空白（水平边距）
align	left	将图像对齐到左边
	right	将图像对齐到右边
	top	将图像的顶部与文本的第一行文字对齐，其他文字居图像下方
	middle	将图像的水平中线与文本的第一行文字对齐，其他文字居图像下方
	bottom	将图像的底部与文本的第一行文字对齐，其他文字居图像下方

HTML 不推荐直接使用 img 标签的属性，而是使用 CSS 替换

绝对路径

以磁盘符开头的路径，或完整的网络地址（比如：www.baidu.com)：因为在网页制作完成后，需要将所有的文件上传到服务器，这时候文件可能在服务器的C盘，或D盘，所以不推荐使用绝对路径。

相对路径

相对应当前文件的路径，相对路径不带盘符，同级路径 ./，上一级 ../，上两级 ../../

超链接标记*

语法：<a href="跳转目标" target="目标窗口的弹窗方式">文本或图像</a>

href 属性：用于指定链接的目标地址url，
target ：用于指定链接页面的打开方式，取值有 __self 和__blank两种，其中__self为默认值，意味着在原来窗口打开，__blank 在新的窗口中打开。

锚点链接

如果网页内容过多，页面过长，浏览页面时就需要不断的拖动滚动条，来查看所需要的内容，这样的效率低，且不方便，为了提高检索速度，HTML5提供了一种特殊的链接方式：锚点链接，提供创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步：

使用 <a href="#id名">链接文本</a>创建链接文本
标签上使用id属性，值为相应的 id 名，标注跳转目标的位置

<body>
    <ul>
        <li><a href="#one">平面广告设计</a> </li>
        <li><a href="#two">网页设计与制作</a> </li>
        <li><a href="#three">Flsh互动广告动画设计</a> </li>
        <li><a href="#four">用户界面(UI)设计</a> </li>
        <li><a href="#five">javascipt与JQuery网页特效</a> </li>          
    </ul>
    <h3 id="one">平面广告设计</h3>
    <p>
        如果网页内容过多，页面过长，浏览页面时就需要不断的拖动滚动条，
        来查看所需要的内容，这样的效率低，且不方便，为了提高检索速度，
        HTML5提供了一种特殊的链接方式：锚点链接，提供创建锚点链接，用户能够快速定位到目标内容。
        创建锚点链接分为两步：
        1. 使用 `<a href="#id名">链接文本</a>`创建链接文本
        2. 使用相应 的 id 名标注跳转目标的位置
    </p>
    <h3 id="two">平面广告设计</h3>
    <p>
        HTML5提供了一种特殊的链接方式：锚点链接，提供创建锚点链接，用户能够快速定位到目标内容。
        创建锚点链接分为两步：
    </p>
    <h3 id="three">平面广告设计</h3>
    <p>

        1. 使用 `<a href="#id名">链接文本</a>`创建链接文本
        2. 使用相应 的 id 名标注跳转目标的位置

    </p>
    <h3 id="five">平面广告设计</h3>
    <p>

        1. 使用 `<a href="#id名">链接文本</a>`创建链接文本
        2. 使用相应 的 id 名标注跳转目标的位置

    </p>
•</body>

qq_40626302

关注

21
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
HTML5-基础知识点

HTML5 是(HyperText Markup Language) 的第五个版本，了解H5 的基本结构和语法，文本控制标记，图像标志，以及超链接标志。H5之前：各个浏览器之间标准不统一，H5 的目标：统一互联网通用标准，将Web 带入一个成熟的应用平台，在H5 平台上，视频，音频，图像，动画，及电脑的交互都被标准化。
复制链接

扫一扫

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	商标注册	`®`
。	摄氏度	`°`
±	正负号	`±`
x	乘号	`×`
÷	除号	`&divide`
2	平方2 （上标2)	`²`
3	立方3 （上标3）	`&sup3`;

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	商标注册	`®`
。	摄氏度	`°`
±	正负号	`±`
x	乘号	`×`
÷	除号	`&divide`
2	平方2 （上标2)	`²`
3	立方3 （上标3）	`&sup3`;

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	商标注册	`®`
。	摄氏度	`°`
±	正负号	`±`
x	乘号	`×`
÷	除号	`&divide`
2	平方2 （上标2)	`²`
3	立方3 （上标3）	`&sup3`;