本文最后更新于：December 3, 2021 pm

HTML是用于创建网页的语言。我们通过使用HTML标记标签创建html文档来创建网页。HTML代表超文本标记语言。HTML是一种标记语言，它具有标记标签的集合。
HTML标签是由尖括号括起来的词，如<html>， <body>。标签通常成对出现，例如<html>和</html>。
一对中的第一个标签是开始标签;第二个标签是结束标签。在上面的示例中，<html>是开始标签，而</html>是结束标签。
我们还可以将开始标签称为起始标签，结束标签称为闭合标签。
注意：并不是所有的标签都有结束标签的！！！
注意：在本文中，有人民币符号￥的，表示自闭合标签，即不需要结束标签的。

HTML 表单用于收集不同类型的用户输入。表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。
表单使用表单标签 <form> 来设置。

1.1输入元素、创建按钮（<input>）

多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如：文本域（Text Fields）、密码字段（password）、单选按钮（Radio Buttons）、复选框（Checkboxes）、提交按钮 (Submit Button)等等。

使用实例：

1
2
3

<form action="">
<input type="button" value="Hello world!">
</form>

1.1.1 文本域（Text Fields）

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

使用实例：

<form>
姓名: <input type="text" name="firstname"><br>       
电话号码: <input type="text" name="lastname">      
</form>

注意：表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是 20 个字符。

1.1.2 密码字段（password）

密码字段通过标签 <input type=”password”> 来定义。
使用实例：

1
2
3

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

注意：密码字段字符不会明文显示，而是以星号或圆点替代。

1.1.3 单选按钮（Radio Buttons）

<input type=”radio”> 标签定义了表单单选框选项。

使用实例：

<form>        
<input type="radio" name="sex" value="male">男<br>      
<input type="radio" name="sex" value="female">女       
</form>

1.1.4 复选框（Checkboxes）

<input type=”checkbox”> 定义了复选框。用户需要从若干给定的选择中选取一个或若干选项。

使用实例：

<form>      
<input type="checkbox" name="vehicle" value="Bike">我有自行车<br>      
<input type="checkbox" name="vehicle" value="Car">我有小车
</form>

1.1.5 提交按钮 (Submit Button)

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

使用实例：

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

假如您在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。

1.1.6 下拉列表

使用实例：

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option> 
<!--selected为选择默认显示选项，没有selected则选择第一个值为默认显示-->
<option value="audi">Audi</option>
</select>
</form>

2.框架

使用实例：

1 2	`<iframe src="URL"></iframe> <!--该URL指向不同的网页，将窗口内容显示为URL地址指向页面。-->`

2.1 设置高度与宽度

height和width属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”)。

使用实例：

1	`<iframe src="demo_iframe.htm" width="80%" height="80%"></iframe>`

2.2 移除边框

frameborder属性用于定义iframe表示是否显示边框。设置属性值为 “0” 移除iframe的边框:

使用实例：

1	`<iframe src="demo_iframe.htm" frameborder="0"></iframe>`

2.3 框架页面的默认页面

iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性。

使用实例：

1 2	`<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://lichengloong.com/" target="iframe_a">墨水的记忆</a></p>`

3.颜色

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。
3位颜色十六进制：如：#000（黑色）、#F00（红色）、#0F0（绿色）等。
6位颜色十六进制：如：#000000（黑色）、#FF0000（红色）、#00FF00（绿色）等。
颜色RGB：如：rgb（0,0,0）（黑色）、rgb（255，0，0）（红色）、rgb（0，255，0）（绿色）等。
颜色名字：如：Black （黑色）、red（红色）、green（绿色）等。

4.字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
“	引号	"	"
‘	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

5.插件

插件的功能是扩展 HTML 浏览器的功能。
辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。
使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。插件可以通过 <object> 标签或者 <embed> 标签添加在页面中。object 和 embed 元素都通过添加对浏览器不直接支持的插件的支持来扩展浏览器的功能。
大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

如：可以使用 <video> 和 <audio> 标签来显示视频和音频

5.1 <object>元素

所有主流浏览器都支持 <object> 标签。<object> 元素定义了在 HTML 文档中嵌入的对象。<object> 元素具有局部属性:data，type，height，width，usemap，name，form。该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

使用实例：

