初识HTML

一、HTML的基础标签:

1.1. html 标签 <html>

作用:
告诉浏览器这是一个网页,也就是说告诉浏览器我是是一个HTML文档

注意点:
其他所有的标签都必须写在html标签里面,也就是写在html开始标签和结束标签中间。

1.2. head 标签<head>

作用:
用于给网站添加一些配置信息

注意点:
一般情况下,写在head标签内部的内容都不会给用户查看,也就是说:一般情况下,写在head标签内部的内容我们都看不到。

1.3. title 标签 <title>

作用:
专门用于指定网站的标题,并且这个指定的标题将来还会作为用户保存网站的默认标题

注意点:
title标签必须写在head标签里面。

1.4. body 标签 <body>

作用:
专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)

注意点:

  • 一定要将需要显示的内容写在body中
  • 一对html标签中只能有一对body标签
<html>
    <head>
        <meta charset="UTF-8" />
        <title>百度一下,你就知道</title>
    </head>
    <body>
        能看到我吗?
    </body>
</html>

1.5. h 系列的标签

h系列的标签一共有6个,从大到小依次是h1到h6。它的语义是用来给文本添加标题,独占一行。

格式:
<h1>我是标题H1</h1>

注意点:

  • 在企业开发中,要慎用h系列的标签,特别是h1标签,一般情况下一个界面中只能出现1个h1标签。

1.6. p 标签 <p>

用于告诉浏览器那些文字是一个段落

注意点:
单独占一行

1.7. hr 标签 <hr />

在浏览器中显示一条分割线,单独占一行。

hr标签可以写也可以不写,如果不写,那么就是按照HTML的规范来编写的,如果协商,那么就是按照XHTML的规范来编写的。但是在HTML5中,由于HTML5兼容了HTML和XHTML所以写不写都可以。由于hr标签是用来修改样式的所以不推荐使用,一般开发中,添加水平心啊一般都是使用CSS和盒子来做。


1.8. img标签

作用:在网页上插入一行图片<img src="图片路径" \>
写在标签中的 key = value 这种格式的文本称之为标签的属性。

img标签的标签属性:

属性 说明
src (source) 告诉浏览器需要插入的图片的路径,以便于浏览器到该路径下找到需要插入的图片
alt (alternate) 规定图片的代替文本,只有在src指定的路径下找不到图片,才会显示alt指定的文本
title 悬停文本,介绍这张图片,只有在鼠标移动到图片上的时候才会显示
height 设置图片的高度
width 设置图片显示的宽度

注意点:

  • img标签添加的图片默认不是占一整行空间
  • 如果想让图片等比拉伸,只写高度或者宽度即可

绝对路径和相对路径

  1. 绝对路径:文件在电脑的具体盘符的位置<img src = "E:/sources/images/pic.jpg"/>
  2. 相对路径:文件相对于另一个文件的位置
相对路径的类型 相对路径例子
相对路径同级 <img src = "pic.png"/>
相对路径下级 <img src = "images/pic.png"/>
相对路径上级 <img src = "../pic.png"/> (../代表找到上级目录)
top Created with Sketch.