HTML简单学习记录

最新推荐文章于 2022-03-14 21:41:48 发布
原创 最新推荐文章于 2022-03-14 21:41:48 发布 · 4k 阅读 · 96 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端

这篇博客详细介绍了HTML5的基本结构，包括标题、段落、图像、超链接、行内元素与块元素、列表、表格、视频音频的使用，以及表单的语法和验证方法。通过实例展示了HTML5如何创建网页和实现交互功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

HTML简单学习记录

简介

HTML5（超文本标记语言）是 Hyper Text Markup Language 5 的缩写，超文本包括文字、图片、音频、视频、动画等等

HTML基本结构

在这里插入图片描述

<body>、</body>等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素），如<hr/>意为用/来关闭空元素

  • DOCTYPE声明：告诉浏览器我们要使用什么规范
  • <title>标签
  • <meta>标签：描述性标签，用来描述网站的信息，一般用来做SEO（搜索引擎优化）

网页基本标签

  • 标题标签：<h1>一级标签</h1>、<h2>二级标签</h2>…
  • 段落标签：<p></p>
  • 换行标签：<br/>
  • 水平线标签：<hr/>
  • 字体样式标签：
    粗体：<strong>i love you</strong>
    斜体：<em>i love you</em>
  • 注释和特殊符号：
    注释：<!--注释 -->
    特殊符号：
    空格：&nbsp;
    大于号：&gt;
    小于号：&lt;
    版权符号：&copy;
  • 特殊符号记忆方式：
    以“&”开头，以“;”结尾，用“&+一个字母”可以预览特殊符号：
    在这里插入图片描述

图像标签

<img src="path" alt="text" title="text" width="x" height="y" />

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>

<img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >

</body>
</html>

其中：

  • "…/"指上级目录
  • src与alt是必填项，其他选填
链接标签

超链接标签：<a></a>

<a href="path" target="目标窗口位置">链接文本或图像</a>

在这里插入图片描述

其中：
href是必填项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="https://www.baidu.com" target="_blank">点击我在新窗口跳转到百度</a>
<a href="https://www.baidu.com" target="_self">点击我在当前窗口跳转到百度</a>

<br>
<!--头像超链接-->
<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&step_word=&hs=0&pn=95&spn=0&di=124960&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2876708552%2C1198222067&os=3794562073%2C801013625&simid=2876708552%2C1198222067&adpicid=0&lpn=0&ln=1978&fr=&fmq=1643707728507_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F1d%2F31%2F79%2F1d3179f050039cc45f9f62a105b12c3a_8.jpg%26refer%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1646300533%26t%3D721bdd7ed82b9131d2a8f1785f0eb869&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3FuwvjAzdH3Flbab0-89nnn9b_z%26e3Bip4s&gsm=5c&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsMiw1LDcsOCw2LDQsOQ%3D%3D">
    <img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >
</a>

</body>
</html>

在这里插入图片描述

其中：

  • target="_blank"表示在新窗口跳转页面；target="_self"表示在当前窗口跳转页面

超链接

锚链接
  • 1.需要一个标记
  • 2.跳转到标记
  • 通过”#“+标记名跳转到目标标记
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a name="top">顶部</a>

<a href="https://www.baidu.com" target="_blank">点击我在新窗口跳转到百度</a>
<a href="https://www.baidu.com" target="_self">点击我在当前窗口跳转到百度</a>

<br>
<!--头像超链接-->
<p>
<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&step_word=&hs=0&pn=95&spn=0&di=124960&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2876708552%2C1198222067&os=3794562073%2C801013625&simid=2876708552%2C1198222067&adpicid=0&lpn=0&ln=1978&fr=&fmq=1643707728507_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F1d%2F31%2F79%2F1d3179f050039cc45f9f62a105b12c3a_8.jpg%26refer%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1646300533%26t%3D721bdd7ed82b9131d2a8f1785f0eb869&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3FuwvjAzdH3Flbab0-89nnn9b_z%26e3Bip4s&gsm=5c&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsMiw1LDcsOCw2LDQsOQ%3D%3D">
    <img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >
