用半天时间从零开始复习前端之html

目录

前言

科班生的标配：半天听完一门标记型语言

准备工作

webstorm2022

webstrom

第一个html页面

body

h系列标签

行标签和块标签

列表标签

表格标签（另起一篇）

万能的input

1.快速生成多个标签

2.同时选中多个

前言

科班生的标配：半天听完一门标记型语言

首先就是玩编程必备的编译器，这里推荐vscode（微软开发，免费，性能好，插件多）；不过这里老师带我们用的是webStorm2022版（收费但网上有破解，针对前端大型开发的一款编译器，专业性强“新手的话建议vscode，有后端语言例如java，python，go等用这个会更舒服🤣”）

准备工作

webstorm2022

云盘：获取激活与安装包（越来越严格了，审核了3次，才通过😅，貌似不能放百度网盘了，去百度网站获取吧）

webstrom

首先点击左上角的文件（file），并进入设置（setting）

在搜索栏输入chinse（汉化插件），下载并启动（禁用那里）

第一个html页面

说是页面，也是文件（毕竟软件就是无数存储着代码的文件组成的）

创建好后的样子

下面逐一解释下每个部分

在vscode中快速生成第一个html文件

在写代码的区域输入 ！+ 回车 快速生成“效果同webstrom创建好后的样子”

body

body是承载我们代码的主要部分，现在在body里输入内容，即可得到效果了😀！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>蓝妈妈</title>
</head>
<body>
洛琪希😎
​
</body>
</html>

什么？你说你想知道这个😎酷酷的小表情怎么做到的，虽然我忘记之前那一篇博客写的了(window+.)召唤崽子们

h系列标签

h1到h6，没错有6个这样的标签（你问为什么不是7个😅，大概是6个就已经够用了），那如果强行输入呢，我就是想知道有没有第7个葫芦娃🤓(小伙子，你很勇嘛)

结果如图所示，并没有序列7以上的h标签😋，不过求知的态度是很好的，遇到多了，你自然会有判断对错的直觉，在这之前保持你的天真或者听取前辈们的意见同样重要🤓🤓🤓（过来，让我看看😅！）

这六个标签所显示的内容是依次变小的

如果你尝试去看网站的源码，打开f12开发者工具；早期的很多网站在加入大型框架技术（vue，react，aj等😅）前，包括在用到css技术亦或者是SEO优化时，h标签占了举足轻重的地位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>蓝妈妈</title>
</head>
<body>
洛琪希😎
<h1>1111</h1>
<h2>222</h2>
<h3>333</h3>
<h4>444</h4>
<h5>555</h5>
<h6>666</h6>
<h7>777</h7>
<h8>888</h8>
<h9>999</h9>
<h10>101010</h10>
<h11>11111111111a</h11>
</body>
</html>

行标签和块标签

p标签和span标签

下面是10个p和10个span的效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>蓝妈妈</title>
</head>
<body>
​
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span>
</body>
</html>

其实知道这两个就够用了，不过嘛，将来准备考试和面试的时候仍然有必不可少知识点，放在下面自取

常用的行内标签(inline)和块级标签(block)如下:
行内标签:
- <span> - 泛用行内容器
- <a> - 链接
- <strong>, <b> - 加粗
- <em>, <i> - 斜体
- <sup> - 上标
- <sub> - 下标
- <img> - 图片
块级标签:
- <div> - 泛用块级容器
- <p> - 段落
- <h1>到<h6> - 标题
- <ol>, <ul>, <li> - 列表
- <table>, <tr>, <td> - 表格
- <form> - 表单
- <header>, <footer> - 头部、尾部
- <section>, <article> - 文章内容
- <aside> - 侧边栏
- <pre> - 预格式化文本
行内标签不能换行,块级标签默认占满整行。合理使用两种标签可以构建网页布局。
一般来说,块级标签用来布局,行内标签用来包裹文字及内联元素。将不同的块级标签和行内标签嵌套搭配可以对网页进行语义化的布局。

换行和分区(我是这么叫的，无所谓了😎)

br换行，hr换区

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>蓝妈妈</title>
</head>
<body>
​
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<hr>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<span>我是span</span><span>我是span</span><br><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span>
</body>
</html>

列表标签

有序ol，无序ul；当然这需要搭配li标签才行

