一、HTML5的优势
1.兼容
HTML5并不是对之前HTML语言颠覆性的革新,它的核心理念就是要保持与过去技术的完美衔接,因此HTML5有很好的兼容性。
2.合理
HTML5中增加和删除的标签都是对现有的网页和用户习惯进行分析、概括而推出的。
3.易用
作为当下流行的标签语言,HTML5严格遵循 “简单至上”的原则。
简化的字符集声明。
简化的DOCTYPE。
以浏览器原生能力(浏览器自身特性功能)替代复杂的JavaScript代码。
二、HTML5结构
1.HTML5文档基本格式
<!DOCTYPE html>//文档类型声明
<html>//根标签
<head>//头部标签
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>//主体标签
</body>
</html>
<!DOCTYPE>标签 | <html>标签 | <head>标签 | <body>标签 |
---|---|---|---|
<!DOCTYPE> 标签位于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。 | DOCTYPE> 标签之后,也称为根标签,用于告知浏览器其自身是一个 HTML 文档。 | 定义HTML文档的头部信息,也称为头部标签,紧跟在<html>标签之后,主要用来封装其他位于文档头部的标签。 | 定义HTML文档所要显示的内容,也称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内。 |
文件的扩展名必须是.html或.htm
三、标签概述
在HTML页面中,带有"<>"的元素被称为标签
1.标签的分类
双标签:由开始和结束两个标签组成的标签
一般用法为 <标签名>内容</标签名>
单标签:指一个标签符号即可完整地描述某个功能的标签
一般用法为<标签名/>
2.文档头部相关标签
<title>:<title>标签用于定义HTML页面的标题,即给网页取一个名字,必须位于<head>标签之内。
<meta/>:<meta />标签用于定义页面的元信息,可重复出现在<head>头部标签中。
一个HTML文档只能含有一对<title></title>标签,<title></title>之间的内容将显示在浏览器窗口的标题栏中。
3.HTML的常用标签
1.文本标签
标题标签 | <hn>文本</hn> | n的取值在1~6之间,数字越大字体越小,可以自动换行 |
段落标签 | <p>内容</p> | 会自动换行 |
显示文本 | <span>内容</span> | 不会自动换行 |
水平线 | <hr color='' width='' size=''/> | color选择颜色;width选择宽度 ;size选择粗细 |
居中标签 | <center></center> |
2.文本样式标签
<font face='字体' color='文字颜色' size='字号'></font>
3.文本格式标签
文字加粗 | <b></b> 或 <strong></strong> |
斜体 | <i></i> 或 <em></em> |
删除线 | <s></s> 或 <del></del> |
下划线 | <u></u> 或 <ins></ins> |
4.语义标签:只表示某种特定的含义
<mark><mark>:高亮显示
<cite><cite>:引用,通常用于指定内容的出处
5.换行标签
<br />
6.特殊字符标签
空格 |  ; |
上标 | <sup></sup> |
下标 | <sub></sub> |
版权符号 | © |
注册商标 | ® |
摄氏度 | ° |
正负号 | ± |
除号 | ÷ |
7.图像标签
常见的图像格式:
GIF:支持动画、采用无损压缩、支持透明处理。通常用来做Logo、色彩相对单一的图像
PNG:体积小、支持透明、不支持动画、颜色过渡平滑
JPG(JPEG):支持的颜色多(超过256种)、体积大、采用有损压缩技术
图像标签:
<img src='图像的URL' alt='图片加载异常时的提示信息' width='宽度' height='高度' border='边框' title='鼠标悬停在图像上的提示信息 'vspace='垂直边距' hspace='水平边距' align='对齐方式'/>
8.路径:文件的存储位置
绝对路径:从盘符开始的路径或完整的网络路径
E:\A\B\C\D\images\1.png
http://localhost:8080/code/images/7.png
相对路径:从当前文件夹开始的路径,通过层级关系来描述文件的位置
./ :代表当前文件夹(目录)
../:代表当前文件夹的上一级文件夹(目录)