html基本语法特性

一、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>