HTML | 一文带你了解并上手前端三件套之HTML(一)

简介: HTML | 一文带你了解并上手前端三件套之HTML

1、简介

HTML(HyperText Markup Language):超文本标记语言:

超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容

标记语言:由标签构成的语言

HTML是用来描述网页内容和结构的语言。它用标签来描述页面中的各种元素,例如文本、图像、超链接等。浏览器可以解释HTML标签并在网页上呈现相应的内容。这些标签不像XML那样可以自定义,HTML中的标签都是预定义好的,运行在浏览器上并由浏览器解析,然后展示出对应的效果

HTML的文件扩展名为“.html”或“.htm”

后端开发流程: 通过Java程序从数据库中查询出来数据,然后交给页面进行展示,这样用户就能通过在浏览器通过页面看到数据

1.1、W3C标准

W3C标准:

W3C是万维网联盟,这个组成是用来定义标准的。他们规定了一个网页是由三部分组成,分别是:

结构:对应的是 HTML 语言

表现:对应的是 CSS 语言

行为:对应的是 JavaScript 语言

HTML定义页面的整体结构;CSS是用来美化页面,让页面看起来更加美观;JavaScript可以使网页动起来,比如轮播图也就

是多张图片自动的进行切换等效果。

1.1.1、W3C介绍

W3C(World Wide Web Consortium)是一个国际组织,旨在推动Web技术的标准化和普及。它成立于1994年,总部设在美国麻省理工学院,由世界各地的公司、组织和个人组成。

W3C的目标是通过制定标准和指导方针来保证Web的可扩展性、可靠性和易用性。 W3C为Web技术的发展提供了重要的技术支持,主要通过制定Web标准和技术规范来实现这一目标。

W3C的工作覆盖了许多领域,包括HTML、CSS、JavaScript、XML、Web服务、Web应用程序等。 W3C的标准不仅推动了Web技术的发展,也帮助了Web的普及和广泛应用。

W3C认识到Web技术的快速发展和不断变化的需求,因此始终保持着开放性和创新性,以适应市场的需求和技术的发展。

2、⭐结构

HTML文件的基本结构如下:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>Page Title</title>
6. </head>
7. <body>
8. <!-- Your content goes here -->
9. </body>
10. </html>

解析

DOCTYPE声明:告诉浏览器使用的HTML版本。

<html>元素是文档的根元素,包含整个HTML文档。

<head>元素包含页面的元数据,例如标题,字符集声明等。

<body>元素包含文档的主要内容,如文本、图像、表格等。

HTML使用标签和属性组成元素。标签是用于标识元素的名称,而属性是用于描述元素的额外信息。

3、标签

基础标签:一些和文字相关的标签,如下:

标签

描述

<h1>~<h6>

定义标题,h1最大,h6最小

<font>

定义文本的字体、字体尺寸、字体颜色

<b>

定义粗体文本

<j>

定义斜体文本

<u>

定义文本下划线

<center>

定义文本居中

<p>

定义段落

<br>

定义折行

<hr>

定义水平线

3.1、字体标签

font:字体标签

1、face 属性:用来设置字体。如 "楷体"、"宋体"等

2、color 属性:设置文字颜色。颜色有三种表示方式

3.1、英文单词:red,pink,blue... 这种方式表示的颜色特别有限,所以一般不用。

3.2、rgb(值1,值2,值3):值的取值范围:0~255。此种方式也就是三原色(红绿蓝)设置方式。

例如: rgb(255,0,0)。 这种书写起来比较麻烦,一般不用。

3.3、#值1值2值3:值的范围:00~FF。这种方式是rgb方式的简化写法,以后基本都用此方式。

值1表示红色的范围,值2表示绿色的范围,值3表示蓝色范围。例如: #ff0000

3、size 属性:设置文字大小

Ex:<font face="楷体" size="5" color="#ff0000">thml学习</font>

注意:

<font>标签在HTML5不支持,也不再建议使用了,以后都是通过CSS来进行设置

3.2、🔺图片、音频、视频标签

标签

描述

<img>

定义图片

<audio>

定义音频

<video>

定义视频

详细说明:

1、img:定义图片

1.1、src:规定显示图像的url(Uniform Resource Locator统一资源定位符)

1.2、height:定义图像的高度

1.3、width:定义图像的宽度

2、audio:定义音频。支持的音频格式:MP3、WAN、OGG

3.1、src:规定音频的url

3.2、controls:显示播放控件

3、video:定义视频。支持的视频格式:MP4、WebM、OGG

3.1、src:规定视频的url

3.2、controls:显示播放控件

3.3.1、⭐尺寸单位

height属性和width属性有两种设置方式:

像素:单位是px

百分比:占父标签的百分比。例如宽度设置为 50%,意思就是占它的父标签宽度的一半(50%)

3.3.2、⭐资源路径

资源路径:

图片,音频,视频标签都有src属性,而src是用来指定对应的图片,音频,视频文件的路径。

此处的图片,音频,视频就称为资源。

资源路径有如下两种设置方式:

1、绝对路径:完整路径。

这里的绝对路径是网络中的绝对路径。 格式为: 协议://ip地址:端口号/资源名称。

例如:

<img src="https://www.leixue.com/uploads/2018/09/java.jpg!760" alt="java 是什么 - 泪雪网" class=" nofocus" tabindex="0" aria-label="java 是什么 - 泪雪网">

这里src属性的值就是网络中的绝对路径

2、相对路径:相对位置关系

3.3、⭐超链接标签

<a>标签属性:

1、href:指定访问资源的url

2、target:指定打开资源的方式

3.1、_self:默认值,在当前页面打开

3.2、_blank:在空白页面打开

Ex:<body><a href="https://www.baidu.com" target="_self">点我有惊喜</a></body>

3.4、列表标签

HTML 中列表分为有序列表和无序列表

标签说明:

有序列表中的 type 属性用来指定标记的标号的类型(数字、字母、罗马数字等)

无序列表中的 type 属性用来指定标记的形状

Ex:

相关文章
|
7天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
25 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
83 25
|
2月前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
67 6
|
5月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
76 1
前端基础(十七)_HTML5新特性
|
4月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
37 2
|
4月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
51 1
|
5月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
308 1
|
5月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
297 0

热门文章

最新文章