<object width="400" height="50" data="bookmark.swf" ></object>
<!-- <object> 元素同样可用于包含HTML文件 -->
<object width="100%" height="500px" data="snippet.html" ></object>
<!--  插入一张图片 -->
<object data="logo.png"></object>

5.2 <embed>元素

所有主流浏览器都支持 <embed> 元素。<embed> 元素实现与 <object> 元素相同的结果。
<embed> 元素表示一个 HTML Embed 对象。
<embed> 元素已经出现很长一段时间了，但是在 HTML5 前并未被详细说明，该元素在 HTML 5 页面上会被验证，在 HTML 4 上不会。

使用实例：

<embed width="400" height="50" src="bookmark.swf" >
<!--  <embed> 元素同样可用于包含 HTML 文件 -->
<embed width="100%" height="500px" src="snippet.html" >
<!-- 插入一张图片 -->
<embed src="logo.png">

注意： <embed> 元素没有关闭标签。不能使用替代文本。

5.3 视频

在 HTML 中播放视频的方法有很多种。可以使用 <embed> 标签、<object> 标签以及 <video> 标签（HTML 5中启用）。

使用实例：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object>
</video>

部分知识点内容用法参考

6.1 HTML基本标签

<h1>最大的标题</h1>
 <h2> . . . </h2>
 <h3> . . . </h3>
 <h4> . . . </h4>
 <h5> . . . </h5>
 <h6>最小的标题</h6>
 <p>这是一个段落。</p>
 <br> （换行）
 <hr> （水平线）
 <!-- 这是注释 -->

6.2 文本格式化

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

6.3 链接

普通的链接：<a href="链接地址">链接文本</a>
图像链接： <a href="http://www.example.com/" rel="external nofollow" target="_blank" ><img src="URL" alt="替换文本"></a> 
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签： <a id="tips">
提示部分</a> <a href="#tips">跳到提示部分</a>

6.4 图片

1	`<img src="URL" alt="替换文本" height="42" width="42">`

6.5 样式/区块

<style type="text/css">
h1 {color:red;}
p {color:blue;}
 </style>
 <div>文档中的块级元素</div>
 <span>文档中的内联元素</span>

6.6 无序列表

<ul>
   <li>项目</li>
   <li>项目</li>
 </ul>

6.7 有序列表

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

6.8 自定义列表

<dl>
   <dt>项目 1</dt>
     <dd>描述项目 1</dd>
   <dt>项目 2</dt>
     <dd>描述项目 2</dd>
 </dl>

6.9 表格

<table border="1">
   <tr>
     <th>表格标题</th>
     <th>表格标题</th>
   </tr>
   <tr>
     <td>表格数据</td>
     <td>表格数据</td>
   </tr>
 </table>

6.10 框架

1	`<iframe src="demo_iframe.htm"></iframe>`

6.11 表单

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50"> 
<input type="password"> 
<input type="checkbox" checked="checked"> 
<input type="radio" checked="checked"> 
<input type="submit" value="Send"> 
<input type="reset"> 
<input type="hidden"> 
<select> 
<option>苹果</option> 
<option selected="selected">香蕉</option> 
<option>樱桃</option> 
</select>
<textarea name="comment" rows="60" cols="20">
</textarea> 
</form>

6.12 实体

1
2
3

< 等同于 &lt;
> 等同于 &gt;
© 等同于 &copy;

WEB前端

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/787106912.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

ACM-AcWing算法模板代码 Previous

WEB前端-HTML基础知识复习（一） Next

WEB前端-HTML基础知识复习（二）

目录

1.表单（<form>）

1.1输入元素、创建按钮（<input>）

1.1.1 文本域（Text Fields）

1.1.2 密码字段（password）

1.1.3 单选按钮（Radio Buttons）

1.1.4 复选框（Checkboxes）

1.1.5 提交按钮 (Submit Button)

1.1.6 下拉列表

2.框架

2.1 设置高度与宽度

2.2 移除边框

2.3 框架页面的默认页面

3.颜色

4.字符实体

5.插件

5.1 <object>元素

5.2 <embed>元素

5.3 视频

部分知识点内容用法参考

6.1 HTML基本标签

6.2 文本格式化

6.3 链接

6.4 图片

6.5 样式/区块

6.6 无序列表

6.7 有序列表

6.8 自定义列表

6.9 表格

6.10 框架

6.11 表单

6.12 实体