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属性必须写,图像标签的多个属性须写在标签名之后
属性不分先后,空格分开,属性=“属性值”
②路径
目录文件夹:存放页面相关素材
根目录:目录文件第一层即根目录
相对路径:
同级 :文件名.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
-->
特殊字符:
空格: ;
小于号:& lt; (大概是less?)
大于号:& gt;