把收藏力拉满，前端 50 个优质 Web 在线资源

. Browser Default Styles

可以在 Browser Default Styles 中查询 HTML 元素在每个浏览器下的默认样式；

2. Clippy

可以在 Clippy 为你的图片作剪辑，并且生成对应的 css clip-path 属性；

3. CSS keyframes

CSS keyframes 可以帮助你创建 CSS 帧动画；

4. Neumorphism.io

Neumorphism.io 帮你创建新拟态的 UI 风格；

5. CSS Cursors

CSS Cursors 让你的光标足够酷；

6. CSS Grid Generator

CSS Grid Generator，作用如其名，帮助创建 CSS Gird；

7. Placeholder Image Generator

Placeholder Image Generator 帮助创建图片未加载出来的占位信息；

8. Htmldom

Htmldom：纯原生 JS 代码合集，帮助操作 DOM；

9. HTML5 head elements

HTML5 head elements 是 head 标签设置最强指南，真滴强；

10. Input Type Sandbox

设置并校验 Input 框输入，Input Type Sandbox 各种类型都有，专精尖；

11. Meta Tags

Meta Tags 帮你自动导出流行社交网络（如Facebook、Twitter、Google…）的 Meta Tags 以供使用；

12. Can I Include

Can I Include 帮你确定 HTML 元素之间是否可以嵌套；

13. Key codes

Key codes 帮你轻松找到键盘按键所对应的 keycodes 来设置事件监听；

14. Color contrast checker

Color contrast checker 帮你检查网页设计中两种颜色之间的对比度；

15. Git Command Explorer

Git Command Explorer 帮你充分了解和学习 Git 命令；

16. Make thumbnails

Make thumbnails 帮你轻松创建图像缩略图；

17. Can I Email

Can I Email 帮你查看电子邮件中可支持哪些 HTML 和 CSS 属性；

18. Trianglify

Trianglify 帮你的网站创作出美丽的背景；

19. CSS Layout

CSS Layout 收集了流行的 CSS 布局，帮你轻松选择合适的网站设计；

20. FANCY-BORDER-RADIUS

FANCY-BORDER-RADIUS 帮你通过使用 CSS BORDER-RADIUS 属性设置形状来设计对象；

21. 1loc

1loc 是一个聚合解决方案网站，帮你解决 JS 编程中经常遇到的各类问题；

22. Color Namer

Color Namer 让每一个颜色都有一个独特的名字；

23. BrowserFrame

BrowserFrame 给你的网站添加一个浏览器背景；

24. CSS Scan

CSS Scan 收集了超多 box-shadow 效果网站；

25. Favicon

Favicon 帮你创建免费的 FavIcon；

26. CSS Filter

CSS Filter 将 CSS Filter 玩出花来；

27. Simple CSS Media Query Generator

Simple CSS Media Query Generator 帮你轻松搞定媒体查询；

28. Mix Font

Mix Font 通过一种有趣且简单的方式来发现、创建新字体；

29. Omatsuri

Omatsuri 设计师工具集合网站，例如使用CSS创建三角形、创建网站光标显示样式、HTML符号等；

30. Underline Generator

Underline Generator 帮你创建美丽的下划线；

31. Checkboxes & Radios CSS Generator

Checkboxes & Radios CSS Generator 创建 Checkboxes & Radios；

32. Convert Images to Base64

Convert Images to Base64 将图片转为 base64 格式；

33. Responsively

Responsively 帮你查看多种设备下的网站效果；

34. UI Design Daily

UI Design Daily：UI 设计聚合网；

35. Devdocs

Devdocs：开发文档聚合网；

36. Shortcode

Shortcode 帮你用简短的代码解决编程中的常见问题；

37. Public-apis

Public-apis 为你的网站提供免费的 API，接入免费数据；

38. CSS Grid Layout Generator

CSS Grid Layout Generator 帮你用CSS快速构建复杂的网格系统；

39. CSS Duotone Generator

CSS Duotone Generator 帮你设置图像的CSS属性，例如图像的距离、不透明度、模糊、颜色等；

40. CSS3 Generator

CSS3 Generator 帮你快速创建复杂的 CSS3 属性，例如长方体阴影、渐变、过渡效果等。此外，对于每个属性，还提供了不同浏览器支持的详细信息；

41. Box Model

Box Model 帮你更直观的查web 对象填充设置、边距和边框属性等；

42. Animated CSS Background Generator

