因为一个url在每个浏览器都有最大长度的限制,比如IE:对URL的最大限制为2083个字符、Firefox:对URL的长度限制为:65536个字符、Safari:URL最大长度限制为80000个字符、Opera:URL最大长度限制为190000个字符、Google(chrome):URL最大长度限制为8182个字符,不能超过这个最大长度,不然app会报错。
URL 的长度有最大限制:在传递参数的时候,需要保证 URL 的长度不能超过最大限制。考虑编码:在传递参数的时候,需要考虑编码的问题,例如在传递中文时需要对参数进行URL编码。单向:只适合 App 向 H5 传值,不能定制。App 只能将 H5 所有可能需要用到的参数传递过去,不能按需传递。<hr>在chrome中默认是左对齐。在IE中默认是居中对齐,要想左对齐css中用text-align:left。
<hr style="text-align:left;"> 或 <hr align="left">
<hr>的颜色设置
<hr style="border:0;background-color:#ff0000;height:1px;">
如果不加border:0;的话,虽然颜色改变了,但是会显示一条黑色的边框。如果不加height:1px;的话,在chrome会显示不出来。H1~H6标签
例1 Hr标签的格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hr标签</title>
</head>
<body>
<h1>这是标题 1</h1>
<hr/>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
格式:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
作用:
H标签是用来给文本添加标题语义的,而不是用来修改文本的样式的。
H标签一共有6个,从H1~H6,最多就只能到6,超过6则无效。
被H系列标签包裹内容会独占一行。
在H系列的标签中H1最大,H6最小。
企业开发中只能有 H1 一个标签。
快捷键
end键盘 跳到 最后 一行
如何让光标在多行闪烁
按住alt键,再按住鼠标左键不放,然后再拖动鼠标即可。
p标签
作用:
告诉浏览器哪些文字是一个段落。
格式:
<p></p>
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>H1和H6标签</title>
</head>
<body>
<h1>这是标题 1</h1>
<hr/>
<h2>我是中国人</h2>
<h3>我是中国人</h3>
<h4>我是中国人</h4>
<h5>我是中国人</h5>
<h6>我是中国人</h6>
<hr/>
<p>我是中国人</p>
</body>
</html>
注意点:
在浏览器中,会单独占一行。
hr标签的作用实现表单自定义验证消息,实际上很简单。大体思路为:
1、首先我们要设置表单的验证规则
2、然后根据表单的验证规则定义要显示验证消息,
3、最后通过JavaScript 和CSS相结合先将所有预定义的验证消息隐藏掉,然后再根据表单中的输入是否符合验证规则来控制验证消息的显隐状态。
下面我们就来通过一个具体的示例进行讲解,你可以将这个示例直接放在浏览器中运行查看效果,但是要注意代码中引用了第三方类库jQuery,运行时你要自己设置一下:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Forms: 验证提示</title>
// 设置一些必要的样式,如验证消息的文字样式和控制验证消息显隐的样式
<style>
input:valid {
background: #fff;
}
input:invalid {
background: #fcc;
color: #333;
}
validation-messages {
margin-bottom:15px;
}
validation-messages span {
font-size:08em;
background-color:#eee;
padding:6px;
border:1px solid #ccc;
border-radius:10px;
color:#666;
}
//所有class属性为hide的元素都会被隐藏
hide {
display:none;
}
</style>
</head>
<body>
<article>
<h1>Forms<span> - 验证提示</span></h1>
</article>
<div id="result-stub" class="well hidden">
<form id="change-email-form" name="change-email-form">
<fieldset>
<h4>修改邮箱地址</h4>
//设置表单应该遵循的验证规则。
//pattern 属性:规定用于验证输入字段的模式。
//maxlength 属性:规定输入字段的最大长度,以字符个数计。
//required属性:规定该input元素为必须的元素。
<label>用户名:</label>
<input type="text" name="username"
id="username" pattern="[a-zA-Z ]{5,}"
maxlength="30" required />
//设置表单的验证消息,并结合class属性样式将其隐藏起来
<div>
//这里的data-rule的属性值是HTML5表单中内置的验证规则中的一种
<span data-rule="valueMissing"
class="hide">用户名不能为空</span>
<span data-rule="patternMismatch"
class="hide">必须是字母字符(长度应为5~30个字符)</span>
</div>
<label>邮箱地址:</label>
//设置表单应该遵循的验证规则。
<input type="email" name="email" id="email"
title="Email address is required" required />
//设置表单的验证消息,并结合class属性样式将其隐藏起来
<div>
<span data-rule="valueMissing">
邮箱地址不能为空</span>
<span data-rule="typeMismatch">
邮箱格式不正确</span>
</div>
<hr />
//设置两个按钮,作用分别是“清空表单内容和对表单中的内容进行验证
<button type="submit" id="submit"
name="submit">修改</button>
<button type="button" id="checkValidation"
name="checkValidation"
class="btn">验证</button>
</fieldset>
</form>
</div>
<script>
windowonload= function() {
//---
// 创建一个验证规则容器。
var ruleNames = [];
// 填充验证规则容器
// 寻找所有具有验证规则的元素,然后将该元素的data-rule属性值添加到验证规则数组中去。
$("[data-rule]")each(function(i, element) {
var ruleName = elementgetAttribute('data-rule');
if ($inArray(ruleName, ruleNames) < 0) {
ruleNamespush(ruleName);
}
});
var
// 首先确定用户界面隐藏了所有验证消息。
// 然后在选定的表单上运行验证规则。
validate = function() {
$("validation-messages span")
addClass('hide');
documentgetElementById('change-email-form')
checkValidity();
},
// 查询每个输入的元素,以确定哪个元素无效。
// 一旦检测到无效元素,就遍历验证规则,找到无效的原因,然后通过消息对用户进行提示
validationFail = function(e) {
var
element = esrcElement,
validity = elementvalidity;
if (!validityvalid) {
ruleNamesforEach(function(ruleName) {
checkRule(validity,
ruleName,
element);
});
epreventDefault();
}
},
// 使用 input 元素 的ValidityState 对象的实例来运行验证规则。
//如果这个验证规则返回ture,就表示无法通过验证,在表单中就会有相应的提示信息。
checkRule = function(state, ruleName, ele) {
if (state[ruleName]) {
$(ele)next()
find('[data-rule="'
+ ruleName + '"]')
removeClass('hide');
}
};
// 所有验证事件处理程序是附加在input元素上的而不是button元素
$(':input:not(:button)')each(function() {
thisoninvalid = validationFail;
thisonblur = validate;
});
$('#checkValidation')click(validate);
}
</script>
<script src="/js/jqueryjs"></script>
</body>
</html>
推荐你去教程网站秒秒学上过一遍相关知识,希望对你有帮助。<hr width="200" size="2" color="#f00" align="right">
width 设置它的宽,即你说的长度。
size设置它的粗细
color 设置它的颜色
align 设置它的对齐方式
这个是默认的设置方法,建议通过 css 的方式来设置它的样式。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)