【温故而知新】HTML标签/表单/字符

发布时间:2024年01月16日

一、概念

HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它被用来描述网页的结构和内容,并且是网页浏览器能够解析和渲染网页的基础。HTML5 是 HTML 的最新版本,增加了许多新的元素和功能,以适应现代网页开发的需求。

HTML5 提供了许多新的元素和 API,使得开发者可以创建更丰富、更交互式的网页和应用。例如,HTML5 引入了视频和音频元素,使得在网页上直接播放多媒体内容变得简单;还引入了 Canvas 和 SVG 元素,用于绘制图形和动画;另外,HTML5 还提供了地理位置 API、文件 API、Web Storage API 等,使得开发者可以轻松地获取和使用用户的地理位置信息、文件内容、本地存储数据等。

除了新增的元素和 API,HTML5 还改进了一些现有的元素和功能。例如,HTML5 改进了表单元素,提供了更多的输入类型(如 email、number、range 等),使得表单的验证和输入更加方便;还改进了语义元素(如 header、footer、article 等),使得网页的结构更加清晰和易于理解。

二、字符

显示结果描述实体名称实体编号
空格  
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp; &#38;
"引号&quot; &#34;
撇号&apos; (IE不支持) &#39;
&cent; &#162;
&pound;&#163;
人民币/日元&yen;&#165;
欧元&euro; &#8364;
§小节&sect;&#167;
?版权&copy;&#169;
?注册商标&reg;&#174;
?商标&trade;&#8482;
×乘号&times;&#215;
÷除号&divide;&#247;

三、标签

标签英文全称中文说明
aAnchor
abbrAbbreviation缩写词
acronymAcronym取首字母的缩写词
addressAddress地址
altalter替用(一般是图片显示不出的提示)
bBold粗体(文本)
bdoBi-Directional Override文本显示方向
bigBig变大(文本)
blockquoteBlock Quotation区块引用语
brBreak换行
cellcell
cellpaddingcellpadding巢补白
cellspacingcellspacing巢空间
centerCentered居中(文本)
citeCitation引用
codeCode源代码(文本)
ddDefinition Description定义描述
delDeleted删除(的文本)
dfnDefines a Definition Term定义定义条目
divDivision分隔
dlDefinition List定义列表
dtDefinition Term定义术语
emEmphasized加重(文本)
fontFont字体
h1~h6Header 1 to Header 6标题1到标题6
hrHorizontal Rule水平尺
hrefhypertext reference超文本引用
iItalic斜体(文本)
iframeInline frame定义内联框架
insInserted 插入(的文本)
kbdKeyboard键盘(文本)
liList Item列表项目
nlnavigation lists导航列表
olOrdered List 排序列表
optgroupOption group定义选项组
pParagraph段落
prePreformatted预定义格式(文本 )
qQuotation引用语
relReload加载
s/strikeStrikethrough删除线
sampSample示例(文本
smallSmall变小(文本)
spanSpan范围
srcSource源文件链接
strongStrong加重(文本)
subSubscripted下标(文本)
supSuperscripted上标(文本)
tdtable data cell表格中的一个单元格
thtable header cell表格中的表头
trtable row表格中的一行
ttTeletype打印机(文本)
uUnderlined下划线(文本)
ulUnordered List不排序列表
varVariable变量(文本)

四、表单

HTML表单是一种用于收集用户输入的HTML元素。它由一系列表单元素组成,可以包括文本框、复选框、单选按钮、下拉菜单等元素。用户可以在表单中输入信息,并将其提交到服务器进行处理。

下面是一个简单的HTML表单的例子:

<!DOCTYPE html>
<html>
<head>
    <title>HTML表单示例</title>
</head>
<body>
    <h1>用户登录</h1>
    <form action="login.php" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required><br><br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required><br><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>

在上面的例子中,我们创建了一个用户登录的表单。表单的action属性指定了提交表单时将要处理表单数据的服务器端脚本路径。method属性指定了表单提交的HTTP方法,常用的有GETPOST。在这个例子中,我们使用了POST方法。

这个表单包含两个文本输入框,分别用于输入用户名和密码。input元素的type属性指定了输入框的类型,text表示普通文本输入框,password表示密码输入框。id属性和name属性用于标识输入框,label元素的for属性与input元素的id属性关联起来,点击label时,对应的输入框会获得焦点。

submit类型的input元素用于提交表单数据。点击该按钮后,表单数据将会被提交到action属性指定的路径。

请注意,上述例子只是一个静态页面,无法真正登录。在实际应用中,我们需要根据表单数据的提交,编写服务器端脚本来处理用户登录的逻辑。

文章来源:https://blog.csdn.net/xuaner8786/article/details/135617302
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。