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

news2024/11/24 5:26:40

目录

前言

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

准备工作

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.coloradmin.cn/o/974320.html

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

相关文章

算法通关村十四关：青铜-堆结构

算法通关村十四关：青铜-堆结构

青铜挑战-堆结构 堆结构&#xff1a;重要的基础数据结构 明确什么类型的题目可以用堆&#xff0c;以及如何用堆来解决 堆的构造和维护过程都非常复杂 1.堆的概念与特征 1.1基本概念 堆&#xff1a;是将一组数据按照 完全二叉树 的存储顺序&#xff0c;将数据存储在一个一…
阅读更多...
RHCA之路---EX280(9)

RHCA之路---EX280(9)

RHCA之路—EX280(9) 1. 题目 Scale the application greeter in the project samples to a total of 5 replicas 2. 解题 2.1 切换项目 [rootmaster ex280]# oc project samples Now using project "samples" on server "https://master.lab.example.com&qu…
阅读更多...
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() 方法
阅读更多...
简单的爬虫代码 爬（豆瓣电影）

简单的爬虫代码 爬（豆瓣电影）

路漫漫其修远兮&#xff0c;吾将上下而求索 这次写一个最简单的python爬虫代码&#xff0c;也是大多教程第一次爬取的&#xff0c;代码里面有个别的简单介绍&#xff0c;希望能加深您对python爬虫的理解。 本次爬取两个网页数据 一 爬取的网站 豆瓣电影 爬取网页中的&#…
阅读更多...
【无标题】can中继器 can隔离器 本安型CAN中继器在无轨胶轮车电控箱和防爆变频器中的应用

【无标题】can中继器 can隔离器 本安型CAN中继器在无轨胶轮车电控箱和防爆变频器中的应用

随着科学技术的不断发展和社会的不断进步,煤炭资源之于人类显得更加的重要,近年来,煤矿企业进一步发展,为我国的经济带来巨大的好处。在煤矿的运输过程中,无轨式脚轮车的应用是非常广泛的,它具有灵活、快速、激动、安全等特点,极大的提高了煤炭的运输效率。目前,在无轨胶轮车的…
阅读更多...
问道管理：存款利率多次调降后，为何银行存款成本率不降反升？

问道管理：存款利率多次调降后，为何银行存款成本率不降反升？

存款本钱是银行最首要的资金本钱&#xff0c;2022年以来&#xff0c;人民币存款利率阅历了5次会集下调&#xff0c;但上市银行发布的2023年半年报显现&#xff0c;存款均匀本钱率不降反升。 2023年上半年&#xff0c;42家A股上市银行存款均匀本钱率均值为2.18%&#xff0c;较2…
阅读更多...
服务端请求伪造(SSRF)及漏洞复现

服务端请求伪造(SSRF)及漏洞复现

文章目录 渗透测试漏洞原理服务端请求伪造1. SSRF 概述1.1 SSRF 场景1.1.1 PHP 实现 1.2 SSRF 原理1.3 SSRF 危害 2. SSRF 攻防2.1 SSRF 利用2.1.1 文件访问2.1.2 端口扫描2.1.3 读取本地文件2.1.4 内网应用指纹识别2.1.5 攻击内网Web应用 2.2 SSRF 经典案例2.2.1 访问页面2.2.…
阅读更多...
QLoRA：量化LLM的高效微调策略与实践

QLoRA：量化LLM的高效微调策略与实践

如果你对这篇文章感兴趣&#xff0c;而且你想要了解更多关于AI领域的实战技巧&#xff0c;可以关注「技术狂潮AI」公众号。在这里&#xff0c;你可以看到最新最热的AIGC领域的干货文章和案例实战教程。 一、前言 在大型语言模型&#xff08;LLM&#xff09;领域&#xff0c;微…
阅读更多...
Android大厂需要刷的（999道）面试题

Android大厂需要刷的（999道）面试题

想必大家都在为今年的金九银十做准备&#xff0c;今年也是最为艰难的一年。作为程序员从未感觉到如此艰难&#xff0c;身边不是被辞退就是找不到工作。先不说2023年应届生毕业即失业&#xff0c;作为开发15年的老Android程序员&#xff0c;现在也在和300个人挣一个岗位。 肉少…
阅读更多...
MySQL大数据量高速迁移，500GB只需1个小时

MySQL大数据量高速迁移，500GB只需1个小时

在上篇「快、准、稳的实现亿级别MySQL大表迁移」的文章中&#xff0c;介绍了NineData在单张大表场景下的迁移性能和优势。但在大部分场景中&#xff0c;可能遇到的是多张表构成的大数据量场景下的数据搬迁问题。因为搬迁数据量较大&#xff0c;迁移的时长、稳定性及准确性都受到…
阅读更多...
Maven编译java及解决程序包org.apache.logging.log4j不存在问题

