初学前端,你需要了解的HTML知识

菜园前端
• 阅读 475

原文链接:https://note.noxussj.top/?source=helloworld


::: tip HTML 的基础结构必须要掌握 :::

什么是 HTML ?

超文本标记语言(英语:HyperText Markup Language ,简称:HTML )是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

超文本

超越普通文本的特性,不仅是文字,还可以有图片、图形、表格、动画、音频、视频、链接、程序等非文本信息。

标记语言

将上述超文本的信息组合起来进行展示(包含结构和数据)的一种语言。

HTML 基础结构

  • html 标签:根节点标签
  • head 标签:头部标签,主要存放网站的基本描述信息
  • body 标签:正文标签,主要存放网页显示的内容
<html>
    <head>
        <title>我是网站标题</title>
        <style></style>
    </head>
    <body>
        <h1>我是正文内容</h1>
        <script></script>
    </body>
</html>

可在演练场中尝试一下点击跳转

标签

标签是 HTML 的核心部分。

特性

  • 标签由两个尖括号包含起来的关键字,例如 <html>
  • 标签一般都是成对的出现,开始标签和结束标签,例如 <html> </html>
  • 也有一些标签是单标签,例如 <br /> <img />
  • 浏览器渲染的时候不会单纯的显示该标签,而是解析该标签后转换成另外一种形式进行展示

分类

类型 布局方式 尺寸 嵌套 案例
块元素 独占一行 可设置宽高 可嵌套任何元素 display: block
display: flex
行内元素 占用的位置由内容决定 宽度高度由内容决定 建议只嵌套行内元素 display: inline
行内块元素 占用的位置由内容决定 宽度高度由内容决定 可嵌套任何元素 display: inline-block
display: inline-flex

最全面的前端笔记来啦,包含了入门到入行的笔记,还支持实时效果预览。小伙伴们不需要再花时间去写笔记,或者是去网上找笔记了。面试高频提问和你想要的笔记都帮你写好了。支持移动端和 PC 端阅读,深色和浅色模式。 原文链接:https://note.noxussj.top/?source=helloworld

点赞
收藏
评论区
推荐文章
Python进阶者 Python进阶者
2年前
HTML页面基本结构和加载过程
大家好,我是皮皮。前言对于前端来说,HTML都是最基础的内容。今天,我们来了解一下HTML和网页有什么关系,以及与DOM有什么不同。通过本讲内容,你将掌握浏览器是怎么处理HTML内容的,以及在这个过程中我们可以进行怎样的处理来提升网页的性能,从而提升用户的体验。一、浏览器页面加载过程不知你是否有过这样的体验:当打开某个浏览器的时候,发现一直
可莉 可莉
3年前
20155211 网络攻防技术 Exp08 Web基础
20155211网络攻防技术Exp08Web基础实践内容1.Web前端HTML,能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。2.Web前端javascipt,理解JavaScript的基本功能,理解DOM。
Stella981 Stella981
3年前
HTML的基础入门语法。(学习前端开发必备!!!)
1.HTML的基本操作!(https://oscimg.oschina.net/oscnet/up8801ecbcb36c259f50e9592ef0a8f6b1.png)2.HTML的复习代码<!DOCTYPEhtml<htmllang"en"<head
Stella981 Stella981
3年前
HTML前端开发App汇总
1、webApp(1)what        WebApp就是运行于网络和标准浏览器上,基于网页技术开发实现特定功能的应用。(2)why         第一、使用W3C标准的HTML(标准通用标记语言下的一个应用)语言开发,能够轻松实现跨平台,移动应用开发者不再需要考虑
Stella981 Stella981
3年前
20155211 网络攻防技术 Exp08 Web基础
20155211网络攻防技术Exp08Web基础实践内容1.Web前端HTML,能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。2.Web前端javascipt,理解JavaScript的基本功能,理解DOM。
Wesley13 Wesley13
3年前
HTML表格的基本结构标记
<table标记1.基本格式:<table属性1"属性值1"属性2"属性值2"......表格内容</table2.table标记的属性  width属性  表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分比(%)  height属性  表示表格的高度,他的值可以是像素(px