HTML汇总 - 各种功能项详解+示例

最新推荐文章于 2024-05-07 18:30:56 发布

全栈养成专员

最新推荐文章于 2024-05-07 18:30:56 发布

阅读量2k

点赞数 1

分类专栏：前端文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_19754259/article/details/125410647

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML、JS、CSS关系

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现(外观控制)。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

HTML创建超链接

超链接必须使用标签：
<a> 标签的 href 属性用来定义链接的地址，target 属性用来定义新页面在浏览器中的打开方式

<m>
    超链接：<a href="https://www.baidu.com"target="_blank"> 百度</a>
</m>

href 可以指向一个网页、图片、压缩文件、可执行程序（.exe）（一些下载网站的链接就可以写成这种形式）等

target 属性值	说明
_self	默认，在现有窗口中打开新页面，原窗口将被覆盖。
_blank	在新窗口中打开新页面，原窗口将被保留。
_parent	在当前框架的上一层打开新页面。
_top	在顶层框架中打开新页面。

HTML标签转文本

<a&gt = <a>

字体为斜体：

<i>C++</i>

上标签：

<sup>①</sup>

设置字体：

<font size="22" color="#666">简介</font>

在整个页面添加一条横线：

<hr/>

字体加粗：

<b>编程</b>

设置字符显示格式：

 <meta charset="UTF-8">

插入图片：
<img> 标签中的 src 属性用来定义图像的路径，alt 属性用来定义图像的描述信息，当图像出现异常无法正常显示时就会显示 alt 中的信息。

<img src=".\11.png" alt="html图片" />

文本输入框：

<input type="text" placeholder="请输入内容" />

在一个 HTML 文档中 id 属性的值必须是唯一的。

<input type="text" id="username" />
<div id="content"> id 属性的值必须是唯一的</div>

class 属性与id 属性类似，可以为标签定义名称
可以为多个标签定义相同的 class 属性值
通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中

<div class="className1 className2 className3"></div>
<p class="content">class属性的值可以有多个</p>

title 属性用来对标签内容进行描述说明

<a href="http://c.biancheng.net/html/" title="HTML教程">鼠标在链接处悬停才能看到提示框</a>

style 属性可以在标签内部为标签定义 CSS 样式；
padding设置上下左右的内边距；
padding:25px 50px 75px 100px;表示上填充为25px、右填充为50px、下填充为75px、左填充为100px
border设置边框，dotted表示点状边框
text-align设置文本的对齐方式，center、left、right

<div style=" padding:25px 50px 75px 100px;border:2px dotted #c12e34;text-align:center;">利用style修改标签属性</div>

<h1>到<h6>六个级别的标题标签，<h1>标签的级别最高，<h6>标签的级别最低，级别越高字体越大

分段

<p>段落中的        内容</p>

段落标签会对文本中的空白符进行合并，将多个连续的空白符显示为一个空格的效果

段落中换行

标签属于自闭和标签

<br />

HTML文本格式化

HTML5 的规范，标题应该用<h1>~<h6>标签定义，被强调的文本应该用<em>标签定义，重要的文本应该用<strong>标签定义，被标记的或者高亮显示的文本应该用<mark>标签定义

标签	描述
<b>…</b>	加粗标签中的字体
<em>…</em>	强调标签中的内容，并使标签中的字体倾斜
<i>…</i>	定义标签中的字体为斜体
<small>…</small>	定义标签中的字体为小号字体
<strong>…</strong>	强调标签中的内容，并将字体加粗
<sub>…</sub>	定义下标文本
<sup>…</sup>	定义上标文本
<ins>…</ins>	定义文档的其余部分之外的插入文本
<del>…</del>	在文本内容上添加删除线
<code>…</code>	定义一段代码
<kbd>…</kbd>	用来表示文本是通过键盘输入的
<samp>…</samp>	定义程序的样本
<var>…</var>	定义变量
<pre>…</pre>	定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体
<abbr>…</abbr>	用来表示标签中的内容为缩写形式
<address>…</address>	用来定义文档作者的联系信息，被该标签包裹的文本通常会以斜体呈现，并在文本前面换行
<bdo>…</bdo>	定义标签中的文字方向
<blockquote>…</blockquote>	定义一段引用的文本，例如名人名言，文本会换行输出，并在左右两边进行缩进
<q>…</q>	定义一段短的引用，浏览器会将引用的内容使用双引号包裹起来
<cite>…</cite>	表示对某个文献的引用，例如书籍或杂志的名称，文本会以斜体显示
<dfn>…</dfn>	用来定义一个术语，标签中的文本会以斜体呈现

