当前位置: 首页 > news >正文

【HTML—前端快速入门】HTML 基础

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


准备工作


vscode下载


百度网盘 Subline Text 下载


Sublime Text下载


百度网盘 vscode 下载

Sublime Text 是一款轻量好用的文本编辑器,我们在写前端代码时,使用 Sublime Text 打开比使用记事本打开,得到的代码体验更好,比 vscode 更轻量;

在这里插入图片描述


Sublime Text使用


创建一个HTML文件


在这里插入图片描述


使用subline text 打开HTML文件,并用浏览器运行


在这里插入图片描述


HTML基础


概念


HTML(Hyper Text Markup Language),超文本标记语言

超文本

比文本要强大,通过链接和交互式方式来组织和呈现信息的文本形式,不仅仅有文本,还可能包含图片,音频,或者自已经审阅过它的学者所加的评注、补充或脚注等等;

标记语言

由标签构成的语言;


认识 HTML 标签


HTML代码是由"标签"构成的,形如:

<h3>我是三级标题</h3>
  • 标签名(body) 放到<>中
  • 大部分标签成对出现:<h3>为开始标签,</h3>为结束标签.
  • 少数标签只有开始标签,称为"单标签".
  • 开始标签和结束标签之间,写的是标签的内容;
<h3 id="myId">我是三级标题</h3>
  • 开始标签中可能会带有"属性",id属性相当于给这个标签设置了一个唯一的标识符(身份证号码).

HTML 文件基本结构


<html>
	<head>
		<title>我是一个标签</title>
	</head>
	<body>
		<h1>我是一级标题</h1>
	</body>
</html>
  • html 标签是整个html文件的根标签 (最顶层标签)
  • head 标签中写页面的属性
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题

标签之间的结构关系,构成了一个 DOM 树,Document Object Mode(文档对象模型)

在这里插入图片描述


在这里插入图片描述

双击打开 test.html 文件

在这里插入图片描述

刚开始我们没写 <head><body> 等标签,在浏览器中依旧可以运行,因为浏览器有良好的“鲁棒性”,哪怕代码不规范,浏览器也能解析代码。


使用 chrome 的开发者工具查看页面的结构


F12 或者右键审查元素,开启开发者工具,切换到Elements标签,就可以看到页面结构细节.

在这里插入图片描述


快速入门开发


开发工具:vscode

在 VS Code中创建文件 xxx.html

在这里插入图片描述


直接输入! ,按 Enter或tab键,此时能自动生成代码的主体框架.

在这里插入图片描述


在这里插入图片描述


点击 ctrl+s保存代码,然后在刚刚的文件夹中打开该文件

在这里插入图片描述


在这里插入图片描述

在这里插入图片描述

相关文章:

  • 什么是最终一致性,它对后端系统的意义是什么
  • 物联网 智慧园区井盖管理办法和功能介绍
  • 大数据学习(53)-Hive与Impala
  • 授权与认证之jwt(四)创建OAuth2 Filter类
  • 3471. 找出最大的几近缺失整数
  • 基于图神经网络的会话推荐经典论文
  • 十四届蓝桥杯JAVA-b组-合并石子
  • _ 为什么在python中可以当变量名
  • Redis面试常见问题——使用场景问题
  • int new_pos = (pos + delta + 9) % 9 化曲为直算法
  • 蓝桥杯自我复习打卡
  • TDengine 中对表的管理操作
  • 配置Nginx日志url encode问题
  • 本地部署大语言模型-DeepSeek
  • Java基础关键_016_System 类
  • RabbitMQ面试题及原理
  • AI理解物理世界的新突破:V-JEPA带来直观物理的觉醒!
  • java后端开发day24--阶段项目(一)
  • 算法-二叉树篇26-将有序数组转换为二叉搜索树
  • 基于兆芯ZX-C4500全国产电力通讯管理机解决方案,电力四级
  • “当代阿炳”甘柏林逝世,创办了国内第一所残疾人高等学府
  • 南宁一学校发生伤害案件,警方通报:嫌疑人死亡,2人受伤
  • 上海市重大工程一季度开局良好,多项生态类项目按计划实施
  • “85后”贵阳市政府驻重庆办事处主任吴育材拟任新职
  • 娃哈哈:自4月起已终止与今麦郎的委托代工关系,未来将坚持自有生产模式
  • 十年磨一剑!上海科学家首次揭示宿主识别肠道菌群调控免疫新机制