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

菜园前端
• 阅读 266

原文链接: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内容的,以及在这个过程中我们可以进行怎样的处理来提升网页的性能,从而提升用户的体验。一、浏览器页面加载过程不知你是否有过这样的体验:当打开某个浏览器的时候,发现一直
可莉 可莉
2年前
20155211 网络攻防技术 Exp08 Web基础
20155211网络攻防技术Exp08Web基础实践内容1.Web前端HTML,能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。2.Web前端javascipt,理解JavaScript的基本功能,理解DOM。
Stella981 Stella981
2年前
HTML的基础入门语法。(学习前端开发必备!!!)
1.HTML的基本操作!(https://oscimg.oschina.net/oscnet/up8801ecbcb36c259f50e9592ef0a8f6b1.png)2.HTML的复习代码<!DOCTYPEhtml<htmllang"en"<head
Stella981 Stella981
2年前
HTML前端开发App汇总
1、webApp(1)what        WebApp就是运行于网络和标准浏览器上,基于网页技术开发实现特定功能的应用。(2)why         第一、使用W3C标准的HTML(标准通用标记语言下的一个应用)语言开发,能够轻松实现跨平台,移动应用开发者不再需要考虑
Stella981 Stella981
2年前
20155211 网络攻防技术 Exp08 Web基础
20155211网络攻防技术Exp08Web基础实践内容1.Web前端HTML,能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。2.Web前端javascipt,理解JavaScript的基本功能,理解DOM。
Wesley13 Wesley13
2年前
HTML表格的基本结构标记
<table标记1.基本格式:<table属性1"属性值1"属性2"属性值2"......表格内容</table2.table标记的属性  width属性  表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分比(%)  height属性  表示表格的高度,他的值可以是像素(px
邢德全 邢德全
2个月前
开课吧-Web前端高级工程师20期|价值6980元|完结无秘
开课吧Web前端高级工程师20期|价值6980元|完结无秘download》chaoxingit.com/2580/Web前端高级工程师是一种拥有深厚的前端开发技能和广泛的项目经验的专业人员。他们通常具备以下特征:深入的前端技术知识:具备深入理解HTML、
程昱 程昱
1个月前
2023最新版-Web前端架构师35周完结无密
2023最新版Web前端架构师35周完结无密download》quangneng.com/3677/Web前端工程师需要学什么Web前端工程师需要学习的技能和知识主要包括以下几个方面:HTML/CSS/JavaScript:HTML、CSS和JavaScr
臧霸 臧霸
2星期前
前端模拟面试:给你真实的求职体验和面试经验
一、当准备前端面试时,确保准备以下几个方面:1.基础知识:回顾HTML、CSS和JavaScript的基础知识,包括语法、DOM操作、事件处理等。2.框架和库:熟悉流行的前端框架和库,如React、Vue和Angular,了解它们的核心概念和工作原理。3.
臧霸 臧霸
2星期前
高级前端进阶必修,自主打造高扩展的业务组件库
进阶前端开发并自主打造高扩展的业务组件库需要深入理解前端技术栈、设计模式和组件化思想。以下是一些必修的步骤和技能:1、深入理解前端基础知识:熟练掌握HTML、CSS和JavaScript的基础知识,包括语法、DOM操作、事件处理等。理解浏览器渲染原理、性能