将图片设置为超链接

<a href="https://www.baidu.com" target="_blank"><img src="11.png" /></a>

插入图片

<img src="../images/html5.png" alt="HTML5 Logo">

图片在不同系统大小适配

直接在img标签中设置width和height的效果和利用css style设置width和height的效果相同;
浏览器将评估每个 <source> 标签，并在其中选择最合适的\ 标签，如果未找到匹配项，则使用\ 标签所定义的图片。另外，<img> 必须是 <picture> 标签的最后一个子元素。

<picture>
    <source media="(min-width: 1000px)" srcset="11.png">
    <source media="(max-width: 500px)" srcset="11.png">
    <img src="11.png" alt="C11Logo">
</picture>

图像映射

在图像中划分一些区域，并在这些区域中定义超链接；
<map> 标签的 name 属性对应的是 <img> 标签的 usemap 属性，<area>标签用于定义图片的可点击区域；
shape 属性来定义可点击区域的形状,rect（矩形）、circle（圆形）和 poly（多边形）；
coords 属性来定义形状所对应的坐标，所有坐标都是相对于图片的左上角来计算的。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML图片映射</title>
</head>
<body>
    <img src="11.png" usemap="#objects" alt="Logo">
    <map name="objects">
        <area shape="rect" coords="0,0,82,126" href="https://www.baidu.com" alt="HTML教程">
        <area shape="circle" coords="90,58,3" href="https://www.w3school.com.cn/sql/index.asp" alt="CSS教程">
        <area shape="circle" coords="124,58,8" href="http://www.biancheng.net/js/" alt="JavaScript教程">
    </map>
</body>
</html>

HTML表格

表格标签汇总:

标签	作用
<table>…</table>	表示表格，该标签包含表格的所有内容
<tr>…</tr>	table row 表示表格的每一行
<td>…</td>	table datacell 表示表格的一个单元格
<th>…</th>	table heading 表示表格的表头
<caption>…</caption>	为表格设置标题。<table> 标签中只能有一个 <caption> 标签
rowspan	表示向下合并单元格
colspan	表示向右合并单元格

更改表格边框为单边框:

<table border="1" style="border-collapse: collapse;">

合并两行单元格：

 <td rowspan="2">百度</td>

HTML表格实例：

<meta charset="UTF-8">
<table border="1" style="border-collapse: collapse;">
    <tr>
        <th>名称</th>
        <th>内容</th>
        <th>内容</th>
    </tr>
    <tr >
        <td rowspan="2">此处合并两行</td>
        <td colspan="2">此处合并两列</td>
    </tr>
    <tr>
        <td>新行</td>
        <td>新列</td>
    </tr>
</table>

HTML列表标签：

标签	作用
<ol>…</ol>	order list 的简称，表示有序列表，默认使用阿拉伯数字编号
<ul>…</ul>	unordered list 的简称，表示无序列表，默认使用●符号作为作为每一项的标记
<li>…</li>	list item 的简称，表示列表的每一项。<ol>或者<ul> 中有多少个 <li> 就表示有多少条内容
<dl>…</dl>	是definition list 的简称，表示定义列表。
<dd>…</dd>	definition description 的简称，表示带有一段缩进，是 <dl> 的子标签
<dt>…</dt>	definition term 的简称，表示顶格显示，是 <dl> 的子标签

列表样式：（需要在style中实现）

属性	说明
margin:0px auto;	将上下外边距设置为 0 像素，将左右外边距设置为自动。
margin-bottom:0px;	将下方外边距设置为 0 像素。
margin:auto auto 10px 0px;	将上方和右侧外边距设置为自动，将下方外边距设置为 10 像素，将左侧外边距设置为 0 像素。
padding-left:20px;	将左侧内边距设置为 20 像素。
list-style:upper-latin;	将列表项标记设置为大写拉丁字母。
list-style:square;	将列表项标记设置为实心方块。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改HTML列表的默认样式</title>
</head>
<body>
    <p style="margin:0px auto;">煮米饭的步骤：</p>
    <ol style="margin:0px auto; padding-left:20px; list-style:upper-latin;">
        <li>将水煮沸</li>
        <li>加入一勺米</li>
        <li>搅拌均匀</li>
        <li>继续煮10分钟</li>
    </ol>

    <p style="margin-bottom:0px;">早餐的种类：</p>
    <ul style="margin:0px auto; padding-left:20px; list-style:square;">
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>

    <dl style="margin-bottom:0px;">
        <dt><b>HTML</b></dt>
        <dd style="margin:auto auto 10px 0px;">HTML 是一种专门用来开发网页的标记语言。</dd>
        <dt><b>CSS</b></dt>
        <dd style="margin:auto auto 10px 0px;">CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页。</dd>
        <dt><b>JavaScript</b></dt>
        <dd style="margin:auto auto 10px 0px;">JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言。</dd>
    </dl>
