HTML5学习笔记2

HTML语法

2.1语法规范

<!--标签在尖括号中-->
<html></html>		<!--开始标签 结束标签-->
<br />				<!--单标签(特殊)-->

标签关系:包含关系 并列关系

例:

<!--包含 父子-->
<head>
	<title> </title>
</head>
<!--并列--> 
<head> </head>
<body> </body>

2.2基本结构标签

<html>		
	<head>	
		<title>my first page</title>
	</head>
	<body>
		abaabaaba
	</body>
</html>

2.3 DOCTYPE等

<!DOCTYPE html>		

当前页面HTML5版本,第一行
文档类型声明标签

<html lang="en">

当前文档显示语言,en英语,zh-CN中文,fr法语

<meta charset="UTF-8">

字符集

2.4 HTML常用标签

1.标题标签 <h 1>-<h 6>

每个标题独占一行
h1字号最大

<h1>一级标签</h1>
2.段落标签 < p >
<p>段落标签</p>
3.换行标签 < br />

单标签

啊吧啊吧阿八八八<br />
4.文本格式化标签

设置粗体,斜体,下划线等

加粗< strong > / < b >

<strong>加</strong>
<b>粗</b>

倾斜< em > / < i >
删除线< del >/< s >
下划线< ins >/< u >

5.< div > < span >标签

没有语义,盒子,用于布局
< div >独占一行,每行只能放一个
< span >内容跨行显示

6.图像标签和路径

①图像标签< img >
单标签
src指定图像文件的路径及文件名,必须
my_img.jpg (想要插入的图片名) 与网页html文件存放在同一个文件夹下

<img src="my_img.jpg" />

替换文本alt

<img src="my_img.jpg" alt="加载失败时这行文字就会出现" />

提示文本title

<img src="my_img.jpg" title="鼠标移动到图片上时就会出现这行文字" />

宽度width 高度height
单位为像素
只设置其中一个值时图像会等比例缩放

<img src="my_img.jpg" width=“500” height=“500” />

边框border
设置边框粗细,单位为像素,一般不在html里用

<img src="my_img.jpg" width=“500” border=“10” />

src属性必须写,图像标签的多个属性须写在标签名之后
属性不分先后,空格分开,属性=“属性值”

②路径
目录文件夹:存放页面相关素材
根目录:目录文件第一层即根目录

HTML5学习笔记2
HTML5学习笔记2
相对路径:
同级 :文件名.jpg
上一级 :…/同级文件夹名/文件名.jpg
下一级 :同级文件夹名/文件名.jpg
绝对路径:
本地机上的存储路径,从盘符开始
完整的网址

7.超链接标签< a >

从一个页面链接到另一个页面

外部链接:
href属性必须

target属性:
_self 默认 当前页面打开网址
_blank新窗口打开页面

<a href="http://www.xxxx.com" target="_self"> 某个外部网站</a>
<a href="http://www.xxxx.com" target="_balnk"> 某个外部网站</a>

内部链接:
目录文件下网站内部页面间的连接

<a href="xxx.html"> 内部网站</a>

空链接:

<a href="#"> 空</a>

下载链接:
这里xxx.zip为举例,可以替换为任意文件地址

<a href="xxx.zip">下载文件</a>

网页元素链接:
点击图片(可以替换为其他网页元素)就会跳转到该网址

<a href="http://www.xxx.com"><img src="img.jpg"></a>

锚点链接:
点击链接可以快速定位到页面的某个位置(类似于目录)

<a href="#pos1">位置1</a>
<!--目标位置标签添加id属性-->
<h3 id="pos1">位置1介绍</h3>

注释标签:
快捷键ctrl + /

<!--注释
	111
	 -->

特殊字符:
空格:&nbsp;
小于号:& lt; (大概是less?)
大于号:& gt;
HTML5学习笔记2

上一篇:Html5 Slider的技术升级改造


下一篇:html5 css iframe实现后台框架,仅用于学习案例