HTML 基本语法
学习网站，以下学习内容绝大部分均来自该网站
什么是HTML
HTML 是用于创建网页的标准标记语言，可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
- HTML 指的是超文本标记语言 Hyper Text Markup Language
- HTML 不是一种编程语言，而是一种标记语言。
- 标记语言是一套标记标签(markup tag)，由尖括号包围的关键词，例如
<html> - HTML 使用标记标签来描述网页
- HTML 文档包含 HTML 标签以及文本内容
html5 对大小写不敏感，但推荐使用小写，为了向后兼容，因为新版本的 (X)HTML 要求使用小写属性。
HTML 元素
- HTML 元素通常以开始(起始)标签(opening tag)起始，以结束(闭合)标签(closing tag)终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些HTML 元素具有空内容
- 空元素在开始标签中进行关闭 例如
<br /> - 大多数 HTML 元素可拥有属性
HTML 属性
-
属性是 HTML 元素提供的附加信息。
-
属性以名称/值对的形式出现，比如：name = "value"。
-
属性总是在HTML元素的开始标签中规定
<h1 align="center">This is heading 1</h1>
!DOCTYPE 声明
<!DOCTYPE>声明不是一个HTML标签- 位于文档的最前面位置，处于
<html>标签之前 - 用来声明 HTML 版本，帮助浏览器正确显示网页内容
- HTML５版本声明是
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
HTML 头部元素
<head> 元素是所有头部元素的容器。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
<title>元素 定义文档的标题-
定义浏览器工具栏中的标题
-
提供页面被添加到收藏夹时显示的标题
-
显示在搜索引擎结果中的页面标题
-
<head>
<!--在标题左侧显示logo图片-->
<link rel="shortcut icon" href="">
<title>Title of the document</title>
</head>
<base>元素
为页面上的所有链接规定默认地址或默认目标(target)
<head>
<base href="https://www.runoob.com/images/" target="_blank" />
</head>
<link>定义文档与外部资源之间的关系，最常用于连接样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<style>定义文档的样式信息
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<meta>元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<head>
<!--定义文档的字符编码-->
<meta charset="utf-8" />
<title>菜鸟教程(runoob.com)</title>
<!--定义web页面描述-->
<meta name="description" content="免费在线教程" />
<!--定义文档关键词，用于搜索引擎-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<!--定义页面作者-->
<meta name="author" content="runoob" />
<!--每30秒刷新页面-->
<meta http-equiv="refresh" content="30" />
</head>
关于meta的更多用法可自行探索。
<script>用于加载脚本文件，如JavaScript。
HTML 标题 <h1></h1>
- 标题(Heading) 是通过
<h1> - <h6>标签进行定义，分别表示一到六级标题 - 搜索引擎使用标题为网页的结构和内容编制索引。
- 浏览器会自动地在标题的前后添加空行。
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
HTML 段落 <p>
浏览器会自动地在段落的前后添加空行。
<p>This is a paragraph</p>
注：当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。而且段落的行数是依赖于浏览器窗口大小的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
</body>
</html>
HTML 换行 <br />
<p>这个<br>段落<br>演示了分行的效果</p>
HTML 水平线<hr>
<hr /> 标签在HTML 页面中创建水平线
hr 元素可用于分割内容
<p>这是段落</p>
<hr />
<p>这是段落</p>
HTML 注释
注释标签 <!-- 与 --> 用于在 HTML 插入注释。
<!-- This is a comment -->
浏览器会忽略注释，不会显示它们
HTML 文本格式化标签
| 标签 | 描述 |
|---|---|
<b> |
定义粗斜字体 |
<big> |
定义大号字体 |
<em> |
定义着重字体(斜体) |
<i> |
定义斜体字 |
<samll> |
定义小号字 |
<strong> |
定义加重语气(粗体) |
<sub> |
定义下标字 |
<sup> |
定义上标字 |
<ins> |
定义插入字 |
<del> |
定义删除字 |
HTML 引用
<q>定义短的引用
<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
<blockquote>定义被引用的节
<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
<cite>定义著作的标题
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<address>定义文档作者或拥有者的联系信息
<address>
Written by Donald Duck.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<abbr>定义缩写或字母缩略语
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
<dfn>定义项目或缩写的定义
<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>
HTML 计算机代码元素
<code> 定义计算机文本，但不保留多余的空格和折行，如需解决该问题可使用<pre>
<pre> 定义预格式化文本
<p>Coding Example:</p>
<code>
<pre>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</pre>
</code>
<var> 定义数学变量
<p>Einstein wrote:</p>
<p><var>E = m c<sup>2</sup></var></p>
HTML 链接
<a> 标签定义超链接，用于从一张页面链接到另一个页面
<a href="url">链接文本</a>
- "链接文本"* 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
- 使用 target 属性定义被链接文档在何处显示
<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename (自定义) | 在指定的框架中打开被链接文档。 |
关于target 自定义可以看下w3school的这个例子在框架中打开窗口
- 电子邮件链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>
<p>
<b>注意:</b> 单词之间的空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p>
</body>
</html>
- 书签实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
<a href="#C4">查看章节 4</a>
</p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 6</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 7</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 8</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 9</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 10</h2>
<p>这边显示该章节的内容……</p>
</body>
</html>
HTML 样式
style 属性用于改变HTML 元素的样式
<html>
<body style="background-color:PowderBlue">
<h1 style="text-align:center">Look! Styles and colors</h1>
<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
This text is in Times and green</p>
<p style="font-size:30px">This text is 30 pixels high</p>
</body>
</html>
HTML CSS
CSS (Cascading Style Sheets)用于渲染HTML元素标签的样式。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化
-
外部样式表
使用外部样式表，可以通过更改一个文件来改变整个站点的外观
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> -
内部样式表
当单个文件需要特别样式时，可以使用内部样式表。在
<head>部分通过<style>标签定义内部样式表<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> -
内联样式
当特殊的样式需要应用到个别元素时，使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
更多了解可学习CSS
HTML 图像
<img> 是空标签
<img src="url" />
- 替换文本属性
<img src="url" alt="在浏览器无法载入图像时，将显示此文本" />
- height 和 width 属性可以改变图像的大小
<img src="url" width="50" height="50" />
除了<img>还有<map>和<area>搭配使用分别是定义图像地图和图像地图中的可点击区域，例创建图像映射。
HTML 表格
<table>定义表格<caption>定义标题<tr>定义行<th>定义表头<td>定义单元格，可以包含文本、图片、列表、段落、表单、水平线、表格等等- border 边框属性
- colspan 单元格跨列属性
- rowspan 单元格跨行属性
- cellpadding 属性创建单元格内容与边框之间的空白
- cellspacing 属性增加单元格之间的距离
- align 属性排列单元格内容
- frame 属性控制围绕表格的边框
<table border="1" cellpadding="10">
<caption>标题</caption>
<tr>
<th align="left">姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td align="left">Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
HTML 列表
- 无序列表
- type 属性控制项目符号类型：disc, circle, square
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Milk</li>
</ul>
- 有序列表
- type 属性控制项目符号类型：A, a, I, i
- start 属性定义从第几个数据排列
<ol type="A">
<li>Coffee</li>
<li>Milk</li>
</ol>
- 嵌套列表
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
- 自定义列表
<dl> <!--定义列表-->
<dt>Coffee</dt><!--定义列表项目-->
<dd>- black hot drink</dd><!--定义列表项目的描述-->
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
从英文出发记忆：
ul是unordered lists的缩写 (无序列表)
li是list item的缩写 （列表项目）
ol是ordered lists的缩写（有序列表）
dl是definition lists的英文缩写 (自定义列表)
dt是definition term的缩写 (自定义列表组)
dd是definition description的缩写（自定义列表描述）
HTML 分组标签
HTML 可以通过 <div> 和 <span>将元素组合起来。
-
<div>-
块级元素 (block-level)
-
用于组合其他 HTML 元素的容器。
-
属于块级元素，默认情况下，浏览器通常会在
<div>元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。 -
与 CSS 一同使用，
<div>元素可用于对大的内容块设置样式属性。 -
用于文档布局。
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>
-
<span>-
内联元素(inline)
-
用于对文档中的行内元素进行组合。
-
供了一种将文本的一部分或者文档的一部分独立出来的方式。
-
被
<span>元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。
-
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
HTML 表单
HTML 表单用于收集不同类型的用户输入。
<form> 元素定义HTML表单
表单是一个包含表单元素的区域。
表单属性
-
action 属性定义在提交表单时执行的动作
-
method 属性规定在提交表单时所用的HTTP方法（GET或POST）
-
target 等
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> . form elements . </form> -
name 属性 如果要正确地被提交，每个输入字段必须设置一个name属性
<form action="action_page.php"> First name:<br> <input type="text" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>上面的例子只会提交last name 输入字段
表单元素
input 输入域
-
<input>元素能根据不同的 type 属性变化形态输入类型：
-
<input type="text">定义单行文本输入 -
<input type="password">定义密码字段 -
<input type="submit">定义提交表单数据至表单处理程序的按钮 -
<input type="radio">定义单选按钮<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form> -
<input type="checkbox">定义复选框<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> -
<input type="button">定义按钮<input type="button" onclick="alert('Hello World!')" value="Click Me!"> -
HTML５新增输入类型
<input type="number">能对数字做出限制，例如
<form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> </form>-
<input type="date">日期的输入字段<form> Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> </form> -
<input type="color">颜色的输入字段 -
<input type="range">一定范围内的值的输入字段，可以用min、max、step、value属性来规定。 -
<input type="month">允许用户选择月份和年份 -
<input type="week">允许用户选择周和年 -
<input type="time">选择时间（无时区） -
<input type="datetime">选择日期和时间（有时区） -
<input type="email">电子邮件的输入字段 -
<input type="search">用于搜索字段 -
<input type="url">url 地址的输入字段
-
-
Input属性：
-
value 属性规定输入字段的初始值
-
readonly 属性规定输入字段为只读（readonly 属性不需要值。它等同于 readonly="readonly"）
-
disabled 属性规定输入字段是禁用的（被禁用的元素不会被提交，disabled 属性不需要值。它等同于 disabled="disabled"）
-
size 属性规定输入字段的尺寸
-
maxlength 属性规定输入字段允许的最大长度
-
height 和 width 属性仅用于
<input type="image">, 规定高和宽
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">- pattern 属性规定用于检查
<input>元素值的正则表达式
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">- placeholder 属性规定用以描述输入字段预期值的提示，该提示会在用户输入值之前显示在输入字段中
<input type="text" name="fname" placeholder="First name">-
step 属性规定合法数字间隔，示例：如果 step="3"，则合法数字应该是 -3、0、3、6、等等。
-
required 属性规定提交表单前必须填写输入字段
Username: <input type="text" name="usrname" required>- multiple 属性允许用户输入一个以上的值
Select images: <input type="file" name="img" multiple> -
select 下拉列表
<option>定义下拉列表中的选项
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
列表通常会把首个选项显示为被选选项
可以通过添加selected 属性定义被选选项
<option value="fiat" selected>Fiat</option>
textarea 文本域
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
button 按钮
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
在<button>元素内部，您可以放置内容，比如文本或图像。这是该元素与使用<input>元素创建的按钮之间的不同之处。
fieldset 组合表单元素
<legend> 元素为 <fieldset> 元素定义标题
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>
HTML５表单元素
-
<datalist>元素为<input>元素规定预定义选项列表，<input>元素的 list 属性必须引用<datalist>元素的id属性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
<form action="action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> -
<output>作为计算结果输出显示(比如执行脚本的输出)
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<iframe src="demo_iframe.htm" name="iframe_a" frameborder="0" width="500" height="200"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>
</body>
</html>
frameborder 属性用于定义 iframe 表示是否显示边框，设置属性值为 "0" 移除 iframe 的边框。
HTML 脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
-
<script>标签用于定义客户端脚本，比如 JavaScript。<script>元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。 -
<noscript>标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示
本文来自博客园，作者：hzyuan，转载请注明原文链接：https://www.cnblogs.com/hzyuan/p/13737088.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）