（什么，你问我搭配div行不行，h标签行不行🤓，你很勇嘛）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>蓝妈妈</title>
</head>
<body>
<ol>这里是ol标签</ol>
<ol>这里是ol标签</ol>
<ol>这里是ol标签</ol>
<ol>这里是ol标签</ol>
<ol>这里是ol标签</ol>
<hr>
<ul>这里是ul标签</ul>
<ul>这里是ul标签</ul>
<ul>这里是ul标签</ul>
<ul>这里是ul标签</ul>
<ul>这里是ul标签</ul>
<hr>
<ol>ol<ul>ul</ul><ul>ul</ul><ul>ul</ul><ul>ul</ul>
</ol>
<ol>ol<ul>ul</ul><ul>ul</ul><ul>ul</ul><ul>ul</ul>
</ol>
<hr>
​
<ul>无序ul<div>div1</div><div>div2</div>
​<li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul>
<hr>
<ol>
有序ol<li>2</li><li>2</li><li>2</li><li>2</li><li>2</li>
</ol>
</body>
</html>

表格标签（另起一篇）

HTML 表格 | 菜鸟教程

表单(也需要另起一篇作为补充)

万能的input

这里列举了最简单的情况，其中的提交和重置是默认的（在表单中，另外在实际开发中很少用这种input，大概是很low，没办法嘛，少年；毕竟不是所有人都看的很全面🥛）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>蓝妈妈</title>
</head>
<body>
<form action="">
<!--    action里是两种提交方式-->
​
</form>
<input type="text">
<input type="password">
<input type="hidden">
​
<input type="checkbox">
<input type="submit">
<input type="reset">
<input type="button">
</body>
</html>

下面是补充完整的片段

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>蓝妈妈</title>
</head>
<body>
<form action="">
<!--    action里是两种提交方式--><input type="text"><input type="password"><input type="hidden">
​<input type="checkbox"><input type="submit"><input type="reset"><input type="button">
</form>
​
<from>用户名 <input type="text" name="username"><br>密码：<input type="password" name="password"><input type="hidden" name="username" value="admin"><!--   单选--><input type="radio" name="gender" value=" female" checked="checked">女<input type="radio" name="gender" value="male">男<br><!--   多选--><input type="checkbox" name="m1" value="music" checked="checked">音乐<input type="checkbox" name="m2" value="trip"> 旅游<input type="checkbox" name="m3" value="reading" checked="checked">阅读<input type="submit">提交<input type="reset">重置<input type="button">普通按钮<input type="image" name="btnlmage" src="洛琪希.jpg" width="60" height="30"><form enctype="multipart/form-data">文件file</form><input type="file" name="photo">提交<!--   表单元素--><select name="fruits" size="5" multiple="multiple"><option value="apple" selected="selected">苹果</option><option value="banana">香蕉</option><option value="grape" selected="selected">葡萄</option><option value="pear">梨子</option><option value="peach" selected="selected" >桃子</option><option value="watermelon"> 西瓜</select><br><hr><select name="degree" ><option value="1">博士后</option><option value="2" >博士</option><!--      selected="selected" 默认/默认选中--><option value="3"selected="selected">硕士</option><option value="0">其他</option>
​</select><!--   <fieldset></fieldset>元素用于分组， --><!--   这个地方也不太清晰？？--><fieldset><legend>必填信息</legend><label for="usernanme"> 用户名:<input type="text" id="usernanme" value=""></label><label for="password">密码</label><input type="password" id="password">
​</fieldset><fieldset><legend>选填信息</legend><label for="man">男</label><input type="radio" value="1" id="man"><label for="woman">女</label><input type="radio" value="2" id="woman"></fieldset>
</from>
​
</body>
</html>

常用快捷技巧

1.快速生成多个标签

将下面几个代码依次用tab键补全，看看是什么快捷方式

解答

2.同时选中多个

效果：不要在意，我重新选中了，你自己试试就好

技巧3：其实是技巧1的补充，我忘记了，很早的几篇博客里大概有

下一篇预告：小文章：表格标签&&表单（包含历史，个人学习经验，）

大文章：0零开始手把手带你做一个音乐播放器

练习：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/126597.html

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

相关文章

系统报错“由于找不到msvcp140.dll无法继续执行代码”的处理方法

系统报错“由于找不到msvcp140.dll无法继续执行代码”的处理方法

