用半天时间从零开始复习前端之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.hqwc.cn/news/98264.html

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

相关文章

GIT实战篇，教你如何使用GIT可视化工具

GIT实战篇，教你如何使用GIT可视化工具

系列文章目录 手把手教你安装Git&#xff0c;萌新迈向专业的必备一步 GIT命令只会抄却不理解&#xff1f;看完原理才能事半功倍&#xff01; 快速上手GIT命令&#xff0c;现学也能登堂入室 GIT实战篇&#xff0c;教你如何使用GIT可视化工具 系列文章目录一、GIT有哪些常用工具…
阅读更多...
工服穿戴检测联动门禁开关算法

工服穿戴检测联动门禁开关算法

工服穿戴检测联动门禁开关算法通过yolov8深度学习框架模型&#xff0c;工服穿戴检测联动门禁开关算法能够准确识别和检测作业人员是否按照规定进行工服着装&#xff0c;只有当人员合规着装时&#xff0c;算法会发送开关量信号给门禁设备&#xff0c;使门禁自动打开。YOLO的结构…
阅读更多...
什么是Web组件（Web Components）？它们有哪些主要特点？

什么是Web组件（Web Components）？它们有哪些主要特点？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ Web 组件&#xff08;Web Components&#xff09;⭐ Web 组件的主要特点1. 自定义元素&#xff08;Custom Elements&#xff09;2. Shadow DOM3. HTML 模板4. 封装性和重用性5. 生态系统6. 跨框架兼容性 ⭐ 写在最后 ⭐ 专栏简介 前端入门…
阅读更多...
SpringBoot整合MQ

SpringBoot整合MQ

1.创建工程并引入依赖 <!-- 添加rocketmq的启动器--><dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.1.1</version></dependency>2.编写…
阅读更多...
sql server 备份到网络共享

sql server 备份到网络共享

场景&#xff1a;sql server服务器A将数据库备份文件备份到服务器B 1&#xff09;服务器B创建共享目录 这里我将 D:\ProDbBak 共享&#xff0c;并且Everyone完全控制 2&#xff09;sql server服务器A能够访问服务器B共享目录&#xff0c;并且能完全控制 3&#xff09;修改服务…
阅读更多...
【马蹄集】第二十四周——高精度计算专题

【马蹄集】第二十四周——高精度计算专题

高精度计算专题 目录 MT2191 整数大小比较MT2192 AB problemMT2193 A-B problemMT2194 大斐列MT2195 升级版斐波那契数列MT2196 2的N次幂 MT2191 整数大小比较 难度&#xff1a;黄金    时间限制&#xff1a;1秒    占用内存&#xff1a;128M 题目描述 给出两个正整数&…
阅读更多...
Python中if __name__ == ‘__main__‘：的作用和原理

Python中if __name__ == ‘__main__‘：的作用和原理

if name ‘main’:的作用 一个python文件通常有两种使用方法&#xff0c; 第一是作为脚本直接执行&#xff0c;第二是 import 到其他的 python 脚本中被调用&#xff08;模块重用&#xff09;执行。 举例说明如下&#xff1a; 在本文件中&#xff0c;name 是main 在被impor…
阅读更多...
Java for循环每次都通过list.size()和 string.length()获取大小性能

Java for循环每次都通过list.size()和 string.length()获取大小性能

有人说在for循环之前用一个局部变量先获取到list.size()、str.length()&#xff0c;然后在for循环的判断条件里通过这个局部变量替换list.size()、str.length()会节省数据计算的时间。事实真的是这样吗&#xff1f;下面就为大家解答这个问题。 说明&#xff1a;此文章针对Andro…
阅读更多...
10 mysql tiny/small/medium/big int 的数据存储

10 mysql tiny/small/medium/big int 的数据存储

前言 这里主要是 由于之前的一个 datetime 存储的时间 导致的问题的衍生出来的探究 探究的主要内容为 int 类类型的存储, 浮点类类型的存储, char 类类型的存储, blob 类类型的存储, enum/json/set/bit 类类型的存储 本文主要 的相关内容是 int 类类型的相关数据的存储 …
阅读更多...
气象站是什么设备？功能是什么？

气象站是什么设备？功能是什么？

气象站是一种用于测量和记录气象数据的设备。它通常是由各种传感器及其数据传输设备、固定设备和供电设备组成&#xff0c;可以测量风速、风向、温度、湿度、气压、降水量等气象要素&#xff0c;并将这些数据记录下来&#xff0c;以便进一步分析和研究。 气象站通常设置在广阔…
阅读更多...
【U盘】实现U盘清空并重置恢复存储

【U盘】实现U盘清空并重置恢复存储

打开电脑&#xff0c;将U盘插入USB端口&#xff0c;点按快捷键【WinR】&#xff0c;弹出运行对话框&#xff0c;输入命令 diskpart 进入命令提示符窗口 输入指令 list disk 查看现在的硬盘 这里显示的U盘编号是“1”&#xff0c;因此输入select disk “1”&#xff0c;就是选择…
阅读更多...
CS420 课程笔记 P3 - 计数系统基础和 Hex, Decimal, Binary 进制

CS420 课程笔记 P3 - 计数系统基础和 Hex, Decimal, Binary 进制

文章目录 IntroductionInspirationWhy base systemsBinary & HexCounting in binaryAdditional resources Introduction 笔记作者 tips&#xff1a;这一节是关于进制的讲解&#xff0c;推荐观看原视频或学会二进制的读者跳过这一篇&#xff01; 本节课将介绍基本的计算机系…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023