HTML语言(概述及常用标签)

简介: HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用)目前我们使用的都是HTML5,支持传统的PC端开发,还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术

HTML概述



1.1 什么是HTML


HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用)

目前我们使用的都是HTML5,支持传统的PC端开发,还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术


1.2  HTML概念


HTML:Hyper Text Markup Language,超文本标记语言。是用来帮助我们构建网页的。


【超文本】:网页本身是一个文本文件,而超文本指的是这种文件中既可以包含文本信息,又可以包含图片,音频,视频和链接等非文字的信息。


【标记语言】:标记,也叫做标签。也就是说HTML这门语言是由标签组成的。


HTML的标签包含以下两种:

(1) 带有标签体的标签< a>标签体< /a >

(2) 不带标签体的标签(自结束标签)< br/>,< hr/>


HTML通过提前约定好的标签来构建我们的网页内容,通过浏览器来进行解释执行

浏览器是一个HTML的解释器,在浏览器中内置了一个解释器,该解释器中包含了所有HTML标签的展示风格


HTML常用基础标签



HTML文件的骨架:


d6e719cedec949fc81719e4e9374535e.png


Head标签:其中可以对网页进行整体设置

Body标签:是HTML的正文标签,我们在网页上能看到的内容都写在该标签中


HTML的IDE工具


(1) DW(Dreamweaver)

(2) HBuilder

(3) Subline

(4) VSCode

(5) WebStorm

(6) 记事本

(7) 其他编程语言的IDE工具


3.1 标签的分类:
1.带有标签体的标签,这种标签成对出现;有开始标签也有单独的结束标签,:<html></html>,<head></head>,<body></body>
2.没有标签体的标签(空标签,自结束标签),开始在结束在同一个标签中<br />,<hr />


3.2 常用基本标签


1.标题标签hn(h1——h6)


3cbdb3a97941403eb7d935b9ccafd95f.png

2.字体标签(font)


b2a5959b496347f0b4b709ebf8b70d60.png


3.段落标签(p)


5ba7289c53d0441093bebc68c7d6f330.png


主要用于将一段内容包裹起来,便于后期的统一设置,p标签本身没有效果,标签内的内容与标签外的内容空一行(自动换行)


4.换行标签(br)


< br/ >换行标签,中间不空行


5.水平线标签(hr)


< hr/ >


0cc5c3402cf74ab3afae3d5ebf545334.png


6.图片标签(img)


< img src=”图片地址” width=”宽度” height=”高度” / >


26d8e77d5bae4ae795661a3c6faaaf2f.png


7.背景音乐(audio)


< audio src=”音乐” autoplay=“autoplay” loop=”loop”/ >


8.视频(video)


在H5之前大多数视频使用flash插件实现的,但flash插件加载速度较慢,在H5之后专门提供了一个视频的标签;


9.超链接标签(a)


用法1:超链接:主要用于将多个页面关联到一起,使用超链接可以直接访问另一个页面;


bcb357c4362a40f08541efa877b91c3d.png


通过base标签统一设置页面超链接的显示目标< base target=“_blank” / >

用法2:用于锚记页面中的某个位置或其他页面中的某个位置


b33a2ae4b8e446ada87fecf8bca7040b.png

c9b63f5cb4b14c3388ad15f3476e127b.png


10.列表标签


(1)有序列表

< ol >

< li >列表项< /li >

< /ol >


98550d5cc6fc43a6b294ce8140d24111.png


(2)无序列表


b0866f8a092049509be3cb6cdc1dd952.png


(1) 自定义列表

dl:外围标签

dt:列表的标题标签

dd:设置列表的具体列表项


959e502bfe8e4b09b78f56429726848a.png


11.marquee标签


f46b0dfab71c494da36ed3fbfac73f9c.pngb23b5ddbec6f436f81b1f510180a6540.png


12.文本设置标签


< b >< /b >字体加粗

< i >< /i >设置斜体

< u >< /u >设置文本下划线

< s >< /s >在文本上设置一个删除线


13.其他基本标签


2< sup >n< /sup >:设置上标

log< sub>10< /sub>10:设置下标


image.png


以上就是HTML概述及常用标签,欢迎各位在评论区留言一起讨论学习~,如果觉得不错三连支持一下


237fed76afb3454d934da1e0485e2e0c.jpg

目录
相关文章
|
15天前
|
安全 Go
Golang深入浅出之-Go语言模板(text/template):动态生成HTML
【4月更文挑战第24天】Go语言标准库中的`text/template`包用于动态生成HTML和文本,但不熟悉其用法可能导致错误。本文探讨了三个常见问题:1) 忽视模板执行错误,应确保正确处理错误;2) 忽视模板安全,应使用`html/template`包防止XSS攻击;3) 模板结构不合理,应合理组织模板以提高可维护性。理解并运用这些最佳实践,能提升Go语言模板编程的效率和安全性,助力构建稳健的Web应用。
22 0
|
22天前
HTML_表单标签
HTML_表单标签
16 0
|
9天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
11天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
11天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
12天前
|
安全 Go 开发者
Golang深入浅出之-Go语言模板(text/template):动态生成HTML
【4月更文挑战第25天】Go语言的`text/template`和`html/template`库提供动态HTML生成。本文介绍了模板基础,如基本语法和数据绑定,以及常见问题和易错点,如忘记转义、未初始化变量、复杂逻辑处理和错误处理。建议使用`html/template`防止XSS攻击,初始化数据结构,分离业务逻辑,并严谨处理错误。示例展示了条件判断和循环结构。通过遵循最佳实践,开发者能更安全、高效地生成HTML。
22 0
|
14天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式
|
22天前
|
前端开发 容器
HTML_块级标签
HTML_块级标签
12 0
|
6月前
|
数据采集 前端开发 JavaScript
【 ⑤】HTML概述与基本标签详解
【 ⑤】HTML概述与基本标签详解
29 0
|
11月前
|
前端开发 JavaScript Java
【HTML】基本标签介绍
HTML基本标签介绍 1. HTML是什么? HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言
60 0