我在使用电脑时&#xff0c;突然发现了一个错误提示&#xff1a;“无法启动程序&#xff0c;因为找不到msvcp140.dll文件”。这让我非常困惑&#xff0c;因为我确定这个文件应该存在于我的电脑上。但是电脑依然报错“由于找不到msvcp140.dll无法继续执行代码”&#xff0c;这个…
阅读更多...
【周末闲谈】如何利用AIGC为我们创造有利价值？

【周末闲谈】如何利用AIGC为我们创造有利价值？

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️周末闲谈】 系列目录 ✨第一周 二进制VS三进制 ✨第二周 文心一言&#xff0c;模仿还是超越&#xff1f; ✨第二周 畅想AR 文章目录 系列目录前言AIGCAI写作AI绘画AI视频生成AI语音合成 前言 在此之…
阅读更多...
Linux防火墙(iptables)

Linux防火墙(iptables)

一、linux的防火墙组成 linux的防火墙由netfilter和iptables组成。用户空间的iptables制定防火墙规则&#xff0c;内核空间的netfilter实现防火墙功能。 netfilter&#xff08;内核空间&#xff09;位于Linux内核中的包过滤防火墙功能体系&#xff0c;称为Linux防火墙的“内核…
阅读更多...
MHA高可用及故障切换

MHA高可用及故障切换

一、什么是 MHA MHA&#xff08;MasterHigh Availability&#xff09;是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中&#xff0c;MHA能做到0-30秒内自动完成故障切换操作。 MHA能在故障切换的过程中最大…
阅读更多...
Vue中如何实现城市3D分布图

Vue中如何实现城市3D分布图

cityfenbu.vue <template><div ><el-card class"seriesmap-box-card"><div slot"header" class"clearfix"><span>城市分布图 (点击可下钻到县)</span></div><div><div class"series-ma…
阅读更多...
c语言练习45:模拟实现内存函数memcpy

c语言练习45:模拟实现内存函数memcpy

模拟实现内存函数memcpy 针对内存块&#xff0c;不在乎内存中的数据。 拷贝内容有重叠的话应用memmove 模拟实现&#xff1a; 代码&#xff1a; 模拟实现memcpy #include<stdio.h> #include<assert.h> void* my_memcpy(void* dest, const void* src, size_t num…
阅读更多...
【Linux】网络编程网络基础(C++)

【Linux】网络编程网络基础(C++)

目录 一、计算机网络背景 二、认识 "协议" 三、网络协议初识 【3.1】协议分层 【3.2】OSI七层模型 【3.3】TCP/IP五层(或四层)模型 四、网络传输基本流程 【4.1】网络传输流程图 【4.2】数据包封装和分用 五、网络中的地址管理 一、计算机网络背景 【独立…
阅读更多...
谷粒商城----缓存与分布式锁

谷粒商城----缓存与分布式锁

1、缓存使用 为了系统性能的提升&#xff0c;我们一般都会将部分数据放入缓存中&#xff0c;加速访问。而 db 承担数据落盘工作。 哪些数据适合放入缓存&#xff1f;  即时性、数据一致性要求不高的  访问量大且更新频率不高的数据&#xff08;读多&#xff0c;写少&…
阅读更多...
The WebSocket session [x] has been closed and no method (apart from close())

The WebSocket session [x] has been closed and no method (apart from close())

在向客户端发送消息时&#xff0c;session关闭了。 不管是单客户端发送消息还是多客户端发送消息&#xff0c;在发送消息之前判断session 是否关闭 使用 isOpen() 方法
阅读更多...
Nginx 学习（九）集群概述与LVS工作模式的配置

Nginx 学习（九）集群概述与LVS工作模式的配置

一 集群 1 概述 通过高速网络将很多服务器集中起来一起提供同一种服务&#xff0c;在客户端看来就像是只有一个服务器可以在付出较低成本的情况下获得在性能、可靠性、灵活性方面的相对较高的收益任务调度是集群系统中的核心技术 2 目的 提高性能。如计算密集型应用&…
阅读更多...
【C++进阶】：AVL树(平衡因子)

【C++进阶】：AVL树(平衡因子)

