HTML学习以及网页搭建初实践
HTML学习以及网页搭建初实践
学XSS一大家子时发现前端不仔细了解一下学习很难进行下去啊，于是就想先简单学习一下html来做一个铺垫
HTML实例的基本结构
- 声明为 HTML5 文档
- 元素是 HTML 页面的根元素
- 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
元素描述了文档的标题 - 元素包含了可见的页面内容
- 元素定义一个大标题
- 元素定义一个段落
其实F12查一下源代码就能知道是大致怎么样个结构
什么是 HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如 和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
HTML 元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p><div>
内容划分元素，通过div与class的搭配轻松将页面划分为多个不同模块
<a>
锚元素，通过其的herf属性来引用其他网页/本地的文件
实例
<a href="https://www.mozilla.com"> Mozilla </a> //绝对地址引用 <a href="//example.com">相对于协议的 URL</a> <a href="/zh-CN/docs/Web/HTML">相对于源的 URL</a> <a href="./p">相对于路径的 URL</a> //相对地址的链接 <!-- <a> 元素链接到下面部分 --> <p><a href="#Section_further_down"> 跳转到下方标题 </a></p> <!-- 要链接到的标题 --> <h2 id="Section_further_down">更下面的部分</h2> //同页面链接当然，你也可以将
<a>插入在段落中达到引用的效果(待补全中。。。)
网页结构
一般分为head和body
<html>
<head>
<title>标题</title>
</head>
<body>
<h1>小标题</h1>
<p>正文</p>
</body>
</html>只有body部分会在网页中显示
HTML版本
从初期的网络诞生后，已经出现了许多HTML版本:
| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
<!DOCTYPE> 声明
声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
通用声明
HTML5
HTML 4.01
XHTML 1.0
查看完整网页声明类型 DOCTYPE 参考手册。
中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
HTML 实例
自己尝试了一下，大概这个效果。?
<html>
<head>
<meta charset="UTF-8">
<title>哼哼哼，你也要来下北泽和我一辈子红茶吗</title>
</head>
<body>
<h1> 什么，你的意思是说愿意和我一起看一个一个林擒吗</h1>
<p>哼哼哼，啊啊啊啊啊啊啊啊啊(指发自内心的高兴嚎叫</p>
</body>
</html>
<html> <head> <meta charset="UTF-8"> <title> 页面标题</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>更加完善的结构
*开始标签(无/)常被称为起始标签（opening tag）*，结束标签(有/)常称为闭合标签（closing tag）*
HTML 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。从1-6标题的大小逐步减小(和markdown的几级标题应该是一个道理)
- 实例
<h1>这是一个标题</h1>
<font size="6">这是6号字体文本</font>
<!--size和h1,h2这些一一对应-->
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
HTML 段落
HTML 段落是通过标签 <p> 来定义的。
- 实例
<p>这是一个段落。</p> <p>这是另外一个段落。</p>HTML 链接
HTML 链接是通过标签 <a> 来定义的。
HTML 链接（Anchor）是网页之间跳转的核心部分。
HTML 使用链接与网络上的另一个文档相连。
HTML中的链接是一种用于在不同网页之间导航的元素。
链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。
链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。
HTML 链接 通过标签创建，通常用于将用户从一个页面导航到另一个页面、从一个部分跳转到页面中的另一个部分、下载文件、打开电子邮件应用程序或执行 JavaScript 函数等。
- 实例
<a href="https://www.runoob.com">这是一个链接</a>**提示:**在 href 属性中指定链接的地址。
基本语法
<a href="URL">链接文本</a><a>标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。href属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。
以下实例演示来如何在 HTML 文档中创建链接：
- 实例
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="https://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>HTML 超链接（链接）
HTML使用标签 <a> 来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签 <a> 中使用了 href 属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
HTML 链接属性
href 属性描述了链接的目标。
href：定义链接目标。
这是超链接最重要的属性，用来指定链接的目的地，可以是另一个网页、文件、邮件、电话号码或 JavaScript。
- 实例
<a href="https://www.example.com">访问 Example</a>target：定义链接的打开方式。
_blank: 在新窗口或新标签页中打开链接。_self: 在当前窗口或标签页中打开链接（默认）。_parent: 在父框架中打开链接。//后续会了解到_top: 在整个窗口中打开链接，取消任何框架。//后续会了解到
- 实例
<a href="https://www.example.com" target="_blank" rel="noopener">新窗口打开 Example</a>rel：定义链接与目标页面的关系。
nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接。
noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题，尤其是使用 target=”_blank” 时。
noopener: 防止新的浏览上下文（页面）访问window.opener属性和open方法。noreferrer: 不发送referer header（即不告诉目标网站你从哪里来的）。noopener noreferrer: 同时使用noopener和noreferrer。例子:<a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>
- 实例
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">安全链接</a>download：提示浏览器下载链接目标而不是导航到该目标。
如果指定了文件名，浏览器会提示下载并保存为指定文件名。
例如：
- 实例
<a href="file.pdf" download="example.pdf">下载文件</a>title：定义链接的额外信息，当鼠标悬停在链接上时显示的工具提示。
- 实例
<a href="https://www.example.com" title="访问 Example 网站">访问 Example</a>id：用于链接锚点，通常在同一页面中跳转到某个特定位置。
- 实例
<**a** href=”#section1”>跳转到第1部分</**a**>
<**div** id=”section1”>这是第1部分</**div**>
hreflang: 指定链接的目标URL的语言
- 实例
<a href="https://www.example.com/es" hreflang="es">访问西班牙语网站</a>type: 指定链接资源的MIME类型
- 实例
<a href="style.css" type="text/css">样式表</a>class: 用于指定元素的类名（CSS中定义）
- 实例
<a href="https://www.example.com" class="external-link">外部链接</a>style: 直接在元素上定义CSS样式
- 实例
<a href="https://www.example.com" style="color: red;">红色链接</a>实例
<a href="https://www.runoob.com/">访问菜鸟教程</a>上面这行代码显示为：访问菜鸟教程
点击这个超链接会把用户带到菜鸟教程的首页。
提示: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
文本链接：最常见的链接类型是文本链接，它使用 元素将一段文本转化为可点击的链接，例如：
<a href="https://www.example.com">访问示例网站</a>图像链接：您还可以使用图像作为链接。在这种情况下， 元素包围着 元素。例如：
<a href="https://www.example.com">
<img src="example.jpg" alt="示例图片">
</a>锚点链接：除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 元素定义一个标记，并使用#符号引用该标记。例如：
<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：
<a href="document.pdf" download>下载文档</a>HTML 链接 - target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
- 实例
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
- 实例
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>在HTML文档中创建一个链接到”有用的提示部分(id=”tips”）”：
<a href="#tips">访问有用的提示部分</a>或者，从另一个页面创建一个链接到”有用的提示部分(id=”tips”）”：
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>空链接
以下是常见的几种设置空链接的方法，以及它们之间的区别：
| 方法 | 作用 | 是否会跳转 | 场景适用性 |
|---|---|---|---|
href="#" |
导航到页面顶部 | 是 | 占位符，捕获点击事件 |
href="javascript:void(0)" |
阻止默认行为，不刷新页面 | 否 | 阻止跳转，配合 JS 使用 |
href="" |
刷新当前页面 | 是 | 需要页面刷新时 |
href="about:blank" |
打开空白页面 | 是 | 新窗口打开空白页面 |
role="button" |
链接表现为按钮，无默认行为 | 否 | 配合 JS 实现按钮功能，无跳转 |
基本的注意事项 - 有用的提示
注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href=”https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”https://www.runoob.com/html/"。
HTML 图像
HTML 图像是通过标签 <img> 来定义的.
- 实例
<img src="images/logo.png" width="258" height="39" />注意： 图像的名称和尺寸是以属性的形式提供的。
HTML换行
HTML换行是通过<br> 来定义的
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
- 实例
<p>这个<br>段落<br>演示了分行的效果</p><br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
区分一下： <br>, <br/> 以及 <br />（带有空格）
<br> 是 HTML 写法。<br/>是 XHTML1.1 的写法, 也是 XML 写法。<br /> 是 XHTML 为兼容 HTML 的写法,也是 XML 写法。HTML5 因为兼容 XHTML，所以三种写法都可以使用。
早期发布的 HTML 规范当中，<br> 与 <img> 等元素是不用封闭自身的，但是这种元素造成了 HTML 规范的不严谨，于是在之后发布的 XHTML 语言中，参考了更为严谨的 XML 规范，在这些不用自身封闭的元素后加 / 来表示自行封闭，在逻辑上来讲等同于<br>....</br>（但是没有 </br> 这种写法），这样一来保证了较少的代码量，二来保证了规范的严谨。HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
[!TIP]
即使忘记使用结束标签，大部分浏览器也会正确地显示HTML，但是依赖这种做法(指不要当懒狗)，最好闭合一下标签，忘记使用结束标签会产生不可预料的结果或错误
tip：可以的话建议使用小写标签
HTML属性
属性是 HTML 元素提供的附加信息。
属性通常出现在 HTML 标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。
属性总是以 name=”value” 的形式写在标签内，name 是属性的名称，value 是属性的值。
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，**比如：name=”value”**。
属性实例
HTML 链接由 标签定义。链接的地址在 href 属性中指定：
实例
<a href="http://www.runoob.com">这是一个链接</a>HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
使用双引号：
<a href="https://www.runoob.com">Link</a>使用单引号：
<a href='https://www.runoob.com'>Link</a>属性值包含引号： Link
提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='John "ShotGun" Nelson'或者：
<a href="https://www.runoob.com?q='search'">Link</a>
HTML 提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
HTML 属性参考手册
查看完整的HTML属性列表: HTML 标签参考手册。
下面列出了适用于大多数 HTML 元素的属性：
| 属性名 | 适用元素 | 说明 |
|---|---|---|
id |
所有元素 | 为元素指定唯一的标识符。 |
class |
所有元素 | 为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。 |
style |
所有元素 | 直接在元素上应用 CSS 样式。 |
title |
所有元素 | 为元素提供额外的提示信息，通常在鼠标悬停时显示。 |
data-* |
所有元素 | 用于存储自定义数据，通常通过 JavaScript 访问。 |
href |
<a>, <link> |
指定链接的目标 URL。 |
src |
<img>, <script>, <iframe> |
指定外部资源（如图片、脚本、框架）的 URL。 |
alt |
<img> |
为图像提供替代文本，当图像无法显示时显示。 |
type |
<input>, <button> |
指定输入控件的类型（如 text, password, checkbox 等）。 |
value |
<input>, <button>, <option> |
指定元素的初始值。 |
disabled |
表单元素 | 禁用元素，使其不可交互。 |
checked |
<input type="checkbox">, <input type="radio"> |
指定复选框或单选按钮是否被选中。 |
placeholder |
<input>, <textarea> |
在输入框中显示提示文本。 |
target |
<a>, <form> |
指定链接或表单提交的目标窗口或框架（如 _blank 表示新标签页）。 |
readonly |
表单元素 | 使输入框只读。 |
required |
表单元素 | 指定输入字段为必填项。 |
autoplay |
<audio>, <video> |
自动播放媒体。 |
onclick |
所有元素 | 当用户点击元素时触发 JavaScript 事件。 |
onmouseover |
所有元素 | 当用户将鼠标悬停在元素上时触发 JavaScript 事件。 |
onchange |
表单元素 | 当元素的值发生变化时触发 JavaScript 事件。 |
全局属性
全局属性是所有 HTML 元素都可以使用的属性。
id：为元素指定唯一的标识符。(基于css的属性,纯粹使用< DIV >标签而不加任何CSS内容，其效果与用< p>< /p >是一样的。)
<div id="header">This is the header</div>class：为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
<p class="text highlight">This is a highlighted text.</p>style：用于直接在元素上应用 CSS 样式。
<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>title：为元素提供额外的提示信息，通常在鼠标悬停时显示。
<abbr title="HyperText Markup Language">HTML</abbr>**data-***：用于存储自定义数据，通常通过 JavaScript 访问。
<div data-user-id="12345">User Info</div>特定元素的属性
某些属性仅适用于特定的 HTML 元素。
**href**（用于 <a> 和 <link> 元素）：指定链接的目标 URL。
<a href="https://www.example.com">Visit Example</a>**src**（用于 <img>, <script>, <iframe> 等元素）：指定外部资源的 URL。
<img src="image.jpg" alt="An example image">**alt**（用于 <img> 元素）：为图像提供替代文本，当图像无法显示时显示。
<img src="image.jpg" alt="An example image">**type**（用于 <input> 和 <button> 元素）：指定输入控件的类型。
<input type="text" placeholder="Enter your name">**value**（用于 <input>, <button>, <option> 等元素）：指定元素的初始值。
<input type="text" value="Default Value">**disabled**（用于表单元素）：禁用元素，使其不可交互。
<input type="text" disabled>**checked**（用于 <input type="checkbox"> 和 <input type="radio">）：指定复选框或单选按钮是否被选中。
<input type="checkbox" checked>**placeholder**（用于 <input> 和 <textarea> 元素）：在输入框中显示提示文本。
<input type="text" placeholder="Enter your email">**target**（用于 <a> 和 <form> 元素）：指定链接或表单提交的目标窗口或框架。
<a href="https://www.example.com" target="_blank">Open in new tab</a>布尔属性
布尔属性是指不需要值的属性，它们的存在即表示 true，不存在则表示 false。
disabled：禁用元素。
<input type="text" disabled>readonly：使输入框只读。
<input type="text" readonly>required：指定输入字段为必填项。
<input type="text" required>**autoplay**（用于 <audio> 和 <video> 元素）：自动播放媒体。
<video src="video.mp4" autoplay></video>自定义属性
HTML5 引入了 data-* 属性，允许开发者自定义属性来存储额外的数据。
**data-***：用于存储自定义数据，通常通过 JavaScript 访问。
<div data-user-id="12345" data-role="admin">User Info</div>事件处理属性
HTML 元素可以通过事件处理属性来响应特定的事件，如点击、鼠标悬停等。
onclick：当用户点击元素时触发。
<button onclick="alert('Button clicked!')">Click Me</button>onmouseover：当用户将鼠标悬停在元素上时触发。
<div onmouseover="this.style.backgroundColor='yellow'">Hover over me</div>onchange：当元素的值发生变化时触发。
<input type="text" onchange="alert('Value changed!')">为网页加亿点点细节
水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释写法如下:
- 实例
注释: 开始括号之后（左边的括号）需要紧跟一个叹号 ! (英文标点符号)，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。
字体
HTML 文本格式化标签
| 标签 | 描述 |
|---|---|
| 定义粗体文本 | |
| (大号斜体) | 定义着重文字 |
| 定义斜体字 | |
| 定义小号字 | |
| (加粗) | 定义加重语气 |
| 定义下标字 | |
| 定义上标字 | |
| (下划线) | 定义插入字 |
| 定义删除字 |
HTML “计算机输出” 标签
| 标签 | 描述 |
|---|---|
|
定义计算机代码 |
| 定义键盘码 | |
| 定义计算机代码样本 | |
| 定义变量 | |
| 定义预格式文本 |
HTML 引文, 引用, 及标签定义
| 标签 | 描述 |
|---|---|
| 定义缩写 | |
| 定义地址 | |
| 定义文字方向 | |
| 定义长的引用 | |
| 定义短的引用语 | |
| 定义引用、引证 | |
| 定义一个定义项目。 |
HTML 头部
HTML base 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
- 实例
<head> <base href="http://www.runoob.com/images/" target="_blank"> </head>HTML link 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
可以在左侧显示logo等图片
- 实例
<head> <link rel="icon" href="图片url"><title>这是一个带图片的标签</title></head><head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>HTML style 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
- 实例
<head> <style type="text/css">
body {background-color:yellow;}
p {color:blue}
</style>
</head>HTML meta 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域
<meta>标签- 使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">定义网页作者:
<meta name="author" content="Runoob">每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">HTML script 元素
<script>标签用于加载脚本文件，如： JavaScript。
<script> 元素在以后的章节中会详细描述。总结:HTML head 元素
| 标签 | 描述 |
|---|---|
| 定义了文档的信息 | |
| 定义了文档的标题 | |
| 定义了页面链接标签的默认链接地址 | |
| 定义了一个文档和外部资源之间的关系 | |
| 定义了HTML文档中的元数据 | |