01-HTML简介以及常用标签

简介: 01-HTML简介以及常用标签

什么是HTML


HTML的全称是:超文本标记语言——HyperText Markup Language。

每一个网页都是都是由HTML,CSS,JavaScript构成的。HTML是网页的结构和含义,CSS是样式与表现形式,JavaScript就是网页的行为与功能了。举个例子:

像装修房子一样,HTML是毛坯房,CSS是对房屋的装修,而JavaScript就是房子中包含各种各样的功能了。

我们以淘宝首页为例,它的HTML长成下面这样:

640.png

html是一种描述性语言,并没有太多的逻辑。但是,却要讲究一定的规则。


HTML标签


HTML是由一系列的”元素“(标签)组成的。使用不同的标签包裹不同的内容,即可在页面上表现出不同的样子。常见的标签有h1,h2,div,img,video,p,span,a,ul,li,input,form,link,script等等。

  • • h1标签

以h1标签为例,该标签表示一个一级标题,比如有下面一行文字:


hello world


我们使用h1标签将其包裹


<h1>hellow world</h1>


最终,在页面上展示出来如下:

640.png


  • • img标签

再比如,img标签表示图片,我们只需要写入图片的地址,就能在页面上显示一张图片:

<img src="https://coypan.info/public/kobe.png" />

640.png


  • • p标签

p标签表示一个段落。

<p>这是一段话</p>

640.png


  • • a标签

a标签表示一个链接,可以跳转到其他页面

<a href='https://www.baidu.com'>点击我可以跳转到百度<a/>


640.png

  • • ul,li

ul表示一个无序列表,li表示列表里的条目

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>


640.png

  • • div标签


div标签没有任何的语义。它纯粹就是一个容器,用以包裹其他的元素,可以是文字,也可以是图片。div标签可以说是平时使用得最多的标签了。江湖中不乏【div走天下】的说法。


  • • html标签

每一个网页最外层都是一对html标签。html标签是网页的根元素。

  • • body标签

body标签表示网页的内容

  • • head标签

head标签中,主要是网页的一些基本信息,如网页的名称等。

由于篇幅有限,这里就不再继续介绍各个标签了。可以在这里查看所有的标签:

传送门


总结


一个网页的基本结构,是由许许多多的标签元素组成的。不同的标签,承载了不同的内容。部分标签是有语义的。所谓语义,就是在html代码层次表达人的想法,告诉浏览器,我这里到底是什么内容。

640.png

简单来说,如果我想放一个链接在网页里,我需要用a标签。如果我想放一段话在网页里,我可以选用p标签。我想放一张图在网页里,我需要用img标签......

注意:对于有语义的标签,浏览器一般都会有一个默认的表现形式。在不同的浏览器里,同一个标签可能不会长得完全一样,会有一些细微的区别。

不同的标签除了有语义上的区别、表示不同的内容外,Html中的标签也被分为了不同的类型。标签在浏览器中排列方式是有规则的,标签与标签之间是可以互相嵌套的,但是也需要遵循一定的规则。这些内容,将在下一章里继续介绍。

p.s 一直觉得这个纹身挺有意思的:

640.jpg


相关文章
|
17天前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
42 5
|
2月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
48 0
|
16天前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
25 2
|
16天前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
21 1
|
1月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
86 1
|
1月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
110 1
|
1月前
|
存储 JavaScript Java
使用NekoHTML解析HTML并提取META标签内容
关于NekoHTML的代码样例,这里提供一个简单的示例,用于展示如何使用NekoHTML来解析HTML文档并提取其中的信息。请注意,由于NekoHTML的具体实现和API可能会随着版本更新而有所变化,以下代码仅供参考。 ### 示例:使用NekoHTML解析HTML并提取META标签内容 ```java import org.cyberneko.html.parsers.DOMParser; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import org.xml
|
1月前
|
XML JavaScript Java
NekoHTML 是一个基于Java的HTML扫描器和标签补全器
**NekoHTML** 是一个基于Java的HTML扫描器和标签补全器(tag balancer),由J. Andrew Clark开发。它主要用于解析HTML文档,并能够“修正”许多在编写HTML文档过程中常犯的错误,如增补缺失的父元素、自动用结束标签关闭相应的元素,以及处理不匹配的内嵌元素标签等。这使得程序能够以标准的XML接口来访问HTML文档中的信息。 ### NekoHTML的主要特点包括: 1. **错误修正**:能够自动修正HTML中的常见错误,如未闭合的标签等。 2. **DOM树生成**:将HTML源代码转化为DOM(Document Object Model)结构,便
|
11天前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
48 0
|
1月前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
57 0
react字符串转为dom标签,类似于Vue中的v-html