</a>
</p>
<p>
    <a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&step_word=&hs=0&pn=95&spn=0&di=124960&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2876708552%2C1198222067&os=3794562073%2C801013625&simid=2876708552%2C1198222067&adpicid=0&lpn=0&ln=1978&fr=&fmq=1643707728507_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F1d%2F31%2F79%2F1d3179f050039cc45f9f62a105b12c3a_8.jpg%26refer%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1646300533%26t%3D721bdd7ed82b9131d2a8f1785f0eb869&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3FuwvjAzdH3Flbab0-89nnn9b_z%26e3Bip4s&gsm=5c&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsMiw1LDcsOCw2LDQsOQ%3D%3D">
        <img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >
    </a>
</p>
<p>
    <a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&step_word=&hs=0&pn=95&spn=0&di=124960&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2876708552%2C1198222067&os=3794562073%2C801013625&simid=2876708552%2C1198222067&adpicid=0&lpn=0&ln=1978&fr=&fmq=1643707728507_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F1d%2F31%2F79%2F1d3179f050039cc45f9f62a105b12c3a_8.jpg%26refer%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1646300533%26t%3D721bdd7ed82b9131d2a8f1785f0eb869&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3FuwvjAzdH3Flbab0-89nnn9b_z%26e3Bip4s&gsm=5c&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsMiw1LDcsOCw2LDQsOQ%3D%3D">
        <img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >
    </a>
</p>
<p>
    <a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&step_word=&hs=0&pn=95&spn=0&di=124960&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2876708552%2C1198222067&os=3794562073%2C801013625&simid=2876708552%2C1198222067&adpicid=0&lpn=0&ln=1978&fr=&fmq=1643707728507_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F1d%2F31%2F79%2F1d3179f050039cc45f9f62a105b12c3a_8.jpg%26refer%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1646300533%26t%3D721bdd7ed82b9131d2a8f1785f0eb869&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3FuwvjAzdH3Flbab0-89nnn9b_z%26e3Bip4s&gsm=5c&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsMiw1LDcsOCw2LDQsOQ%3D%3D">
        <img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >
    </a>
</p>
<p>
    <a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&step_word=&hs=0&pn=95&spn=0&di=124960&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2876708552%2C1198222067&os=3794562073%2C801013625&simid=2876708552%2C1198222067&adpicid=0&lpn=0&ln=1978&fr=&fmq=1643707728507_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F1d%2F31%2F79%2F1d3179f050039cc45f9f62a105b12c3a_8.jpg%26refer%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1646300533%26t%3D721bdd7ed82b9131d2a8f1785f0eb869&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3FuwvjAzdH3Flbab0-89nnn9b_z%26e3Bip4s&gsm=5c&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsMiw1LDcsOCw2LDQsOQ%3D%3D">
        <img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >
    </a>
</p>
<p>
    <a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&step_word=&hs=0&pn=95&spn=0&di=124960&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2876708552%2C1198222067&os=3794562073%2C801013625&simid=2876708552%2C1198222067&adpicid=0&lpn=0&ln=1978&fr=&fmq=1643707728507_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F1d%2F31%2F79%2F1d3179f050039cc45f9f62a105b12c3a_8.jpg%26refer%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1646300533%26t%3D721bdd7ed82b9131d2a8f1785f0eb869&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3FuwvjAzdH3Flbab0-89nnn9b_z%26e3Bip4s&gsm=5c&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsMiw1LDcsOCw2LDQsOQ%3D%3D">
        <img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >
    </a>
</p>
<p>
    <a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&step_word=&hs=0&pn=95&spn=0&di=124960&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2876708552%2C1198222067&os=3794562073%2C801013625&simid=2876708552%2C1198222067&adpicid=0&lpn=0&ln=1978&fr=&fmq=1643707728507_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F1d%2F31%2F79%2F1d3179f050039cc45f9f62a105b12c3a_8.jpg%26refer%3Dhttps%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1646300533%26t%3D721bdd7ed82b9131d2a8f1785f0eb869&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3FuwvjAzdH3Flbab0-89nnn9b_z%26e3Bip4s&gsm=5c&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsMiw1LDcsOCw2LDQsOQ%3D%3D">
        <img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >
    </a>
</p>

<!--锚链接
1.需要一个标记
2.跳转到标记
”#“

-->
<a href="#top">回到顶部</a>

</body>
</html>

