@Html简介
HTML简介
自学HTML,简单笔记
1.换行和空格
一、HTML 代码中的所有连续的空格或空行(换行)都会被显示为一个空格,不管是内容还是标签之间。
二、当我们想让它们在同一行连续显示时,就让所有的代码之间没有空格,也不要换行。
三、当我们想要显示连续空格时,可以使用以下方法:
1、使用
<pre>
这是预格式文本,它保留了 空格
和空行。
</pre>
2、用空格实体符   代替空格,用换行标签
代替空行。
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文件上级目录,这种情况下我们需要使用…/符号来向,上进行回退查找