HTMl基础学习


前言

自己自学前端的记录-01


一、HTML是什么?

首先HTML文件是打开网页的一种格式,我们常见到的网页基本上都是以 .html后缀结尾的文件,所以也叫做HTML文件。

HTML指的是超文本标记语言(Hyper Text Markup Language),是用来描述网页的语言,它并不是编程语言,是标记语言(Markup Language),由各种标签组成,比如图片标签,段落标签,视频标签…等

二、HTML语法规范

1.基本语法规范

  • HTML都是由尖括号包括起来的关键字,<html></html>
  • HTML基本上都是一些双标签,比如<p></p>,<div></div>
  • 也有少数单标签,例如:a标签,img标签,换行标签<br/>

2.标签关系

双标签关系可以分为两类:包含关系和并列关系,例如:

<!-- 并列关系 -->
<div></div> 
<div></div> 
<!-- 包含关系 -->
<div>
	<div></div> 
</div> 

三、HTML基本结构标签

标签名定义说明
<html></html>HTML标签页面中最大的标签,也成为根标签
<head></head>文档的头部在head标签中设置title标签
<title></title>文档标题打开网页时显示的标题
<body></body>文档主题包含元素所有的内容

在这里插入图片描述

四、网页开发工具

目前前端用的开发工具都是使用vscode,使用vscode可以先输入! 然后直接按tab键生成HTML骨架。

  • 文档类型类型声明标签
    <!DOCTYPE> 是文档声明类型,作用就是告诉浏览器使用哪种HTML版本来显示网页
    <!DOCTYPE html> 
    
    这句话就是当前页面采取的是 HTML5 版本显示网页
  • lang 语言种类
    • en 定义为英文
    • zh-CN是中文网页

五、HTML常用标签

1.标题标签

	<h1>这是一级标题</h1>
	<h2>这是二级标题</h2>
	<h3>这是三级标题</h3>
	<h4>这是四级标题</h4>
	<h5>这是五级标题</h5>
	<h6>这是六级标题</h6>

在这里插入图片描述

这是作为标题使用的,重要性从h1到h6依次递减

2.段落和换行标签

  • 段落标签
    <p>段落标签</p>
    特点:文本在段落中会随着浏览器窗口的变化而变化
  • 换行标签
    <br>也可以是<br/>
    特点:这是单标签,只是简单的开始新的一行

3.文本格式化标签

  • <div> 和 <span> 标签是没有语义的,就是一个盒子
    <div> 是占网页一整行的盒子,一行只能放一个,是块级元素
    <span> 一行上可以方很多个,是行内元素

4.图像标签和路径

  • 图像标签
    在HTML中,img标签用来放图像的
    <img src="图像URL">
    
    scr是img标签的必要属性,用于指定图像文件的路径和文件名
  • 路径
    • 相对路径
      在这里插入图片描述
    • 绝对路径
      是指目录下的绝对位置,例如:“D:\web\img\logo.gif”

5.超链接标签

在HTML标签中,<a>用于定义超链接,作用是从一个页面跳转到另一个页面
<a scr="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

在这里插入图片描述


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值