基础内容

基本标签

首先来看这样一段示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html 标签

整个网页都是从 <html> 开始的，到 </html> 结束的

head 标签

head 标签代表页面的头，定义一些特殊且通常不可见的内容

<title> ：定义网页的标题
<meta> ：定义网页的描述文档内容、属性和其他信息的基本数据，主要是提供给搜索引擎、浏览器和其他应用程序使用
<style> ：定义 css 样式
<link> ：链接外部的 css 文件或者脚本文件
<script> ：定义脚本文件

body 标签

<body> 标记是用于定义文档主体的标记。所有在 <body> 和 </body> 之间的内容都将显示在浏览器中，例如文本、图像、链接、表格、列表等。

段落和文字

段落与文字标签

标签	语义
<h1>~<h6>	标题
<p>	段落
<br>	换行
<div>	块元素
<span>	行内元素

文本格式化标签

标签	说明
<strong>	加粗
<em>	斜体
<cite>	斜体
<sup>	上标
<sub>	下标

块元素和行内元素

块元素

块级元素通常用于表示文档的结构和布局，以独立的块形式呈现，占据一整行，可以包含其他块级元素和行内元素。

常见的块级元素有 <div>、 <p> 、 <h1>-<h6> 、 <ul> 、 <ol>、 <li> 、 <table> 、 <form>

行内元素

行内元素通常用于表示文本的一部分，以行内形式呈现，只占据它需要的宽度，不能包含块级元素

常见的行内元素有 <a> 、 <span> 、 <strong> 、 <em> 、 <img>、 <input> 、 <button>

列表

有序列表

<ol [type=""]>
    <li>1</li>
    <li>2</li>
    <li>3</li>
 </ol>

其中 ol 表示的是 ordered list , type 为可选项：

type="1" 序号：数字1, 2, 3
type="a" 序号：小写英文字母a , b , c
type="A" 序号：大写英文字母A , B , C
type="i" 序号：小写罗马数字i , ii , iii
type="I" 序号：大写罗马数字I , II , III

无序列表

<ul [type=""]>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

其中 ul 表示的是 unordered list , type 为可选项：

type="disc" , 默认值 ●
type="circle" , ○
type="square" , ■

表格

基本标签

标签	说明
table	表格
tr	行
td	单元格

结构标签

标签	说明
thead	表头
tbody	表身
tfoot	表脚
th	表头单元格

合并行和合并列

合并行

合并行会使用 td 标签的 rowspan 属性

语法：<td rowspan="行数的跨度"> , 例：

<table border="1">

    <tr>
        <th>name</th>
        <th>age</th>
    </tr>

    <tr>
        <td>aaa</td>
        <td rowspan="2">18</td>
    </tr>

    <tr>
        <td>bbb</td>            
    </tr>

</table>

效果：

name	age
aaa	18
bbb	18

合并列

合并列会使用 td 标签的 colspan 属性

语法：<td colspan="列数的跨度"> , 例：

<table border="1">

    <tr>
        <th>name</th>
        <th>age</th>
    </tr>

    <tr>
        <td colspan="2">none info</td>
    </tr>

    <tr>
        <td>aaa</td>
        <td>18</td>            
    </tr>

</table>

效果：

name	age
none info
aaa	18

图像

图像标签是用 <img> 来指明的，其为一个自闭和标签，其主要有三个重要的属性：

src ：图像的文件地址，可以为 URL , 绝对/相对路径甚至是 Base64 编码
alt ：图片显示不出来时的提示文字
title ：鼠标移到图片上面的提示文字

主要使用的语法为: <img src="图片地址" alt="图片描述" title="鼠标悬停提示">

链接

链接使用 <a> 标签来定义，其包含一下几个属性：

href : 用于指定链接的 URL 地址，可以是绝对路径、相对路径、锚点或 JavaScript 函数。
target : 用于指定链接在何处打开，常用的取值有 _self （在当前窗口打开）、_blank （在新窗口打开）
title : 用于指定链接的标题，当用户将鼠标悬停在链接上时会显示该标题

下面是一个简单的示例：

1	<a href="https://example.com" target="_blank" title="访问示例网站">示例网站</a>

锚点

锚点是一种用于在同一文档内建立跳转链接的标记。锚点可以将页面中的一部分定义为目标，使用户可以通过点击链接或跳转按钮，直接跳转到页面的指定位置。~~是 goto 确信~~

锚点也是使用 <a> 的链接功能来创建, href 属性中使用 # 符号跳转到指定的锚点标识，例如：

<h2 id="section1">第一部分</h2>
<p>这是第一部分的内容。</p>

<a href="#section1">跳转到第一部分</a>

表单

表单拥有四个基本标签：<input> , <textarea> , <select> 和 <option>

input

语法: <input type="表单类型">

type值	作用	效果
text	单行文本框
password	密码文本框
button	按钮
reset	重置
radio	单选按钮
checkbox	复选框

textarea

多行文本框

语法： <textarea rows="行数" cols="列数">多行文本框内容</textarea>

select 和 option

通常是配合使用，用来实现下拉列表，语法如下：

<select name="color">
    <option value="red">红色</option>
    <option value="green" selected>绿色</option>
    <option value="blue">蓝色</option>
</select>

显示效果

进阶

音视频支持

html5 的音视频标签支持多种音视频格式，包括 MP3 、WAV 、 OGG 、 FLV 、 MP4 、 WebM 等。并且 html5 的音视频标签提供了默认的控制面板，包括播放、暂停、停止、音量调节、全屏等功能，同时也支持自定义控制面板，可以根据需求进行定制。

下面是一个简单使用 html5 视频播放器的代码：

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video element.
</video>

<video> 标签用于定义视频文件的播放器, controls 属性用于显示默认的播放器控制面板, width 和 height属性用于指定视频的宽度和高度。如果浏览器不支持的话，则会显示 Your browser does not support the video element.