初识HTML5

初识HTML5（超文本标记语言）

1、HTML语法
①标签不区分大小写
②允许属性值不使用引号
③允许部分属性值的属性省略
2、HTML标记：带有“<>”符号的元素，也称HTML元素
（1）分为两大类①双标记：也称体标记，由开始和结束两个标记符组成的标记

<标记名>内容</标记名>

②单标记：也称空标记，是指用一个标记符号即可完整的描述某个功能的标记

<标记名/>

（2）HTML注释标记：<!--注释语句-->
(3)标记属性：属性例如：字体、颜色、位置、字号等等

<标记名 属性1="属性值" 属性2="属性值2"...>内容</标记名>

在HTML开始标记中，可以通过"属性="属性值"的方式为标记添加属性，其中"属性"和"属性值"是以"键值对"的形式出现的。
（4）HTML5文档头部相关标记
①标记，之间的内容将显示在浏览器窗口的标题栏中。
基本语法格式

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

②标记：用于定义页面的元信息，可重复出现在头部标记中。
可以设置网页关键字、网页描述、网页作者、字符集、页面自动刷新和跳转。
③：在中使用该标记可引用外部文件，一个页面允许使用多个标记引用多个外部文件。
基本语法格式

<link 属性="属性值"/>

④

<style 属性="属性值">样式内容</style>

3、文本控制标记
（1）标题标记：h1、h2、h3、h4、h5、h6，字体依次变小
基本语法格式

<hn align="对齐方式">标题文本</hn>

①left：设置标题文字左对齐（默认值）
②center：居中对齐
③right：右对齐
（2）段落标记
语法格式

<p align="对齐方式">段落文本</p>

（3）水平线-语法格式

<hr 属性="属性值"/>

是单标记，常用属性：align（对齐方式）、size（水平线的粗细，以像素为单位，默认为2像素）、color（水平线颜色）、width（水平线的宽度）。 （4）换行标记
用于实现段落的强制换行效果。 （5）文本格式化标记 **b标签和strong标签**：文字以粗体方式显示 **i标签和em标签：文字以斜体方式显示 **s标签和del标签**：文字以加删除线方式显示 **u标签和ins标签**：文字以加下划线显示 4、图像标记 （1）常用图像格式 ①GIF：支持动画，也是一种无损的图像格式，支持透明。该格式常常用于Logo、小图标及其他色彩相对单一的图像。 ②PNG：包括PNG-8和真色彩PNG（PNG-24和PNG-32），相对于GIF，PNG最大优势是体积更小，支持alpha透明（全透明、半透明、全不透明），并且颜色过渡更平滑，但PNG不支持动画。IE6是可以支持PNG-8，但在处理PNG-24的透明度时会显示灰色。 ③JPG：所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。 **小图片考虑GIF或PNG-8，半透明图像考虑PNG-24，类似照片的图象则考虑JPG。** （2）图像标记的基本格式

<img src="图像URL"/>

src属性用于指定图像文件的路径和文件名
一些属性：
①alt：图像的替换文本属性，在图像无法显示时告诉用户该图片的内容。
②width和height：用来定义图片的宽度号高度，通常我们只设置其中一个，另一个会原图等比例显示。
③border：为图像添加边框、设置边框的宽度。但边框颜色的调整仅仅通过HTML属性是不能够实现的。
④vspace和hspace：分别调整图象的垂直边距和水平边距。
align：图象的对齐属性，用于调整图象的位置。
多学一招：使用title属性设置提示文字，图象标记<img/ >中的属性title可以设置鼠标悬停时图像的提示文字。
（3）相对路径和绝对路径
①相对路径：不带盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
设置分类：
a、图像文件和html文件位于同一个文件夹：只需输入图像文件的名称即可；
b、图像文件位于html文件的下一级文件夹：输入文件夹和文件名，之间用/隔开；
c、图像文件位于html文件的上一级文件夹：在文件夹之前加入“…/”,如果是上两级，则需要使用“…/…/”，以此类推。
②绝对路径：一般是指带有盘符的路径。
5、超链接标记
基本语法格式

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

href：用于指定连接目标的url地址，当为a标签标记应用href属性时，它就具有了c超链接的功能。
target：用于指定链接页面的打开方式，其取值方式由_self和_blank两种，其中_self为默认值，意为在原窗口打开，_blank为在新窗口打开。
6、锚点链接
创建锚点链接分为两步
① 使用“<a href="#id名">l链接文本</a>”创建链接文本
②使用相应的id名标注跳转目标的位置。