HTML最强入门学习笔记+GitHub小项目源码

时间:2024-03-07 21:37:19

HTML学习笔记

GitHub项目链接:

点我跳转GitHub
本博客采用markdown编写,上面这个链接跳转就是采用了html的<a></a>的代码设计的跳转提示~


1.创建文件可以使用 ! 在VSCode中进行快速补全从而生成一整个HTML结构

HTML组成

<!DOCTYPE = html>

<html>
  <head>
    <!-- 头文件中的内容 -->
  </head>

  <body>
    <!-- 主体中的内容 -->
  </body>
</html>



2.使用!DOCTYPE = html代码来告诉浏览器该文件是一个HTML5文件

DOCTYPE 是英文"document type"的缩写,译为"文件类型"



3.使用<title>标题内容</titile>来表示一个页面标题

<>内容</> 右边括号中的/表示结束,夹在两个括号中的字为标题的内容



4.使用<h1>文章标题</h>来表示一个一号文章标题,通过h后面的数字来控制标题的级别,h是***headtitle***的缩写,译为大字标题

这是h1

这是h2

这是h3

这是h4
这是h5
这是h6



5.使用<p>段落内容</p>来表示一个段落



6.使用<a href="" target="" ></a>来进行链接的跳转

a 是"anchor"的缩写, 英文的意思是锚点
其中href为需要跳转的链接
target为跳转的表现形式,引号中的内容为具体参数
target='_blank'表示新建标签页跳转



7.在6.的语法中,可以使用href="#"来表示一个空的链接,高亮、可点击,但不会跳转



8.图片显示方法

<img 
  src="" 
  alt=""
  width=""
  height=""
/>

其中src中的参数为图片的文件名(同一路径)
alt=""中的内容是对图片信息的描述,如果图片无法正常显示会返回引号中的描述,并且可以帮助盲人阅读图片
width表示图片宽度像素尺寸
height表示图片高度的像素尺寸



9.使用<b>加粗文字</b><strong>加粗文字</strong>都可以达到加粗文字的效果

其中<strong></strong>是新版本HTML的写法



10.使用<i>斜体文字</i><em>斜体文字</em>都可以达到倾斜字体的效果

同样的,<em></em>也是新版本HTML的写法



11. <!-- 注释的内容 --> 来表示一段注释