网页概述及HTML结构、标签分类

最新推荐文章于 2022-11-16 19:35:00 发布

吃不到棒棒糖的小熊

最新推荐文章于 2022-11-16 19:35:00 发布

阅读量1.3k

点赞数 6

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

本文链接：https://blog.csdn.net/m0_59897687/article/details/118424702

版权

HTML5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了网页的基础知识，包括静态与动态网页的区别，Web标准的构成，以及HTML的结构和常见标签。重点讲解了HTML标签，如<head>、<body>、<h1>至<h6>、<p>、<br>、<img>、<a>等，并解释了它们的功能和用法。此外，还提及了CSS和JavaScript在网页设计中的作用，以及浏览器内核对网页渲染的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页概述

网页概念：网页可以看做承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。

网页组成元素：网页主要由文字、图像和超链接（超链接为单击可以跳转的网页元素）等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。

静态网页与动态网页

静态网页：用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。静态网页更新不方便，但是访问速度快。

动态网页：显示的内容则会随着用户操作和时间的不同而变化。动态网页可以和服务器数据库进行实时的数据交换。

网页名词解释

名词	名词释义
Internet网络	就是通常所说的互联网，是由一些使用公共语言互相通信的计算机连接而成的网络。
WWW	WWW（英文World Wide Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务。
URL	URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符” URL其实就是Web地址，俗称“网址”。
DNS	DNS （英文Domain Name System的缩写）是域名解析系统。
HTTP和HTTPS	HTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全。通信的规则。
Web	Web通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。
W3C组织	W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。

Web标准

Web标准是由W3C和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的HTML、XHTML、CSS、Javascript等等。

Web标准的构成：结构标准（对网页元素进行整理和分类）【相当于房子的框架】、表现标准（设置网页元素的版式、颜色、大小等外观样式，主要指CSS）【相当于房子的装修】、行为标准（指网页模型的定义及交互的编写，主要包括两个部分：DOM和ECMAScript）【相当于房子内部的设备】

HTML概念：HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

CSS概念：CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

JavaScript概念：JavaScript是网页中的一种脚本语言，其前身叫做LiveScript，由Netscape(网景)公司开发。后来在Sun公司推出著名的Java语言之后，Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并把它改名为JavaScript。

浏览器内核

浏览器内核是浏览器最核心的部分，负责对网页语法的解释并渲染网页（也就是显示网页效果），是渲染引擎（标准叫法）的通俗叫法。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。

常见浏览器内核
Trident内核	IE浏览器
Gecko内核	Firefox浏览器
Webkit内核	Safari（苹果的浏览器）
Presto内核	Opera浏览器
Blink内核	由谷歌和Opera开发

HTML结构

<!--文档声明，声明当前网页的版本-->
<!DOCTYPE html>

<!--html的根标签（元素），网页中的所有内容都要写在根元素的里边-->
<html>
    
    <!--head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页-->
    <head>

        <!--meta标签用来设置网页的元数据，这里的meta用来设置网页的字符集，避免乱码问题-->
        <meta charset="uft-8">

        <!--title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容-->
        <title>标题</title>
    </head>


    <!--body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写进body里-->
    <body>
        身体部位
        <br/>
    </body>

</html>

HTML标签分类及常用标签

标签分类

单标签: 只有一个标签：br,
双标签：有开始和结束标签比如：html,head,body

常用标签

head

body

文档体

属性

bgcolor='颜色'
```
<body bgcolor='#d3d6d4'> 
</body>
```

<h1>-<h6>标签

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>
<h4>这是标题</h4>
<h5>这是标题</h5>
<h6>这是标题</h6>

<p>标签

<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。

<p>这是一个段落</p>

<br>标签

<br> 可插入一个简单的换行符。

<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。

请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。

注：请使用 <br> 来输入空行，而不是分割段落。

<br/>

<hr>标签

<hr> 标签在 HTML 页面中创建一条水平线。

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

<p>这是一个段落</p>
<hr/> <hr color="颜色" size="粗细" width="宽度"/> 此处是水平换行线
<p>这是一个段落</p>

<font>标签

字体

属性

color

文字的颜色
size

注意：size表示尺寸，取值从 1到7的一个整数，没有单位，用来设置文字的大小

<font> 规定文本的字体、字体尺寸、字体颜色

<font size="字体" color="颜色" face="字型">文本内容</font>

<mark>标签

高亮展示

<img>标签

图片标签是自结束标签，img这种元素属于替换元素（基于块元素和行内元素之间，具有两种元素的特点）

