HTML的基本语法

时间:2022-12-31 13:40:56

一、HTML对换行,tab不敏感,它只在乎标签的嵌套与包含关系,并根据语义进行排版;

<div><h2></h2><p></p></div>

等价于这样:

  <div>
            <h2></h2>
        <p></p>
    </div>

1.在编辑页面上,展示出来的效果是有差异的,如上;

2.在浏览器展示出来的效果是一样的;

3.但是上面两个文件的保存大小不同,“第一个 < 第二个”;因为空格也是占内存的,所以一般为了提高加载速度,我们会把做好的网页利用工具进行如上的压缩,这样文档就相对之前要小,浏览加载速度也就要快,例如百度首页,如下:

HTML的基本语法

优化加载速度;

二、空白折叠现象

1.文本内容无论空多少个格或tab多少次,HTML默认就空一格;如下

HTML的基本语法

HTML的基本语法

三、HTML标签要严格封闭,否则会出错

四、h系列标签和p标签

1.HTML标签是分等级的,分别为:容器级、文本级;其中容器级标签可以放置任何东西,而文本级标签内部只能存在文字,图片,表单等;

 

 2.h系列标签是容器级标签,分别有:

<h1>...</h1>   一级标题

<h2>....</h2>  二级标题

 <h6>...</h6> 六级标题

3.p标签,是英文“paragraph”的缩写,段落标签的意思,属于文本级标签,只能存放文字,图片,表单;

 

五、图片

1. 网页是可以插入图片的,但插入的图片格式只能是jpg(jpeg)、png、gif、bmp(无损压缩),不允许插入psd、ai等格式的图片

2、网页上插入图片的语句是<img src="" alt=""  />

1)其中该标签是自封闭标签,也就是单标签,类似的还有<meta..../>元标签,src是该标签的属性” “内放置的东西就是该属性的值

2)其中“img”是英文“image” 图片 的缩写;

3)其中“src”是英语“source” 资源 的缩写,里边存放的是插入图片的路径

4)其中“alt”是英文”alternate“ 替代 的缩写,里边放置图片无法加载时或加载出错后的提示文字

 

3、相对路径(相对于我,你在哪里;就如物理上的”参照物“)

1)在<img src="" />标签的src属性中,我们需要放置加载进来的图片所在的位置及图片的名称;基本有三种写法:如下

第一种:如果我们在index.html中想插入KAOLA.JPG这张图片,那么相对路径的写法就是:src=”images/KAOLA.JPG“;(意思是相对于index.html,KAOLA.JPG在images文件夹

HTML的基本语法

 

那么也就是说有多少个文件夹,我们就从和index.html相同的目录开始,一步一步的往下找,直到找到KAOLA.JPG这个文件

 

第二种:如果我们在index.html中想插入KAOLA.JPG这张图片,那么相对路径的写法就是:src=”../KAOLA.JPG“;(意思是相对于index.html,KAOLA.JPG在images文件夹

HTML的基本语法

那么也就是说 " ../ "是文件所在目录的上一个目录位置;如上我们可以推出,如果index.html在多个文件夹内,我们想找到Koala.jpg这个文件,那么我们就从index.html开始,一个文件夹就../的一步一步出来,再找Koala.JPG文件

 

第三种:如果我们在index.html中想插入KAOLA.JPG这张图片,那么相对路径的写法就是:src=”../images/KAOLA.JPG“;(意思是相对于index.html,KAOLA.JPG在web文件夹的images文件夹

HTML的基本语法

 

六、超级链接

一个网站不单单只有一个网页,而是由多个网页链接组成,这里的”链接“指的就是超级链接;

1、超级链接的基本语句是:<a href=""  title=""  target="_blank"></a> 

1)其中a是英文anchor ”锚“的缩写,作用是给文本建立链接,就好像对外抛出一个锚,a标签属于文本级标签;

2)其中href是英文Hypertext reference ”超文本地址“的缩写,用于抛出的锚的目的地,就是指向哪个文件;

3)title是”悬停文本“,作用是当鼠标悬停在超链接文本时,会出现title中的内容,用于提示用户信息;

4)target是 ”目标“的意思,用于点击该超链接是否建立一个新的栏位来显示链接的内容;”_blank"属性值表示建立空栏位显示;

2、单个页面内使用a标签,进行锚点定位(用于当网页比较长的时候);

<a href="#name">...</a>该标签的意思是抛出锚点,指向a标签中name或id属性为name的位置;

也就是<a name/id="name"></a>这标签的意思是接收锚点;