2024年值得关注的HTML基础(2)，论程序员成长的正确姿势

于 2024-05-10 23:17:40 发布
阅读量888 收藏 7
点赞数 15
分类专栏： 程序员 文章标签： 网络安全 学习 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84247423/article/details/138685811
版权

给大家的福利

零基础入门

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

同时每个成长路线对应的板块都有配套的视频提供：

在这里插入图片描述

因篇幅有限，仅展示部分资料

网络安全面试题

绿盟护网行动

还有大家最喜欢的黑客技术

网络安全源码合集+工具包

所有资料共282G，朋友们如果有需要全套《网络安全入门+黑客进阶学习资源包》，可以扫描下方二维码领取（如遇扫码问题，可以在评论区留言领取哦）~

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试站点</title>

周一家的猫咪很可爱！

猫咪图片 

大家可以看到，在上面这段 `HTML` 代码中，包括 `html` 、 `head` 、 `meta` 、`title` 和 `body` 等等标签，由上面的这些标签，就构成了 `html` 的结构。


接下来我们来看一下 `html` 具有哪些特点。


### 2. 特点


* `HTML` 文档包含多个 `HTML` 元素，元素具备不同的特性。
* `HTML` 元素 = **开始标签** + **结束标签** + **元素内容**。
* 一些元素只有一个标签，如 `img` 、 `input` 、 `br` 等。
* `HTML` 元素标签**不区分大小写**。
* 元素可以嵌套在其他元素中间。
* 元素可以拥有属性，属性包含元素的额外信息。


接下来我们来看下以上这几个标签各自的作用。


### 3. HTML页面结构


#### （1）DOCTYPE


`<DocTYPE HTML>` ，常放在 `HTML` 文档最前面的位置，加上之后就会按照 `W3C` 的 `HTML5` 标准来解析渲染页面。


#### （2）html


`<html>` ，是网页的根元素，包含整个页面的内容。


#### （3）head


`<head>` ，此标签对用户不可见，其中包括像**面向搜索引擎的关键字**、**页面描述**、**字符编码声明**、**CSS样式**等内容。


#### （4）body


`<body>` ，该元素包含**能够被用户访问到的内容**，包括文本、图像、视频、游戏、音频等等内容。


#### （5）meta


`<meta>` ，常设置的内容有： `charset/name/http-equiv` 。下面给出一些常用的配置信息。

定义文档字符编码
关键字
页面描述
主要用于移动端，定义设备屏幕上用来显示网页的区域
http头部

下面给出一个自定义meta的网站，大家可以自行查阅~
https://wiki.whatwg.org/wiki/MetaExtennsions


#### （6）title


`<title>` ，表示页面的标题，经常显示在浏览器的标签页上。


#### （7）style


`<style>` ，是 `CSS` 的样式。


#### （8）link


`<link>` ，表示跳转链接。下面给出几种常见的 `link` 方式。**具体如下：**
当前页面的favicon 链接到样式表 可替换的样式表 

#### （9）script


`<script>` 表示可执行脚本。通常引用的方式如下：





下面我们来了解它的两个属性：


* `defer`：立即下载，延迟执行，表示脚本可以等到 `dom` 被完全解析和显示之后再执行，只对外部脚本有效。有 `defer` 属性的脚本会阻止 `DOMContentLoaded` 事件，直到脚本被加载并且解析完成。
* `async`：立即下载脚本，且不妨碍其他操作，比如在下载其他资源或者加载其他脚本的时候，只对外部脚本有效。


我们用一张图来展示这两者的区别，**具体如下图：**


