HTML基础知识

最新推荐文章于 2024-10-01 23:23:32 发布

猿人小彭

最新推荐文章于 2024-10-01 23:23:32 发布

阅读量150

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_37415014/article/details/107736232

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML简介

HTML：HyperText Markup Language，超文本标记语言。用于定义页面的结构。该文本书写的代码通常会被浏览器解析执行。
HyprText：超文本，不只包括文本，还可以包括图片、链接、音乐、视频等非文本元素。
Markup Language：标记语言，是一套标记标签，HTML使用标记标签来描述网页。

HTML注释和HTML元素

HTML注释：
书写格式：<!–注释内容–>
HTML注释主要用于描述代码功能，是给开发者和维护者看的。浏览器解析HTML代码是会自动忽略注释内容。
HTML元素：一个网页是由多个HTML元素组成的。

HTML标签

不同的标签名赋予元素不同的含义。标记名、属性、元素内容共同决定了一个元素。
在这里插入图片描述

空元素

空元素没有元素内容和结束标记，它也被称为自闭合元素。
空元素书写格式：<标记名>或<标记名 />

元素的层次结构

一个元素的内容可以包含其他元素，形成嵌套的层次结构，但是这两个元素不能相互嵌套。
若元素A直接包含元素B，A为B的父元素，B为A的子元素。
若两个元素有同一个父元素，它们互为兄弟元素。
若A直接或间接包含B元素，A为B的祖先元素，B为A的后代元素。

文档声明

文档声明既不是元素，也不是注释，它总是出现在HTML代码的第一行。
书写格式：<!DOCTYPE html>
作用：用于通知浏览器目前的文档正在使用哪个版本的HTML。

HTML元素

head元素（文档头）描述了文档的各种属性和信息。
<title>：表示文档标题，该标题会显示在浏览器的标题栏上。
<meta>：标识页面其他元素。
<meta charset=“UTF-8”>表示浏览器使用编码集UTF-8解析页面。

body元素（文档体），网页中的所有可见元素都放置在该元素内。
body元素可以包含大量的其他元素，来定义文档的内容结构。

div元素
它是一个非常常见的元素
它没有任何的语义
它仅仅表示一个容器，用于包含其他元素
在网站布局时，它通常用于表示页面的区域

语义结构化元素

<header>用于表示页面或某个区域的头部
<nav>用于表示导航栏
<article>用于表示文章或其他可独立页面存在的内容。
<aside>用于表示跟周围主题相关的附加信息。
<section>用于表示一个整体的一部分主题。
<footer>用于表示页面或某个区域的底部。

绝对路径和相对路径

相对路径：指的是相对于现在位置所在的位置，格式：协议://域名/目录（其中协议和域名可以省略）。
使用范围：可以在访问站内资源和站外资源时使用。
绝对位置：指的是直接到达目标的位置，格式：./目录，返回上级目录需要使用…/（其中./可以省略）。
使用范围：只能在访问站内资源时使用。

a标签
a标签的作用：
1、跳转到指定网址，eg：<a href=“www.baidu.com”>百度</a>
其中，a中还可以添加target属性，表示跳转网址的方式，target=“_self”表示不重新打开网页面跳转网址，target=“_blank”表示重新页面跳转网址，但是一般不使用target属性，因为要提高用户体验，不使用target属性默认值为“_self”。
2、表示锚点，一个页面内容太多，使用锚点直接跳转到指定内容。
格式：<h1 id=”maodian”>内容</h1>
<a href=”#maodian”>跳转到内容</a>
3、功能链接
<a href=”mailto:pnglin@foxmail.com”>给我发送邮件<a/>
<a href=”tel:13689637484”>给我打电话<a/>

文本类标签

段落标签：p，不能嵌套p标签，区域标签和h1-h6标签。
小段引用：q，引用名人名言（加引号）。
大段引用：blockquote，引用文章段落或整个文章（加缩进）。
缩写：abbr，<abbr tltle=”HyperText Markup Language”>HTML<abbr>鼠标放在HTML上可以看见它的全称。
cite：对参考文献的引用
<cite>www.baidu.com</cite> 元素内容变斜体。
<a cite=”www.baidu.com”>百度</a>表示引用位置来源。

强调文本：
<b><strong>在普通浏览器中元素内容都加粗，在阅读浏览器中<strong>重读。
<em><i>在普通浏览器中元素内容变为斜体，在阅读浏览器中<em>会重读。

无语义元素
<div>：无语义，表示页面的一块区域
<span>：无语义，仅用于给一小段文字添加样式
<br>：无语义，空元素，用于在页面中换行
<hr>：无语义，空元素，用于在页面中制造一个分割线
<pre>：无语义，保留文字在源代码中的格式