当前位置: 首页 > 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保存代码,然后在刚刚的文件夹中打开该文件

在这里插入图片描述


在这里插入图片描述

在这里插入图片描述

http://www.lryc.cn/news/543514.html

相关文章:

  • Docker 与 Serverless(无服务器架构)
  • DMA 定制固件教程:小白跟做即得单人固件,超详细纯喂饭教程,100% 成功秘籍!FPGA仿真1:1、中断逻辑和TLP核心都在。
  • 嵌入式开发:傅里叶变换(4):在 STM32上面实现FFT(基于STM32L071KZT6 HAL库+DSP库)
  • 飞鱼科技游戏策划岗内推
  • 前端如何进行性能优化
  • 大白话Vuex 核心概念(state、mutations、actions)的使用案例与原理
  • 阿里云ack的创建与实战应用案例
  • 鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar)
  • Vue组件:从使用到原理的深度解析
  • Docker部署 MongoDB及常用命令
  • 27.[前端开发-JavaScript基础]Day04-函数基本使用-递归-变量作用域-函数式编程
  • mac修改docker的daemon.json 镜像文件
  • KIMI K1.5:大规模强化学习在大语言模型中的应用与工程实践
  • seacms v9 实现的MySQL注入
  • Go中slice和map引用传递误区
  • C# Unity 唐老狮 No.2 模拟面试题
  • 【Uniapp-Vue3】开发userStore用户所需的相关操作
  • DeepSeek开源周首日:发布大模型加速核心技术可变长度高效FlashMLA 加持H800算力解码性能狂飙升至3000GB/s
  • 易语言模拟真人鼠标轨迹算法 - 防止游戏检测
  • DeepSeek 提示词:基础结构
  • 文件系统
  • 力扣LeetCode:1472 设计浏览器历史记录
  • 【FL0091】基于SSM和微信小程序的社区二手物品交易小程序
  • 【笔记ing】每天50个英语词汇
  • 联想 SR590 服务器 530-8i RAID 控制器更换损坏的硬盘
  • Java基础关键_012_包装类
  • 【react】TypeScript在react中的使用
  • vllm的使用方式,入门教程
  • IDEA 使用codeGPT+deepseek
  • vue3中测试:单元测试、组件测试、端到端测试