![async和defer](https://img-blog.csdnimg.cn/2ae0f446987247738aa0cd1962075844.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgwMzc1Mw==,size_16,color_FFFFFF,t_70#pic_center)


大家可以看到， `async` 支持在遇到 `js` 文件时，立即下载脚本。而对于 `defer` 来说，它只能前面的 `js`


内容先全部加载完，再进行执行操作。


## 😛四、常用元素


### 1. 三种常用元素


#### （1）内联元素


* 只占据它自己**对应标签的边框**所包含的空间。
* 只能容纳文本或其他内联元素。
* 只能通过修改水平边距、边框或者行高的方式改变尺寸。
* 常用的内联元素有： `<a>`、 `<span>` 、 `<br>` 、 `<i>` 、 `<em>` 、 `<strong>` 、 `<label>` 、 `<q>` 、 `<var>` 、 `<cite>` 、 `<code>` 。


#### （2）行内块级元素


* 元素在行内排列，不会独占一行。
* 支持设置宽高以及垂直边距、边框。
* 常用的内联元素： `<img>` 、 `<input>` 、 `<td>` 。


#### （3）块级元素


* 占据其父元素的整行，总是从新的一行开始。
* 能容纳其他块元素或者内联元素。
* 可以控制**宽高**、**行高**、**边距**、**边框**等改变其尺寸。
* 常用的块级元素： `<div>`、 `<p>` 、 `<h1>-<h6>` 、 `<ol>` 、 `<ul>` 、 `<dl>` 、 `<table>` 、 `<address>` 、 `<blockquote>` 、 `<form>` 。


### 2. 图例


下面我们用一张图来来了解这三种常用该元素的区别。**具体如下图：**


![3种常用元素](https://img-blog.csdnimg.cn/8f8236c8d5ba43c99d20994ef50ddfa3.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgwMzc1Mw==,size_16,color_FFFFFF,t_70#pic_center)


## 😏五、语义化


### 1. 定义


所谓语义化，即根据内容的结构，选择合适的标签来构建出便于开发者阅读的可维护性更高的代码结构，同时能够让机器更好地解析。**如下所示：**








### 2. 常见语义化标签解析


接下来我们来看一下一些常见的语义化标签，具体如下。


#### （1）语义化 - 区块类别标签


##### 1）header


* `header` 主要用于展现一些介绍性信息。
* 通常包含⼀组介绍性或是辅助导航的元素，如标题、 `Logo` 、搜索框、作者名称等 。
* 不能放在 `<footer>` 、 `<address>` 或者另⼀个 `<header>` 元素内部。


**比如：**

HTML


##### 2）nav


* 在当前⽂档或其他⽂档中提供导航链接，如菜单、⽬录、索引等。
* ⽤来放置⼀些热⻔的链接，不常⽤的链接通常放到 `footer` ⾥置于底部。


**比如：**





##### 3）article


* 独⽴的⽂档、页面、应⽤、站点。
* 可独⽴分配的或可复⽤的结构，如论坛帖⼦、新闻⽂章、博客、⽤户提交的评论、交互式组件等。


**比如：**




<h1>广州的天气预报</h1>

<article class="day-forecast">
    <h2>2021.08.15</h2>
    <p>多云</p>
</article>

<article class="day-forecast">
    <h2>2021.08.16</h2>
    <p>晴天</p>
</article>


##### 4）section


* 按主题将内容分组，通常会有标题。
* `<section>` 通常出现在⽂档的⼤纲中。
* 不要把 `<section>` 作为普通容器来使用，比如说用于美化片段样式，此时用 `<div>` 更合适。
* 如果元素里边是独立的整块的内容，可以单独发布，则更适合用 `<article>` 。


**比如：**

选择一个苹果

介绍

这个文档将提供一个引导，帮助选择一个正确的苹果

标准

对于选择一个苹果来说，有很多不同的标准，比如尺寸，颜色，甜度等等标准


##### 5）aside


* 表示一个和其余页面内容几乎无关的部分，或者说单独拆出来不会影响整体的内容。
* 通常放在侧边栏，用于展示广告、 `tips` 、引用内容等等。


**比如：**

今天天气还不错，我决定去踏青


##### 6）footer


* 表示最近一个章节的页脚。
* 通常包含该章节作者、版权数据或者文档链接等信息。
* `footer` 内的元素不属于章节内容，不包含在大纲中。


**比如：**

版权号 by monday


#### （2）语义化 - 分组类别标签


##### 1）figure/figcaption


* `<figure>` 包裹被独⽴引⽤的内容：图表、插图、代码等，通常会有个标题；
* `<figcaption>` 与其相关联的图表的说明/标题，通常位于 `<figure>` 的第⼀个或最后⼀个。


**比如：**
A robotic monster over the letters MDN.
MDN logo 

##### 2）blockquote


* 块级引⽤元素。
* `cite` 属性表示该来源的 `url` 。


**比如：**

Words can be X-rays, if you use them properly - they'll go through anything.

-Aldous Huxley, Brave New World 

##### 3）dl/dt/dd


* 用于描述一组键值对。
* 通常用于元数据、术语定义等场景。
FireFox
A free, open source, cross-platform. 



### 给大家的福利


**零基础入门**


对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。


![](https://img-blog.csdnimg.cn/img_convert/95608e9062782d28f4f04f821405d99a.png)


同时每个成长路线对应的板块都有配套的视频提供：


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a91b9e8100834e9291cfcf1695d8cd42.png#pic_center)


因篇幅有限，仅展示部分资料

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
2401_84247423
关注
  • 15
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2024年程序员跳槽全攻略
12-27
2024年的程序员跳槽全攻略旨在为程序员提供一套全面的策略和指南，帮助他们在变动的市场环境中顺利切换职业跑道。本攻略涵盖了多个关键知识点，包括但不限于以下内容： 1. **个人评估与定位**：在决定跳槽前，首先...
DB2程序员成长攻略
05-01
DB2程序员成长攻略 这本书较早，主要是对db2v8.2的，可以参考学习
swaks使用教程
流浪法师的博客
12-30 1万+
swaks使用教程
邮件发送工具swaks基础使用与邮件SPF配置漏洞简析
Alexz__的博客
04-16 6639
1.swaks工具使用 2.什么是邮件的SPF配置 3.SPF漏洞简析 4.SPF漏洞修复方案 壹 swaks工具的使用 （怎么这么多瑞士军刀.....） 一般来说kali自带： 基础用法： swaks –to <要测试的邮箱> 用来测试邮箱的连通性 我们先申请一个临时邮箱：http://24mail.chacuo.net/enus ...
Swaks钓鱼邮件
live小杨的博客
12-05 1172
今天 用kali来搞一个钓鱼邮件Swaks是一款命令行工具，用于测试SMTP服务器发送邮件，Swaks意味着“Swiss Army Knife SMTP”，它的设计理念是小巧灵活易于使用，是实际运营中一款常用的全能邮件发送工具之一。Swaks的优点： - 易于使用，支持TLS/SSL、SMTP验证和代理。- 可用于SMTP会话和挂起，方便调试。- 可以指定多个收件人，支持批量发送。- 输出详细的重要交互细节，有助于调试Swaks是一个号称“SMTP界的瑞士军刀”的SMTP工具。
JavaScript学习笔记（二十）DOM动画效果
2401_84254011的博客
04-28 495
/0 ~ 100}else{//100// 3. 速度取整;}else{}else{// 4. 终止条件;} , 50)
ctfshow-WEB-web2
热门推荐
wangyuxiang946的博客
08-19 1万+
ctf.show WEB模块第2关是一个SQL注入漏洞,请求方式是POST请求,注入点是单引号字符型注入,flag就藏在当前的数据库的flag表中,使用联合注入获取数据即可 在用户名的输入框中输入万能账号a' or true #,密码随便输 登录成功,万能账号生效了,并且把查询到的用户名显示到了页面中,既然有显示位,那我们就用联合注入进行脱库 首先,测试一下回显的位置,在用户名的输入框中输入一下payload,密码还是随便输 a' union select 1,2...
程序员必备资源，值得收藏！.html
07-15
程序员必备资料
2024年Java程序员找工作最新面试攻略.pdf
最新发布
06-11
### 2024年Java程序员找工作最新面试攻略 #### 面试攻略概览 在当前技术快速发展的背景下，Java程序员面临着越来越高的面试要求。本文档旨在为正在寻找工作的Java程序员提供最新的面试策略和技巧，帮助他们更好地...
程序员成长路线图 从入门到优秀
10-22
程序员成长路线图 从入门到优秀
ctfshow web-2(sql注入)
m0_73303597的博客
11-21 1857
自用
rabbitmq-管理控制台简介（一）
qq_35981356的博客
10-20 1627
转载自：https://www.jianshu.com/p/7b6e575fd451 1. 简介 rabbitmq-management是RabbitMq web管理端，用的是erlang的cowboy框架进行开发。web页面包括Overview(概述)、Connections(连接)、Channels(通道)、Exchanges(交换器)、Queues(队列)、Admin(用户管理)。 2. Overiview-概述 2.1 overview->totals ![在这里插入图片描述](https:
RabbitMQ 管理页面该如何使用
weixin_42050545的博客
11-23 2622
1. 概览 2. Overview 3. Connections 4. Channels 5. Exchange 6. Queue 7. Admin RabbitMQ 的 web 管理页面相信很多小伙伴都用过，随便点一下估计也都知道啥意思，不过本着精益求精的思想，松哥还是想和大家捋一捋这个管理页面的各个细节。 1. 概览 首先，这个 Web 管理页面大概就像下图这样： 首先一共有六个选项卡： Overview：这里可以概览 Rabb
网络钓鱼详解
weixin_68547367的博客
01-08 1335
他通常被用来伪造邮件，进行钓鱼、社工等操作，但是这种也是具有一定风险的，同时在这里提醒广大用户在收到邮件时，不要直接打开邮件，先看看邮件的域名以及头标题等信息是否正确，不然一个贸然的操作有时候将可能导致自己被钓鱼甚至攻击。钓鱼邮件，是一种伪造邮件，指利用伪装的电邮，一般目的是来欺骗收件人将账号、口令或密码等信息回复给指定的接收者，或附有超链接引导收件人连接到特制的钓鱼网站或带毒网页，这些网页通常会伪装成和真实网站一样，如银行或理财的网页，令登录者信以为真，输入手机号码、账户名称及密码等而可能被盗取。
rabbiemq学习
星月IWJ
02-24 2707
rabbitmq 使用场景 数据投递，非阻塞操作或推送通知。或许你想要实现发布／订阅，异步处理，或者工作队列 特性 持久性机制、投递确认、发布者证实和高可用性机制 路由 消息在到达队列前是通过交换机进行路由的 协议 支持多种消息协议的消息传递 发布者指定属性发送到交换机 交换机发送到队列 消费者从队列消费或者拉取 开启ack 死信队列 交换机状态:持久,暂存 默认交换机(没有名字的直连交换机) 每个新建队列（queue）都会自动绑定到默认交换机上，绑定的路由键（routing key）名称与.
ctfshow-WEB-web9( MD5加密漏洞绕过)
wangyuxiang946的博客
09-05 1万+
ctf.show WEB模块第9关是一个SQL注入漏洞, SQL中使用MD5进行加密, 推荐使用MD5加密漏洞绕过 进去以后就是一个登录界面, 盲猜是个SQL注入漏洞 首先, 我们访问根目录下的 robots.txt 文件 robots.txt是一个文本文件,同时也是一个协议,规定了爬虫访问的规则( 哪些文件可以爬取,哪些文件不可以爬取) 从robots.txt文件的内容中可以发现, 作者给了提示, index.phps文件应该就是此关卡的源码文件 接下来...
ctfshow-web9（奇妙的ffifdyop绕过）
Welcome To Myon'Blog !
10-09 649
这里执行了 SQL 查询并将结果存储在 $result 变量中，然后通过 mysqli_num_rows($result) 检查返回的结果集中是否有行数大于0的数据，如果有，表示登录成功，就会输出flag。这段代码构建了一个 SQL 查询，但是它没有对用户输入进行适当的过滤或净化，很可能存在SQL注入，并且密码在数据库中储存为 MD5 散列值。首先验证用户提交的密码是否超过10个字符，如果超过，就终止脚本并显示密码错误消息。or后面的第一个字母只要不是0，都会被认为是true，从而实现sql注入的绕过。
ctfshow web2
m0_63253040的博客
03-12 1714
打开环境是一个登入页面， 题目提示：最简单的SQL注入，那么先试一试万能密码登入 ' or 1=1# 密码随便输 存在回显，直接sql注入 ' or 1=1 order by 3# 正常回显，爆到4时不回显 ' or 1=1 order by 4# 开始爆库名 ,先看看是哪个位置会回显 ' or 1=1 union select 1,2,3# 发现是可以不用输密码的 ' or 1=1 union select 1,database(),3# 得到库...
系统程序员成长路径：实战与理论的融合
系统程序员的成长计划并非单纯依赖书本知识，而是作者自身八年的持续阅读积累（拥有300多本IT经典书籍），结合开源软件的经验，以及实战项目如broncho的深入应用。作者的目标是为初出茅庐的程序员提供实用的学习路径...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值