零基础学安全--HTML

news/2024/11/28 19:47:54/
htmledit_views">

目录

学习连接

HTML简介

HTML基本结构

例子

表单标签

 表格标签

超链接标签


学习连接

声明!
学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无关,切勿触碰法律底线,否则后果自负!!!!有兴趣的小伙伴可以点击下面连接进入b站主页[B站泷羽sec]

泷羽-SEC

HTML简介

是用于创建网页和网页应用的标准标记语言。它使用一系列标签(tags)来描述网页的内容和结构。

HTML基本结构

html"><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文档标题</title>
</head>
<body><h1>这是一个标题</h1><p>这是一个段落。</p>
</body>
</html>

将后缀改为.html用浏览器打开即可显示你编辑的内容 

 

<!DOCTYPE html>: 声明文档类型,告诉浏览器这是一个HTML5文档

<html lang="zh-CN"><html>标签定义整个HTML文档,lang属性指定文档的语言

<head>: 包含文档的元数据(metadata),如字符集、页面标题、外部链接的CSS和JavaScript文件等,这个里面的东西一般不是类似于文字直接显示的东西,而是例如元素位置,背景等不直接显示的东西

<title>: 定义文档的标题,在浏览器标签栏中显示

<meta name="viewport" content="width=device-width, initial-scale=1.0">: 用于提供多种类型的元数据,确保网页在移动设备上良好显示,例如编码的设置、页面的描述。

<link>:这个标签用于连接外部连接比如说一些css样式

<script> 标签在 HTML 中用于定义客户端脚本,比如 JavaScript。这些脚本可以用于生成动态页面内容、控制多媒体、动画以及处理用户输入等

<body>: 包含网页的可见内容,如文本、图片、链接等

<p>:用于定义段落

<a href="URL">,用于创建超链接,href属性指定链接目标地址,点击就可以到达目标内容

<table>:定义表格。

<tr>:定义表格行。

<td>:定义表格单元格。

<th>:定义表头单元格。

<form>:定义表单。

<input>:定义输入控件,如文本框、按钮等。

<textarea>:定义多行文本输入控件。

<select><option>:定义下拉列表。

标签不止这么点,感兴趣的小伙伴可以学习一下

例子

表单标签

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单标签</title>
</head>
<body><form action="https://www.baidu.com" method="post">username:<input type="text" name="username" >password:<input type="password" name="password"><!-- 提交按钮后 --><button type="submit">提交</button></form></body>
</html>

 

 表格标签

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签</title>
</head>
<body><table border="1px"><tr><th>姓名</th><th>年龄</th><th>性别</th><th>薪水</th></tr><tr><td>测试内容</td><td>测试内容</td><td>测试内容</td><td>测试内容</td></tr><tr><td>测试内容</td><td>测试内容</td><td>测试内容</td><td>测试内容</td></tr></table>
</body>
</html>

 

超链接标签

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接</title>
</head>
<body><a href="https://www.baidu.com" title="百度" target="_blank">百度一下,我就知道</a>
</body>
</html>


http://www.ppmy.cn/news/1550706.html

相关文章

利用浏览器录屏

以下内容参考自网络 <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title></title> </head> <body> <div class"left"> <di…

如何使用Jedis连接Redis

1.1 导入需要的依赖 <dependencies><!-- 1、Jedis --><dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>3.7.1</version></dependency><!-- 2、 Junit测试--><…

继续完善wsl相关内容:基础指令

文章目录 前言一、我们需要安装wsl,这也是安装docker desktop的前提,因此我们在这篇文章里做了介绍:二、虽然我们在以安装docker desktop为目的时,不需要安装wsl的分发(distribution),但是装一个分发也是有诸多好处的:三、在使用wsl时,不建议把东西直接放到系统里,因…

NewStar CTF week5 Crypto wp

easy_ecc ecc的模板题&#xff0c;稍加推理就会发现c1mc2*k因此做一个减法就行&#xff0c;需要注意的点是c1,c2必须放到ecc里面过一道才能出正确结果 k 86388708736702446338970388622357740462258632504448854088010402300997950626097 p 644088904089909773124499208053…

8年经验之谈 —— 如何使用自动化工具编写测试用例?

以下为作者观点&#xff0c;仅供参考&#xff1a; 在快速变化的软件开发领域&#xff0c;保证应用程序的可靠性和质量至关重要。随着应用程序复杂性和规模的不断增加&#xff0c;仅手动测试 无法满足行业需求。 这就是测试自动化发挥作用的地方&#xff0c;它使软件测试人员…

STM32-- 技巧-延时

方式未验证&#xff1a; 【经验分享】STM32中实用的精确延时方法 【经验分享】STM32中实用的精确延时方法 - STM32团队 ST意法半导体中文论坛

React-useState的使用

useState 是 React 提供的一个 Hook&#xff0c;允许你在函数组件中添加和管理状态&#xff08;state&#xff09;。在类组件中&#xff0c;状态管理通常是通过 this.state 和 this.setState 来实现的&#xff0c;而在函数组件中&#xff0c;useState 提供了类似的功能。 基本…

C/C++绘制爱心

系列文章 序号直达链接1C/C爱心代码2C/C跳动的爱心3C/C李峋同款跳动的爱心代码4C/C满屏飘字表白代码5C/C大雪纷飞代码6C/C烟花代码7C/C黑客帝国同款字母雨8C/C樱花树代码9C/C奥特曼代码10C/C精美圣诞树11C/C俄罗斯方块12C/C贪吃蛇13C/C孤单又灿烂的神-鬼怪14C/C闪烁的爱心15C/…