2020-12-07

html 入门

做一名前端初学者，我觉得首先就是学会html。因为我觉得在前端的学习中html起一个框架的作用。
众所周知一个完整的网页大概可以这样表示：
html+css+js = 网页
html作为前端网页最基础的部分，是很能体现一个前端程序员的基础功底的，所以在html的学习也是尤为重要的。
首先，我们先了解html的意思。HTML：Hyper Text Markup Language，我们可以称为超文本标记语言，是一种标识性的语言。而html的内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
一般html编写的软件比较多，比如，Brackets 、WebStorm 、VisualStudio Code 等等。此次html入门学习我们以VisualStudio Code 上的为准，
首先我们使用VisualStudio Code创建一个html文件，如图；
通过图片我们能够看出一个HTML的框架，我们大致可以分为；

结构

​ html 根标签

​ head 装的是浏览器的思想

​ body 装的是浏览器可以给人们看到的地方

**HTML的编写可以在一般都是在这种框架的进行编写。**

文本标签

关于HTML的编写，我们首先要记住最常用的一些文本标签；

h 标题

​ 范围 1-6 从大到小 超过了则标签失效

​ 属性： align 调整h标签水平位置

​ hr 分割线标签

​ width 宽度
​ color 颜色

​ p 段落标签

​ 1.独占一行
​ 2.对文本没有任何的影响
​ 3.浏览器会将我们N个空格和回车转换为1个英文空格。

​ lorem 添加测试文字

​ pre标签

​ 预格式化标签 所有的字符都会进行原样输出

​ ruby rt

​ 上方注释标签

​ ruby 放的是中文

​ rt 放的注音

​ 中间用空格隔开 并且注音要和文字一一对应

​ sup上标 sub下标

​ b 加粗 i 倾斜 u下划线

HTML实体

​ 空格 ‘&nbsp’ ‘&emsp’ 

​ 大于 小于 &lt &gt

​ & &amp

关于html实体这一部分大家可以在自己的电脑上实操尝试一下，这边就不一一列举。

超链接

​ a（默认情况下是蓝色字体，并且有下划线，点击一次之后会变成紫色）

​ 属性 ：

​ href 链接的地址

​ target 跳转方式 默认的情况下是 ‘_self’ 如果换成了"__blank"就会新建一个页面进行跳转

​ 1.普通链接 使用属性 href 进行跳转

​ 2.锚链接

​ 1.给要跳转的位置添加一个 id

​ 2.建立一个a标签

​ 3.在 当前的a标签里面的href属性里面 通过 #id名进行跳转

下面这个锚链接的应用大家可以自己尝试一下。

最后我要说的是 图片标签

图片标签

​ img

属性：

​ src ：图片的地址

​ alt : 当图片加载不出来的时候显示的文字

​ title :当鼠标移入时产生的文字

​ width： 图片的宽度

​ height：图片的高度

​ align: 并不是图片的水平位置 而是 图片两边文字的垂直位置

路径的写法

​ 1.绝对路径

​ 2.相对路径

​ ./表示当前资源所在的目录

​ …/ 返回上一级目录

​ 相对路径的 ./是可以省略的

关于路径写法的建议大家自己尝试一下效果

以上是我对于html入门一点总结和体会