HTML简介、页面结构，常用标签（全）

最新推荐文章于 2023-11-25 10:03:47 发布
最新推荐文章于 2023-11-25 10:03:47 发布
阅读量1k 收藏 3
点赞数 1
分类专栏： HTML+CSS 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Azure_c_c/article/details/112309627
版权

目录

HTML简介

  • HTML 超文本标记语言（Hepertext Markup Language）
  • 它是一种用于描述网页的语言
  • 它负责定义网页的整体结构
  • HTML使用标签的形式来表示页面中的不同组成部分

标签格式

HTML 有两种标签格式

  1. 双标签：由开始标签和结束组成。
    语法：<开始标签名> … </结束标签名>
    例如：

    <html></html> <!-- html文档标签 -->

  2. 单标签：也叫做自结束标签。
    语法：<标签名/> 或 <标签名>
    例如

    <br/>  <!-- 换行 -->
<hr>   <!-- 水平线 -->

页面结构

一个标准的HTML页面结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<title>这是网页标题</title>
	</head>
	<body>
		网页的可见区内容
	</body>
</html>
  • <！DOCTYPE html> 此标签声明浏览器使用哪种HTML规范对页面进行解析；这里使用HTML5规范。
  • html：定义了HTML文档，此标签为所有标签的根标签。
  • lang：为html中的属性用于指定网页的语言，一般是给浏览器看的，根据设置的语言浏览器会提示是否需要翻译；en为英文，zh为中文等…
  • head：此标签用于对网页进行一些配置，用户不可见。
  • meta：必须位于head标签内；用于设置网页中的元数据（本身具有的特性），浏览器如何解析网页，或者网页的大致内容。
  • title：此标签设置网页的标题。
  • body：在此标签内设置的一些标签和内容都是用户可以看到效果的。

标签级别

块级元素（block element）
  • 在网页中独占一行。
  • 能设置元素宽度和高度
行级元素（inline element）
  • 能和其他元素占一行
  • 不能设置宽高
行级块元素（inline element）
  • 能和其他元素占一行
  • 能设置宽度和高度

常用标签

标签名描述级别
h1~h6标题标签；h1到h6对于搜索引擎的重要性性越来越低 ；块级元素
div页面的一块区域块级元素
p一块段落块级元素
ol,liol有序列表，li 列表中每一个项，默认含有数字序号；块级元素
ul,li无序列表，li 列表中每一个项，默认含有符号；块级元素
dl,dt,dd定义列表，主要对一些内容下定义块级元素
a超链接 ，可以从一个页面跳转到另一个页面行级元素
span文本标签行级元素
i文本标签。文字斜体显示行级元素
em文字标签，读音上强调，文字以斜体显示行级元素
b文本标签，文字加粗显示行级标签
strong文本标签，语义强调，文字加速显示行级标签
q短引用，文字被引号"包裹行级标签
img图片标签，引入外部的一个图片行内块元素
input表单标签，如：文本框、单选、复选框，按钮等行内块元素
textarea多行文本框行内块元素

H5语义化标签

便于搜索引擎来识别网页中的内容

标签名描述级别
header表示网页的头部结构，多用于放一些网页的log ，搜索框导航栏等…块级元素
nav导航区域块级元素
section表示一块独立的区块块级元素
hgroup标题组，可以在里面放大标题和小标题块级元素
article独立的文章块级元素
aside表示网页的侧边栏区域块级元素
footer网页的底部，用于放一些版权信息，友情链接（SEO有帮助），联系方式块级元素
blockquote长引用块级元素

资源标签

图片标签

img - 图片标签 src引入一个外部图片 alt 图片的描述。 图片无法加载时显示，搜索引擎会根据alt属性内容来判断图片内容。

通过width和height属性可以设置图片的宽度和高度，宽度和高度只能设置一个图片会等比例缩放。

图片格式：

  • jepg(jpg)
    • 支持的颜色比较丰富，不支持透明效果
    • 适合用来显示照片
  • gif
    • 支持颜色比较少，支持简单透明，支持动态图片
  • png
    • 支持颜色丰富，支持复杂透明
  • webp
    • google专为网页设计的一种图片格式
    • 支持颜色丰富，复杂透明，支持动图，占用内存少
    • 兼容性比较差。
  • base64
    • 它是一种编码格式，用来将图片转换一坨字符串
    • 因为Base64是文本字符串，直接放在网页中，不会产生图片的网络请求。
内联框架

iframe 内联框架，用来引入外部的网页，不会被搜索引擎抓取
标签属性：

  • src ：内部相对网页路径，或网络路径
  • width : 宽度
  • height : 高度
音频标签

audio 音频标签 ，引入一个外部的音频，根据浏览器不同一般情况都是使用mp3或ogg
标签属性：

  • src： 内部相对音频路径，或网络路径
  • controls：控制按钮
  • autoplay: 自动播放，主流浏览器默认情况下，都不会自动播放
  • loop: 循环播放
  • source： 作为audio的子标签，src属性引入音频资源
