HTML5

原创已于 2025-08-11 19:28:47 修改 · 711 阅读

26 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端学习

于 2025-08-06 01:53:50 首次发布

标签之标题

标题介绍与应用：

标题（Heading）是通过<h1>-<h6>标签进行定义的。

<h1>定义最大的标题，<h6>定义最小的标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

生成<h1>-<h6>快捷键:h$*6

标题标签位置摆放：

在标签中添加属性align="left | center | righ默认居左

<!DOCTYPE html>
<html lang="en">
	<head>
	<title>页面的标题</title>
	</head>
	<body>
		<h1 align="center">第一标题</h1>
		<h2></h2>
		<h3></h3>
	</body>
</html>

标签之段落，换行，水平线

标签之段落

段落是通过<p>标签定义的

<p>这是一个段落 </p>
<p>这是另一个段落</p>

标签之换行

如果想在不产生新段落的情况下进行换行就用<br>

<br/>元素一个空的HTML元素

<p>这个<br>段落<br>演示了分行的效果</p>

标签之水平线

<hr/>标签在HTML页面中创建水平线

<hr color="" width="" size="" align=""/>

color：设置水平线的颜色
width：设置水平线的宽度
size：设置水平线的高度
align：设置水平线的对齐方式（默认居中），可取值left|right

标签之图片

<img>标签定义 HTML 页面中的图像

<img src="" alt="" title="" width=""
height="">

<img>是单标签，不需要进行闭合操作

src：路径（图片地址与名字）
alt：规定图像的替代文本
width：规定图像的宽度
height：规定图像的高度
title：鼠标悬停在图片上给予提示

标签之文本超链接

超链接描述：

HTML使用标签<a>来设置超文本链接.

超链接可以是文字，句子，图像等，可以点击这些内容跳转

1 <a href="url">链接文本</a>

超链接属性：

在标签<a>使用了href属性来描述连接的地址

默认情况下，链接将以，以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

标签之文本：

标签	描述
<em>	定义着重文字
<b>	定义粗体文本
<i>	定义斜体字
<strong>	定义加重文字
<del>	定义删除文字
<span>	元素没有特定的含义

列表标签之有序列表：

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。

<ol>
    <li>第一<li/>
    <li>第二<li/>
<ol/>

type属性：

<ol>的属性type拥有的选项

表示列表项目用数字标号（1,2,3...）
a 表示列表项目用小写字母标号（a,b,c...）
A 表示列表项目用大写字母标号（A,B,C...）
i 表示列表项目用小写罗马数字标号（i,ii,iii...）
I 表示列表项目用大写罗马数字标号（I,II,III...）

列表标签之无序列表：

<ul>列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

无序列表始于<ul>标签。每个列表项始于<li>标签

type属性：

<ul>的属性type 拥有的选项

disc 默认实心圆
circle 空心圆
square 小方块
none 不显示

无序列表的嵌套

<ul>
    <li>第一</li>
    <li>
        <ul>
            <li>老一</li>
            <li>老二</li>
        </ul>
    </li>
    <li>第二</li>
</ul>

快捷键快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修改）

标签之表格

表格展示效果：

表格在数据展示方面非常简单，并且表现优秀

表格组成与特点：

行，列，单元格

单元格特点：同行等高，同列等宽

表格标签：

表格：<table>

行：<tr>

列：<td>

快捷键快速生成表格结构：table>tr*2>td{单元格内的内容}

表格属性

border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度

单元格合并：

水平合并：colspan
垂直合并：rowspan

<table border="1" width="500px"
height="200px">
    <tr>
        <td colspan="3">单元格1单元格2单元格
3</td>
        <td>单元格4</td>
        <td>单元格5</td>
    </tr>
    <tr>
        <td rowspan="2">单元格6-11</td>
        <td>单元格7</td>
        <td rowspan="3">单元格81318</td>
        <td colspan="2" rowspan="2">单元格
9101415</td>
    </tr>
    <tr>
        <td>单元格12</td>
    </tr>
    <tr>
        <td>单元格16</td>
        <td>单元格17</td>
        <td>单元格19</td>
        <td>单元格20</td>
    </tr>
</table>

Form表单：

表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件

<form action="url" method="get|post"
name="myform"></form>

属性说明
action服务器地址
name表单名称
method中Get和Post的区别
1 数据提交方式，get把提交的数据url可以看到，post看不到
2 get一般用于提交少量数据，post用来提交大量数据

表单元素：

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

文本框：

文本域通过 <input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

rm>
   First name: <input type="text"
name="firstname">
    <br>
   Last name: <input type="text"
name="lastname">
</form>
1

密码框：

密码字段通过标签<input type="password"> 来定义

<form>
   Password: <input type="password"
name="pwd">
</form>

提交按钮：

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

<form name="input" action="url" method="get">
   Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

块元素和行内元素：

块级元素	内联元素
块元素hi在页面中独占一行（自上而下垂直排列）	行内元素不会独占页面中的一行，只占自身的大小
可以设置width,height属性	行内元素设置width,height属性无效
一般块级元素可以包含行内元素和其他块级元素	一般内联元素包含内联元素不包含块级元素

常见块级元素