松江新城网站建设,做网站app要注册哪类商标,比较好的网站开发项目,智慧旅游类网站开发商HTML基础语法
HTML#xff08;超文本标记语言#xff09; 是用于创建网页内容的 标记语言#xff0c;通过定义页面的 结构和内容 来告诉浏览器如何呈现网页。 超文本#xff08;Hypertext#xff09; 是一种通过 链接#xff08;Hyperlinks#xff09; 将不同文本、图像…HTML基础语法
HTML超文本标记语言 是用于创建网页内容的 标记语言通过定义页面的 结构和内容 来告诉浏览器如何呈现网页。 超文本Hypertext 是一种通过 链接Hyperlinks 将不同文本、图像、视频等内容关联起来的信息组织形式其核心特点是 非线性 和 可扩展性。 为什么需要掌握HTML
学习Web渗透需要掌握HTML因为HTML是网页内容的结构语言渗透测试的核心目标是发现并利用网站漏洞。通过HTML标签如form、input、a可以 分析页面逻辑快速定位漏洞入口如登录表单、上传功能 构造恶意请求直接篡改HTML参数如SQL注入、XSS攻击或绕过前端验证 绕过安全防护利用HTML结构识别WAF规则盲区或隐藏接口
html代码编辑方式
文本编辑器
HTML代码的编辑方式多种多样可以根据需求、场景和技术水平选择不同的工具或方法。 Visual Studio Code推荐功能强大且免费 Sublime Text轻量高效
在线编辑器 JSFiddle CodeSandbox
我建议从CodePen开始。它用户友好非常适合初学者。 让我们编写我们的第一个HTML代码这里有一个简单的例子
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title我的第一个网页/title/headbodyh1你好世界/h1p这是我的第一个HTML页面。/p/body/html
代码含义如下 !DOCTYPE html 告诉浏览器这是一个HTML5文档。 html 是HTML页面的根元素。 head 包含关于文档的元信息。 title 指定页面的标题显示在浏览器的标题栏中。 body 定义文档的正文其中包含可见内容。 h1 定义一个大标题。 p 定义一个段落。
在Codepen中查看代码效果 HTML元素
HTML使用“元素”来构建内容结构。以下是一些常见的HTML元素 让我们看看一些实际的例子
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title我的第一个网页/title
/headh1我最喜欢的动物/h1p以下是我最喜欢的三种动物/polli猫/lili狗/lili昆/li/olp了解更多关于a hrefhttps://www.baidu.com动物/a的信息。/p/html
这段代码创建了一个标题、一个段落、一个动物的有序列表和一个指向百度的链接以了解更多关于动物的信息。效果如下 网络浏览器就像是HTML的翻译。它们读取HTML代码并将其渲染成我们看到的视觉网页。不同的浏览器可能会稍微不同地渲染相同的HTML这就是为什么要在多个浏览器上测试你 HTML标签、属性和元素
HTML由三个关键组件组成 标签这些是HTML的构建块。它们总是被包含在尖括号中比如p代表段落。 属性这些提供了关于元素的额外信息。它们总是在开始标签中指定。 元素一个元素是从开始标签到结束标签的所有内容
如上述代码中提到的例子
a hrefhttps://www.baidu.com title访问百度动物/a
在这个例子中 a是标签代表超链接 href和title是属性 整行是一个元素
基本HTML结构
下面是一个代码片段展示你可能在这些编辑器之一中设置的基本HTML结构
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我惊人的网站/titlelink relstylesheet hrefstyles.css
/headbodyheaderh1欢迎来到我惊人的网站/h1navullia href#home首页/a/lilia href#about关于/a/lilia href#contact联系方式/a/li/ul/nav/headermain section idhomeh2首页/h2p欢迎来到我的网站随意探索。/p/section!-- 更多部分将在这里 --/mainfooterpcopy; 2023 我惊人的网站。保留所有权利。/p/footerscript srcscript.js/script
/body/html
这段代码为网站设置了一个基本结构包括页头、导航菜单、主要内容区域和页脚。 nav 是 HTML5 引入的语义化标签用于定义页面的导航部分。 HTML基础标签
现在让我们探索一些最常用的HTML标签。我会为每个标签提供示例和解释。
1. 标题
HTML提供了六级标题从 h1到 h6。
h1这是一个主标题/h1
h2这是一个次要标题/h2
h3这是一个三级标题/h3
这些标签不仅使文本变大还帮助搜索引擎理解你的内容结构。把它们想象成书中的章节标题 2. 段落
标签用于定义段落。
p这是一个段落。它可以包含多个句子甚至在你HTML代码中跨越多行但在浏览器中会显示为单一的文本块。/p
小贴士总是使用 p 标签来定义段落而不仅仅是用于间距。这有助于提高可访问性和SEO效果 3. 链接
链接是使用 a锚点标签创建的。
a hrefhttps://www.example.com点击这里访问Example.com/a
href 属性指定了链接所指向的页面URL链接就像是网站中的门——它们使用户可以从一个页面导航到另一个页面
效果 4. 图像
图像是通过 img 标签插入的。
img srccat.jpg alt一只可爱的小猫坐在窗台上
src 属性指定了图像文件的路径而 alt 提供了屏幕阅读器使用或图像加载失败时的替代文本。总是包含描述性的替代文本——这就像是给你们的图像一个声音 5. 列表
HTML支持有序编号列表和无序列表项目符号。
无序列表
ul
li苹果/li
li香蕉/li
li樱桃/li
/ul 有序列表
ol
li起床/li
li刷牙/li
li吃早餐/li
/ol
列表非常适合组织信息。 6. 强调和重要
使用 em 来强调通常显示为斜体使用 strong 来表示重要通常显示为粗体。
p我em真的/em喜欢HTML。这对于网页开发是strong至关重要/strong的/p 7. 换行和水平线
有时你需要添加一个换行而不开始一个新的段落。这时 br 就派上用场了
p玫瑰是红的br紫罗兰是蓝的brHTML很棒br你也是/p 要添加一条水平线使用 hr 标签
p玫瑰是红的br紫罗兰是蓝的hrbrHTML很棒br你也是/p
把 br 想象成键盘上的软回车而 hr 就像是在纸上画一条线来分隔部分。 强制性结束标签
大多数HTML元素都需要一个开始标签和一个结束标签。然而有些元素是自闭合的。这些元素通常不包含任何内容。下面是一个表格列出了一些常见元素以及它们是否需要结束标签 HTML 属性
HTML 属性是用于调整 HTML 元素行为或显示的标记语言的一部分。它总是包含在元素的开始标签中通常由一个名称和一个值组成。让我们看看一些实际的例子以更好地理解属性是如何工作的
1. href 属性
a hrefhttps://www.example.com访问 Example.com/a
在这个例子中href 是属性。它告诉浏览器点击链接时应该去哪里。
2. src 属性
img srccute-puppy.jpg alt一只可爱的狗狗
在这里有两个属性 src指定图像文件的路径。 alt如果图像无法显示提供替代文本。
3. style 属性
p stylecolor: blue; font-size: 16px;这是一个蓝色的段落。/p style 属性允许我们直接向元素添加 CSS。
HTML 全局属性
全局属性可以用于任何 HTML 元素。让我们看看一些最常见的内容
属性描述示例class为元素指定一个或多个类名div classheaderid为元素指定一个唯一的 IDp idintrostyle为元素指定一个内联 CSS 样式p stylecolor:blue;title为元素指定额外信息abbr title世界卫生组织WHO/abbr
此时有以下例子
a hrefhttps://www.example.com target_blank title访问 Example.com点击我/a
在这个例子中我们使用了三个属性 href指定链接去的页面的 URL。 target指定在哪里打开链接的文档。 title提供关于链接的额外信息。
通用属性
通用属性是可以用于大多数但不是全部HTML 元素的属性。它们不像全局属性那样通用但仍然非常灵活。以下是一些例子
属性描述示例onclick指定当元素被点击时运行的脚本button onclickalert(你好)点击我/buttontabindex指定元素的键盘导航顺序input typetext tabindex1accesskey指定激活/聚焦元素的快捷键a href/ accesskeyh首页/a HTML - 块级和内联元素
块级元素
想象我们正在用积木建造一座房子其中一些积木很大独自占据了一整行。这些就像是HTML中的块级元素。它们从新的一行开始并占据全部可用的宽度。
常见的块级元素
div我是一个块级元素/div
p我也是一个块级元素/p
h1我也是一个标题同时也是块级元素/h1
运行这段代码时每个元素都会出现在新的一行上。 下面是一些常见块级元素的表格 内联元素
现在让我们想象一下那些可以并排放在同一行上的积木部件。这些就像是HTML中的内联元素。它们只占据必要的宽度并且不会从新的一行开始。
这里有一个例子
span我是一个内联元素/span
a href#我是一个链接同时也是内联的/a
strong我是加粗的也是内联的/strong
这些元素都会出现在同一行上如果有足够的空间。
下面是一些常见内联元素的表格 使用 span 标签分组
span 标签就像是一个小而透明的容器你可以用来分组内联元素甚至是在块级元素内的文本部分。
这里有一个例子
p
我喜欢 span stylecolor: blue;蓝色/span 和
span stylecolor: green;绿色/span 颜色。
/p 在这个例子中我们使用了 span 来将不同的颜色应用到段落中的特定单词。
记住div 是用来分组块级元素或创建块级分组的而 span 是用来分组内联元素或文本部分的。
Iframe通往其他世界的窗口
Iframe全称“inline frame”是一个HTML元素允许你在当前HTML文档中嵌入另一个HTML文档。它就像在网页上创建了一个小窗口展示了互联网上其他地方的内容。
语法
Iframe的基本语法出奇地简单
iframe srcURL/iframe
在这里src是一个属性用于指定你想嵌入的页面的URL。
iframes的示例
让我们通过一些实际示例来更好地理解iframes。
1. 基础Iframe
iframe srchttp://www.bilibili.com height1000 width800/iframe
这段代码将嵌入url的内容到你的网页中。 我们设置了一个宽为800高为1000显示文档为b站也可以选择本地html文档的内联框架。
如果我们把链接换成www.baidu.com, 就会受到策略限制,无法正常显示: 这是因为百度使用了 X-Frame-Options 响应头来限制其在 iframe 中的嵌套。X-Frame-Options 是一种安全策略可以由网站的服务器设置用于控制页面是否允许在 iframe 中嵌套。当网站设置了 X-Frame-Options 为 DENY 或 SAMEORIGIN浏览器将不允许将该页面在 iframe 中加载以防止点击劫持等安全问题。
除此之外iframe的使用有其他需要注意的地方可以参考如下文章 https://juejin.cn/post/7261808673035075643 表单交互式网页的门户
HTML表单的功能
想象你在一个咖啡店里你想点你最喜欢的拿铁。你需要告诉咖啡师你想要什么对吧HTML表单就像是这种对话的数字版本。它们允许用户输入信息并将其发送到网页服务器进行处理。
表单是网页上用户交互的支柱。它们用于 收集用户数据如订阅新闻通讯 登录网站 搜索信息 进行在线购买 提交反馈或评论
没有表单网页将是一个相当无聊的单向信息通道。表单使网页变得交互和动态
创建表单
让我们创建一个基本的HTML表单
form action/submit-form methodpost
label forname姓名/label
input typetext idname namename requiredlabel foremail电子邮件/label
input typeemail idemail nameemail requiredinput typesubmit value提交
/form 让我们分解一下 form 标签是我们所有表单元素的容器。 action/submit-form 告诉浏览器在表单提交时将数据发送到哪里。 methodpost 指定如何发送数据在这个例子中数据以HTTP POST请求的形式发送。 label 标签为我们的输入字段提供描述。 input 标签创建实际的输入字段。 input 中的 type 属性指定输入的类型文本、电子邮件等。 required 属性使字段成为必填项。 最后一个 input 的 typesubmit 创建了一个提交按钮。
一个简单的搜索表单
form action/search methodget
input typetext namequery placeholder搜索...
input typesubmit value搜索
/form
这个表单创建了一个简单的搜索框和一个提交按钮。当用户输入查询并点击“搜索”时它会发送一个GET请求到“/search”并将查询作为参数。 一个联系表单
form action/search methodget
input typetext namequery placeholder搜索...
input typesubmit value搜索
/form
这个表单包括一个文本区域用于撰写较长的消息非常适合联系页面 HTML表单元素
表单不仅仅只是文本输入。有一整套工具箱中的元素可以用来创建丰富、交互式的表单。让我们探索一些 每个元素都有自己独特的属性和用例。随着你在网页开发旅程中的进步你将发现自己会在创造性的组合中使用这些元素来构建复杂且用户友好的表单。
HTML表单属性
属性就像是我们给表单元素的特殊指令。它们帮助控制表单的行为以及它与用户的交互。以下是一些重要的属性 当正确使用时这些属性可以非常强大。例如在包含敏感信息的表单上设置 autocompleteoff 可以通过防止浏览器存储输入数据来增强安全性。
HTML表单示例代码
现在让我们将所有内容放在一起展示一个比较复杂的注册表单示例
form action/register methodpost
fieldset
legend个人信息/legendlabel forfullname全名/label
input typetext idfullname namefullname requiredlabel foremail电子邮件/label
input typeemail idemail nameemail requiredlabel forbirthdate出生日期/label
input typedate idbirthdate namebirthdatelabel forgender性别/label
select idgender namegender
option value选择.../option
option valuemale男性/option
option valuefemale女性/option
option valueother其他/option
/select
/fieldsetfieldset
legend账户详情/legendlabel forusername用户名/label
input typetext idusername nameusername requiredlabel forpassword密码/label
input typepassword idpassword namepassword requiredlabel forconfirmpassword确认密码/label
input typepassword idconfirmpassword nameconfirmpassword required
/fieldsetfieldset
legend偏好设置/legendlabel
input typecheckbox namenewsletter valueyes 订阅新闻通讯
/labelp喜欢的颜色/p
label
input typeradio namecolor valuered 红色
/label
label
input typeradio namecolor valueblue 蓝色
/label
label
input typeradio namecolor valuegreen 绿色
/label
/fieldsetinput typesubmit value注册
/form
这个表单展示了我们讨论的各种表单元素和属性的使用。它被组织成三个字段集个人信息、账户详情和偏好设置。每个字段集将相关的输入分组使表单更加有序且易于理解。 HTML表单是如何工作的
现在我们已经创建了我们的表单当我点击那个提交按钮时会发生如下过程 用户输入用户填写表单字段中的信息。 验证如果我们设置了客户端验证使用HTML5属性如 required 或JavaScript浏览器会在继续之前检查输入是否有效。 提交当用户点击提交按钮时浏览器收集所有表单数据。 请求浏览器创建一个HTTP请求GET或POST取决于 method 属性并将其发送到 action 属性指定的URL。 服务器处理服务器接收到请求并处理数据这部分涉及到服务器端编程超出了本HTML教程的范围。 响应服务器将响应发送回浏览器这可能是新页面、重定向或成功/错误消息。 浏览器行为浏览器根据响应采取行动通常是通过加载新页面或更新当前页面。
