1.4 HTML基本语法特性1

1. HTML对换行不敏感，对tab不敏感

html只在乎标签的嵌套结构，和换行及tab无关，只有嵌套才能影响页面结构；
也就是说，html不是依赖缩进来表示嵌套，就是看标签的包裹关系，但是，有良好的缩进，代码更易读，方便自己和合作的开发人员；

2. 空白折行现象

html中所有的文字之间，如果有空白，换行，tab等默认都被折为一个空格显示；
-思考：如果想显示多个空格怎么办？

3. 标签要严格封闭

剧透：html和css就是写代码，不是“编程”，因为这里面没有业务逻辑，没有加减乘除运算，没有与或非等逻辑运算....他们只是用来“画画用的”；

4. h 和 p 标签

• h系列：

<h1> 到 <h6> 都是标签：
<h1></h1> 一级标题
<h2></h2> 二级标题
……
<h6></h6> 六级标题

• p标签
  html标签是分等级的，html将所有标签分为两种：容器级 和 文本级
  • 容器级别：里面可以放置任何东西
  • 文本级别：只能放置文字，图片，表单元素；

5. 图片

• 通过img标签来插入图片：![](demo.jpg)
• 页面上能够插入的图片类型：jpg(jpeg),png,gif,bmp;
• 不能网页面中插入的图片类型：psd,ai;
• src可以引入图片的链接：
  • 本地：相对路径
  • 外链：绝对路径
• alt：当图片无法正常显示时的替代文字；

6. 超级链接

6.1 普通跳转链接

一个网站可以由很多html页面组成，html网页之间可以通过超级链接互相跳转，从而形成一个完整的网站；

• 超链的完整写法：<a href="detail.html" title="可以跳往详情页" target="_blank">点我跳往详情页吧</a>；
• href：要跳往页面的地址，可以是相对地址，也可以是绝对地址；
• title：悬停文本；
• target：在新窗口的打开方式；
  • _blank:blank就是“空白”的意思；表示在“新窗口”打开；
  • _self:self就是“自己”的意思；表示在“当前窗口”打开；

6.2. 页面内的锚点

• 本页面之间的相互跳转：实现同一页面中各个模块之间的跳转

<a href="#demo">到第一屏</a>
省略无数行代码。。。
<div id="demo">第一屏</div>

• 不同页面之间的跳转：实现不同页面之间不同模块的跳转；

//01page1
<a href="./02jianli.html#jianli">到第2屏</a>
//02jianli
<div><a href="#" id="jianli">这是简历页面</a></div>

6.3 a是一个文本级的标签

比如一个段落中的所有文字都能够被点击，那么应该：

<p>
      <a href="">段落段落段落段落段落段落</a>
</p>

a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。