</body>
</html>

HTML表单

表单可以接收用户输入的信息，然后将其发送到后端应用程序

表单定义格式：

<form action="URL" method="GET|POST">
    表单中的其它标签
</form>

属性说明：


action	指明将表单提交到哪个页面
method	表示使用哪个方式提交数据，包括 GET 和 POST 两种方式
GET	用户点击提交按钮后，提交的信息会被显示在页面的地址栏中。一般情况下，GET 提交方式中不建议包含密码，因为密码被提交到地址栏，不安全。
POST	如果表单包含密码这种敏感信息，建议使用 POST 方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全。

HTML 为<form>标签提供了一些专用的属性，如下表所示：

属性	可选值	描述
accept	MIME_type	HTML5 中不再支持，设置服务器要接收的文件类型
accept-charset	character_set	设置表单数据的字符集（默认为 HTML 文档字符集）
action	URL	设置要将表单提交到何处（默认为当前页面）
autocomplete	on、off	设置是否启用表单的自动填充功能（默认开启）
enctype	application/x-www-form-urlencoded、multipart/form-data、text/plain	设置在提交表单数据之前如何对数据进行编码（适用于 method=“post” 的情况）
method	get、post	设置使用哪种 HTTP 方法来提交表单数据（默认为 get）
name	text	设置表单的名称
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证
target	_blank、_self、_parent、_top	设置在何处打开 action 属性设定的链接（默认为 _self）

<form>中的标签：

控件/标签	描述
<input>	定义输入框
<textarea>	定义文本域（一个可以输入多行文本的控件）
<label>	为表单中的各个控件定义标题
<fieldset>	定义一组相关的表单元素，并使用边框包裹起来
<legend>	定义元素的标题
<select>	定义下拉列表
<optgroup>	定义选项组
	定义下拉列表中的选项
	定义一个可以点击的按钮
	指定一个预先定义的输入控件选项列表
	定义表单的密钥对生成器字段
	定义一个计算结果

实例：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>HTML form表单演示</title>
</head>
<body>
<form action="https://www.baidu.com" method="POST" accept-charset="UTF-8" autocomplete="off"
      enctype="application/x-www-form-urlencoded" name="hahahahaha" target="_blank">
    <fieldset>
        <legend> 这是外边框名字</legend>
    <label>在此输入文本：</label><textarea name="content"></textarea>
    <!-- 文本输入框控件 -->
    </br>
    <label>用户名： </label><input name="username" type="text"><br>
    <!-- 密码框控件 -->
    <label>密&emsp;码： </label><input name="password" type="password"><br>
    <!-- 下拉菜单控件 -->
    <label>性&emsp;别：</label>
    <select name="sex">
        <optgroup> sssss</optgroup>
        <option value="1">男</option>
        <option value="2">女</option>
        <option value="3">未知</option>
    </select>
    <br>
    <!-- 复选框控件 -->
    <label>爱&emsp;好：</label>
    <input type="checkbox" name="hobby" value="1">听音乐
    <input type="checkbox" name="hobby" value="2">看电影
    <input type="checkbox" name="hobby" value="3">打游戏
    <br>
    <!-- 单选按钮控件 -->
    <label>学&emsp;历：</label>
    <input type="radio" name="education" value="1">小学
    <input type="radio" name="education" value="2">中学
    <input type="radio" name="education" value="3">本科
    <input type="radio" name="education" value="4">硕士
    <input type="radio" name="education" value="5">博士
    <br>
    <!-- 按钮 -->
    <input type="submit" value="提 交">&emsp;&emsp;
    <input type="reset" value="重 置">
    </fieldset>
</form>
</body>
</html>