Web渗透|《HTML基础教程》——网络安全入门绕不过的一道坎, 内附常见标签及实例( 建议收藏!!!) html5|网络安全|安全|php|html

我们平时所浏览的网站是由一页一页的页面组成的,每一个页面称为一个网页
网页是构成网站的基本元素, 通常由图片,文字,视频等元素组成, 我们常见的网页,通常都是以.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标签是由尖括号包围的关键字,比如 2.HTML标签通常是成对出现的,由一个开始标签和一个结束标签组成,也就是双标签,比如 3.有些特殊的标签必须是单个标签,也就是单标签,比如 4.双标签可以分为两类: 包含关系和并列关系

文章图片

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

文章图片

文章图片

第一个页面

页面标签第一个页面

文章图片

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

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

文章图片

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

一级标签二级标签三级标签四级标签五级标签六级标签

文章图片

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

第一个段落第二个段落

文章图片

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

第一行第二行

文章图片

div 标签标签介绍
【Web渗透|《HTML基础教程》——网络安全入门绕不过的一道坎, 内附常见标签及实例( 建议收藏!!!)】div是单词 division 的缩写, 表示分割,分区, 没有什么特殊意义,常用来装内容, 需要注意的是,div标签独占一行, 也就是说一行只能放一个div盒子
标签实例

div标签独占一行 div标签独占一行

文章图片

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

>span标签_1 >span标签_2

文章图片

img 图片标签标签介绍
img是单词 image 的缩写,意为图像,常用来定义页面中图片
标签属性

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

标签实例

文章图片

a 超链接标签标签介绍
a是单词 anchor 的缩写,意为锚, 可以从一个页面链接到另一个页面
标签属性

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

标签实例

超链接

文章图片

点击超链接标签后, 在新页面中打开百度的网站

文章图片

文本格式化标签

文章图片

标签实例

加粗斜体 >删除线下划线

文章图片

表格标签

文章图片

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

姓名年龄张三 18 李四 19

姓名	年龄
张三	18
李四	19

文章图片

列表标签

文章图片

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