Animated CSS Background Generator 帮你借用颜色创建动画背景。此外，还提供一些其它属性配置，如计数、大小、平均速度等；

43. Web Code Tools

Web Code Tools ，通过输入属性值来设置CSS中的公共属性，并能直接预览效果；

44. Enjoy CSS

Enjoy CSS 帮你设置样式，设置即预览，享受它吧~

45. CSS Portal

CSS Portal，是一个 CSS 各类生成器集合站点；

46. CSS3 Generator OverDesign

CSS3 Generator OverDesign 帮你设置web设计中的常用属性；

47. HTML Table Generator

HTML Table Generator 帮你轻松设计网站表格；

48. Making CSS

Making CSS 是一个工具聚合网站，帮你轻松实现 CSS；

49. CSS Masonry Generator

CSS Masonry Generator 帮你实现可配置的图片瀑布流；

50. Generator of CSS background patterns

Generator of CSS background patterns 帮你轻松构建不同类型的网站背景；

小结

OK，以上便是本篇分享；请把收藏力拉满，拿走不谢！！

欢迎点赞+转发+关注！大家的支持是我分享最大的动力！！！

TML基础简介
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML是一个网页文件的拓展名，和txt、jpg、mp3一样，是一个文件格。.html文件就是网页文件。

2.html 的格式化标签

<!DOCTYPE>
<html>
--html是一个双标签开始标签
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>
</title> --可能是标题
</head>
<body>--用来存放页面中的内容
</body>
</html> --结束标签

DOCTYPE----文档类型声明
meta标签----设置页面编码格式，关键字，以及页面的描述
<title></title>--------->标题部分
<head></head>------>页面的头部分
<body></body>------>页面的主体部分

2.内容标签

这其中<hr> <br> 是单标签
<div></div> <span></span> 无意义区块容器标签
eg:
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

HTML标记—注释标记

<!--注释语句-->

标题：
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

段落：
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 链接

<a href="http://www.runoob.com">这是一个链接</a>
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。
URL - 统一资源定位器
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

这里需要注意:使用超链接做下载,并不是超链接完成的下载功能,而是通过超链接跳转到了一个有下载功能的页面。

常见的 URL Scheme

HTML 图像

alt 属性用来为图像定义一串预备的可替换的文本。

3.HTML属性

属性实例:

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：<a href="http://www.runoob.com">这是一个链接</a>

4.HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <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>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

5.HTML 表单

表单是一个包含表单元素的区域。

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

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定
当用户要在表单中键入字母、数字等内容时，就会用到文本域
密码字段
密码字段通过标签<input type="password"> 来定义:
<form>
FirstName: <input type="text" name="firstname"><br>
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>
单选有时需要设置默认选项,需要设置checked属性:
<input type="radio" name="sex" checked="checked"/>男

复选框（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>
多选框一般不需要设置默认选项,如果要设置,也是设置checked属性