视频标签

video 视频标签 ，引入外部的视频，根据浏览器不同一般情况都是使用mp4,webm
标签属性：

  • src： 内部相对视频路径，或网络路径
  • controls：控制按钮
  • autoplay: 自动播放，主流浏览器默认情况下，都不会自动播放
  • loop: 循环播放
  • source： 作为audio的子标签，src属性引入视频资源
超链接

a标签 超链接 ，可以从一个页面跳转到另一个页面
标签属性：

  • href： 指定跳转的目标路径，可以是外部跳转也可以是内部相对页面跳转，还可以通过锚点的方式对当前页面位置区域的跳转。
  • id：每个元素都可以设置唯一个ID，相当于人的身份证一样；可以通过id进行位置区域跳转
  • target：页面的打开方式，常用两种：
    • _self：默认值，当前页面窗口打开
    • _blank：新窗口打开

HTML实体

因为HTML的一些比较特殊的性质，多个空格和换行在网页中会解析为一个空格，还有如果在网页上显示一个标签语法的话，也不会被浏览器以纯文本的方式显示，为了解决此问题专门定义了一些字符符号表示这些字符。
常用的HTML实体：

实体代码描述
&nbsp；空格
&gt；>
&lt；<
&copy；©（版权符号）

还可以引入Unicode编码字符使用方式：&#Unicode编码（以十进制）。