Maven编译java及解决程序包org.apache.logging.log4j不存在问题

1、首先新建一个文件夹&#xff0c;比如hello Hello里新建pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi…
阅读更多...
Qt 5.15编译（MinGW）及集成Crypto++ 8.7.0笔记

Qt 5.15编译（MinGW）及集成Crypto++ 8.7.0笔记

一、背景 为使用AES加密库&#xff08;AES/CBC加解密&#xff09;&#xff0c;选用Crypto 库&#xff08;官网&#xff09;。   最新Crypto C库依次为&#xff1a;8.8.0版本&#xff08;2023-6-25&#xff09;、8.7.0&#xff08;2022-8-7&#xff09;和8.6.0&#xff08;202…
阅读更多...
电表数据采集红外抄表加密认证

电表数据采集红外抄表加密认证

红外操作前需要进行红外认证&#xff0c;打开操作权限。认证不通过&#xff0c;只能读出表号、通信地址、备案号、当前日期、当前时间、当前电能、当前剩余金额、红外认证查询命令&#xff0c; 其它信息不允许读出&#xff0c;所有信息均不允许设置。停电唤醒情况下&#xff0…
阅读更多...
小白学go基础04-命名惯例对标识符进行命名

小白学go基础04-命名惯例对标识符进行命名

计算机科学中只有两件难事&#xff1a;缓存失效和命名。 命名是编程语言的要求&#xff0c;但是好的命名却是为了提高程序的可读性和可维护性。好的命名是什么样子的呢&#xff1f;Go语言的贡献者和布道师Dave Cheney给出了一个说法&#xff1a;“一个好笑话&#xff0c;如果你…
阅读更多...
elasticsearch的数据聚合

elasticsearch的数据聚合

聚合可以让我们极其方便的实现对数据的统计、分析、运算。例如&#xff1a; 什么品牌的手机最受欢迎&#xff1f; 这些手机的平均价格、最高价格、最低价格&#xff1f; 这些手机每月的销售情况如何&#xff1f; 实现这些统计功能的比数据库的sql要方便的多&#xff0c;而且…
阅读更多...
文件夹改名利器！批量随机重命名并自定义长度

文件夹改名利器！批量随机重命名并自定义长度

你是否曾经为如何快速有效地重命名多个文件夹而感到困扰&#xff1f;我们为您带来了一款强大的文件夹改名工具&#xff0c;让您轻松实现批量随机重命名&#xff0c;并自定义长度&#xff0c;让您的文件夹管理更加高效便捷 首先第一步&#xff0c;我们要打开文件批量改名高手并登…
阅读更多...
RLHF不再需要人类，AI 实现标注自循环

RLHF不再需要人类，AI 实现标注自循环

从人类反馈中强化学习&#xff08;RLHF&#xff09;在使大型语言模型&#xff08;LLMs&#xff09;与人类偏好保持一致方面非常有效&#xff0c;但收集高质量的人类偏好标签是一个关键瓶颈。我们进行了RLHF与来自AI反馈的强化学习&#xff08;RLAIF&#xff09;的头对头比较 - …
阅读更多...
Redis基础知识（三）：缓存穿透、缓存击穿、缓存雪崩

Redis基础知识（三）：缓存穿透、缓存击穿、缓存雪崩

文章目录 一、缓存穿透出现过程解决方法 二、缓存击穿出现过程解决方法 三、缓存雪崩出现过程解决方法 我们在项目中大量使用Redis承接海量数据的冲击&#xff0c;但是使用过程中也会遇到一些特殊的情况&#xff0c;这个就是缓存击穿、缓存穿透、缓存雪崩。 一、缓存穿透 缓存…
阅读更多...
ApachePulsar原理解析与应用实践（学习笔记一）

ApachePulsar原理解析与应用实践（学习笔记一）

随着时代的发展&#xff0c;软件设计的理念也在不断发展&#xff0c;从单体服务、面向服务、微服务&#xff0c;发展到云原生以及无服务。其演变的过程是一个能力不断增强&#xff0c;领域边界不断微分细化的过程。比如无服务就是将函数作为服务&#xff0c;就类似dns模式的服务…
阅读更多...
RK3568开发笔记（六）：开发板烧写ubuntu固件（支持mipi屏镜像+支持hdmi屏镜像）

RK3568开发笔记（六）：开发板烧写ubuntu固件（支持mipi屏镜像+支持hdmi屏镜像）

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/132686096 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023