提交按钮(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>
这里需要注意的是: Submit必须要和form一起使用才能达到效果
action 设置表单提交参数路径
method 当前请求方式(同iOS开发网络请求一样,get/post)

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

图片按钮(使用不多)

Select下拉框

selected默认选项
<select>
<option selected="selected" >选项一</option>
<option>选项二</option>
</select>

Textarea文本域

<textarea></textarea>

6.HTML 列表

HTML 支持有序、无序和定义列表:

无序列表使用 <ul> 标签
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项项使用数字来标记。
<ol>
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
去除点去除下划线
a {
text-decoration: none;
}
ul {
list-style: none;
}

7.内联样式- 在HTML元素中使用"style" 属性

HTML样式实例 - 背景颜色
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

HTML 样式实例 - 文本对齐方式

<h1 style="text-align:center;">居中对齐的标题</h1>

而关于其他CSS内容,这里就简单介绍一下:

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 样式标签

最后提一下什么是Web安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

文为Django技术学习笔记，相关教材为清华大学出版社出版的《Django开发宝典》。

这一节介绍Django开发的前端技术，主要为HTML相关知识点补记。

1.1 初识HTMl

1.1.1 HTML的定义

HTML是用来描述网页的一种语言。

HTML是指超文本标记语言（Hyper Text Markup Language）。
HTML不是一种编程语言，而是一种标记语言（Markup Language）。
标记语言是一套标记标签（Markup Tag），HTML使用标记标签来描述网页。

1.1.2 HTML标签

HTML标记标签通常被称为HTML标签（HTML Tag）。

HTML标签是由尖括号括起来的关键词，如<html>。
HTML标签通常是承兑出现的，如<b>和</b>。
标签对中的第一个标签是开始标签，第二个标签是结束标签；开始标签和接数标签也被称为开放标签和闭合标签。

1.1.3 HTML元素

HTML元素是指开始标签（Start Tag）到接数标签（End Tag）的所有代码。

1.2 走进HTML

1.2.1 HTML编辑器

可以是用专业编辑器来编辑，推荐使用文本编辑器来学习HTML。

1.2.2 HTML标题

HTML标题（Heading）是通过<h1>~<h6>等标签进行定义的。例如：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h2>This is a heading</h2>

1.2.3 HTML段落

HTML段落是通过<p>标签进行定义的。例如：

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

1.2.4 HTML链接

HTML使用超级链接与网络上的另一个文档相连。几乎在任何一个网页中都能找到超级链接，单击超级链接可以从一张页面跳转到另一张页面。

通过使用<a>标签可以在HTML中创建超级链接，具体有一下两种使用/标签的方式。

1. 通过使用href属性创建指向另一个文档的链接。

1. 通过使用name属性创建文档内的标签。

使用target属性可以定义被超级链接的文档要在何处显示。下面的这行会在新窗口打开文档：

<a href="http://www.baidu.com/" target="_blank">百度一下，你就知道</a>

1.2.5 HTML图像

要在页面上显示图像需要使用（src），src是指"source"。源属性的值是图像的URL地址。定义图像的语法是：

< img src="url" /> //URL指存储图像的位置

1.2.6 HTML表格

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td是指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

<table border="1"> 
 <tr> 
 <td>row 1,cell 1</td> 
 <td>row 1,cell 2</td> 
 </tr> 
 <tr> 
 <td>row 2,cell 1</td> 
 <td>row 2,cell 2</td>
 </tr>
</table>

1.2.7 HTML列表

HTML支持有序列表、无序列表和自定义列表。

1）有序列表

无序列表是一个项目的列表，此列表项目使用粗体原点（典型的小黑圆圈）进行标记。无序列表始于<ul>标签，每个列表项始于<li>标签。

<ul> 
<li>Coffee</li>
 <li>Milk</li>
</ul>

2）无序列表

有序列表是一个项目的列表，此列表项目使用数字进行标记。有序列表始于<ol>标签，每个列表始于<li>标签。

<ol> 
<li>Coffee</li> 
<li>Milk</li>
</ol>

3）自定义列表

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

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd> 
<dt>Milk</dt> 
<dd>White cold drink</dd>
</dl>

1.2.8 HTML表单和输入

1）表单

HTML表单用于收集不同类型的用户输入信息。表单使用表单标签（<form>）定义。

<form>... input 元素...</form>

2）输入

多数情况下被用到的表单标签是输入标签（<input>），输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下。

（1）文本域（Text Fields）。当用户要在表单中输入字母、数字等内容时，就会用到文本域。

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

（2）单选按钮（Radio Buttons）。当用户需要从若干给定的选择中选取其一时，就会用到单选按钮。主义，只能从中选取其一。

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

（3）复选框（Checkboxes）。当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>
<input type="checkbox" name="bike" /> I have a bike
<input type="checkbox" name="car" /> I hava a car
</form>

3）表单的动作属性（Action）和确认按钮

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

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

1.2.9 HTML背景

<body>拥有两个配置背景的标签，背景可以是颜色或者图像。

1）背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色，属性值可以是十六进制数、RGB值或颜色名。

<body bgcolor="#00000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

2）背景（Background）

背景属性将背景设置为图像，属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body backgroud="clouds.gif">
<body backgroud="http://www.w3school.com.cn/clouds.gif">

1.2.10 HTML样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下3种方式来插入样式表。

1）外部样式表

当样式需要被应用到很多页面时，外部样式表将是理想的选择。使用外部样式表，用户就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2）内部样式表

当单个文件需要特别样式表时，就可以使用内部样式表。用户可以在head部分通过<style>标签定义内部样式表。

<head> 
<style type="text/css">
body {backgroud-color:red} 
p {margin-left:20px} 
</style>
</head>

3）内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。以下示例显示出如何改变段落的颜色和左外边距。

在线咨询

上一篇：简直不要太硬了！一文带你彻底理解文件系统
下一篇：你还在用静态线性罗列知识点复习？《滑轮》思维导图来了

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商