HTML5 语义元素
语义= 意义
语义元素 = 有意义的元素
什么是语义元素?
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义 元素实例: <div> 和 <span> – 无需考虑内容.
语义元素实例: <form>, <table>, and <img> – 清楚的定义了它的内容.
浏览器支持
Intern……继续阅读 »
3年前 (2022-05-26) 212浏览 0评论
0个赞
function clickMeEvent(obj){if(obj.innerHTML==”Goodbye”){obj.style.display=”none”;}else if(obj.innerHTML==”Thank You”){obj.innerHTML=”Goodbye”;}else if(obj.inne……继续阅读 »
3年前 (2022-05-25) 117浏览 0评论
0个赞
HTML5 应用程序缓存
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存(Application Cache)?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
离线浏览 – 用户可在应用离线时使用它们
速度 – 已缓存资源……继续阅读 »
3年前 (2022-05-25) 191浏览 0评论
0个赞
Bootstrap4 多媒体对象
Bootstrap 提供了很好的方式来处理多媒体对象(图片或视频)和内容的布局。应用场景有博客评论、微博等:
基础多媒体对象
要创建一个多媒体对象,可以在容器元素上添加 .media 类,然后将多媒体内容放到子容器上,子容器需要添加 .media-body 类,然后添加外边距,内边距等效果:
实例
<div class="media border p-3"……继续阅读 »
3年前 (2022-05-15) 246浏览 0评论
0个赞
Bootstrap4 按钮
Bootstrap 4 提供了不同样式的按钮。
实例
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button&……继续阅读 »
3年前 (2022-05-15) 124浏览 0评论
0个赞
Bootstrap4 信息提示框
Bootstrap 4 可以很容易实现信息提示框。
提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:
实例
<div clas……继续阅读 »
3年前 (2022-05-15) 126浏览 0评论
0个赞
Bootstrap4 颜色
Bootstrap 4 提供了一些有代表意义的颜色类:.text-muted,
.text-primary, .text-success, .text-info,
.text-warning, .text-danger, .text-secondary, .text-white,
.text-dark and .text-light:
实例
<div class="con……继续阅读 »
3年前 (2022-05-15) 83浏览 0评论
0个赞
现在您已经学习了 JavaScript, 接下来该学习什么呢?
JavaScript 总结
本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强。
你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本。
你也学到了如何创建和使用对象,以及如何使用 JavaScript 的内置对象。
如需更多关于 JavaScript 的信息和知识,请参阅……继续阅读 »
3年前 (2022-05-15) 199浏览 0评论
0个赞
JavaScript 对象 实例
使用内置的JavaScript对象实例。
String(字符串)对象
返回字符串的长度
为字符串添加样式
返回字符串中指定文本首次出现的位置 – indexOf()方法
查找字符串中特定的字符,若找到,则返回该字符 – match() 方法
替换字符串中的字符 – replace()
更多的字符串对象的例子,在我们的JavaScript St……继续阅读 »
3年前 (2022-05-15) 223浏览 0评论
0个赞
JavaScript Window Navigator
window.navigator 对象包含有关访问者浏览器的信息。
Window Navigator
window.navigator 对象在编写时可不使用 window 这个前缀。
实例
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "&……继续阅读 »
3年前 (2022-05-15) 218浏览 0评论
0个赞
JavaScript 保留关键字
在 JavaScript 中,一些标识符是保留关键字,不能用作变量名或函数名。
JavaScript 标准
所有的现代浏览器完全支持 ECMAScript 3(ES3,JavaScript 的第三版,从 1999 年开始)。
ECMAScript 4(ES4)未通过。
ECMAScript 5(ES5,2009 年发布),是 JavaScript 最新的官方版本。
随着时间的推移……继续阅读 »
3年前 (2022-05-15) 194浏览 0评论
0个赞
JavaScript 表单验证
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用 JavaScript 来验证其正确性:
验证表单数据是否为空?
验证输入是否是一个正确的email地址?
验证日期是否输入正确?
验证表单输入内容是否为数字型?
必填(或必选)项目
下面的函数用来检查用户是否已填写表单中的必填(或……继续阅读 »
3年前 (2022-05-15) 303浏览 0评论
0个赞
JavaScript 字符串
JavaScript 字符串用于存储和处理文本。
JavaScript 字符串
字符串可以存储一系列字符,如 “John Doe”。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号:
实例
var
carname = “Volvo XC60”;
var
carname = ‘Volvo XC60’……继续阅读 »
3年前 (2022-05-15) 269浏览 0评论
0个赞
Font Awesome 参考手册
下表显示了所有的 Font Awesome 图标:
图标
描述
unicode
实例
fa fa-500px
尝试一下
fa fa-address-book
尝试一下
fa fa-address-book-o
尝试一下
fa fa-address-card
尝试一下
fa……继续阅读 »
3年前 (2022-05-15) 92浏览 0评论
0个赞
Font Awesome 加载中图标
下表显示了所有的 Font Awesome 加载中图标:
图标
描述
实例
fa fa-circle-o-notch
尝试一下
fa fa-cog
尝试一下
fa fa-gear
尝试一下
fa fa-refresh
尝试一下
fa fa-spinner
尝试一下
……继续阅读 »
3年前 (2022-05-15) 157浏览 0评论
0个赞
Font Awesome 表单图标
下表显示了所有的 Font Awesome 表单图标:
图标
描述
实例
fa fa-check-square
尝试一下
fa fa-check-square-o
尝试一下
fa fa-circle
尝试一下
fa fa-circle-o
尝试一下
fa fa-dot-circle-o
尝试一下
fa fa-minus-square
尝……继续阅读 »
3年前 (2022-05-15) 99浏览 0评论
0个赞
Font Awesome 图标
Font Awesome 是一套绝佳的图标字体库和CSS框架。
Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
要使用Font Awesome图标,请在HTML页面的 部分中添加以下行:
1、国内推荐 CDN:
<link rel="stylesheet" href="https://……继续阅读 »
3年前 (2022-05-15) 133浏览 0评论
0个赞
Bootstrap 多媒体对象(Media Object)
本章我们将讲解 Bootstrap 中的多媒体对象(Media Object),如:图像、视频、音频等。
多媒体对象的样式可用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
接下来我们先来看个实例:
实例
<!– 左对齐 –&g……继续阅读 »
3年前 (2022-05-15) 73浏览 0评论
0个赞
Bootstrap 导航栏
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。
默认的导航栏
创建一个默认的导航栏的步骤如下:
向 <nav> 标签添加 class .nav……继续阅读 »
3年前 (2022-05-15) 71浏览 0评论
0个赞
Bootstrap 教程
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
本教程将向您讲解 Bootstrap 框架的基础,通过学习这些内容,您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Boo……继续阅读 »
3年前 (2022-05-15) 99浏览 0评论
0个赞
Bootstrap5 按钮组
Bootstrap 5 中允许我们将按钮放在同一行上。
可以在 <div> 元素上添加 .btn-group 类来创建按钮组。
实例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple&……继续阅读 »
3年前 (2022-05-15) 111浏览 0评论
0个赞
Bootstrap5 容器
在上一章节中我们了解到 Bootstrap 需要一个容器元素来包裹网站的内容。
我们可以使用以下两个容器类:
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
固定宽度
.container 类用于创建固定宽度的响应式页面。
注意:宽度 (max-width……继续阅读 »
3年前 (2022-05-15) 168浏览 0评论
0个赞
CSS 提示工具(Tooltip)
本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。
提示工具在鼠标移动到指定元素后触发,先看以下四个实例:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted #ccc;
zcursor: help;
color: #……继续阅读 »
3年前 (2022-05-15) 174浏览 0评论
0个赞
CSS Position(定位)
position 属性指定了元素的定位类型。
position 属性的五个值:
static
relative
fixed
absolute
sticky
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。
static 定位
HTML 元素的默认值,即没有定位,遵循正常的文档流……继续阅读 »
3年前 (2022-05-15) 239浏览 0评论
0个赞
function removeElement(numId)
{
document.getElementById(numId).style.display=”none”;
}
.imgbox
{
float:left;
text-align:center;
width:120px;
height:120px;
border:1px solid gray;
margin:4px;
margin-b……继续阅读 »
3年前 (2022-05-15) 219浏览 0评论
0个赞
CSS 分组 和 嵌套 选择器
分组选择器
在样式表中有很多具有相同样式的元素。
h1 {
color:green;
}
h2 {
color:green;
}
p {
color:green;
}
为了尽量减少代码,你可以使用分组选择器。
每个选择器用逗号分隔。
在下面的例子中,我们对以上代码使用分组选择器:
实例
h1,h2,p
{
color:green;
}
嵌套选择器
……继续阅读 »
3年前 (2022-05-15) 209浏览 0评论
0个赞
CSS 轮廓(outline)
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。
轮廓(outline)实例
在元素周围画线
本例演示使用outline属性在元素周围画一条线。
设置轮廓的样式
本例演示如何设置轮廓的样式。
设置轮廓的颜色
本例演示如何设置轮廓的颜色。
设置轮廓的宽度
本例演示如何设置轮……继续阅读 »
3年前 (2022-05-15) 279浏览 0评论
0个赞
CSS margin(外边距)
CSS margin(外边距)属性定义元素周围的空间。
margin
margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。
margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。
可能的值
值
说明
auto
设置浏览器边距。这样做的结果会依赖于浏览器
length
定义一个固定的margin(使用像素,p……继续阅读 »
3年前 (2022-05-15) 125浏览 0评论
0个赞
CSS 边框
CSS 边框属性
CSS边框属性允许你指定一个元素边框的样式和颜色。
在四边都有边框
红色底部边框
圆角边框
左侧边框带宽度,颜色为蓝色
边框样式
边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式
border-style 值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid:……继续阅读 »
3年前 (2022-05-15) 137浏览 0评论
0个赞
CSS 文本格式
文本格式
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between c……继续阅读 »
3年前 (2022-05-15) 246浏览 0评论
0个赞