HTML简介

@Html简介

HTML简介

自学HTML，简单笔记

1.换行和空格

一、HTML 代码中的所有连续的空格或空行（换行）都会被显示为一个空格，不管是内容还是标签之间。

二、当我们想让它们在同一行连续显示时，就让所有的代码之间没有空格，也不要换行。

三、当我们想要显示连续空格时，可以使用以下方法：

1、使用

<pre>
    这是预格式文本，它保留了     空格

    和空行。

</pre>

2、用空格实体符 &nbsp 代替空格，用换行标签
代替空行。
3、用全角空格，全角空格被解释为汉字，所以不会被被解释为HTML分隔符，可以按照实际的空格数显示。
4、用word-spacing 属性。
5、用white-space 属性，这个属性声明如何处理元素内的空白符。

2.标题和段落

文本通常都是由标题和段落组成
##2.1段落是通过

元素标签进行定义的
##2.2标题是通过“标题标签”进行定义的

<p>公众号：伊洛的小屋</p>
<h1>标题：个人网站：https://yiluotalk.com</h1>
<h1> 表示主标题（the main heading），<h2> 表示二级子标题（subheadings），<h3>表示三级子标题（sub-subheadings）

3.文字标签

文字标签有很多，但是在书写网页的时候，关于文字的外在样式我们一般通过CSS来进行设置，下面会分两组列出一些文字标签。
弱语义：

<b>文字加粗</b>
<s>删除线</s>
<i>倾斜</i>

强语义：

<strong>文字加粗</strong>    //强调性最强，但不可多次使用，建议使用1-2次
<del>删除线</del>
<em>倾斜文字</em>  //强调性强，可多次使用

4.结构标签和注释

<div>大容器，单独占一行</div>
<span>小容器，可与其他内容一起占一行</span>

注释：ctrl+? 不会在浏览器显示内容，一般用作程序员写代码的提醒，项目上线前，要提醒程序员要删除注释，因为无用代码会影响网页打开的速度。

5.图片标签基本介绍

**<img src="04.jpg"/>** 

src代表资源，属性名=“属性值” 这种书写方式叫做键值对语法也叫做KV对

**<img src="04.jpg"  width="100"  height="100"/>**

**<img src="04.jpg"  width="100" />**  

//只设置宽或高中的一个属性，另一个会按照原图的比例缩放

**<img src="04.jpg"  title="hh"  alt="冰山" width="100" />** 

//title：鼠标悬停时候提示文字
//alt：当图片无法正常加载时才会显示出来写的文字，写的文字一般来说是对图片的描述信息
//src:路径

6.路径

一、路径基本介绍
1.定义:在代码中我们可以将路径看做是查找某个资源所"走过“的路(一段定位地址)。
2路径分类:
一）、绝对路径
一般是收盘符为起点来查找某个资源，或者是一个绝对的网络资源地址，但是不推荐使用，因为代码没有扩展性，假如以盘符为起点查找，我们不能保证用户电脑的盘符关系与我们的电脑保持-致，如果是绝对的网络地址我们则不能保证该资源永远存且不发生变化。
在计算机中的完整路径

二）、相对路径
相对路径我们往往以当前代码所在文件为起点去查找某个资源
相对路径是相对于当前文件
二、相对路径分类及使用
1.同级路径: HTML文件与被查找的图片存放在同- -级目录下,二者是”兄弟"关系,此时我们只需要在src中写入图片名称即可
2.下级路径: HTML文件与图片不在同级目录,此时要查找的图片被放在了HTML文件的下级目录中,此时需要通过/符号来向下进行查找。下级路径写法,通过/来向下进行查找

3.上级路径:仍然以HTML文件做为起点,此时图片被存放在了HTML文件上级目录,这种情况下我们需要使用…/符号来向，上进行回退查找