HTML的基本知识-和常用标签-以及相对路径和绝对路径的区别

简介: HTML的基本知识-和常用标签-以及相对路径和绝对路径的区别

一、HTML的基本知识

1、网站:是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合

网页是网站中的一“页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。

网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,

常见以 .htm 或 .html 后缀结尾的文件,因此将其俗称为 HTML 文件。

2、什么是 HTML?

HTML 指的是超文本标记语言 (Hyper Text Markup Language) ,它是用来描述网页的一种语言。

HTML 不是一种编程语言,而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag)。

所谓超文本,有 2 层含义:

(1)、 它可以加入图片、声音、动画、多媒体等内容(超越了文本限制 )。

(2)、它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本 )。

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

3、Web 标准(重点) Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。

W3C(万维网联盟)是国际最著名的标准化组织。

遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外,还有以下优点:

(1). 让 Web 的发展前景更广阔。

(2). 内容能被更广泛的设备访问。

(3). 更容易被搜寻引擎搜索。

(4). 降低网站流量费用。

(5). 使网站更易于维护。

(6). 提高页面浏览速度。

4、Web 标准的构成

主要包括结构(Structure) 、表现(Presentation)和行为(Behavior)三个方面。

Web 标准提出的最佳体验方案:结构、样式、行为相分离。

简单理解: 结构写到 HTML 文件中, 表现写到 CSS 文件中, 行为写到 JavaScript 文件中。

5、常用的内核器:主要有五种,如下图所示:

二、基本语法概述

  1. HTML 标签是由尖括号包围的关键词,例如 。
  2. HTML 标签通常是成对出现的,例如 和 ,我们称为双标签。标签对中的第一个标签是
    开始标签,第二个标签是结束标签。
  3. 有些特殊的标签必须是单个标签(极少情况),例如
    ,我们称为单标签。
    双标签关系可以分为两类:包含关系和并列关系。
    4、每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。
    HTML页面也称为 HTML 文档。


5、 字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。 在标签内,可以通过 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

charset 常用的值有:GB2312 、BIG5 、GBK 和 UTF-8,其中 UTF-8 也被称为万国码,基本包含了全世界所 有国家需要用到的字符. 注意:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用“UTF-8”编码,尽量 统一写成标准的 "UTF-8",不要写成 "utf8" 或 "UTF8"。 6、.4 总结 1. 以上三个代码 vscode 自动生成,基本不需要我们重写. 2. 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面. 3. 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.

三、标签的语义

1、学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是指标签的含义,即这个标签是用来干嘛的。

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

标签语义

(1).

是个单标签,标签语义:强制换行。

(2).

标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。

3、在网页中,有时需要为文字设置粗体、斜体 或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使

文字以特殊的方式显示。

标签语义: 突出重要性, 比普通文字更重要.

4、

和 标签

标签用来布局,但是现在一行只能放一个

。 大盒子 标签用来布局,一行上可以多个 **5、图像标签和路径 (重点) 在 HTML 标签中, 标签用于定义 HTML 页面中的图像。格式:<img src="图像URL"/> 单词 image 的缩写,意为图像。 src 是标签的必须属性,它用于指定图像文件的路径和文件名。 所谓属性:简单理解就是属于这个图像标签的特性。 图像标签的其他属性:见下图所示:

6、图像标签属性注意点:

① 图像标签可以拥有多个属性,必须写在标签名的后面。

② 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

③ 属性采取键值对的格式,即 key=“value" 的格式,属性 =“属性值”。

  目录文件夹和根目录:

实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。

目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如 html 文件、图片等。

根目录:打开目录文件夹的第一层就是根目录。

7、 路径

页面中的图片会非常多, 通常我们会新建一个文件夹来存放这些图像文件(images),这时再查找图像,就需

要采用“路径”的方式来指定图像文件的位置。

路径可以分为:

  1. 相对路径::以引用文件所在位置为参考基础,而建立出的目录路径。
    这里简单来说,图片相对于 HTML 页面的位置。

  2. 绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
    例如,“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。
    8、超链接标签 (重点)
    在 HTML 标签中, 标签用于定义超链接,作用是从一个页面链接到另一个页面。
  3. 链接的语法格式: 文本或图像
    2. 链接的分类
  4. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度。
  5. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href=“index.html”> 首页 。
  6. 空链接: 如果当时没有确定链接目标时,< a href="#"> 首页 。
  7. 下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
  8. 网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
  9. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
     在链接文本的 href 属性中,设置属性值为 #名字 的形式,如 第2集
     找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:
    第2集介绍

    8、 HTML 中的注释和特殊字符
    如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
    HTML中的注释以“ ”结束。

快捷键: ctrl + /  加标签的目的:注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的.

添加注释是为了更好地解释代码的功能,便于相关开发人员理解和阅读代码,程序是不会执行注释内容的。

*9、特殊字符:重点记住:空格 、大于号、 小于号 这三个, 其余的使用很少,如果需要回头查阅即可。

在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。

常用的字符如下图所示:


相关文章
|
30天前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
48 5
|
2天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
2天前
|
存储 移动开发 前端开发
|
29天前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
37 2
|
29天前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
30 1
WK
|
2月前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
45 3
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
99 1
|
2月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
174 1
|
2月前
|
存储 JavaScript Java
使用NekoHTML解析HTML并提取META标签内容
关于NekoHTML的代码样例,这里提供一个简单的示例,用于展示如何使用NekoHTML来解析HTML文档并提取其中的信息。请注意,由于NekoHTML的具体实现和API可能会随着版本更新而有所变化,以下代码仅供参考。 ### 示例:使用NekoHTML解析HTML并提取META标签内容 ```java import org.cyberneko.html.parsers.DOMParser; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import org.xml
|
2月前
|
XML JavaScript Java
NekoHTML 是一个基于Java的HTML扫描器和标签补全器
**NekoHTML** 是一个基于Java的HTML扫描器和标签补全器(tag balancer),由J. Andrew Clark开发。它主要用于解析HTML文档,并能够“修正”许多在编写HTML文档过程中常犯的错误,如增补缺失的父元素、自动用结束标签关闭相应的元素,以及处理不匹配的内嵌元素标签等。这使得程序能够以标准的XML接口来访问HTML文档中的信息。 ### NekoHTML的主要特点包括: 1. **错误修正**:能够自动修正HTML中的常见错误,如未闭合的标签等。 2. **DOM树生成**:将HTML源代码转化为DOM(Document Object Model)结构,便