img 标签：可以插入一张图片到网页。其中src属性设置图片的路径

1. 路径分类

1 相对路径（相对于当前文件所在的目录）
当前目录：./ 通常可以省略
父目录：../ 不能省略
2 绝对路径（从磁盘跟目录寻找文件）在开发中几乎不用

2.属性：
src: 设置图片路径

alt: 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示alt中的内容，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

width:设置图片宽度

height:设置图片高度。宽度和高度如果只修改了一个，则另一个会等比例缩放

alt:如果图片路径不对，则展示alt内容，
如果路径正确，图片正常展示，不显示alt内容

title:鼠标放到图片上的一个提示信息

<img src="./images/3.jpeg" alt="美女" width="200" height="200" title="我是一个美女" />

图片的格式：

        jpeg(jpg):支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片

        gif: 支持的颜色比较少，支持简单透明，支持动图，一般用来显示颜色单一的图片，动图

        png: 支持的颜色丰富，支持复杂透明，不支持动图，用来显示颜色丰富，复杂透明的图片（专为网页而生）

        webp：这种格式是谷歌新推出的专门用来表示网页中图片的一种格式，它具备其他格式图片的所有优点，而且文件还特别小。但是它的兼容性不好‘

base64: 将图片使用base64进行编码，这样可以之间将图片转换为字符，通过字符的形式来引入图片，一般都是一些需要和网页一切加载的图片才使用base64

效果一样时用小的，效果不一样时，用效果好的

<sup>标签

上标

<sub>标签

下标

4<sup>3</sup>

H<sub>2</sub>O

<a>标签

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指定跳转的目标路径，值可以是一个外部网站的地址，也可以是内部页面的地址。

超链接是一个行内元素，但是在a标签中可以嵌套除它自身外的任何元素

target属性：用来指定超链接打开的位置。可选值： _self （默认值，在当前页面中打开超链接）,_blank（在一个新的页面中打开超链接）

可以将超链接的href属性设置为"#"，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置。

id属性（唯一不重复的）：每一个标签都可以添加一个id属性，id属性就是元素的唯一标识，同一个页面不能出现重复的id属性。

可以跳转到页面的指定位置，只需将href属性设置为"#目标元素的id属性值"

在开发中可以将#作为超链接的路径占位符使用，也可以使用 javascript:; 作为href的属性，此时点击这个超链接什么也不会发生

<a href="#bottom">回到底部</a>

<a href="http://www.baidu.com" target="_blank">百度</a>

<a href="./index.html">首页</a>

<a href="./images/3.jpeg">
   <img src="./images/3.jpeg" alt="美女" width="200" height="200" title="我是一个美女" />
</a>

<a href="#">这是一个新的超链接</a>

<a href="javascript:;">这是一个新的超链接</a>

<a id="bottom" href="#">回到顶部</a>

当我们需要跳转到一个服务器内部的页面是，一般我们会使用相对路径。相对路径都会使用 . 或 .. 开头，"./"，"../"

        "./" 可以省略不写，如果不写 "./" 也不写 "../" 就相当于写了 "./"

        "./" 表示当前文件所在的目录

        "../" 表示当前文件所在目录的上一级目录

<marquee>标签

滚动

 <marquee direction='right'>
        <img src="./images/5.jpg" alt="" width="100" height="100">
        <img src="./images/5.jpg" alt="" width="100" height="100">
        <img src="./images/5.jpg" alt="" width="100" height="100">
        <img src="./images/5.jpg" alt="" width="100" height="100">
    </marquee>

<del>标签

删除线

<em>标签

斜体

<iframe>标签

内联框架用于向当前页面中引入一个其他页面

src指定要引入的网页的路径

frameborder指定内联框架的边框

<iframe src="https://www.baidu.com" width="800px" height="700px" frameborder="0"></iframe>

<audio>标签

audio标签用来向页面中引入一个外部的音频文件。音频文件在引入时，默认情况下不允许用户自己控制播放停止。

属性：controls 是否允许用户控制播放

autoplay 音频文件是否自动播放，如果设置了autoplay，则音乐在打开页面时会自动播放

loop 音乐是否循环播放

除了通过src指定外部文件的路径以外，还可以通过source来指定文件，支持该标签的浏览器显示文件内容，不支持的显示其中的文字

<audio src="./source/audio.mp3" controls autoplay></audio>

<audio controls autoplay>
    对不起，您的浏览器不支持播放音频！请升级浏览器！
    <source src="./source/audio.mp3">
</audio>