一、标准html页面的标签
<!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>：这是文档类型声明，用于告诉浏览器这个文档是HTML5标准。 -
<html lang="en">：这是HTML文档的根元素，lang="en"属性指定了文档的主要语言是英语。 -
<head>：包含了文档的元数据，比如字符集、视口设置和文档标题。<meta charset="UTF-8">：指定了文档的字符编码为UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">：为移动设备优化，设置视口宽度等于设备的宽度，并设置初始缩放比例为1。<title>Hello World</title>：定义了文档的标题，显示在浏览器的标签页上。
-
<body>：包含了网页的所有内容，用户可以直接看到或与之交互。
二、常用的标签
1.标题标签
<h1> 到 <h6> 是HTML中的标题标签，它们用于定义不同级别的标题。
<h1>这是最高级别的标题</h1>
<h2>这是第二级别的标题</h2>
<h3>这是第三级别的标题</h3>
<h4>这是第四级别的标题</h4>
<h5>这是第五级别的标题</h5>
<h6>这是最低级别的标题</h6>-
上下行距：
<h1>到<h6>标签通常具有上下行距，这意味着它们在页面上显示时，上方和下方会有额外的空间，以区分标题和其他内容。 -
单独一行：这些标题标签是块级元素，它们会占据整行，不会和其他元素在同一行显示。
-
字体变大：
<h1>是最高级别的标题，通常具有最大的字号，随着标题级别的增加，字体大小会逐渐减小。 -
字体加粗：标题标签的文本通常会被浏览器默认设置为加粗，以突出显示标题的重要性。
2.段落标签
<p> 是 HTML 中的段落标签，用于定义文本段落。
<p>这是一个段落。</p>
-
段落标签：
<p>标签用于包裹一段文本，使其成为段落的一部分。 -
上下行距：
<p>标签通常具有默认的上下行距 -
单独一行：它会开始于新的一行，并且不会与其他块级元素或内联元素共享同一行。
-
默认样式：大多数浏览器会为
<p>标签提供一些默认样式，比如上下行距。
3.块级元素
<div> 标签是 HTML 中的一个块级元素
<div class="header">
<h1>网站标题</h1>
</div>
-
块级元素：
<div>标签是一个块级元素，这意味着它在页面上占据的区域会从新的一行开始，并且通常可以容纳其他块级元素或内联元素。 -
单独一块：每个
<div>标签定义了一个独立的块级容器，可以包含文本、图片、链接、表单、其他<div>标签等。 -
布局容器：
<div>标签经常用于创建布局结构，比如页面的头部、内容区域、侧边栏、页脚等。它们可以被用来组织和分隔页面上的不同部分。
4.隔离标签
<span> 本身不提供样式，但它可以用来隔离部分内容，以便通过 CSS 或 JavaScript 进行样式设置或操作。<span> 没有默认样式，但可以通过 CSS 来设置样式。例如，可以改变 <span> 内文本的颜色、字体大小、字体样式等。
<span >花花花花</span>5.水平分割线
<hr> 标签在 HTML 中用来创建一条水平分割线
<p>花花胡</p>
<hr>
<p>哗哗哗</p>6.强制换行
<br> 标签在 HTML 中用于在文本中强制换行。
<span >花花<br>花花</span>-
换行强制：
<br>是一个空元素，它没有结束标签，用于在文本中插入一个换行。
7.加粗
<b>哗哗哗</b>
<strong>还画画</strong><b> 和 <strong> 都是 HTML 中用来表示文本加粗的标签
8.斜体
<i>哗哗哗</i>
<em>画画哈</em><i> 和 <em> 都是 HTML 中用来表示文本的斜体显示的标签
9.下划线
<p><u>哗哗哗</u></p><u> 标签在 HTML 中用来给文本添加下划线。
10.删除线中分线
<p><del>哗哗哗</del></p><del> 标签在 HTML 中用来表示文本中的删除线，
11.上标
<sup>上标签</sup><br><sup> 标签在 HTML 中用于创建上标文本
12.下标
<sub>下标签</sub><br>H <sub>2</sub>Co<sub>3</sub> = 2H <sup>+</sup> + Co<sub>3</sub><sup>2-</sup><sub> 标签在 HTML 中用于创建下标文本
13. 列表
列表标签用于创建不同类型的列表
li用于表示列表中的单个项目。
1.li列表项通常独占一行，并且<li>元素不能单独存在，它必须嵌套在<ol>或<ul>元素中。
2.<ol> 有序列表：用于创建有序列表，其中的列表项会被自动编号。
<h1>有序列表</h1>
<ol>
<li>有序列表1在列表名前加一个数字</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>3.<ul> 无序列表：用于创建无序列表，其中的列表项通常以项目符号（如圆点）显示。
<h1>无序列表</h1>
<ul>
<li>无序列表1列表名前加一个点</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul><dl> 自定义列表
<h1>自定以列表</h1>
<dl>
<dt>列表项目名没有缩进</dt>
<dt></dt>
<dt></dt>
<dd>列表项目说明1带缩进</dd>
<dd>列表项目说明2</dd>
<dd>列表项目说明3</dd>
</dl>14.表格
<table> 标签定义了一个表格 。
1.tr> 标签定义了表格的行
2.<th> 标签定义了表格的表头单元格，用于列标题。
3.<td> 标签定义了表格的普通单元格，用于存放数据。
border="10"：设置表格边框的宽度为10像素。这会在表格的单元格周围显示边框
cellspacing="10"：设置单元格之间的间距为10像素。
width="80%"：设置表格宽度为页面宽度的80%。
rowspan="2"：表示该单元格横跨两行
colspan="2"：表示该单元格横跨两列。
<table border="10" align="center" cellspacing="10" cellpadding="10" width="80%">
<tr>
<th>头部单元格1</th>
<th>头部单元格2</th>
<th>头部单元格3</th>
</tr>
<tr>
<td rowspan = "2">普通单元格1</td>
<td colspan= "2">普通单元格2</td>
<!-- <td>普通单元格3</td> -->
</tr>
<tr>
<td rowspan = "2" colspan= "2">普通单元格1</td>
<!-- <td>普通单元格2</td> -->
<!-- <td>普通单元格3</td> -->
</tr>
<tr>
<td>普通单元格1</td>
<!-- <td>普通单元格2</td> -->
<!-- <td>普通单元格3</td> -->
<!-- 当键等于值时省略值 -->
</tr>
</table><br><br><br>15.src
src属性在HTML中用于指定外部资源的URL。
1.<img> 标签 用于在网页上嵌入图片。src 属性指定图片文件的路径
<img src="./img/111.jpg" alt="图片无法显示" width="300">2.<audio> 标签
用于在网页上嵌入音频内容。
controls：<audio> 和 <video> 标签的 controls 属性浏览器上显示播放控件，允许用户播放、暂停和调整音量等。
<audio src="audio.mp3" controls>
</audio>3.<video> 标签
用于在网页上嵌入视频内容。
<video src="./video/4.redis列表与集合.mp4" controls width="300">视频</video>16.<a> 标签
在HTML中定义了一个超级链接，它可以用来从一个页面链接到另一个页面，或者在当前页面内跳转到特定的部分。
<a href="http://www.baidu.com" target="_blank">百度</a>锚点链接：
1.当 href 属性以 # 开头时，它定义了一个锚点链接，用于在同一页面内进行导航。
2.要创建锚点，需要在页面的特定部分使用 id 属性，其值与 href 中的值相匹配
<h1 id = "h1">标题一</h1>
<a href="#h1">标题一</a>17.<iframe> 标签
在HTML中用于在当前页面内嵌入另一个HTML页面
<iframe src="http://www.baidu.com" frameborder="0" width="50%"height="300" > 百度</iframe>18.<form>标签
<form action="" method="get"></form>action：指定提交表单数据时的目标URL（目标网址）。
method：指定提交表单数据时使用的HTTP方法（通常是GET或POST）
<label for="un">用户名</label> <input name="username" id="in" type="text"><label>标签，点击后，会自动聚焦到对应的表单控件上 。
<input>：用于创建输入控件。可以通过type属性来定义
text：单行文本输入框。
name属性：所有表单控件都应该有一个name属性，这样在表单提交时，数据才能被识别和处理。
value属性：用于设置表单控件的值。
2.password：密码输入框，输入内容会被隐藏。
<label for="pwd">密码</label> <input name="password" id=""pwd type="password">3.radio：单选按钮。
<span>性别</span>
<label for="man">男</label> <input name="sex" value="man" checked id="man" type="radio">
<label for="woman">女</label> <input name="sex" value="woman" id="woman" type="radio">4.checkbox：复选框。
<span>爱好:</span>
<label for="footable">足球</label> <input name="hobdy" value="footable" checked id="footable" type="checkbox">
<label for="basktable">兰球</label> <input name="hobdy" value="basktable" checked id="basktable" type="checkbox">
<label for="fnewable">新球</label> <input name="hobdy" value="fnewable" checked id="fnewable" type="checkbox">5.range：范围长条有最大值和最小值
<span>年纪</span> <input name="age" type="range" min="0" max="100" step="1">6.color：供用户选择一个颜色
<span>喜欢颜色</span> <input name="color" type="color">7.file：可选则一个文件
<span>附件</span> <input name="file" type="file">8.<select>元素用来创建下拉选择菜单。
允许用户从多个选项中选择一个或多个
单个选择下拉菜单
<select name="address">
<option value="背景">背景</option>
<option value="上河">上河</option>
<option value="广东">广东</option>
</select>多选的下拉菜单
<select name="address" multiple >
<option value="背景" selected>背景</option>
<option value="背景" selected>上河</option>
<option value="背景" selected>广东</option>
</select>9.<textarea>：定义一个多行文本输入控件。
<textarea name="花花花花" id="" cols="30" rows="10">ada</textarea>10.提交和删除
<input type="submit" value="注册"> <input type="reset" value="删除">
扫一扫
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
