【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.mzph.cn/news/896743.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于单片机的GPS定位系统设计

基于单片机的GPS定位系统设计

1 系统硬件 1.1单片机模块 单片机的种类和型号可以说是有成百上千种&#xff0c;很多大的公司和企业都生产开发自己的单片机芯片&#xff0c;并且广泛应用于各种产品。Intel、 philips、 摩托罗拉、凌阳、宏晶等等种类繁多。大体上可以分为51系列单片机和非51系列单片机。 其…
阅读更多...
对大模型输出的 logits 进行处理，从而控制文本的生成

对大模型输出的 logits 进行处理，从而控制文本的生成

对大模型输出的 logits 进行处理&#xff0c;从而控制文本的生成 flyfish 在文本生成任务中&#xff0c;模型输出的 logits 代表了每个词被选为下一个生成词的未归一化概率得分。通过对 logits 进行处理&#xff0c;可以精确地控制文本的生成 基本原理 在每一步生成过程中&…
阅读更多...
Reids缓存穿透、缓存雪崩和缓存击穿

Reids缓存穿透、缓存雪崩和缓存击穿

Redis缓存中常见的三个问题&#xff1a;缓存穿透、缓存雪崩和缓存击穿。这些问题在使用Redis作为缓存时经常遇到&#xff0c;但通过合理的策略可以有效解决。我会用简单易懂的方式来讲解&#xff0c;帮助你理解这些问题的原理和解决方案。 1. 缓存穿透 1.1 什么是缓存穿透&…
阅读更多...
附录-Python — 包下载缓慢，配置下载镜像

附录-Python — 包下载缓慢，配置下载镜像

1️⃣命令行配置 pip config set global.index-url http://mirrors.aliyun.com/pypi/simple/ pip config set install.trusted-host mirrors.aliyun.com 2️⃣配置文件配置 1、打开文件夹&#xff0c;输入 %APPDATA% 回车 2、打开 %APPDATA% 路径&#xff0c;并在此路径下新建…
阅读更多...
VS 2019 免费版 下载与安装 教程说明

VS 2019 免费版 下载与安装 教程说明

推荐大家直接转到第13步&#xff0c;点击链接即可下载VS2019版本 1.VS官网 2.登录账号 3.在搜索栏输入“2019” 4.点击2019这个标题 5.点击“下载” 6.选择合适的版本下载 7.打开下载文件&#xff08;若下载过程总是转圈圈&#xff0c;则换个网络下载即可&#xff09; 8.安…
阅读更多...
介绍 torch-mlir 从 pytorch 生态到 mlir 生态

介绍 torch-mlir 从 pytorch 生态到 mlir 生态

一、引言 The Torch-MLIR project provides core infrastructure for bridging the PyTorch ecosystem and the MLIR ecosystem. For example, Torch-MLIR enables PyTorch models to be lowered to a few different MLIR dialects. Torch-MLIR does not attempt to provide a…
阅读更多...
Java并发编程之ConcurrentHashMap的原理和使用

Java并发编程之ConcurrentHashMap的原理和使用

ConcurrentHashMap（CHM）是Java为解决高并发场景下哈希表性能瓶颈而设计的线程安全容器，其核心目标在于： 线程安全‌：避免多线程操作导致的数据不一致问题‌；高吞吐量‌：通过细粒度锁和无锁化设计降低线程竞争‌；动态扩展‌：支持自动扩容与数据结构优化（如链表转红黑树…
阅读更多...
AbMole揭秘伤口愈合：IGF-1-SP1-CD248信号通路的新发现

AbMole揭秘伤口愈合：IGF-1-SP1-CD248信号通路的新发现

科学家们揭示了一条新的信号通路——IGF-1-SP1-CD248&#xff0c;这一发现为理解伤口愈合障碍提供了新的视角&#xff0c;并为未来的研究开辟了新方向。 研究背景 糖尿病患者的伤口愈合是一个长期存在的挑战。据统计&#xff0c;约15%的糖尿病患者会遭受慢性伤口的困扰&#…
阅读更多...
Go入门之文件

Go入门之文件

