前端---1-EW帮帮网

HTML是超文本标记语言，它是用来描述网页的一种语言

所谓超文本，有两层含义：1，它可以加入图片，声音，动画，多媒体等内容（超越了文本限制）

2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

网页的形成：由网页元素组成，这些元素通过html标签描述出来，然后通过浏览器解析来显示给用户

Web标准：结构(html)，表现(css)，行为(javascript)

HTML的语法规范

1.基本语法概述

1.HTML标签是由尖括号包围的关键词，例如<html>

2.HTML标签通常是成对出现的，例如<html>和</html>，我们称之为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。

3.有些特殊的标签必须是单标签（极少情况）,例如<br />，称之为单标签。

2.标签关系

1.双标签关系可以分为包含关系和并列关系

包含关系：

<head>

</head>

并列关系

文档类型声明标签

<!DOCTYPE>文档类型声明，作用为告诉浏览器使用哪种HTML版本来显示网页，且位置必须写在第一行，本身不属于HTML的部分

<!DOCTYPE html> 就表示当前页面采用的是HTML5版本来显示网页

当前文档显示语言

lang语言种类，en为英语，zh-CN为中文

charset字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字

在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

HTML常用标签

1.标题标签

HTML提供了6个等级的网页标题，即<h1> - <h6> h是head的缩写

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

2.段落标签

<p> 我是一个段落标签 </p>

paragraph的缩写

3.换行标签

<br />

break的缩写

文本格式化标签

1.加粗标签

或者

<b></b>

2.倾斜标签

或者

<i></i>

3.删除线标签

或者

<s></s>

4.下划线标签

或者

<u></u>

<div>和<span>标签

这两个标签是没有语义的，它们就是一个盒子，用来装内容的

div是division的缩写，表示分割，分区。span意为跨度，跨距

特点：<div>标签用来布局，但是现在一行只能放一个<div>，可以理解为一个大盒子

<span>标签也是用来布局的，一行上可以显示多个<span>，可以理解为小盒子

图像标签

image的缩写，src是<img>标签的必须属性，它用于指定图像文件的路径和文件名

要让图片在网页中显示，必须将图片和网页文件放在同一个文件夹中

<img>的其他属性：

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

设置图像标签时要注意：图像标签可以有多个属性，且必须写在标签名后面

属性之间不分先后顺序，标签名与属性、属性与属性之间都要以空格分开

属性采取键值对的格式，即属性=“属性值”

路径

目录文件夹：即普通文件夹

2.相对路径

相对路径是以引用文件所在位置为参考基础而建立出的目录路径

分类：同级路径，上一级路径，下一级路径

下一级路径使用/，上一级路径使用../

比如image1.png和Test文件夹在同一级目录下，test1.html和image2.png在Test文件夹下，则image1.png就是在test1.html和image2.html的上一级路径中，test1.html的上一级路径中有image1.png这个文件，image2.png的上一级路径中有image1.png这个文件。还可以说image1.png的下一级路径中有image2.png和test1.html这两个文件

在test1.html文件中写入<img src="../image1.png" />就能使用上一级路径中的image1.png文件，如果image1.png在test1.html的上上级路径中，就使用../../

而假设test2.html文件和image1.png以及Test文件夹在同一级目录中时，在test2.html文件中使用<img src="Test/image2.png" />就能使用image2.png文件了

3.绝对路径

定义：绝对路径是指从根目录（在 Windows 系统中是盘符，如 C:\，在 Linux 系统中是 “/”）开始，完整地描述文件或目录在文件系统中的位置。它能唯一地确定一个文件或目录的位置，无论当前的工作目录是什么，只要路径正确，就可以准确地定位到目标

超链接标签

<a>标签用于定义超链接，作用是从一个页面链接到另一个页面

1.语法格式

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

target可选的值默认是"_self"，表示在当前窗口打开一个链接

值为"_blank"表示新开一个窗口来打开这个链接

2.链接的分类

1.外部链接

例如<a href="https://www.baidu.com">百度</a>

2.内部链接

网站内部页面之间的相互链接。直接链接内部页面名称即可

如：<a herf="index.html">首页</a>

3.空链接

如果当时没有确定链接目标时，<a herf="#">首页</a>表示一个空链接

4.下载链接

如果href里面地址是一个文件或者压缩包，点击这个链接则会下载这个文件

我遇到的一个错误，.html文件和这个压缩包不在同一路径下，所以点这个链接报错Cannot GET /images/BB1msKSi.rar 所以要确保它们在同一路径下

5.网页元素链接

如文本、图像、表格、音频、视频等都可以添加超链接

前端---1