当前位置:   article > 正文

HTML汇总 - 各种功能项详解+示例_html网页合计

html网页合计

HTML、JS、CSS关系

  1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

  2. CSS样式是表现(外观控制)。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

  3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

HTML创建超链接

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

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

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

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

HTML标签转文本

<a> = <a>

字体为斜体:

<i>C++</i>
  • 1

上标签:

<sup></sup>
  • 1

设置字体:

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

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

<hr/>
  • 1

字体加粗

<b>编程</b>
  • 1

设置字符显示格式:

 <meta charset="UTF-8">
  • 1

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

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

文本输入框:

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

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

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

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

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

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

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

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>
  • 1

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

分段

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

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

段落中换行


标签属于自闭和标签

<br />
  • 1

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>
  • 1

插入图片

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

图片在不同系统大小适配

直接在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>
  • 1
  • 2
  • 3
  • 4
  • 5

图像映射

在图像中划分一些区域,并在这些区域中定义超链接;
<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

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;">
  • 1

合并两行单元格:

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

HTML表单

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

表单定义格式:

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

属性说明:

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

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

属性可选值描述
acceptMIME_typeHTML5 中不再支持,设置服务器要接收的文件类型
accept-charsetcharacter_set设置表单数据的字符集(默认为 HTML 文档字符集)
actionURL设置要将表单提交到何处(默认为当前页面)
autocompleteon、off设置是否启用表单的自动填充功能(默认开启)
enctypeapplication/x-www-form-urlencoded、multipart/form-data、text/plain设置在提交表单数据之前如何对数据进行编码(适用于 method=“post” 的情况)
methodget、post设置使用哪种 HTTP 方法来提交表单数据(默认为 get)
nametext设置表单的名称
novalidatenovalidate如果使用该属性,则提交表单时不进行验证
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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/110378
推荐阅读
相关标签
  

闽ICP备14008679号