以只读方式打开文件 package mainimport ("fmt""io""os" )func main() {file, err : os.Open("./main.go")defer file.Close()if err ! nil {fmt.Println(err)return}fmt.Println(file)var tempSlice make([]byte, 128)var strSlice…
阅读更多...
python量化交易——金融数据管理最佳实践——使用qteasy管理本地数据源

python量化交易——金融数据管理最佳实践——使用qteasy管理本地数据源

文章目录 统一定义的金融历史数据表最重要的数据表数据表的定义交易日历表的定义&#xff1a;交易日历表: trade_calendar qteasy是一个功能全面且易用的量化交易策略框架&#xff0c; Github地址在这里。使用它&#xff0c;能轻松地获取历史数据&#xff0c;创建交易策略并完…
阅读更多...
通过 PromptTemplate 生成干净的 SQL 查询语句并执行SQL查询语句

通过 PromptTemplate 生成干净的 SQL 查询语句并执行SQL查询语句

问题描述 在使用 LangChain 和 Llama 模型生成 SQL 查询时&#xff0c;遇到了 sqlite3.OperationalError 错误。错误信息如下&#xff1a; OperationalError: (sqlite3.OperationalError) near "sql SELECT Name FROM MediaType LIMIT 5; ": syntax error [SQL: …
阅读更多...
STaR（Self-Taught Reasoner）方法：让语言模型自学推理能力（代码实现）

STaR（Self-Taught Reasoner）方法：让语言模型自学推理能力（代码实现）

STaR&#xff08;Self-Taught Reasoner&#xff09;方法&#xff1a;让语言模型自学推理能力 在大型语言模型&#xff08;LLM&#xff09;的推理能力优化中&#xff0c;STaR&#xff08;Self-Taught Reasoner&#xff09; 是一种引人注目的技术&#xff0c;属于“修改提议分布…
阅读更多...
Asp.Net Web API| React.js| EF框架 | SQLite|

Asp.Net Web API| React.js| EF框架 | SQLite|

asp.net web api EF SQLiteReact前端框架 设计一个首页面&#xff0c;包含三个按钮分别对应三类用户&#xff08;数据查看&#xff0c;设计人员&#xff0c;管理员&#xff09;&#xff0c;当点击管理员的时候弹出一个前端页面可以输入信息&#xff08;以学生数据为例&#…
阅读更多...
[SWPUCTF 2022 新生赛]1z_unserialize

[SWPUCTF 2022 新生赛]1z_unserialize

题目描述&#xff1a;是很简单的反序列化噢 代码审计看注释 <?phpclass lyh{ //定义一个类为lyhpublic $url NSSCTF.com;//公共属性&#xff0c;初始值为NSSCTF.compublic $lt; //公共属性&#xff0c;没有初始值public $lly; //公共属性&…
阅读更多...
【数据库】Update两阶段提交

【数据库】Update两阶段提交

为什么要两阶段提交 事务提交之后&#xff0c;redo log和bin log 都是需要1持久化到磁盘中&#xff0c;但是这两个是独立的逻辑&#xff0c;可能出现半成功的状态&#xff0c;这样就造成两份日志之间的逻辑不一致。如&#xff1a; 以id1&#xff0c;name ‘小明’执行 updat…
阅读更多...
【蓝桥】排序

【蓝桥】排序

1、sort简介 sort函数包含在头文件<algorithm>中sort函数使用之前&#xff0c;需要通过#include <algorithm>引入sort函数使用的是快速排列或类似快速排列的改进算法&#xff0c;时间复杂度一般为O(nlog(n)) 2、sort用法 2.1 基础用法 #include <iostream>…
阅读更多...
2024年中国城市统计年鉴（PDF+excel）

2024年中国城市统计年鉴（PDF+excel）

2024年中国城市统计年鉴&#xff08;PDFexcel&#xff09; 说明&#xff1a;包括地级县级市 格式&#xff1a;PDFEXCEL 《中国城市统计年鉴》是一部全面反映中国城市发展状况的官方统计出版物&#xff0c;包括各级城市的详细统计数据。这部年鉴自1985年开始出版&#xff0c;…
阅读更多...
android 资源selector写法注意

android 资源selector写法注意

1、res文件夹下面color文件夹，放的xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/color_brand1" android:s…
阅读更多...
蓝桥杯 灯笼大乱斗【算法赛】

蓝桥杯 灯笼大乱斗【算法赛】

问题描述 元宵佳节&#xff0c;一场别开生面的灯笼大赛热闹非凡。NN 位技艺精湛的灯笼师依次落座&#xff0c;每位师傅都有相应的资历值&#xff0c;其中第 ii 位师傅的资历值为 AiAi​。从左到右&#xff0c;师傅们的资历值逐级递增&#xff08;即 A1<A2<⋯<ANA1​&l…
阅读更多...
商城源码的框架

商城源码的框架

商城源码的框架通常是基于某种Web开发框架或者电子商务平台来构建的。以下是一些常见的商城源码框架&#xff1a; WooCommerce&#xff1a;基于WordPress的电子商务插件&#xff0c;适用于小型到中型的在线商店。 Magento&#xff1a;一个功能强大和灵活的开源电子商务平台&am…
阅读更多...
最新文章

Copyright @ 2022~2023