HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。_html零基础入门教程

最新推荐文章于 2024-06-18 13:20:32 发布

码农x马马

最新推荐文章于 2024-06-18 13:20:32 发布

阅读量1.4k

点赞数 28

文章标签： html 前端网络安全 web安全职场和发展安全网络

本文链接：https://blog.csdn.net/ewii12567/article/details/138152488

版权

本文介绍了HTML的基础知识，包括HTML的定义、语法规范、常用标签如h1-h6标题、p段落、br换行、div和span容器、img图片、a超链接、文本格式化、表格、列表、表单等。同时讲解了字符集设置和一些关键属性的使用。

摘要由CSDN通过智能技术生成

我们平时所浏览的网站是由一页一页的页面组成的,每一个页面称为一个网页
网页是构成网站的基本元素, 通常由图片,文字,视频等元素组成, 我们常见的网页,通常都是以.htm 或.html 后缀结尾的文件, 也就是HTML文件, 而HTML文件需要使用HTML来编写, 因此, 想要制作网站, 首先需要了解HTML的基本使用方式

在这里插入图片描述

HTML基础教程

什么是HTML
HTML语法规范
结构标签
- 第一个页面
- 字符集
基础标签
- h1-h6 标题标签
- p 段落标签
- br 换行标签
- div 标签
- span 标签
- img 图片标签
- a 超链接标签
文本格式化标签
表格标签
列表标签
表单标签
- form 表单
- input 输入框
- - input 常用属性
HTML特殊字符对照表

什么是HTML

HTML全称Hyper Text Markup Language, 翻译成中文就是 超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言

超文本 可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)
标记语言 可以理解为一套标记标签,也就是由许多标记标签组成的语言

HTML语法规范

1.HTML标签是由尖括号包围的关键字,比如<html>
2.HTML标签通常是成对出现的,由一个开始标签和一个结束标签组成,也就是双标签,比如<html></html>
3.有些特殊的标签必须是单个标签,也就是单标签,比如<br/>
4.双标签可以分为两类: 包含关系和并列关系

在这里插入图片描述

结构标签

每个页面都会有一个基本的标签结构, 页面中能够看到的内容都需要写在结构标签中

在这里插入图片描述

第一个页面

<html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面标签</title>
	</head>
	<body>
		第一个页面
	</body>
</html>

在这里插入图片描述

字符集

字符集( Character set)是多个字符的集合, 以便计算机能够识别和存储各种文字
在head标签内, 可以通过meta标签的 charset属性来规定HTML文档应该使用哪种字符编码

<meta charset="utf-8" />

charset常用的值有: GBK 和 UTF-8, 其中 UTF-8 也被称为 万国码, 基本包含了全世界所有国家需要用的字符, 也是最常用的字符集之一

基础标签

在这里插入图片描述

h1-h6 标题标签

标签介绍

h就是单词 head 的缩写, 意为头部, 标题, 常用于标题, 并依据重要性递减( h1最大, h6最小)

标签实例

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

在这里插入图片描述

p 段落标签

标签介绍

p就是单词 paragraph 的缩写, 意为段落, 常用于定义段落, 将整个网页分为若干个段落

标签实例

	<p>第一个段落</p>
	<p>第二个段落</p>

在这里插入图片描述

br 换行标签

标签介绍

br是单词 break 的缩写, 意为打断,换行, 页面中的文字需要到最右端才会自动换行, 如果希望文本强制换行, 可以使用br标签进行换行

标签实例

	第一行<br />
	第二行

在这里插入图片描述

div 标签

标签介绍

div是单词 division 的缩写, 表示分割,分区, 没有什么特殊意义,常用来装内容, 需要注意的是,div标签独占一行, 也就是说一行只能放一个div盒子

标签实例

		<div>div标签独占一行</div>
		<div>div标签独占一行</div>

在这里插入图片描述

span 标签

标签介绍

span表示跨度,跨距, 没有什么特殊含义,常用来装内容,与div不同的是,一行可以放多个span标签

标签实例

    <span>span标签_1</span>
    <span>span标签_2</span>

在这里插入图片描述

img 图片标签

标签介绍

img是单词 image 的缩写,意为图像,常用来定义页面中图片

标签属性

src – 指定图片的路径
alt – 设置图片的替代文本( 图片加载失败时显示)
title – 设置图片的提示文本( 鼠标悬浮在图片上时显示)

标签实例

在这里插入图片描述

a 超链接标签

标签介绍

a是单词 anchor 的缩写,意为锚, 可以从一个页面链接到另一个页面

标签属性

href – 指定目标url
target – 指定链接页面的打开方式
- _blank 新页面打开
- _self 当前页面打开

标签实例

<a href="https://www.baidu.com" target="_blank">超链接</a>

在这里插入图片描述
点击超链接标签后, 在新页面中打开百度的网站

文本格式化标签

在这里插入图片描述
标签实例

    <b>加粗</b><br />
    <i>斜体</i><br />
    <s>删除线</s><br />
    <u>下划线</u>

在这里插入图片描述

表格标签

在这里插入图片描述

标签介绍

