01-标签语法标签结构
HTML(Hypertext Markup Language)是网页的基础语言之一,它通过使用标签(tag)来描述网页的结构和内容。标签是由尖括号包围的关键词,通常成对出现,其中包括一个开始标签和一个结束标签。开始标签包含元素的名称,而结束标签在元素名称之前加上斜杠。
<!DOCTYPE html>
<html>
<head><title>标题</title>
</head>
<body><h1>这是一个标题</h1><p>这是一个段落。</p>
</body>
</html>
在上面的例子中,<!DOCTYPE html>
声明了文档类型,告诉浏览器正在使用的是 HTML5 标准。<html>
标签包含了整个 HTML 文档的内容,<head>
标签中包含了文档的头部信息,如标题等。<title>
标签定义了浏览器工具栏中的标题,而 <body>
标签包含了可见的页面内容。<h1>
标签定义了一个最高级别的标题,而 <p>
标签定义了一个段落。
尝试一下>>>
02-HTML骨架
HTML骨架指的是网页的基本结构和布局。一个简单的HTML骨架包括了DOCTYPE声明、html标签、head标签和body标签。在这个基本的结构上,我们可以添加不同的元素来构建网页的内容和样式。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 这里是网页的内容 -->
</body>
</html>
上面的例子中,<!DOCTYPE html>
声明了HTML文档的类型为HTML5,<html>
标签包裹了整个HTML文档,<head>
标签中包含了文档的头部信息,比如编码、视口设置和标题等,<body>
标签中包含了可见的页面内容。
提示
VS Code 可以快速生成骨架:在 HTML 文件(.html)中,!(英文)配合 Enter / Tab 键
03-标签的关系
在HTML中,标签之间可以有不同的关系,包括嵌套关系和并列关系。嵌套关系指的是一个标签包含在另一个标签内部,形成层级结构。而并列关系指的是同级别的标签在文档中并排出现。
<div> <!-- 父级标签 --><p>这是一个段落。</p> <!-- 子级标签 --><div>这是一段文字。</div> <!-- 兄弟标签 -->
</div>
在上面的例子中,<div>
标签是父级标签,包含了一个<p>
标签作为子级标签。这种关系可以帮助我们更好地组织和布局页面。
04-注释
在HTML中,注释可以帮助开发者在代码中添加说明性文字,但这些文字不会被浏览器渲染出来,只有在查看源代码时才会看到。注释使用<!-- -->
来包裹。
<!-- 这是一个注释,用于解释以下代码的作用 -->
<p>这是一个段落。</p>
上面的例子中,<p>
标签后面的注释不会在浏览器中显示,但可以帮助其他开发者理解这段代码的作用。
05-标题标签
标题标签用于定义网页中的标题文本,它们有多个级别,从<h1>
到<h6>
,表示重要性逐渐降低。
<h1>这是最重要的标题</h1>
<h2>这是次要的标题</h2>
<h3>这是又次要的标题</h3>
在网页中,标题标签不仅可以用于显示标题,还可以用于组织页面结构,帮助用户更好地理解页面内容的层次结构。
06-段落标签
段落标签 <p>
用于定义文本段落,通常用于显示正文内容。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
在HTML中,段落标签可以帮助我们更好地组织和布局文本内容,使页面看起来更加清晰和有序。
07-换行和水平线
在HTML中,可以使用 <br>
标签进行换行,使用 <hr>
标签插入水平线。
<p>这是第一行。<br>这是第二行。</p>
<hr>
<p>这是下一个段落。</p>
使用 <br>
标签可以在段落中强制换行,而 <hr>
标签可以在文档中插入一条水平线,用于分隔内容。
08-文本格式化标签
HTML提供了一些标签用于对文本进行格式化,其中包括<strong>
、<em>
、<ins>
和<del>
标签。
<p><strong>加粗文本</strong></p>
<p><em>斜体文本</em></p>
<p><ins>插入文本</ins></p>
<p><del>删除文本</del></p>
在上面的例子中,<strong>
标签用于表示强调的重要文本,通常会显示为粗体字,<em>
标签用于表示强调的文本,通常会显示为斜体字,<ins>
标签用于表示被插入的文本,浏览器通常会对其进行下划线标记,<del>
标签用于表示被删除的文本,浏览器通常会对其进行删除线标记。
09-超链接标签
超链接标签 <a>
用于创建指向其他网页、文件或位置的链接。
<a href="https://www.example.com">这是一个链接</a><!-- 跳转到本地文件:相对路径查找 -->
<!-- target="_blank" 新窗口跳转页面 -->
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a><!-- 开发初期,不知道超链接的跳转地址,href属性值写#,表示空链接,不会跳转 -->
<a href="#">空链接</a>
在上面的例子中,<a>
标签中的 href
属性指定了链接的目标地址。用户点击这个链接时,浏览器会跳转到指定的网页。
超链接默认是在当前窗口跳转页面,添加 target=“_blank” 实现新窗口打开页面。
拓展:开发初期,不确定跳转地址,则 href 属性值写为 #,表示空链接,页面不会跳转,在当前页面刷新一次。
10-音频
HTML5引入了<audio>
标签,用于在网页中嵌入音频内容。
<audio controls autoplay loop><source src="audio.mp3" type="audio/mp3">
</audio>
在上面的例子中,<audio>
标签用于定义音频,controls
属性表示显示音频控制面板,loop
表示循环播放,autoplay
表示自动播放,<source>
标签用于指定音频文件的来源和类型。
11-视频
HTML5引入了<video>
标签,用于在网页中嵌入视频内容。
<video width="320" height="240" controls muted><source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.
</video>
在上面的例子中,<video>
标签用于定义视频,width
和 height
属性定义了视频的宽度和高度,controls
属性添加了视频播放器的控件,muted
表示静音播放,<source>
标签用于指定视频文件的来源和类型。
loop,autoplay等属性功能与音频一致。
尝试一下>>>
12-无序列表
无序列表 <ul>
用于显示项目之间没有特定顺序的列表。
<ul><li>项目1</li><li>项目2</li><li>项目3</li>
</ul>
在上面的例子中,<ul>
标签定义了一个无序列表,每个列表项由 <li>
标签定义。浏览器会自动为无序列表添加项目符号。
13-有序列表
有序列表 <ol>
用于显示项目之间有特定顺序的列表。
<ol><li>项目1</li><li>项目2</li><li>项目3</li>
</ol>
在上面的例子中,<ol>
标签定义了一个有序列表,每个列表项同样由 <li>
标签定义。浏览器会自动为有序列表添加编号。
14-定义列表
定义列表 <dl>
用于显示项目及其定义。
<dl><dt>苹果</dt><dd>一种水果</dd><dt>香蕉</dt><dd>一种水果</dd>
</dl>
在上面的例子中,<dl>
标签定义了一个定义列表,<dt>
标签定义了项目的标题,<dd>
标签定义了项目的描述。
15-表格-基本使用
表格 <table>
用于在网页中展示数据表格。
<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>30</td></tr>
</table>
在上面的例子中,<table>
标签定义了一个表格,border
属性定义了表格边框的宽度,<tr>
标签定义了表格的行,<th>
标签定义了表头单元格,<td>
标签定义了数据单元格。
16-表格-表格结构标签
在表格中,除了 <table>
、<tr>
、<th>
和 <td>
这些基本标签外,还有一些用于调整表格结构的标签。
<table border="1"><caption>学生信息</caption><colgroup><col span="2" style="background-color:yellow"><col style="background-color:red"></colgroup><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr></tbody>
</table>
在上面的例子中,<caption>
标签用于定义表格标题,<colgroup>
标签定义了列的分组,<col>
标签定义了列的样式,<thead>
标签定义了表头部分,<tbody>
标签定义了表格的主体部分。
17-表格-合并单元格
在表格中,可以通过合并单元格来合并多个单元格,以便更好地展示数据。
<table border="1"><tr><th colspan="2">姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td colspan="3">合并单元格</td></tr>
</table>
在上面的例子中,colspan
属性用于水平合并单元格,rowspan
属性用于垂直合并单元格。
18-表单-input基本使用
表单 <form>
用于向服务器传输数据,其中最常见的表单元素之一是输入框 <input>
。
<form action="/submit" method="post"><label for="username">用户名:</label><input type="text" id="username" name="username"><br><label for="password">密码:</label><input type="password" id="password" name="password"><br><input type="submit" value="提交">
</form>
在上面的例子中,<form>
标签定义了一个表单,action
属性定义了表单数据提交的地址,method
属性定义了数据提交的方式(GET 或 POST),<input>
标签定义了一个输入框,type
属性定义了输入框的类型,id
属性定义了输入框的唯一标识符,name
属性定义了输入框的名称,<label>
标签用于定义输入框的标签文本,<input type="submit">
标签用于定义提交按钮。
19-表单-input占位文本
在输入框中,可以使用占位文本来提示用户输入内容的格式或要求。
<form action="/submit"method="post"><label for="email">邮箱:</label><input type="email" id="email" name="email" placeholder="请输入邮箱"><br><label for="phone">手机号:</label><input type="tel" id="phone" name="phone" placeholder="请输入手机号"><br><input type="submit" value="提交">
</form>
在上面的例子中,placeholder
属性用于定义输入框的占位文本,当用户没有输入内容时,占位文本会显示在输入框内。
20-表单-单选框
单选框 <input type="radio">
用于让用户在多个选项中选择一个。
<form action="/submit" method="post"><input type="radio" id="male" name="gender" value="male"><label for="male">男</label><br><input type="radio" id="female" name="gender" value="female"><label for="female">女</label><br><input type="submit" value="提交">
</form>
在上面的例子中,<input type="radio">
标签定义了一个单选框,name
属性定义了单选框的名称,value
属性定义了单选框的值,<label>
标签用于定义单选框的标签文本。
21-表单-上传多个文件
文件上传表单允许用户选择并上传一个或多个文件。使用 <input type="file" multiple>
属性可以实现上传多个文件的功能。
<form action="/upload" method="post" enctype="multipart/form-data"><input type="file" name="files[]" multiple><br><input type="submit" value="上传">
</form>
在上面的例子中,<input type="file" multiple>
标签允许用户选择多个文件进行上传,name="files[]"
中的 []
表示这是一个文件数组,enctype="multipart/form-data"
属性用于指定表单数据的编码类型。
尝试一下>>>
22-表单-多选框
多选框 <input type="checkbox">
用于让用户从多个选项中选择多个。
<form action="/submit" method="post"><input type="checkbox" id="apple" name="fruits" value="apple"><label for="apple">苹果</label><br><input type="checkbox" id="banana" name="fruits" value="banana"><label for="banana">香蕉</label><br><input type="submit" value="提交">
</form>
在上面的例子中,<input type="checkbox">
标签定义了一个多选框,name
属性定义了多选框的名称,value
属性定义了多选框的值,<label>
标签用于定义多选框的标签文本。
23-表单-下拉菜单
下拉菜单 <select>
用于让用户从预定义的选项中选择一个。
<form action="/submit" method="post"><label for="cars">选择一辆车:</label><select id="cars" name="car"><option value="volvo">沃尔沃</option><option value="saab">萨博</option><option value="mercedes">奔驰</option><option value="audi">奥迪</option></select><br><input type="submit" value="提交">
</form>
在上面的例子中,<select>
标签定义了一个下拉菜单,name
属性定义了下拉菜单的名称,<option>
标签定义了下拉菜单的选项,value
属性定义了选项的值。
24-表单-文本域
文本域 <textarea>
用于让用户输入多行文本。
<form action="/submit" method="post"><label for="message">留言:</label><br><textarea id="message" name="message" rows="4" cols="50"></textarea><br><input type="submit" value="提交">
</form>
在上面的例子中,<textarea>
标签定义了一个文本域,name
属性定义了文本域的名称,rows
和 cols
属性定义了文本域的行数和列数。
25-表单-label标签
<label>
标签用于定义表单元素的标签文本,增加用户体验和可访问性。
<form action="/submit" method="post"><label for="username">用户名:</label><input type="text" id="username" name="username"><br><label for="password">密码:</label><input type="password" id="password" name="password"><br><input type="submit" value="提交">
</form>
在上面的例子中,<label>
标签中的 for
属性与对应表单元素的 id
属性相对应,用于关联标签文本和表单元素,点击标签文本时会自动聚焦到对应的表单元素。
26-表单-按钮
按钮 <button>
标签用于创建可点击的按钮。
<button type="button" onclick="alert('Hello!')">点击我</button>
在上面的例子中,<button>
标签定义了一个按钮,type="button"
属性定义了按钮的类型为普通按钮,onclick
属性定义了按钮点击时执行的 JavaScript 代码。
27-语义化
在 HTML 中,语义化标签有助于更好地描述页面的结构和内容,提高页面的可读性和可访问性。
无语义的布局标签
无语义的布局标签通常用于布局目的,但并没有提供任何有关内容的信息。
<div>
<span>
有语义的布局标签
有语义的布局标签提供了更具有意义的语义,用于描述页面的结构和内容。
<header>
: 网页头部<nav>
: 导航<footer>
: 页脚<aside>
: 侧边栏<section>
: 区域<article>
: 文章
这些标签有助于将页面结构和内容进行更清晰的描述,提高了页面的可读性和可访问性。
28-字体实体
HTML 提供了一些字符实体来显示特殊字符,比如版权符号、注册商标等。
<p>版权所有 © 2024</p>
<p>注册商标 ®</p>
<p>小于等于 ≤</p>
<p>大于等于 ≥</p>
在上面的例子中,©
表示版权符号,®
表示注册商标,≤
表示小于等于,≥
表示大于等于。这些字符实体可以在网页中显示特殊字符,增强页面的表现力。
29-图像标签
图像标签 <img>
用于在网页中嵌入图像。
图像属性
图像标签具有一些属性,用于指定图像的来源、大小、替代文本等。
- src: 指定图像文件的URL。
- alt: 指定替代文本,用于在图像无法显示时显示文本描述。
- width: 指定图像的宽度。
- height: 指定图像的高度。
- title: 指定标题文本,当鼠标悬停在图像上时显示。
属性语法
<img src="image.jpg" alt="替代文本" width="300" height="200" title="标题文本">
在上面的例子中,src
属性指定了图像文件的URL,alt
属性指定了替代文本,width
和 height
属性指定了图像的宽度和高度,title
属性指定了标题文本。
30-路径
在 HTML 中,路径用于指定资源的位置,比如图像、样式表、脚本等。路径分为相对路径和绝对路径两种类型。
相对路径
相对路径指的是相对于当前文档的路径。它可以是相对于当前文档所在目录的路径,也可以是相对于当前文档的 URL 的路径。
- 相对于当前文档所在目录的路径: 在链接资源时,可以直接指定资源的文件名或者相对于当前文档的子目录路径。
<img src="images/picture.jpg" alt="图片">
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/script.js"></script>
在上面的例子中,src
属性中的路径 images/picture.jpg
表示当前文档所在目录下的 images
目录中的 picture.jpg
图片文件。
- 相对于当前文档的 URL 的路径: 如果资源位于当前文档的 URL 所在的服务器上,可以使用相对 URL 路径。
<a href="../about.html">关于我们</a>
在上面的例子中,href
属性中的路径 ../about.html
表示当前文档的上一级目录中的 about.html
文件。
绝对路径
绝对路径指的是资源在文件系统或者网络上的完整路径。它可以是服务器上的路径,也可以是外部资源的 URL。
<img src="https://example.com/images/picture.jpg" alt="图片">
<link rel="stylesheet" href="https://example.com/styles/style.css">
<script src="https://example.com/scripts/script.js"></script>
在上面的例子中,src
属性中的路径 https://example.com/images/picture.jpg
表示一个外部网站上的图片文件的完整URL。
尝试一下>>>