h5常用点整理 class-4

最新推荐文章于 2021-09-08 09:38:34 发布
最新推荐文章于 2021-09-08 09:38:34 发布
阅读量188 收藏 1
点赞数
分类专栏： html 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40410916/article/details/105704126
版权

HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：

实例
<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTML 表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：

实例
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
</table>

HTML 表格标签
标签 描述

<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML 列表标签
标签 描述

<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述

HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素
内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，`<spaHTML 分组标签
标签 描述

<div>	定义了文档的区域，块级 (block-level)
<span>	用来组合文档中的行内元素， 内联元素(inline)n>` 元素可用于为部分文本设置样式属性。

HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:
<form>
input 元素
</form>

文本域（Text Fields）
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段
密码字段通过标签<input type="password"> 来定义:
注意:密码字段字符不会明文显示，而是以星号或圆点替代。

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

单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

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

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理:
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。

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

HTML 表单标签
New : HTML5新标签

标签 描述

<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

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

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

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

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

使用iframe来显示目标链接页面
iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性，如下实例:
实例

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

HTML 颜色
HTML 颜色由红色、绿色、蓝色混合而成。
颜色值
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
目前所有浏览器都支持以下颜色名。
141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。下表列出了所有颜色的值，包括十六进制值。
Remark 提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。
按颜色名排序
按十六进制的值排序
单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色

颜色名 HEX Color