表格主要用于显示和展示数据, 可以让数据显示的非常整齐, 提高可读性, 一个简洁的表格能够把繁杂的数据表现的很有条理, 需要注意的是表格擅长的是展示数据而不是布局页面, 页面的布局推荐使用 div 或 span 等标签

标签实例

<table border='1'>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
    </tr>
</table>

在这里插入图片描述

列表标签

在这里插入图片描述

标签介绍

顾名思义, 列表标签可以使数据呈列表的形式展现, 提高数据的可读性, 使数据的展现更加规律和美观
列表分为有序列表和无序列表, 无序列表没有顺序可言, 通常以项目符号呈现列表项, 而有序列表可以显示各个列表项的顺序

标签实例

无序列表的列表项没有顺序, 常用于展示不关心顺序的数据

<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
</ul>

在这里插入图片描述
有序列表的列表项会显示排序, 以此来提高数据的可读性

<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
</ol>

在这里插入图片描述
自定义列表可以展示多级信息, 以此来达到分类的效果

<dl>
    <dt>分类1</dt>
    <dd>分类项1</dd>
    <dd>分类项1</dd>

    <dt>分类2</dt>
    <dd>分类项2</dd>
    <dd>分类项2</dd>

</dl>

在这里插入图片描述

表单标签

表单标签常用于跟客户进行交互, 收集用户信息

在这里插入图片描述

form 表单

标签介绍

form 标签用来创建一个 表单域, 在提交数据时, 表单域中的所有数据元素将被作为一个整体提交至服务器

标签属性

action – 指定表单数据提交的url地址
method – 指定提交方式( get/post)

input 输入框

表单属性

type – 指定输入框的属性
name – 定义元素名, 用于后端接收数据
value – 设置输入框的值
checked – 首次加载时选中
maxlength – 最大长度, 用于规定输入的字符数量( 没啥用,前端源码中随便修改)

input 常用属性

在这里插入图片描述
标签实例

    <form action="xxx.php" method="get">
        用户名:<input type="text" name="username" value="用户名" /><br />
        密码:<input type="password" name="passwd" /><br />
        性别:男<input type="radio" name="sex" value="1" checked />
        女<input type="radio" name="sex" value="2"/><br />
        爱好:苹果<input type="checkbox" name="happy" value="1" />
        香蕉<input type="checkbox" name="happy" value="2"/><br />
        籍贯:<select name="city">
        		<option value="1">山东</option>
        		<option value="2">北京</option>
        	</select><br />
        上传头像:<input type="file" name="file" /><br />
        留言:<textarea name="text"></textarea><br />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>

在这里插入图片描述

HTML特殊字符对照表

html中某些字符是预留字符, 不能直接使用, 因此需使用代码表示

在这里插入图片描述

今天只要你给我的文章点赞，我私藏的网安学习资料一样免费共享给你们，来看看有哪些东西。

网络安全学习资源分享:

最后给大家分享我自己学习的一份全套的网络安全学习资料，希望对想学习网络安全的小伙伴们有帮助！

零基础入门

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

【点击领取】网络安全重磅福利：入门&进阶全套282G学习资源包免费分享！

1.学习路线图

在这里插入图片描述

攻击和防守要学的东西也不少，具体要学的东西我都写在了上面的路线图，如果你能学完它们，你去接私活完全没有问题。

2.视频教程

网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己录的网安视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。【点击领取视频教程】

在这里插入图片描述

技术文档也是我自己整理的，包括我参加大型网安行动、CTF和挖SRC漏洞的经验和技术要点，电子书也有200多本【点击领取技术文档】

在这里插入图片描述

（都打包成一块的了，不能一一展开，总共300多集）

3.技术文档和电子书

技术文档也是我自己整理的，包括我参加大型网安行动、CTF和挖SRC漏洞的经验和技术要点，电子书也有200多本【点击领取书籍】

在这里插入图片描述

4.工具包、面试题和源码

“工欲善其事必先利其器”我为大家总结出了最受欢迎的几十款款黑客工具。涉及范围主要集中在信息收集、Android黑客工具、自动化工具、网络钓鱼等，感兴趣的同学不容错过。

在这里插入图片描述

最后就是我这几年整理的网安方面的面试题，如果你是要找网安方面的工作，它们绝对能帮你大忙。

这些题目都是大家在面试深信服、奇安信、腾讯或者其它大厂面试时经常遇到的，如果大家有好的题目或者好的见解欢迎分享。

参考解析：深信服官网、奇安信官网、Freebuf、csdn等

内容特点：条理清晰，含图像化表示更加易懂。

内容概要：包括内网、操作系统、协议、渗透测试、安服、漏洞、注入、XSS、CSRF、SSRF、文件上传、文件下载、文件包含、XXE、逻辑漏洞、工具、SQLmap、NMAP、BP、MSF…

在这里插入图片描述

因篇幅有限，仅展示部分资料，需要点击下方链接即可前往获取
CSDN大礼包：《黑客&网络安全入门&进阶学习资源包》免费分享

码农x马马

关注

28
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。_html零基础入门教程

HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
复制链接

扫一扫