HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
-
空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
HTML 提示:使用小写标签
HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
-
常用的几种标签类型
-
结构性标签(Structural Tags):
<html>
:定义HTML文档的根元素。<head>
:定义文档的头部,包含了元数据。<body>
:定义文档的主体,包含了可见的内容。
-
标题标签(Heading Tags):
<h1>
到<h6>
:定义六级标题,<h1>
是最高级标题,<h6>
是最低级标题。
-
段落标签(Paragraph Tag):
<p>
:定义段落。
-
链接标签(Link Tags):
<a>
:定义超链接,用于跳转到其他页面或文件。
-
列表标签(List Tags):
- 无序列表
<ul>
和列表项<li>
:用于显示项目无特定顺序的列表。 - 有序列表
<ol>
和列表项<li>
:用于显示项目按顺序排列的列表。
- 无序列表
-
图像标签(Image Tag):
<img>
:用于在页面中嵌入图像。
-
表格标签(Table Tags):
<table>
:定义表格。<tr>
:定义表格中的行。<th>
:定义表头单元格。<td>
:定义表格数据单元格。
-
表单标签(Form Tags):
<form>
:定义表单。<input>
:定义输入字段。<button>
:定义按钮。<select>
、<option>
:定义下拉菜单。
-
HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name="value"。
属性总是在 HTML 元素的开始标签中规定。
-
属性为 HTML 元素提供附加信息。
-
HTML 样式
- style 属性用于改变 HTML 元素的样式。
-
HTML 的 style 属性
style 属性的作用:
提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。
-
关于如何调用
可以做以下测试
思考如何实现文字变色,以及文字在网页中的布局,大小 ,以及背景颜色
首先按照上一篇文章所示建立一个html文件
<!-- background-color 背景颜色设置为黑色 属于 Markdown注释:-->
<body style="background-color: black;">
<h1 style="font-family: monospace;color: aquamarine;font-size:45px;">This is a heading</h1>
<p style="font-family: verdana;color:brown;font-size: 20px;text-align: center;">This is a paragraph</p>
<!--font-family 文本样式
color 颜色
font-size 文字大小
text-align 文本位置 -->
</body>
结果如上
至于具体样式,根据使用情况的不同,可以上网查询自己想要的样式,推荐网站w3school 在线教程
HTML 文件路径
接下来讲HTML的路径
在前文博主关于web 第一章 初识HTML以及HTML四大案例 (保姆级教学)中的图片教学就有涉及这一点今天具体讲一下
路径 | 描述 |
---|---|
<img src="picture.jpg"> | picture.jpg 位于与当前网页相同的文件夹 |
<img src="images/picture.jpg"> | picture.jpg 位于当前文件夹的 images 文件夹中 |
<img src="/images/picture.jpg"> | picture.jpg 当前站点根目录的 images 文件夹中 |
<img src="../picture.jpg"> | picture.jpg 位于当前文件夹的上一级文件夹中 |
绝对文件路径
绝对文件路径是指向一个因特网文件的完整 URL
相对路径
相对路径指向了相对于当前页面的文件。
HTML 头部元素
HTML <head> 元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title> 元素
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够:
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
具体样例已经在前文中阐述,这里就不做过多讲述了(关于web 第一章 初识HTML以及HTML四大案例 (保姆级教学))
HTML <base> 元素
<base> 标签为页面上的所有链接规定默认地址或默认目标(target):
<!DOCTYPE html>
<html>
<head>
<base href="https://example.com/path/">
<title>示例页面</title>
</head>
<body>
<p><a href="page1.html">页面 1</a></p>
<p><a href="page2.html">页面 2</a></p>
</body>
</html>
两个页面的效果打开后如图所示 :
<base>
元素将基础 URL 设置为https://example.com/path/
。- 链接
<a href="page1.html">页面 1</a>
和<a href="page2.html">页面 2</a>
分别解析为https://example.com/path/page1.html
和https://example.com/path/page2.html
。
<base>
元素应该放置在 HTML 文档的 <head>
部分,并且每个文档只能有一个 <base>
元素。如果出现多个 <base>
元素,则只有第一个会生效。
需要注意的是,<base>
元素影响文档中所有的相对 URL,包括 CSS 文件引用、JavaScript 源文件 URL 和超链接 (<a>
元素)。
(备注:
Example Domain(示例域名)通常被用作文档和示例中的占位符或演示域名。它没有保留给任何特定的组织或个人,通常用于各种类型的文件中,如技术手册、教程和教育材料中,以展示概念。
使用 “Example Domain” 帮助作者提供清晰易懂的示例,而无需引用真实的域名,避免可能因访问或误解真实域名而引起的混乱或意外后果。
实际上,“Example Domain” 是一个虚构的域名,作为普遍认可的占位符,确保示例保持通用性,并避免潜在的商标或所有权问题。
)所以两个页面打开内容是相似的
HTML <link> 元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:
前文中已详细阐述就不再赘述 。
HTML <meta> 元素
元数据(metadata)是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="悸动445" content="这是 HTML 文档meta的示例描述。">
<title>示例页面</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
会有一个报错,仅供测试。
进入网页界面以后,F12查看网页信息
HTML <script> 元素
<script> 标签用于定义客户端脚本,比如 JavaScript。
后面我们再来详细解读
HTML 布局
使用 <div> 元素的 HTML 布局
注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。
什么是响应式 Web 设计?
- RWD 指的是响应式 Web 设计(Responsive Web Design)
- RWD 能够以可变尺寸传递网页
- RWD 对于平板和移动设备是必需的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Container Example</title>
<style>
.container {
width: 50%; /* 设置宽度 */
background-color: lightblue; /* 添加背景颜色 */
padding: 15px; /* 内边距 */
margin: 10px auto; /* 外边距,auto 属性会使 margin 居中 */
border: 2px solid #007bff; /* 边框 */
}
</style>
</head>
<body>
<div class="container">
<h1>这是一个标题</h1>
<p>以下是一些包含在 div 容器中的文本内容</p>
</div>
</body>
</html>
展示结果如上
HTML 代码约定
web 开发者常常不确定在 HTML 中使用的代码样式和语法。
在 2000 年至 2010 年之间,许多 web 开发者从 HTML 转换为 XHTML。
通过 XHTML,开发者不得不编写有效的“格式良好的”代码。
HTML5 在代码验证时会更宽松一点。
请使用正确的文档类型
请始终在文档的首行声明文档类型:
<!DOCTYPE html>
如果您一贯坚持小写标签,那么可以使用:
<!doctype html>
请使用小写元素名
HTML5 允许在元素名中使用混合大小写字母。
我们推荐使用小写元素名:
- 混合大小写名称并不好
- 开发者习惯使用小写名(比如在 XHTML 中)
- 小写更起来更纯净
- 小写更易书写
关闭所有 HTML 元素
在 HTML5 中,您不必关闭所有元素(例如 <p> 元素)。
看起来不好:
<section> <p>This is a paragraph. <p>This is a paragraph. </section>
看起来不错:
<section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section>
关闭空的 HTML 元素
在 HTML5 中,关闭空元素是可选的。
允许这样:
<meta charset="utf-8">
也允许这样:
<meta charset="utf-8" />
斜杠(/)在 XHTML 和 XML 中是必需的。
使用小写属性名
HTML5 允许大小写混合的属性名。
我们建议使用小写属性名:
- 混合属性名并不好
- 开发者习惯于使用小写属性名(比如在 XHTML 中)
- 小写属性名看情况更纯净
- 小写属性名更易书写
-
属性值加引号
HTML5 允许不加引号的属性值。
我们推荐属性值加引号:
- 如果属性值包含值,则必须使用引号
- 混合样式绝对不好
- 加引号的值更易阅读
这个属性值无效,因为值中包含空格:
<table class=table striped>
这样是有效的:
<table class="table striped">
必需的属性
请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
请始终定义图像尺寸。这样做会减少闪烁,因为浏览器会在图像加载之前为图像预留空间。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等号
等号两边的空格是合法的:
<link rel = "stylesheet" href = "styles.css">
但是精简空格更易阅读, But space-less is easier to read, and groups entities better together:
<link rel="stylesheet" href="styles.css">
避免长代码行
当使用 HTML 编辑器时,通过左右滚动来阅读 HTML 代码很不方便。
请尽量避免代码行超过 80 个字符。
空行和缩进
请勿毫无理由地增加空行。
为了提高可读性,请增加空行来分隔大型或逻辑代码块。
为了提高可读性,请增加两个空格的缩进。请勿使用 TAB。
请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行,也没有必要缩进每个元素。
HTML 框架
框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
使用框架的坏处:
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
-
框架标签(Frame)
Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中:
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
-
HTML Web Server
- 如果希望向世界发布您的网站,那么您必须把它存放在 web 服务器上。
<!DOCTYPE> 声明
Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。
HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。
到目前为止基础知识已经过完,不太重要的部分,选择性屏蔽了,有兴趣的同学可以上网查一下。
接下来最后一步做一个项目总结。html的项目。
使用样图:
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 项目总结案例</title>
<style>
.project {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
.project h2 {
color: #007bff;
}
.project img {
max-width: 100%;
height: auto;
display: block;
margin: 10px auto;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="project">
<h2>项目一:网页设计</h2>
<p>这是一个关于网页设计的项目总结。以下是设计的网页示意图:</p>
<img src="./img/task3_1.jpg" alt="网页设计示意图">
</div>
<div class="project">
<h2>项目二:移动应用开发</h2>
<p>这是一个移动应用开发项目的总结。以下是应用的截图:</p>
<img src="./img/csdn.png" alt="移动应用截图">
</div>
</body>
</html>
效果如上,建议代码自己理解清楚,方便后续的学习。 下一期开始涉及css的讲解。