网络安全最全值得关注的HTML基础(1)，已整理成文档

最新推荐文章于 2024-07-10 22:11:08 发布

2401_84297560

最新推荐文章于 2024-07-10 22:11:08 发布

阅读量1k

点赞数 14

分类专栏：程序员文章标签：网络安全学习面试

本文链接：https://blog.csdn.net/2401_84297560/article/details/138872501

版权

程序员专栏收录该内容

165 篇文章 0 订阅

订阅专栏

还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！

王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。

对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！

【完整版领取方式在文末！！】

93道网络安全面试题

内容实在太多，不一一截图了

黑客学习资源推荐

最后给大家分享一份全套的网络安全学习资料，给那些想学习网络安全的小伙伴们一点帮助！

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

1️⃣零基础入门

① 学习路线

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

② 路线对应学习视频

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

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

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

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

+ - [（1）语义化 - 区块类别标签](#1___234)
	- * [1）header](#1header_236)
		* [2）nav](#2nav_251)
		* [3）article](#3article_268)
		* [4）section](#4section_293)
		* [5）aside](#5aside_314)
		* [6）footer](#6footer_329)
	- [（2）语义化 - 分组类别标签](#2___344)
	- * [1）figure/figcaption](#1figurefigcaption_346)
		* [2）blockquote](#2blockquote_362)
		* [3）dl/dt/dd](#3dldtdd_378)
	- [（3）语义化 - 文本标签](#3___390)
	- * [1）cite](#1cite_392)
		* [2）time](#2time_397)
		* [3）address](#3address_402)
		* [4）mark](#4mark_406)
		* [5）code](#5code_410)
		* [6）small](#6small_414)
	- [（4）语义化 - 多媒体元素标签](#4___418)
	- * [1）img](#1img_420)
		* [2）picture](#2picture_427)
		* [3）音视频](#3_434)

🧐六、HTML解析
- 1. DOM文档对象模型
  - 2. HTML的解析过程
🙃七、结束语
🐣彩蛋 One More Thing

🥳序言

众所周知，html是前端刚开始学习时的第一门语言。然而，在我们日常的实际开发中，一直注重的是实践和应用。但是殊不知的是，很多小伙伴都忽略了很多关于 html 相关的基础入门知识。那么在接下来的文章中，将讲解 html 是什么，其发展历史又是怎么样的？还有 html 如何使用，以及如何写出更加语义化的 html 。

接下来我们来一起学习⑧~🧐

😋一、网页三大元素

大家都知道，对于网页来说，有三大基本元素。那就是大家所熟悉的 html ， css 和 js 。对于这三者来说，主要描述如下：

html ：网页的基本结构；
css ：网页的展现效果；
js ：网页的功能行为。

😜二、HTML简介

1. 定义

HTML ，全称为 HyperText Markup Language , 即超文本标记语言)，它是用于构建网页基本结构及其内容的一门标记语言。接下来我们来看一下超文本和标记语言分别是什么：

超文本： 文本中包含指向其他文本的链接；

标记语言： 将文本以及文本相关的其他信息结合起來，展现出文档结构，如： HTML 、 XML 、 KML 、 Markdown 等等。

2. 发展历史

看完定义之后，我们再来看下 HTML 的一个发展历史。具体如下：

伯纳斯-李 在1989年提出了基于互联网的超文本系统。
1993年 IETF （互联网工程任务组）发布首个 HTML 提案，由此， HTML 语言的第一版就诞生啦。
在经历过几个草案之后， HTML 2.0 于1995年发布，包括了基于表单的文件上传、表格、国际化等功能。
1994年 W3C 成立，随后接管了 HTML 的标准化工作，并在1997年发布了 HTML3.2 。
随后发布的 HTML4.0 中采用许多特定浏览器的元素类型和属性。
在2014年的时候， HTML5 作为 W3C 的推荐标准发布。

😝三、HTML结构

1. 引例阐述

我们来看一段 HTML 代码，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<body>
    <p class="editor-note">周一家的猫咪很可爱！</p>
    <img src="cat.png" alt="猫咪图片">
</body>
</html>

大家可以看到，在上面这段 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 。下面给出一些常用的配置信息。

<meta charset="utf-8">定义文档字符编码
<meta name="keywords" content="HTML"> 关键字
<meta name="description" content="HTML基础">页面描述
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">主要用于移动端，定义设备屏幕上用来显示网页的区域
<meta http-equiv="expires" content="31 Dec 2021">http头部

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

（6）title

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

（7）style

<style> ，是 CSS 的样式。

（8）link

<link> ，表示跳转链接。下面给出几种常见的 link 方式。具体如下：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
当前页面的favicon

<link rel="stylesheet" href="my-css-file.css">
链接到样式表

<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
可替换的样式表

（9）script

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

<script type="text/javascript" src="javascript.js"></script>

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

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

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

async和defer

大家可以看到， 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种常用元素

😏五、语义化

1. 定义

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

<div class="header"></div>
<div class="section">
	<div class="article">
    	<div class="figure">
        	<img>
            <div class="figcaption"></div>
        </div>
    </div>
</div>
<div class="footer"></div>

<header></header>
<section>
	<section>
    	<figure>
        	<img>
            	<figcaption></figcaption>
        </figure>
    </section>
</section>
<footer></footer>

2. 常见语义化标签解析

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

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

1）header

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

比如：

<header>
	<h1>HTML</h1>
    <P><time pubdate datetime="2021-08-15"></time></P>
</header>

2）nav

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

比如：

<nav>
	<ol>
        <li><a href="#">HTML</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">js</a></li>
    </ol>
</nav>

3）article

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

比如：

<article class="forecast">
    
    <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>
    
</article>

4）section

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

比如：

<h1>选择一个苹果</h1>
<section>
    <h2>介绍</h2>
    <p>这个文档将提供一个引导，帮助选择一个正确的苹果</p>
</section>
<section>
    <h2>标准</h2>
    <p>对于选择一个苹果来说，有很多不同的标准，比如尺寸，颜色，甜度等等标准</p>
</section>

5）aside

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

学习路线：

这个方向初期比较容易入门一些，掌握一些基本技术，拿起各种现成的工具就可以开黑了。不过，要想从脚本小子变成黑客大神，这个方向越往后，需要学习和掌握的东西就会越来越多以下是网络渗透需要学习的内容：
在这里插入图片描述

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

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

2401_84297560

关注

14
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
网络安全最全值得关注的HTML基础(1)，已整理成文档

HTML，全称为, 即超文本标记语言)，它是用于构建网页基本结构及其内容的一门标记语言。文本中包含指向其他文本的链接；将文本以及文本相关的其他信息结合起來，展现出文档结构，如：HTMLXMLKMLMarkdown等等。所谓语义化，即根据内容的结构，选择合适的标签来构建出便于开发者阅读的可维护性更高的代码结构，同时能够让机器更好地解析。
复制链接

扫一扫