一、html的基本语法特性
1.1 html对换行,tab不敏感
html只在乎标签的嵌套结构,嵌套关系,与换行、tab无关。换行与tab不影响页面的结构。
所以:
<div> <div>
<h3>...</h3> 等价于 <h3>...</h3>
<p>...</p> <p>...</p>
</div> </div>
也就是说:html不依靠缩进来表示嵌套,就是只看标签的包裹关系,但是我们也要有良好的缩进代码的习惯。
1.2 空白折叠现象
html中所有的文字之间,如有空白折叠现象、换行、tab都将被折叠为一个空格。
1.3标签要严格的封闭
如果标签不严格封闭是大灾难。 ( <h></h>)
二、h和p标签
2.1 h系列
<h1>到<h6>都是标签
h没有嵌套关系
h是容器级标签,理论上里面可以放置p、ul。只是法律上允许,语义上不要这样写(在标题上放置p(段落)不合适)。
2.2 p标签
html中标签是分等级的,分为两种:容器级、文本级。
p是一个文本级的标签,里面只能放文字、图片、表单元素。
三、图片
3.1 能用的图片类型
页面上可以直接插入的图片类型:jpg、gif 、png、bmp等
不能插入的图片类型:psd、ai.
3.2 语法
html页面不是直接插入图片的,而是插入图片引用的地址
插入方法:
<img src=" tupian.jpg"/>
src 是img标签的属性,tupian.jpg是这个属性的值。
3.3alt属性
<img src ="tupian.jpg"alt="邓伦的头像"/>
alt是英语代替的意思,就是不管什么原因,当这个图片无法显示的时候,出现被代替的文字是“邓伦的头像”。
3.4 相对路径
html中插入图片,现有两个文件,一个是html文件,一个是jpg文件。
1)当图片在文件夹里面的时候
<img src="images/tupian.jpg"alit="邓伦的头像"/>
如果在很深的文件夹里也不怕,可以一直罗列
<img src="images/touxiang/"tupian.jpg"alt="邓伦头像"/>
2)当图片在前一层的文件夹中
<img src="../images/tupian .jpg"alt="邓伦的头像"/>
../表示文件在前一层的文件夹中,如果在更前一层就用../../ 可以一直叠加。
四、超级链接
4.1a标签
一个网站都是由很多个html页面组成的,html网页之间可以通过超级链接来互相跳转,从而形成一个网。
语法:
<a href="1.html">邓伦头像</a>
a是一个文本级的标签
4.2a标签的另外两个属性
title悬停文本(鼠标的悬停文本)
<a href ="1_img.html"title="很帅哦">邓伦头像</a>
target:是否在新窗口打开
<a href="1.html"title="很帅哦"target="_blank">邓伦头像</a>
blank是空白,就是新建一个空白窗口,有一个_.
完整的超级链接:
<a href="1.html"title="悬停文本"target=_blank">链接内容</a>
4.3页面当中也可以有锚点
锚点用name属性来设置,一个a标签如果有name标签或者是id属性,那么就是页面的一个锚点。
<a name="wdzp">我的作品</a>
或者<a id="wdzp"我的作品</a>
那么网址:1.html.#wdzp就能让这个锚点在页面的最顶端显示,此时页面卷动到:我的作品。
<a href ="1.html.#wdzp">点击我就查看我的作品</a>
4.4 a 也是一个文本级的标签
比如一个段落中的所有文字都能被点击,那么应该
p 包裹a:
<p>
<a href="....html">段落...</a>
</p>
a的语义要小于p,a就是可以当做文本来处理,所以p 里面相当于放的纯文字,还能制作被点击的图片。
<a href="....html"><img src="images/tupian.jpg"/></a>