在这里插入图片描述
点击跳转到顶部

其中：

  • name属性已经被淘汰（<a name="top">顶部</a>），当前流行用top属性（<a top="top">顶部</a>）
    锚链接可以用来跳转到页面指定位置
功能性链接

如邮箱链接：

<a href="mailto:邮箱地址">点击联系我</a>

行内元素和块元素

  • 块元素
    无论内容多少，该元素独占一行 (p、h1-h6…)
  • 行内元素
    内容撑开宽度，左右都是行内元素的可以在排在一行( a . strong . em …)

列表

列表是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式展现出来，以便浏览者能更快捷地获得相应的信息
列表的分类：

  • 有序列表：
<ol>
	<li>Java</li>
	<li>python</li>
	<li>C/C++</li>
</ol>
  • 无序列表
<ul>
	<li>Java</li>
	<li>python</li>
	<li>C/C++</li>
</ul>
  • 自定义列表
<dl>
	<dt>学科</dt>
	
	<dd>Java</dd>
	<dd>python</dd>
</dl>

表格

简单通用、结构稳定
基本结构：

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<table border="1px">
  <tr>
    <td colspan="4">1</td>
  </tr>
  <tr>
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>

</body>
</html>

其中：

  • <table></table>：创建表格
  • <tr></tr>：创建行
  • <td></td>：创建列
  • colspan：跨行
  • rowspan：跨列

视频和音频

视频
<video src="视频资源路径" controls autoplay></video>
音频
<audio src="音频资源路径" controls autoplay></video>

其中：

  • controls：控制选项，设置视频可播放
  • autoplay：自动播放

页面的简单布局

元素名描述
header标题头部区域的内容（用于页面或页面中的一块区域）
footer标记脚部区域的内容（用于整个页面或页面的一块区域）
sectionweb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航类辅助内容

iframe内联框架

<iframe src="path" name="mainFrame"></iframe>

在这里插入图片描述

表单语法

在这里插入图片描述

其中：

  • action：表单提交的位置，可以是网站，也可以是一个请求处理地址
  • method：post，get 提交方式
    get方式提交可以在url中看到提交的信息，高效但不安全
    post方式提交在url中无法看到提交的信息，比较安全，也用来传输大文件
表单元素格式
属性说明
type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name指定表单元素的名称
value元素的初始值。type为radio时必须指定一个值
size指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlengthtype为text或password时，输入的最大字符数
checkedtype为radio或checkbox时，指定按钮是否为被选中
单选框
<!--
value：单选框的值
name：表示组 
-->
<p>性别：
	<input type="radio" value="boy" name="sex"/>男
	<input type="radio" value="girl" name="sex"/>女
</p>
多选框
<input type="checkbox"   ...>
按钮
  • input type=”button“ ：普通按钮
  • input type=”image“ ：图像按钮
  • input type=”submit“ ：提交按钮
  • input type=”reset“ ：重置按钮（清空表单）
下拉框
<!-- selected 默认选择-->
<select name="...">
	<option value="选项的值">1</option>
	<option value="选项的值">2</option>
	<option value="选项的值" selected>3</option>
	<option value="选项的值">4</option>
</selcet>
文本域
<textarea name="..." cols="10" rows="50">文本内容</textarea>
文件域
<input type="file" name="...">
邮件验证
<input type="email" name="...">

验证比较初级

url验证
<input type="url" name="...">

验证比较初级

数字验证
<input type="number" name="..." max="100" min="0" step="1">
滑块（音量）
<input type="range" name="..." max="100" min="0" step="2">
搜索框
<input type="search" name="...">

表单的应用

  • 隐藏域
    如：
<p>密码：<input type="password" name="pwd" hidden value="123456"></p>
  • 只读
    如：
<p>名字：<input type="text" name="username" value="admin" readonly></p>
  • 禁用
    如：
<p>性别：
	<input type="radio" value="boy" name="sex" checked disabled/>男
	<input type="radio" value="girl" name="sex"/>女
</p>

表单的初级验证

作用：

  • 减轻服务器压力
  • 保证安全性

常用方式：

  • placeholder
  • required
  • pattern