AliceBlue 	#F0F8FF	 
AntiqueWhite 	#FAEBD7	 
Aqua 	#00FFFF	 
Aquamarine 	#7FFFD4	 
Azure 	#F0FFFF	 
Beige 	#F5F5DC	 
Bisque 	#FFE4C4	 
Black 	#000000	 
BlanchedAlmond 	#FFEBCD	 
Blue 	#0000FF	 
BlueViolet 	#8A2BE2	 
Brown 	#A52A2A	 
BurlyWood 	#DEB887	 
CadetBlue 	#5F9EA0	 
Chartreuse 	#7FFF00	 
Chocolate 	#D2691E	 
Coral 	#FF7F50	 
CornflowerBlue 	#6495ED	 
Cornsilk 	#FFF8DC	 
Crimson 	#DC143C	 
Cyan 	#00FFFF	 
DarkBlue 	#00008B	 
DarkCyan 	#008B8B	 
DarkGoldenRod 	#B8860B	 
DarkGray 	#A9A9A9	 
DarkGreen 	#006400	 
DarkKhaki 	#BDB76B	 
DarkMagenta 	#8B008B	 
DarkOliveGreen 	#556B2F	 
DarkOrange 	#FF8C00	 
DarkOrchid 	#9932CC	 
DarkRed 	#8B0000	 
DarkSalmon 	#E9967A	 
DarkSeaGreen 	#8FBC8F	 
DarkSlateBlue 	#483D8B	 
DarkSlateGray 	#2F4F4F	 
DarkTurquoise 	#00CED1	 
DarkViolet 	#9400D3	 
DeepPink 	#FF1493	 
DeepSkyBlue 	#00BFFF	 
DimGray 	#696969	 
DodgerBlue 	#1E90FF	 
FireBrick 	#B22222	 
FloralWhite 	#FFFAF0	 
ForestGreen 	#228B22	 
Fuchsia 	#FF00FF	 
Gainsboro 	#DCDCDC	 
GhostWhite 	#F8F8FF	 
Gold 	#FFD700	 
GoldenRod 	#DAA520	 
Gray 	#808080	 
Green 	#008000	 
GreenYellow 	#ADFF2F	 
HoneyDew 	#F0FFF0	 
HotPink 	#FF69B4	 
IndianRed  	#CD5C5C	 
Indigo  	#4B0082	 
Ivory 	#FFFFF0	 
Khaki 	#F0E68C	 
Lavender 	#E6E6FA	 
LavenderBlush 	#FFF0F5	 
LawnGreen 	#7CFC00	 
LemonChiffon 	#FFFACD	 
LightBlue 	#ADD8E6	 
LightCoral 	#F08080	 
LightCyan 	#E0FFFF	 
LightGoldenRodYellow 	#FAFAD2	 
LightGray 	#D3D3D3	 
LightGreen 	#90EE90	 
LightPink 	#FFB6C1	 
LightSalmon 	#FFA07A	 
LightSeaGreen 	#20B2AA	 
LightSkyBlue 	#87CEFA	 
LightSlateGray 	#778899	 
LightSteelBlue 	#B0C4DE	 
LightYellow 	#FFFFE0	 
Lime 	#00FF00	 
LimeGreen 	#32CD32	 
Linen 	#FAF0E6	 
Magenta 	#FF00FF	 
Maroon 	#800000	 
MediumAquaMarine 	#66CDAA	 
MediumBlue 	#0000CD	 
MediumOrchid 	#BA55D3	 
MediumPurple 	#9370DB	 
MediumSeaGreen 	#3CB371	 
MediumSlateBlue 	#7B68EE	 
MediumSpringGreen 	#00FA9A	 
MediumTurquoise 	#48D1CC	 
MediumVioletRed 	#C71585	 
MidnightBlue 	#191970	 
MintCream 	#F5FFFA	 
MistyRose 	#FFE4E1	 
Moccasin 	#FFE4B5	 
NavajoWhite 	#FFDEAD	 
Navy 	#000080	 
OldLace 	#FDF5E6	 
Olive 	#808000	 
OliveDrab 	#6B8E23	 
Orange 	#FFA500	 
OrangeRed 	#FF4500	 
Orchid 	#DA70D6	 
PaleGoldenRod 	#EEE8AA	 
PaleGreen 	#98FB98	 
PaleTurquoise 	#AFEEEE	 
PaleVioletRed 	#DB7093	 
PapayaWhip 	#FFEFD5	 
PeachPuff 	#FFDAB9	 
Peru 	#CD853F	 
Pink 	#FFC0CB	 
Plum 	#DDA0DD	 
PowderBlue 	#B0E0E6	 
Purple 	#800080	 
Red 	#FF0000	 
RosyBrown 	#BC8F8F	 
RoyalBlue 	#4169E1	 
SaddleBrown 	#8B4513	 
Salmon 	#FA8072	 
SandyBrown 	#F4A460	 
SeaGreen 	#2E8B57	 
SeaShell 	#FFF5EE	 
Sienna 	#A0522D	 
Silver 	#C0C0C0	 
SkyBlue 	#87CEEB	 
SlateBlue 	#6A5ACD	 
SlateGray 	#708090	 
Snow 	#FFFAFA	 
SpringGreen 	#00FF7F	 
SteelBlue 	#4682B4	 
Tan 	#D2B48C	 
Teal 	#008080	 
Thistle 	#D8BFD8	 
Tomato 	#FF6347	 
Turquoise 	#40E0D0	 
Violet 	#EE82EE	 
Wheat 	#F5DEB3	 
White 	#FFFFFF	 
WhiteSmoke 	#F5F5F5	 
Yellow 	#FFFF00	 
YellowGreen 	#9ACD32
金lin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 4 Flex（弹性）布局
zai329979994639的博客
07-01 382
Bootstrap 4 Flex（弹性）布局 <div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3<
bootstrap4简写的class以m-开头和p-开头的类
Gyd＆01
11-22 758
影响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。 bootstrap4提供了简写的class名，名称分别以m-开头和p-开头的类。 一、影响距离大小的值有 0,1,2,3,4,5,auto (1)、...
css – Bootstrap 4中的class =“mb-0”是什么意思？
热门推荐
dev_zyx的博客
04-21 2万+
<p class="mb-0">Lorem ipsum</p> 问：什么是mb-0？ 最佳答案: Bootstrap具有广泛的响应边距和填充实用程序类。它们适用于所有断点： xs(< = 576px)，sm(> = 576px)，md(> = 768px)，lg(> = 992px)或xl(> = 1200px)) 这些类的格式如下： {p...
【H5开发】01从一个简单页面带你体验H5开发 ~ 从静态页面到调接口手把手教学整个页面实现过程
Sabrina_cc的博客
08-23 6112
听云与明月窃语， 首先需要知道，前端开发必须的一些工具页面： （1）原型设计稿（用于了解系统功能）---> 产品经理 （2）UI设计稿（用于进行严格的页面布局和样式开发）--->UI设计 （3）接口文档（前后端联调，字段定义的依据）---> 后端开发 （4）测试文档（修改指给的bug）---> 测试 1. 首先来看看我们的目标页面和UI设计稿 大概了解了页面功能：列表显示数据！ 再详细一点：加载页面后，根据后端返回的数据逐条渲染，显示数据 那让我...
H5的重要知识技术点
wanggang_512的博客
12-14 5510
H5的重要知识技术点 SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）和HTML的之间有什么关系？ SGML（标准通用标记语言）是一个标准，告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言，HTML是被用SGML描述的标记语言。   因此利用SGML创建了HTML参照和必须共同遵守的DTD，你会经常在HTML页面的头部发现“DOCTYPE...
H5使用iscroll-4模拟手机app下拉刷新功能实现demo
03-18
下面我们将深入探讨如何使用`iscroll-4`在`H5`页面中实现这一功能。 `iscroll-4`是由Matteo Spinelli开发的一个轻量级JavaScript库，专门用于处理触摸设备上的滚动事件。它提供了平滑的滚动效果，支持多种手势，...
vue-h5-template
最新发布
03-28
cd vue-h5-template yarn install yarn dev 目录 √ vite √ 配置多环境变量 √ viewport 适配方案 √ 多 UI 组件库供选择 √ Pinia 状态管理 √ vue-router 4 √ axios 封装及接口管理 √ vite.config.ts 基础...
h5app-corp-quickstart_h5_
10-02
《H5小程序脚手架：h5app-corp-quickstart_h5_的全面解析》 在当前数字化时代，H5技术已经成为了构建轻量级、跨平台应用的重要工具，尤其在移动端，H5小程序因其便捷性和高效性备受开发者青睐。今天我们将深入探讨...
h5py-2.10.0-cp36-cp36m-linux-aarch64.whl
01-31
h5py-2.10.0-cp36-cp36m-linux_aarch64.whl
h5视频播放器，h5-plays-rtmp-video-stream
06-01
"h5-plays-rtmp-video-stream"这个项目显然是针对H5视频播放器的一种实现，特别强调了对RTMP视频流的支持。以下将详细介绍相关的知识点。 首先，我们要理解HTML5视频。HTML5是Web开发的最新标准，其中包含了内建的...
手机网页H5页面footer页脚显示在底部css代码
jeesr的博客
06-19 1570
手机网页H5页面的footer页脚，当页面很短撑不满手机屏幕时可以显示在屏幕底部，当页面超出手机屏幕长度时，显示在页面内容的后面，不会遮挡内容。 css代码： html{height:100%;}/*min-height不行，不知道为啥*/ body{min-height:100%;padding-bottom:50px;position: relative;box-sizing: border-box } footer{text-align: center;color: #777;position: ab
Html5--(span标签)
yangyingjian123的博客
01-14 7931
⭐span 是一个文字标签等于小括号 span的添加,不会对文字造成任何的变化，目的作用在于,将一段文字中的某一个或者几个文字进行样式的更改，可以用span尽心包裹，然后设置span格式 代码实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi.
h5文字垂直居中_HTML span标签如何居中和右对齐？这里有HTML span标签的样式解析...
weixin_39636164的博客
11-10 1445
本篇文章主要的讲述的是在HTML中的span标签的文本是要如何居中和右对齐的，这里还有各种实例说明，下面就让我们一起来看看吧程序猿的生活：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）​zhuanlan.zhihu.com首先我们来看看HTML span属性如何居中的？其实想要这个span文本居中，有不少办法，这里提供了一种比较容易做的办法就是在代码中插...
html5class命名规范,CSS类class及id的规范化命名
weixin_33269198的博客
06-08 642
Web启示人员可以颠末确立CSS类class及id称说并使用这些称谓来对div以及此外的名堂页面元素发展标识。对开荒职员来讲，在命名重新界说XHTML标识表记标帜(tags)的CSS sele首席技术官rs时，必需保证其与预界说的符号正确立室，但就类以及id抉择器称号而言，则仁者见仁，智者见智。然而为所欲为的为这些类以及id定名则并非个好的习气。在涉猎了由Andy Clarke(of Stuff ...
HTML为字段添加颜色,创建HTML输入字段，它需要一个rgb颜色值，它改变了javascript中的textarea背景...
weixin_33208391的博客
06-01 214
我试过寻找几个小时来解决我面对的这个问题，我想我明白这应该如何工作的原则，但是我似乎无法找到正确的方式来做到这一点，无论我到哪里寻找努力。创建HTML输入字段，它需要一个rgb颜色值，它改变了javascript中的textarea背景我设计一个在线文字处理器(类似于Microsoft Word)中工作，我添加了所有我需要的只是我想去的地方的RGB颜色值将被输入的输入字段和分配的textarea背...
web前端兼容性问题
qq_40410916的博客
07-01 1393
一直以来，Web前端领域最大的问题就是兼容性问题 前端兼容性问题分三类： 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 浏览器兼容性问题 IE6、7、8不支持HTML5、CSS3、SVG标准，可被判定为“极难兼容” IE9不支持Flex、Web Socket、WebGL，可被判定为“较难兼容” IE10部分支持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容” IE11部分支持Flex、WebGL，可被判定为“较易兼容” IE6、7、8、9可视为“老式浏览器” IE10、11可
CSS3动画实现高亮光弧效果，循环闪动效果
qq_40410916的博客
09-08 1374
主要运用css动画进行循环播放，修改css渐变效果元素 <!Doctype html> <html> <head> <meta name="viewport" content="width=device-width,iitial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta http-equiv="Content-Type" content
input输入框 禁止插入（粘贴）文字
qq_40410916的博客
08-02 1247
禁止插入文字 你可能不希望用户在输入字段中粘贴从其他地方复制的文本（仔细考虑是否真的要这样做）。通过跟踪事件paste并调用其方法preventDefault()就很容易完成了。 <input type="text"></input> <script> const input = document.querySelector('input'); input.addEventListener("paste", function(e){ e.preventD
h5常用点整理 class-2
qq_40410916的博客
04-22 571
HTML 标题 HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的. <h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3> HTML 段落 HTML 段落是通过标签 <p> 来定义的. <p>这是一个段落。&l...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值