【网络安全XSS必知 | 前端开发基础】一篇文章速学 HTML

简介: 【网络安全XSS必知 | 前端开发基础】一篇文章速学 HTML


HTML是一种超文本标记语言,通过标记标签来描述网页。标签是成对出现的。

网页结构如下:

只有<body>区域才会在页面中显示。

在每个HTML文件中,为了保证网页版被正确显示,都需要在最前面加上<!DOCTYPE HTML>

为了防止出现中文乱码,也需要在头部进行声明:

<head>
<meta charest = "UTF-8">
</head>

标题

通过<h1><h6>标签定义标题,<h1> 定义最大的标题。 <h6> 定义最小的标题。浏览器会自动地在标题的前后添加空行。

段落

通过<p>标签定义段落,浏览器会自动地在段落的前后添加空行。

图像

通过<img src="../a.jpg" alt="ice" width="100" height="60">定义图像

alt 属性用来为图像定义一串预备的可替换的文本,在浏览器无法载入图像时,替换文本属性告知失去的信息。(可省略)

height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。(可省略)

src后既可跟图片路径,也可跟图片链接:

链接

通过<a>标签定义链接

文本链接:<a href="https://www.example.com">链接</a>

图像链接:

<a href="https://www.example.com">
  <img src="example.jpg" alt="示例图片">
</a>

下载链接:链接用于下载文件,可以使用 download 属性。

<a href="ice.pdf" download>下载文档</a>

元素内容

标签及标签内的字段合称为元素,字段称为元素内容。

<p>ice</p>,在这里ice即为元素内容。

水平线

通过<hr>标签创建水平线,用于分隔内容。

注释

通过<!--注释-->标签提高代码可读性。

折行

通过<br>进行换行。

属性

HTML元素提供的附加信息称为属性,如上文的链接中的href就是一个属性。

格式化标签

对文本形式有要求时,可使用格式化标签。

头部

<head>中的内容称为头部。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<style> 标签定义了HTML文档的样式文件引用地址
在<style> 元素中也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

<meta>标签描述了一些基本的元数据,元数据不显示在页面上,但会被浏览器解析。
定义网页作者:
<meta name="author" content="ice">
<link> 标签定义了文档与外部资源之间的关系,通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<script>标签用于加载脚本文件,如: JavaScript。

参考链接:【网络安全必备 | 前端开发基础】一篇文章速学 JavaScript

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

举个例子,这里不做过多叙述:

<p style="color:green;margin-left:60px;">ice</p>

表格

通过 <table> 标签定义表格。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义),表格中可以使用标题行(<th>)定义列的标题。

列表

分为无序列表及有序列表。无序列表使用 <ul> 标签:

<ul>
<li>1</li>
<li>2</li>
</ul>

有序列表始于 <ol> 标签:

<ol>
<li>1</li>
<li>2</li>
</ol>

表单

HTML 表单用于收集用户的输入信息,通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

通过 <form> 标签来创建表单,标签中可以有action及method

<form action="login.php" method="post">
action 属性定义了表单数据提交的目标 URL,method 属性定义了提交数据的 HTTP 方法

通过<input>标签来输入元素

  • 通过 <input type="text"> 标签来设定文本域(可用于输入评价)
  • 通过<input type="password"> 标签来设定密码
  • 通过<input type="radio"> 标签定义单选框选项
  • 通过<input type="checkbox"> 标签定义复选框。
  • 通过<input type="submit"> 标签定义提交按钮。

举个例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单示例</title>
</head>
<body>
    <h2>用户登录</h2>
    <form action="login.php" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名" required><br><br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="请输入密码" required><br><br>
        <label for="gender">性别:</label>
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label><br><br>
        <label for="agree">同意条款:</label>
        <input type="checkbox" id="agree" name="agree" required><br><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

框架、颜色、布局

这里不过多叙述。

字符实体

在有些时候我们需要将一些字符进行替换。例如:我们使用<表示比较时,会被误认为标签的一部分,导致代码出错。

举个例子:

读者可进入教程网站进行HTML的深入学习:菜鸟教程 | HTML教程

目录
相关文章
|
24天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
40 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
88 25
|
3月前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
72 6
|
4月前
|
存储 JSON 安全
2024全网最全面及最新的网络安全技巧 二 之 CSRF+XSS漏洞的各类利用技巧
2024全网最全面及最新的网络安全技巧 二 之 CSRF+XSS漏洞的各类利用技巧
|
6月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
83 1
前端基础(十七)_HTML5新特性
|
5月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
5月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
42 2
|
5月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
60 1
|
6月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
111 19

热门文章

最新文章