Azure_c_c
关注
专栏目录
掌握常用HTML标签：创建个人简介网页
qq_40254606的博客
08-07 1118
声明文档类型为HTML5。它告诉浏览器使用HTML5标准来解析这个文档。: 定义整个HTML文档的根元素。所有其他HTML元素都包含在这个元素内。: 包含文档的元数据（如标题、样式、脚本）。这些内容不会直接显示在网页上。: 定义文档的字符编码为UTF-8，保证文档能够正确显示各种语言的字符。: 定义文档的标题，显示在浏览器的标题栏或标签页上。: 定义文档的主体内容，包含网页上显示的所有内容。现在我们在中添加一个标题和简介文本。
Python Web开发
少点套路，多点诚意
06-24 1437
Web开发介绍 一、Web开发概述 1 C/S结构和B/S结构 C/S — Client/Server，即客户机/服务器结构 B/S — Browse/Server，即浏览器/服务器结构  2 B/S结构的优势 2.1 不用通知客户端安装某个软件 2.2 不用通知客户端升级 2.3 可轻松地实现跨平台 3 访问网站过程 用户向服务器发起请求，服务器将HTML文件返回给用户，
从零开始学Python Flask Web（一）--基础知识讲解
馒头Lynn的博客
09-05 4623
前言：馒头现在是一个逗逼渣男研究生，在决定写python web相关的东西之前，馒头写过java的ssh，ssm以及springboot。自学python后，走了很多弯路，为了世界更加美好，馒头决定把web知识系统的归纳一下，让我们一起走进BS结构，欢迎大家提出宝贵建议。 HTTP 首先说一下我们访问网站的流程：我们做好网站之后发布在互联网上（服务器），我们的服务器有一个全世界唯一的ip地址（...
pythonweb开发基础知识_《Python web开发》笔记 一:网页开发基础
weixin_39627052的博客
12-08 200
网页基础知识网页的构成网页由html、css和Javascript构成，html是框架，CSS是样式和装饰，JS则是各项功能实现。我们把网页的组成类比成一栋房子，Html相当于房子的结构，CSS相当于房子的装修装饰，JavaScript相当于房子的水电通信等使用功能。HTML基础知识HTML(Hyper Text Markup Language)：超文本标记语言，通过各种标签来表示网页的骨架。大概...
[python网站开发] 一.Django入门知识及创建第一个网站
杨秀璋的专栏
06-27 1万+
随着Python应用越来越广泛，学习Python相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，同时国内用Python开发的网站越来越多，比较知名的网站如知乎、豆瓣、果壳等，再加上之前自己数据分析和网络爬虫一直使用的是Python，对它比较熟悉，所以这系列文章将讲述Python搭建网站，后面会结合数据分析可视化进行深入研究。Python有许多款不同的Web框架，...
python的web开发
design321的专栏
10-17 743
1、python
HTML常用标签代码
05-07
在本资源中，我们看到的"HTML常用标签代码"显然是一个帮助初学者或开发者学习和练习HTML标签的资料。下面将详细介绍一些常见的HTML标签及其用法。 1. `<html>`: 这是每个HTML文档的根元素，包含整个网页的代码。...
20.2 HTML 常用标签
07-28
在“20.2 HTML 常用标签”这个主题中，我们将深入探讨一些HTML中不可或缺的核心标签，这些标签对于创建功能性且结构清晰的网页至关重要。 1. **文档类型声明（<!DOCTYPE html>）**：这是每个HTML文档的开头，用于...
HTML基本结构标签以及常用标签
qq_52341981的博客
08-23 2930
我们常用的开发工具：VScode 首先我们先看到的是HTML的基本结构标签 由上图我们依次解释其用途 <html></html>作为页面中一个最大的标签，包裹住其他小标签，称其为根标签 <head></head>文档的头部，在这其中必须包含tilte标签 <title></title>文档的标题，给页面设置标题 <body></body>文档发主体，页面中的内容基本都放在改标签里。 接着我们来.
HTML5中新标签和常用标签详解
09-28
除了这些新标签，HTML5还引入了一些其他常用的标签，例如： 1. `<header>`：页面或区块的头部，通常包含导航、logo、搜索表单等。 2. `<hgroup>`：用于组合多个标题元素（`<h1>`至`<h6>`），提供更清晰的标题层次。...
HTML简介及常用标签（中）
05-10
### HTML简介及常用标签（中） #### 一、标题标签（`h1`—`h6`） 在HTML中，`h1`—`h6`标签被用来定义不同的标题等级，其中`h1`表示最高级别的标题，而`h6`则表示最低级别的标题。这些标签通常用于网页结构中的...
Python网页开发（持续更新ing...）
诸神缄默不语的博客
05-31 1109
本文介绍Python网页开发的相关知识
python网站开发
weixin_46355013的博客
02-27 228
前言 阿里云上一个月9.5元的轻量级服务器总是要做点什么的，而且还有白嫖的域名，所以我决定做一个网站来记录我将来的考研之路。 网站的一些想法 首先会有一个倒计时 网站主要有两个内容 一个是记录我每天的学习内容之类的，另一个是我的一些经验分享 思路有了，就开始做吧！ 所用技术 网站用python3.7编写，使用的框架是flask，数据库是mongodb 倒计时设计 咱也不是专业的，所以我直接在codepen上找了一个倒计时模板，用js设计的，如下 简单明了 网页的两个模块 一个是主要的每天记录，这是多个标签
python web.py 网页开发
mixboot
09-01 1093
1. 安装web.pypip install web.py#cat webCode.py import web urls = ('/','index') class index: def GET(self): return "Hello World"if __name__ == "__main__": app = web.application(urls,global
Python Web开发（详细教程）
热门推荐
Python84310366的博客
08-02 1万+
PythonWeb开发可以涵盖多个方面，包括服务器端开发、数据库管理、前端设计和API开发等。在服务器端开发中，常用的Python Web框架有Django、Flask和Bottle等。这些框架提供了一套工具和结构，使得开发者能够更高效地构建Web应用程序。在PythonWeb开发中，数据库管理也是一个重要的方面。Python提供了多种数据库连接库，如SQLAlchemy和psycopg2，可以轻松地与主流数据库（如MySQL、PostgreSQL和SQLite）进行交互。
Python Web开发基础知识篇
最新发布
bagell的博客
11-25 382
Web，全称为World Wide Web，也就是WWW，万维网。url：统一资源定位符Web工作流程：URL的服务器名部分被域名系统（分布在全球的英特网数据库解析），根据解析结果进入IP地址。这样客户端可直接与IP所在的服务器进行交互，发送HTTP请求。让两个程序进行网络通信，两个都必须使用Socket套接字。CGI是通用网关接口，运行在服务器上。CGI进程针对每个请求进行创建，用完抛弃。当应用程序接受数千个请求，就会创建大量的语言解释器进程，容易宕机。CGI的加强版FastCGI应运而生。
【python】网页开发——Flask基础（一）介绍、安装、版本、入门程序、网页相关知识、项目配置
urge的博客
10-01 1254
Flask 是一个使用 Python 编写的轻量级 Web 开发框架。它被设计成简单、易用，并且具有灵活性，可以帮助开发者快速搭建 Web 应用程序。
使用Python进行网站页面开发——HTML
weixin_63994459的博客
07-13 1万+
目录一、HTML基础语法1.HTML是什么？2.HTML基本结构3.HTML注释二、HTML常用标签介绍1.文本标签2.格式化标签3.图片标签4.超级链接标签5.表格标签（用来显示数据）6.表单标签（用来接收数据）7.行内框架标签8.多媒体标签●HTML是HyperText Mark-up Language的首字母简写，即超文本标记语言。 ●HTML不是一种编程语言，而是一种标记语言。 ●超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成。 ●用这种语言制作的文件保存的
HTML基础详解：常用标签与结构解析
"本篇文章详细解析了HTML常用知识，主要针对网页开发中的关键元素和结构进行讲解。首先，我们关注到`<head>`部分，这是HTML文档的头部，包含元信息和脚本。这里有以下几个关键点： 1. `<meta>`标签用于定义文档的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值