Collection
Collection
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1> 元素定义一个大标题</h1> <p> 元素定义一个段落</p> </body> </html>
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
一、什么是HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
二、HTML 标签
2.1、排版标签
（1）、标题标签 <h1></h1>
h 即 head 的简写
有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种，从左到右字号依次变小。
基本格式<h1></h1>
像<h7>这种错误的标签在展示时不起作用
（2）、段落标签<p></p>
p 即 paragraph 的简写
基本格式<p>段落内容</p>
段落中的文本内容超出浏览器宽度之后会执行自动换行
（3）、水平线标签<hr />
hr 即 horizontal 的缩写
其作用是在页面中插入一条水平线
基本格式<hr />
这是一个自闭合标签。（普通标签成对出现；自闭合标签不需要包裹内容，自己就执行了开始和结束的操作）
（4）、容器标签 <div></div> 和 <span></span>
div 即 division 的缩写，分割、区分的意思
span 即 span ，跨度、范围的意思
这俩本质上是一个容器，类似于 Android 中的ViewGroup
基本格式<div>这是div标签中的内容</div> <span>这是span标签中的内容</span>
2.2、文本格式化标签
标签 效果 <b></b>、<strong></strong> 加粗，
XHTML推荐使用<strong> <i></i>、<em></em> 斜体，
XHTML推荐使用<em> <s></s>、<del></del> 删除线，
XHTML推荐使用<del> <u></u>、<ins></ins> 下划线，
2.3、标签的属性
基本格式：<标签名 属性1=”属性值1“ 属性2=”属性值2“></标签名>
标签可以拥有多个属性
属性必须写在开始标签中，位于标签名后面
属性之间不区分顺序
标签名与属性、属性与属性之间使用空格隔开
任何属性都有默认值，省略该属性表示使用默认值
2.4、图像标签 <img />
img 即 image 的缩写
基本格式<img src="图片URI/URL" />
<img />常用属性如下：
属性 属性值 属性含义
src URI/URL 图像的路径
alt 文本 图像无法正常显示时的提示文本
title 文本 鼠标悬停于图像时显示的文本
width 像素（XHTML 不支持按页面百分比显示） 图像的宽度
height 像素（XHTML 不支持按页面百分比显示） 图像的高度
border 数字 设置图像边框的宽度
三、超链接标签
(1)、超链接标签<a></a>anchor 的缩写
基本格式 <a href="跳转目标url" target="目标窗口的弹出方式">超链接文本或图像</a>
href 即 HyperText Reference , 指定要跳转的URL地址
target , 指定目标窗口的打开方式。取值为 self / blank , self 为默认值，blank 表示新窗口打开
注意：
外链需要添加 http:// 或 https:// 前缀
内部链接 直接链接内部页面名称即可，如 <a href="index.html">首页</a>
如果当时没有确定链接目标时，可以为 href 赋值 为 “#” ,即 href="#",表示一个空连接
各种网页元素，如 文本、图像、表格、音频、视频等都可以作为超链接的载体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接文本示例</title> </head> <body> <a href="#" target="_blank">我是云海</a> </body> </html>
点击 "运行实例" 按钮查看在线实例
四、列表标签
4.1、无序列表 <ul>
所谓无序列表就是以小圆点或者小方块作为行首标志的列表
无序列表的各项之间是并列的，没有顺序级别的区分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序列表 ul</title> </head> <body> <ul> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> <li>无序列表4</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
注意：
<ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签
<li></li> 之间相当于一个容器，可以嵌套任意标签
4.2、有序列表 <ol></ol>
内部也是嵌套<li></li>
默认以 1、2、3...作为行首排序标志
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有序列表ol</title> </head> <body> <ol > <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> <li>有序列表4</li> </ol> </body> </html>
点击 "运行实例" 按钮查看在线实例
4.3、自定义列表 <dl></dl>
<dl></dl>为外层标签、<dt></dt>为内层标签、<dt> 下还可以嵌套 <dd></dd>
自定义列表项前不具有任何项目符号，既没有小圆点也没有1234
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义列表</title> </head> <body> <dl> <dt>自定义列表项1</dt> <dd>自定义列表项1 的内容解释1</dd> <dd>自定义列表项1 的内容解释2</dd> <dt>自定义列表项2</dt> <dd>自定义列表项2 的内容解释1</dd> <dd>自定义列表项2 的内容解释2</dd> </dl> </body> </html>
点击 "运行实例" 按钮查看在线实例
五、表格标签 table
<table></table> 用来定义表格，
<tr></tr> 用来定义行，嵌套在 <table></table> 中
<td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中
<tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器，可以嵌套任意元素
表格相关的属性如下：
属性名称 含义属性取值
border 表格的边框。默认 border="0",即无边框 像素值
cellspacing 单元格与单元格边框之间的间距。
默认 cellspacing="2" 像素值
cellpadding 单元格内容与单元格边框的间距。
默认 cellpadding="1" 像素值
width 表格的宽度 像素值
height 表格的高度 像素值
align 表格在页面中的水平对齐方式 left 、center 、right
caption 标题 文本
colspan 从当前列向后 横跨几列, 应用于td、th 数字
rowspan 从当前行向下 竖跨几行, 应用于td、th 数字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table cellspacing="3" cellpadding="2" border="1" align="left"> <tr> <td>第一行第1列</td> <td>第一行第2列</td> <td>第一行第3列</td> </tr> <tr> <td>第二行第1列</td> <td>第二行第2列</td> <td>第二行第3列</td> </tr> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
注意：
表头一般位于表格的第一行或者第一列。
表头标签为 <th></th>，在显示的时候默认会显示为加粗的效果
增加表头时，使用 <th></th> 替代对应位置的 <td></td>即可
六、表单标签
6.1、input 输入标签
<input/> 为单标签（自闭合标签）
type 是其基本属性，用来控制输入的类型
input 、br、hr 、img、 base 都是单标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input标签</title> </head> <body> 用户名：<input type="text" maxlength="15"/> <br/> <!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小--> 密 码：<input type="password"/> <br/> <!--使用name 限定了一组内容，从而实现单选--> 性 别： <input type="radio" name="sex" checked="checked"/> 男 <input type="radio" name="sex"/> 女 <br/> 爱 好： <input type="checkbox" name="hobby"/> 看电影 <input type="checkbox" name="hobby"/> 读书 <br/> <input type="button" value="普通按钮"/> <br/> <input type="submit" value="提交按钮"/> <br/> <input type="reset" value="重置按钮"/> <br/> <input type="image" src="#"/> <br/> 请选择文件：<input type="file"/> </body> </html>
点击 "运行实例" 按钮查看在线实例
七、多媒体标签
embed : 定义嵌入的内容
audio : 播放音频
video : 播放视频
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>embed</title> </head> <body> <embed src="#" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> </body> </html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
