网站设计常用软件,ios个人开发者账号,工业网站模板,平台公司经营范围web基础_HTML扫盲篇
一、什么是 HTML#xff1f;
二、HTML 的基本特点
三、HTML 基本结构概述
1.文档声明#xff08;!DOCTYPE html#xff09;
2. html元素
3. head元素
4. body 元素
四、HTML5的主要标签清单
文档结构标签
文本内容标签
链接和锚点标签
表格标…web基础_HTML扫盲篇
一、什么是 HTML
二、HTML 的基本特点
三、HTML 基本结构概述
1.文档声明!DOCTYPE html
2. html元素
3. head元素
4. body 元素
四、HTML5的主要标签清单
文档结构标签
文本内容标签
链接和锚点标签
表格标签
表单标签
图像和多媒体标签
链接和嵌入标签
脚本和程序控制标签
元信息标签
其他HTML5元素
嵌入式内容标签
Web组件标签
语义化标签
五、简单的html页面示例
1. 效果
2. 示例代码讲解
3. 示例总结
六、输入和表单
1. input 标签
1.1. 常见的类型
1.2. 常用属性
2. form 标签
2.1. 属性
2.2. 常用属性
HTML扫盲篇结语
网络安全与HTML的关系
进一步学习的方向
总结 学习视频泷羽Sec
黑客基础之html超文本标记语言_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1tkmbY9Eyv?spm_id_from333.788.videopod.sectionsvd_source0e1eb78c133fc5f90cf3666ebd4c1a64 web基础_HTML扫盲篇
一、什么是 HTML
HTML超文本标记语言HyperText Markup Language是一种用于描述网页结构和内容的标记语言。它不是编程语言而是一种通过标记标签markup tags来定义网页各个元素的语言。HTML 主要用于构建和组织网页的内容如文本、图像、链接、表单等浏览器会根据 HTML 文件的标记来解析和展示网页。
HTML 文档包含了HTML 标签及文本内容而HTML文档也叫做 web 页面。 二、HTML 的基本特点 标记语言HTML 是一种标记语言通过标记标签(markup tag)来描述网页内容和结构。 不是编程语言HTML 主要用于描述页面内容的结构而不涉及逻辑控制和计算。 基于标签HTML 通过各种标签定义不同的网页元素如标题、段落、链接、图片等。 结构化内容HTML 文件由标签和文本组成标签提供了内容的结构信息。 三、HTML 基本结构概述
一个 HTML 文档也称为 Web 页面通常包含以下几个基本部分 文档声明!DOCTYPE html 用于声明文档类型告诉浏览器该文档遵循 HTML5 标准。 html 元素 包含整个 HTML 文档的根元素所有 HTML 内容都在 html 标签内。 head 元素 定义文档的元数据例如字符集、文档标题、链接的外部样式表等。浏览器不会直接显示 head 中的内容但它对页面的渲染和功能至关重要。 body 元素 包含网页的主要内容所有用户能在浏览器中看到的内容都放在 body 标签内。 1.文档声明!DOCTYPE html
!DOCTYPE html
作用 这是 HTML 文档的第一行称为文档类型声明Document Type Declaration缩写为 DOCTYPE。它告诉浏览器该文档使用的是 HTML5 标准。这个声明帮助浏览器正确解析和渲染网页。对于 HTML5 文档而言!DOCTYPE html 是唯一需要的文档声明省去了 HTML 4 和其他版本中复杂的文档类型声明。
说明 !DOCTYPE html 不是 HTML 标签它仅仅是告诉浏览器要遵循 HTML5 的规则。 这个声明必须是文档的第一行并且没有任何前导空格或其他字符。 2. html元素
html!-- 页面的内容 --
/html
作用 html 是整个 HTML 文档的根元素包含网页的所有内容。浏览器将从 html 元素开始解析直到结束。所有 HTML 页面内容除了 DOCTYPE 声明都必须放置在 html 元素中。
说明 html 标签内的内容被浏览器解析并渲染。 html 元素通常会带有一个 lang 属性来指定文档的语言例如html langen 表示文档的语言是英语。这样可以帮助搜索引擎和屏幕阅读器等工具正确理解文档的语言。
3. head元素
headmeta charsetUTF-8title网页标题/titlelink relstylesheet hrefstyle.cssscript srcscript.js/script
/head
作用 head 元素包含网页的元数据metadata这些内容不会直接显示给用户但对网页的加载、功能和优化至关重要。head 中的内容影响网页的渲染和与其他资源如 CSS、JavaScript的交互。
常见内容 meta 标签定义网页的字符集、作者、描述、关键字等。最常用的 meta charsetUTF-8 是为了指定文档使用的字符编码为 UTF-8这样可以支持全球各种字符集。 title 标签定义网页的标题通常会在浏览器标签页显示。标题对 SEO搜索引擎优化和用户体验非常重要。 link 标签用来链接外部资源最常用的是链接外部样式表CSS。例如link relstylesheet hrefstyle.css。 script 标签定义 JavaScript 代码或者链接外部的 JavaScript 文件。JavaScript 可以放在 head 中也可以放在 body 中具体位置取决于代码执行时机。
说明 head 不会直接渲染到页面上但它对于页面的 SEO、性能和功能非常重要。 meta、title、link 和 script 标签的具体使用是 HTML 页面设计的基础。 4. body 元素
bodyh1欢迎来到我的网站/h1p这是一个简单的 HTML 页面。/p
/body
作用 body 元素包含网页的主要内容这部分是用户在浏览器中看到的所有内容。所有文字、图像、链接、表单等可视元素都应该放在 body 元素中。换句话说body 中的内容才是页面的实际展示内容。
常见内容 文本内容如标题、段落、列表等。 图像和媒体使用 img 标签插入图像audio、video 标签嵌入音频和视频。 链接使用 a 标签创建超链接。 表单使用 form 标签创建表单提交数据给服务器。 嵌入内容如 iframe 标签嵌入外部网页或视频。 交互式元素通过 JavaScript 和 HTML 元素的结合实现用户交互。
说明 body 内的内容会被浏览器渲染并显示给用户用户交互也主要发生在 body 部分。 通常JavaScript 和样式CSS会影响 body 中内容的显示和行为。 四、HTML5的主要标签清单
标签非常的多我只是罗列出来不一定需要全部用上后面会有个简单的示例重要的标签。
文档结构标签 html定义整个HTML文档。 head定义文档的元数据部分如字符集、标题、外部文件引用等。 title定义网页的标题。 meta提供关于文档的元数据如字符集、页面描述等。 base设置页面的基本URL。 link定义文档与外部资源的关系通常用于引入样式表。 style嵌入CSS样式。 script嵌入或引用JavaScript代码。 noscript如果浏览器不支持JavaScript则显示此内容。
文本内容标签 body定义网页的主体内容部分。 header定义文档或页面的头部区域。 footer定义文档或页面的底部区域。 nav定义导航链接部分。 article定义独立的内容区域通常是文章。 section定义文档的一个章节或区域。 div定义一个文档区域或块级容器。 span定义内联文本容器。 h1, h2, ..., h6定义标题从大到小的六个级别。 p定义段落。 br定义换行符。 hr定义水平分隔线。 blockquote定义引用的内容。 pre定义预格式化的文本保留空格和换行符。 code定义代码片段。 em表示强调文本通常是斜体。 strong表示重要文本通常是加粗。 small表示较小的文本。 mark表示被高亮显示的文本。 del表示已删除的文本通常显示为删除线。 ins表示插入的文本通常显示为下划线。 sub定义下标文本。 sup定义上标文本. i定义斜体文本。 b定义粗体文本。 u定义下划线文本。 q定义短的引用。
链接和锚点标签 a定义超链接。 area定义图像地图中的区域。 link定义与外部资源的关系通常用于链接CSS样式表。
表格标签 table定义表格。 caption定义表格标题。 thead定义表格的头部部分。 tbody定义表格的主体部分。 tfoot定义表格的底部部分。 tr定义表格的行。 th定义表格头单元格。 td定义表格数据单元格。 col定义表格列的属性如宽度。 colgroup定义表格列的组。
表单标签 form定义表单。 input定义输入控件。 textarea定义多行文本输入区域。 button定义按钮。 select定义下拉列表。 option定义下拉列表的选项。 optgroup定义下拉列表中的选项组。 label定义表单元素的标签。 fieldset定义表单区域。 legend为 fieldset 提供标题。 datalist定义输入框可用的预设选项。 output定义输出元素。
图像和多媒体标签 img定义图像。 audio定义音频内容。 video定义视频内容。 source定义多媒体资源如视频、音频的来源。 track定义视频或音频的文本轨道如字幕。 picture用于响应式图片。
链接和嵌入标签 iframe定义内联框架嵌入另一个网页。 embed嵌入外部内容如插件或多媒体。 object定义嵌入外部资源的容器。 param定义 object 标签的参数。 applet嵌入Java小程序已不推荐使用。 embed用于嵌入外部内容。
脚本和程序控制标签 script用于嵌入或引用JavaScript代码。 noscript用于显示在禁用JavaScript时的内容。 template定义HTML模板通常用于JavaScript中。 slot用于Web组件的插槽。
元信息标签 meta定义文档的元数据。 base设置文档的基础URL。 link定义文档与外部资源的关系通常用于链接CSS样式表。
其他HTML5元素 progress表示任务的进度。 meter表示测量值如一个量度表的值。 mark表示高亮的文本。 bdi定义文本的双向隔离通常用于多语言页面。 bdo定义文本的双向重写。
嵌入式内容标签 canvas定义绘图区域通常与JavaScript结合使用。 svg定义可缩放矢量图形。 math嵌入数学表达式。
Web组件标签 template用于模板内容在浏览器中不会被渲染。 slotWeb组件插槽元素。
语义化标签 header表示文档或部分的头部区域。 footer表示文档或部分的底部区域。 article表示文档中的一篇独立的内容。 section表示文档的一个部分。 aside表示文档的侧边内容。 main表示文档的主要内容部分。 figure表示独立的内容如图片、视频、图表等。 figcaption为 figure 元素添加标题。 五、简单的html页面示例
这里相当于一共前端的登录框不过我把前后端交互改成输入账号密码后输出到页面上请看后面示例讲解。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta namedescription content登录页面示例title登录页面/titlestyle/* 页面基础样式 */body {font-family: Arial, sans-serif;background-color: #f4f4f9;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;}.login-container {background-color: white;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);padding: 40px;width: 300px;text-align: center;}
h2 {margin-bottom: 20px;}
label {display: block;margin-bottom: 8px;font-size: 14px;}
input[typetext], input[typepassword] {width: 100%;padding: 10px;margin-bottom: 15px;border: 1px solid #ccc;border-radius: 4px;font-size: 14px;}
button {width: 100%;padding: 10px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;}
button:hover {background-color: #45a049;}
.form-footer {text-align: center;margin-top: 10px;}
.form-footer a {text-decoration: none;color: #4CAF50;font-size: 14px;}
.output {margin-bottom: 20px;font-size: 14px;color: #333;}
.output span {display: block;margin-top: 5px;}/style
/head
bodydiv classlogin-containerh2登录/h2!-- 显示输入内容的区域 --div classoutput idoutput/divform idloginFormlabel forusername用户名/labelinput typetext idusername nameusername required placeholder请输入用户名
label forpassword密码/labelinput typepassword idpassword namepassword required placeholder请输入密码
button typesubmit登录/button/form
div classform-footerpa href#忘记密码?/a/p/div/div
script// 获取表单和输出区域const form document.getElementById(loginForm);const output document.getElementById(output);
// 表单提交事件form.addEventListener(submit, function(event) {event.preventDefault(); // 阻止表单提交避免刷新页面
// 获取用户名和密码的值const username document.getElementById(username).value;const password document.getElementById(password).value;
// 在上方输出用户输入的用户名和密码output.innerHTML spanstrong用户名:/strong ${username}/spanspanstrong密码:/strong ${password}/span;
// 清空输入框document.getElementById(username).value ;document.getElementById(password).value ;});/script
/body
/html
1. 效果 2. 示例代码讲解 2.1. head 作用head标签包含页面的元数据metadata如字符编码、视口设置、标题、描述等它们通常不直接显示在页面上。 子标签解释 meta charsetUTF-8定义了页面的字符编码为UTF-8保证页面能够正确显示中文字符。 meta nameviewport contentwidthdevice-width, initial-scale1.0使页面在移动设备上适配设置页面的宽度为设备的宽度并将初始缩放比例设为1.0。 meta namedescription content登录页面示例为页面添加一个描述通常用于SEO搜索引擎优化帮助搜索引擎理解页面内容。 title指定页面的标题通常会显示在浏览器的标签页上。 2.2. style 作用该标签用来定义页面的CSS样式控制页面的外观和布局。在上述代码中它用于设置页面的颜色、字体、间距、按钮样式等。 2.3. body 作用body标签包含页面的实际内容它是用户在浏览器中看到的部分。页面的所有可见内容如文本、图像、表单、按钮等都放在body标签内。 2.4. div classlogin-container 作用div标签是一个块级容器用来将页面元素分组。在这里它用来包裹整个登录界面的内容并应用样式类login-container来控制其布局和外观。 2.5. h2 作用h2标签定义一个二级标题通常用来表示页面中的副标题。在这里它显示了页面的标题“登录”。 2.6. form idloginForm 作用form标签用于定义一个表单用来收集用户输入的信息如用户名、密码。在该代码中它包含两个输入字段和一个提交按钮。表单的idloginForm用于JavaScript中获取该表单并处理提交事件。 2.7. label 作用label标签用来为表单控件如文本框、复选框、单选按钮等提供可点击的标签通常与输入控件配合使用便于用户操作和提高可访问性。在代码中label标签关联到用户名和密码输入框帮助用户理解每个输入框的用途。 2.8. input 作用input标签用于创建不同类型的用户输入控件。这里有两个input标签 typetext创建一个文本框用于输入用户名。 typepassword创建一个密码框用于输入密码密码字符会被隐藏。 2.9. button 作用button标签定义一个按钮。点击按钮时通常会触发表单提交或执行JavaScript函数。在代码中按钮的文本为“登录”用户点击后会触发表单提交的JavaScript代码。 2.10. a 作用a标签定义一个超链接可以将用户引导到另一个页面或执行其他动作。在这里a href#表示一个占位符链接用户点击时不会跳转只是作为一个示例或进一步的操作提示如“忘记密码”。 2.11. script 作用script标签用于在HTML页面中嵌入或引用JavaScript代码。它通常用来实现页面的动态行为比如处理表单提交、交互事件等。在代码中script标签内包含的JavaScript代码控制了表单的提交事件获取用户输入的用户名和密码并将其显示在页面上。 2.12. span 作用span标签是一个内联元素通常用于包装文本或其他元素以便应用样式或进行动态操作。在该代码中span用于在表单上方显示用户输入的用户名和密码。 3. 示例总结
这些标签结合起来构成了一个基础的登录页面框架。通过form收集用户输入的用户名和密码通过button提交表单script处理用户输入的显示与表单的提交行为。而样式和布局则通过style和CSS来控制确保页面的可用性和美观性。 六、输入和表单
前面也看到了input和form的运用这种结合可以让用户输入的数据与服务器产生交互而这种交互就是我们关注的地方。
1. input 标签
input 标签用于创建用户输入字段。它可以用来获取用户的各种输入数据如文本、密码、复选框、单选按钮等。input 是一个自闭合标签通常不需要结束标签。
1.1. 常见的类型
input 标签有许多不同的类型和属性常见的一些类型包括 typetext普通文本输入框 typepassword密码输入框输入的内容会被隐藏 typeradio单选按钮允许用户从一组选择中选择一个 typecheckbox复选框允许用户选择多个选项 typeemail电子邮件输入框浏览器会验证电子邮件格式 typenumber数字输入框用户只能输入数字 typefile文件选择框允许用户选择文件上传 typesubmit提交按钮用于提交表单 typebutton普通按钮可与JavaScript一起使用执行特定动作 typedate日期选择框 typerange范围选择器用于选择一个范围值
1.2. 常用属性 name指定输入字段的名称通常用于服务器处理表单数据时传递值。 value指定输入框的初始值或者按钮、单选框、复选框的显示文本。 placeholder为输入框提供提示文本显示在输入框内当用户开始输入时消失。 required使输入字段成为必填项表单提交时如果该字段为空浏览器会自动提示用户填写。 readonly使输入框变为只读用户无法修改内容。 disabled禁用输入框用户不能与之交互。 maxlength限制输入框中可输入的最大字符数。
#示例
htmlCopy Code!-- 文本输入框 --
input typetext nameusername placeholderEnter your username
!-- 密码输入框 --
input typepassword namepassword placeholderEnter your password
!-- 单选按钮 --
input typeradio namegender valuemale Male
input typeradio namegender valuefemale Female
!-- 复选框 --
input typecheckbox namenewsletter Subscribe to newsletter
!-- 提交按钮 --
input typesubmit valueSubmit 2. form 标签
form 标签用于创建一个表单用于将用户输入的数据发送到服务器进行处理。表单包含一个或多个 input 元素以及其他元素如 textarea、select、button 等以获取用户输入。
2.1. 属性 action指定表单提交数据的目标URL即服务器端接收数据的地址。 method 指定提交表单数据的方法常见的有 GET数据通过URL传递适用于不敏感数据的提交例如搜索框。 POST数据通过HTTP请求体传递适用于敏感数据例如登录或注册表单。 target 指定表单数据提交后的响应方式常见的取值有 _self在当前窗口中加载响应默认值。 _blank在新窗口中加载响应。 _parent在父框架中加载响应。 _top在整个浏览器窗口中加载响应。
2.2. 常用属性 action指定表单数据提交的目标URL。 method指定数据提交的方法GET或POST。 name为表单指定名称用于JavaScript访问或与服务器端交互。 enctype指定表单数据的编码类型常用于文件上传时。 常见的有 application/x-www-form-urlencoded表单的默认编码类型数据以键值对的方式编码在URL中。 multipart/form-data用于文件上传能够处理二进制数据。 application/json将数据以JSON格式提交。
#示例
htmlCopy Code!-- 创建一个表单 --
form action/submit-form methodPOSTlabel forusernameUsername:/labelinput typetext idusername nameusername requiredbr
label forpasswordPassword:/labelinput typepassword idpassword namepassword requiredbr
input typesubmit valueSubmit
/form HTML扫盲篇结语
通过本篇的学习我们深入了解了HTML在网页构建中的基础作用以及它如何定义网页的结构和内容。作为网络安全的一部分理解HTML不仅有助于开发高质量的网页还对保护和提升网站的安全性至关重要。因为许多网络安全漏洞例如XSS跨站脚本攻击和HTML注入往往都源自于不正确的HTML实现和不安全的网页代码。
网络安全与HTML的关系 HTML的正确使用安全的HTML代码可以防止诸如跨站脚本XSS、HTML注入等攻击。如果你没有正确地处理用户输入攻击者可能会通过注入恶意HTML代码导致安全漏洞。 防止XSS攻击确保所有用户输入的数据在呈现到网页上时都经过适当的过滤和转义可以有效防止恶意脚本的执行。了解如何使用HTML的属性如script标签和输入字段的安全性可以防止潜在的安全威胁。 数据保护在网页设计时需要注意HTML中如何处理敏感数据避免暴露不应公开的信息。例如通过正确使用HTTP头如Content-Security-Policy和SSL/TLS加密确保用户的个人信息和身份不被泄露。
进一步学习的方向 深入学习Web安全基础在掌握了HTML的基础后可以进一步学习Web安全的核心概念包括防止XSS、SQL注入、CSRF跨站请求伪造等常见攻击手法以及如何通过安全编码实践来防范这些威胁。 后端安全Web前端与后端的安全性是相辅相成的理解如何保护服务器端的代码、数据库以及API接口同样重要。通过学习和应用安全框架和技术如JWT认证、OAuth 2.0等可以提升Web应用的整体安全性。 安全工具与测试学习如何使用自动化的安全扫描工具如OWASP ZAP、Burp Suite等定期进行Web应用的漏洞扫描与渗透测试确保网站和应用保持最新的安全状态。
总结
HTML是构建现代Web应用的基础但它在网络安全中的角色也同样重要。从HTML标签的使用到输入验证、到数据加密每一环节都关乎网站的安全。掌握HTML并将其与安全最佳实践结合是确保网页不被攻击的关键一步。希望通过本篇的学习你不仅能提升HTML技能还能具备更强的Web安全意识为开发更加安全的网页奠定坚实基础。
