HTML基础知识

今天也要努力学编程

已于 2022-08-18 10:23:44 修改

阅读量231

点赞数

分类专栏：前端文章标签： html 前端

于 2022-08-14 19:23:51 首次发布

本文链接：https://blog.csdn.net/matrix_xiaobai/article/details/126335113

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

1.基本语法

<html></html>		双标签
<br />				单标签

2.标签关系

包含关系（父子关系）

<head>
    <title></title>
</head>

并列关系

<head></head>
<body></body>

3.基本结构标签

<html>
	<head>
	    <title>我的第一个页面</title>
	</head>
	<body>
		你我之间，黑马洗练，月薪过万，一飞冲天
	</body>
</html>

标签名	定义	说明
`<html></html>`	HTML标签	页面中最大的标签，称为“根标签”
`<head></head>`	文档的头部	注意在head标签中我们必须要设置的标签是title
`<title></title>`	文档的标题	让页面拥有一个自己的网页标题
`<body>/<body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面

4.开发工具

VSCode

在这里插入图片描述

5.标签语义

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰

6.常用标签

标题标签h1-h6

<h1>我是一级标题</h1>

1.加了标题的文字会加粗，字号变大

2.一个标题独占一行

段落标签和换行标签

<p>我是一个段落标签</p>
<br/>换行，break的缩写，单标签

文本格式化标签（加粗，斜体，下划线）

语义	标签
加粗	`<strong></strong>或<b></b>`
倾斜	`<em></em>或<i></i>`
删除线	`<del></del>或<s></s>`
下划线	`<ins></ins>或<u></u>`

div和span标签

盒子，用来装内容

<div>这是头部</div>
<span>今日价格</span>

div标签用来布局，但是一行只能放一个div，大盒子

span标签用来布局，但是一行只能放多个span，小盒子

图像标签和路径

<img src="图像URL"/	>			单标签

src是属性，它用于指定图像文件的路径和文件名

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示时的文字
title	文本	提示文本。鼠标放到图像上，显示的文字
width	像素	宽度
height	像素	高度
border	像素	边框粗细

路径

相对路径：图片相对HTML页面的位置

相对路径分类	符号	说明
同一级路径		位于HTML文件同一级如`<img src = "baidu.gif" />`
下一级路径	/	位于HTML文件下一级如`<img src = "images/baidu.gif" />`
上一级路径	…/	位于HTML文件上一级如`<img src = "../baidu.gif" />`

超链接标签

格式

<a href = "跳转目标" target = "目标窗口的弹出方式"> 文本或图像 </a>

属性	作用
href	用于指定链接目标的url地址，必须属性
target	用于指定链接页面的打开方式，其中_self为默认值 _blank为在新窗口打开

链接分类

1.外部链接 http://www.qq.com

2.内部链接 XXXXX.html

3.空链接 a href=“#”

4.下载链接如果href里面的地址是一个文件或者压缩包，或下载这个文件

5.网页元素链接在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

6.锚点链接点击链接，快速定位到页面中的某个位置

·在链接文本的href中，设置属性值为#名字的形式，如