AVL树 一.概念二.插入1.搜索二叉树2.平衡因子 三.旋转1.更新平衡因子2.旋转1.左单旋2.右单旋3.先右旋再左旋4.先左旋再右旋 四.完整代码 一.概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树,查找元素相当于在顺序表中搜索元…
阅读更多...
2023区块链应用操作员认证（4级）报名来弘博创新

2023区块链应用操作员认证（4级）报名来弘博创新

区块链应用操作员&#xff0c;是指运用区块链技术及工具&#xff0c;从事政务、金融、医疗、教育、养老等场景系统应用操作的人员。 腾讯作为广东省第一批公布的社会培训评价组织&#xff0c;可开展职业技能等级认定职业(工种)区块链应用操作员(4-3-2-1级)。 证书含金量 证书是…
阅读更多...
Redis 删除策略

Redis 删除策略

文章目录 Redis 删除策略一、过期数据二、数据删除策略1、定时删除2、惰性删除3、定期删除4、删除策略对比 三、逐出算法 Redis 删除策略 一、过期数据 Redis是一种内存级数据库&#xff0c;所有数据均存放在内存中&#xff0c;内存中的数据可以通过TTL指令获取其状态 XX &a…
阅读更多...
100万级连接，爱奇艺WebSocket网关如何架构

100万级连接，爱奇艺WebSocket网关如何架构

说在前面 在40岁老架构师 尼恩的读者社区(50)中&#xff0c;很多小伙伴拿到一线互联网企业如阿里、网易、有赞、希音、百度、滴滴的面试资格。 最近&#xff0c;尼恩指导一个小伙伴简历&#xff0c;写了一个《高并发网关项目》&#xff0c;此项目帮这个小伙拿到 字节/阿里/微…
阅读更多...
BPPISE数据科学案例框架

BPPISE数据科学案例框架

本专题共10篇内容&#xff0c;包含淘宝APP基础链路过去一年在用户体验数据科学领域&#xff08;包括商详、物流、性能、消息、客服、旅程等&#xff09;一些探索和实践经验。 在商详页基于用户动线和VOC挖掘用户决策因子带来浏览体验提升&#xff1b;在物流侧洞察用户求助时间与…
阅读更多...
Kafka3.0.0版本——增加副本因子

Kafka3.0.0版本——增加副本因子

目录 一、服务器信息二、启动zookeeper和kafka集群2.1、先启动zookeeper集群2.2、再启动kafka集群 三、增加副本因子3.1、增加副本因子的概述3.2、增加副本因子的示例3.2.1、创建topic(主题)3.2.2、手动增加副本存储 一、服务器信息 四台服务器 原始服务器名称原始服务器ip节点…
阅读更多...
被问到： http 协议和 https 协议的区别怎么办?别慌，这篇文章给你答案

被问到： http 协议和 https 协议的区别怎么办?别慌，这篇文章给你答案

前言 作为软件测试师&#xff0c;大家都知道一些常用的网络协议是我们必须要了解和掌握的&#xff0c;比如 HTTP 协议&#xff0c;HTTPS 协议就是两个使用非常广泛的协议&#xff0c;所以也是面试官问的面试的时候问的比较多的两个协议&#xff1b;因为这两个协议有相似和关联的…
阅读更多...
为什么说网络安全是风口行业？是it行业最后的红利？

为什么说网络安全是风口行业？是it行业最后的红利？

前言 “没有网络安全就没有国家安全”。当前&#xff0c;网络安全已被提升到国家战略的高度&#xff0c;成为影响国家安全、社会稳定至关重要的因素之一。 网络安全行业特点 1、就业薪资非常高&#xff0c;涨薪快 2021年猎聘网发布网络安全行业就业薪资行业最高人均33.77万&…
阅读更多...
移除链表元素_每日一题

移除链表元素_每日一题

“路虽远&#xff0c;行则将至” ❤️主页&#xff1a;小赛毛 ☕今日份刷题&#xff1a;移除链表元素 题目描述&#xff1a; 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例1&…
阅读更多...
初步了解android如何锁键

初步了解android如何锁键

百年三万六千日&#xff0c;光阴只有瞬息间。 手机下面的三个图形&#xff0c;正方形&#xff0c;园形&#xff0c;三角形分别的什么建&#xff1f;都起到什么功能&#xff1f; 三角形的那个叫返回键&#xff0c;就是可以返回你的上一个操作; 圆形是HOME键&#xff0c;按一下可…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023