HTML的学习记录
m0_60518344的博客
08-05 633
HTML不是一种编程语言，而是一种标记语言（别人问学过什么编程语言的时候千万不要说HTML！！） web的第一门编程语言：Javascript HTML文件的后缀名：.html或者.htm 现在大家都在用的是2014年10月诞生的HTML5 HTML的特点： 1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 2.可拓展性：超文本标记语言采取子类元素的方式，为系统扩展带来保证。 3.平台无关性：超文本标记语言可以使用在广泛的平台上。 4.通用性：它允许网页制作人建立文本与图片
HTML(学习记录)
qq_43096062的博客
09-24 299
HTML 前端脚本，浏览器能识别的脚本 html 标签库 （积木，界面太难看，无法定位） 伪xml规范 1.只有一个根节点 2.每个节点(多个子节点 多个属性 内容) 3.每个节点 （开节点 闭节点） （1） 标签框架（html，head，body） head 非显示，设置性标签 body 文档显示内容 按html5标准处理 （2）标签类型 基本标签 href 目标地址 targe...
html学习记录
秀秀的奇妙旅行
10-15 196
前言：
HTML学习记录
YAYA776的博客
03-02 266
什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)...
html + css 学习笔记整理.zip
最新发布
11-08
HTML和CSS是构建和设计网页的基础技术。HTML（超文本标记语言）负责网页内容的结构，而CSS...这份学习笔记整理将为用户的学习之路提供明确的指引，帮助用户建立起系统的知识框架，最终实现从初学者到熟练开发者的转变。
JavaWeb学习笔记，包括简单的HTML、CSS、JS.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
前端学习笔记，做一个简单的网站，模仿阿里网站.html，学习代码
06-20
这篇"前端学习笔记，做一个简单的网站，模仿阿里网站.html"的文档，旨在通过实际操作来帮助初学者理解和掌握这些基础知识。 HTML（HyperText Markup Language）是网页内容的结构化标记语言，用于定义网页的基本元素...
前端学习笔记，做一个简单的网站，模仿携程网站.html，学习代码
06-20
在“前端学习笔记，做一个简单的网站，模仿携程网站.html”这个项目中，HTML用于定义页面的布局、标题、段落、链接、图像等元素。例如，`<html>`标签是文档的根元素，`<head>`包含元数据（如标题），`<body>`则容纳...
前端学习笔记，做一个简单的网站-html，学习代码，很值得学习
06-20
前端学习笔记，做一个简单的网站-html
HTML自学笔记
lee_goi的博客
03-02 707
文章目录一、什么是HTML二、HTML文档结构:fire: HTML元素（elements）:fire: 文本格式:fire: 超链接:fire: 图片及文件路径:fire: 表格:fire: 列表:fire:表单 Form:fire: 其它 一、什么是HTML HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。 “超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要
HTML学习记录（1）
MrEnigma的博客
03-14 392
1、HTML 全称：Hyper Text Makeup Language–超文本标记语言 文本:普通txt文件，无法保存图片，视频，表格等 超文本:比较厉害的文件，可以保存图片，视频，表格等 W3C World Wide Web Consortium（万维网联盟） 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构 http://www.w3.org/ http://www.chinaw3c.org/ W3C标准包括 1.结构化标准语言（XHTML 、XML） 2.表现标准语言（CSS
html学习记录(1)
cjmdyl的博客
03-12 215
1.基本框架和基本标签 前言:由于学校不开学在家摆太久了()所以开始学习 <!DOCTYPE html><!--基本框架--> <html><!--总标签--> <head><!--网页头部--> <title>cjmdyl</title><!--网页标题--> </head> <body><!--网页主体-->
Html学习记录
m0_51054563的博客
07-30 521
HTML (Hyper Text Markup Language) —— 超文本标记语言 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。 HTML 文档由嵌套的 HTML 元素构成。 HTML 提示：使用小写属性 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。 在某些个别的情况下，比如属性值本身就含有双引号，
HTML基础学习记录
qq_51724176的博客
01-24 847
HTML基础学习记录一、HTML的学习1.HTML是什么 一、HTML的学习 1.HTML是什么 HTML是HyperText Markup Language的简写，即超文本标记语言。（超文本: 普通文本只能显示文字,超文本除了显示基本文字之外还能显示图片,视频,音频,文件特殊效果等；标记是HTML的组成元素） HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值