本文详细介绍了HTML的基本概念，包括块级元素与内联元素的区分，以及常用的HTML标签如`<header>`、`<nav>`、`<footer>`等。还涉及到JavaScript中的事件处理，如`onload`、`onresize`、`onfocus`等，并讨论了Bootstrap框架的应用。此外，文章提到了防止浏览器自动填充、禁用右键及键盘事件处理的方法，以及HTML5新增元素的使用。
Html
后缀：.html / .htm 两种后缀名没有区别
“ABC” == ‘ABC’ (当原字符有双引号时，例如 A"B"C 那么-> 不可以"A"B"C", 可以 ‘A"B"C’)
标签分为
HTML 块级元素 块级元素在浏览器显示时，通常会以新行来开始(和结束) 例:<h1>, <p>, <ul>, <table>
HTML 内联元素 内联元素在显示时通常不会以新行开始 例:<b>, <td>, <a>, <img>
文章目录
Get it done
http://www.w3school.com.cn/tiy/t.asp?f=html_frame_cols
HTML实例 :: http://www.runoob.com/html/html-examples.html
属性&标签 :: http://www.runoob.com/tags/ref-standardattributes.html
Table <td nowrap="nowrap">单元格中的内容不换行
##html5 新增元素
<article>一大块
<header>导航区
<nav>导航块</nav>
</header>
<aside>侧边栏等</aside>
<section>一小块</section>
<footer>脚注区域 例如版权等一些信息
<address>地址元素</address>
</footer>
</article>
##禁止右击
function click(){
if(event.button == 2){
alert("禁止右击！");
}
}
function CtrlKeyDown(){
if(event.ctrlKey){
alert("禁止使用右键复制！");
}
}
document.onkeydown = CtrlKeyDown;
document.onmousedown = click;
##鼠标事件
onload : 页面加载时触发
onresize : 浏览器大小发送变化时触发
onfocus : 获得焦点触发
onblur : 失去焦点触发
鼠标：
onMouseover : 鼠标移动到对象上面时触发
onMouseout : 鼠标离开对象时触发
onMousemove : 鼠标在对象上面移动的时候触发
键盘：
onkeypress : 按下并释放时触发
onkeydown : 按下时触发
onkeyup : 释放时触发
form事件：
onsubmit : 提交时触发
onreset : 重置时触发
URL访问网站的网络传输全过程 http://blog.csdn.net/cloudox_/article/details/69669035
百度 "html loading" https://icons8.com/cssload/en/spinners
##Bootstrap
http://www.bootcss.com/
组件 http://v3.bootcss.com/components/#breadcrumbs
示例 http://v3.bootcss.com/getting-started/#examples
http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
1
*******************************************************************************************************************************
示例
小网页
<html>
<body>
<p>hello world</p>
</body>
</html>
*******************************************************************************************************************************
基本信息
对象
浏览器窗口对象：window
window.print(); //打印
window.open("www.baidu.com","窗体名称-百度","窗体参数：height: 300, width: 500"); //打开新窗体 //fullscreen=yes : 全屏
window.close(); //关闭
window.moveby(x,y); //移动窗体
window.scroll(x,y); //滚动窗体
window.resizeto(w,h); //调整窗体大小
window.defaultStatus = '修改页面状态栏信息';
窗体的高度(内侧)：window.innerHeight
窗体的宽度(内侧)：window.innerWidth
窗体的高度(外侧)：window.outerHeight
窗体的宽度(外侧)：window.outerWidth
浏览器对象：navigator
屏幕对象：screen
文档对象：document
document.body : body元素
document.cookie : cookie
document.URL : 页面URL
document.write("<p>holle world</p>"); //写入内容
单位
高度 用 px
宽度 用 %
字体 用 rem
em 相对单位 !会继承父级元素的字体大小
rem 相对单位 相对的是HTML根元素 CSS3新增
px 像素 绝对单位
pt 磅 绝对单位 通常用于页面打印排版
vh 1vh == 窗体高度的1%
vw 1vw == 窗体宽度的1%
vmin
vmax
通用属性
| 标签属性 | 描述 http://www.runoob.com/tags/tag-a.html |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式(inline style) |
| title | 描述了元素的额外信息 (作为工具条使用) |
| data-* | 额外的自定义属性数据(不允许大写字母)；eg.<p data-abc='590'></p> |
*******************************************************************************************************************************
其它
禁止浏览器自动填充
https://www.zhihu.com/question/23529765/answer/90632851
禁止浏览器保存密码和禁止浏览器填充密码浏览器保存密码是根据input="password"来判断的，
所有我们只要保证浏览器在dom结构中识别不到密码框即可。so：
–>密码输入位置默认为input=“text”。
–>在输入框上添加 οnfοcus=“this.type=‘password’” 输入框获得焦点时改变输入框格式为密码框
–>输入密码
–>在提交前清空输入框密码，并修改密码框为文本框。（我的提交为发生Ajax提交，可根据自己实际情况进行调整，或者情况密码之后，将值保存在一个隐藏域中，再提交表单）
–>commit。
- 使用此方法即可在进入界面时浏览器不填充密码，也不会在提交之后保存密码。
- IE8+、Chrome、FF、360测试通过。
- 其实写这段代码的时候只是为了禁止Chrome保存密码，对于其他浏览器只是验证是否正常显示。
- 次方法不针对通过js向密码框输入密码的情况，因为js输入不触发获得焦点事件。
边框线1px问题
margin-left: -1px;
border-left: 1px solid #eee;
*******************************************************************************************************************************
Label input 输入框
限制文本框只能输入正数，负数，小数
onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
限制文本框只能输入正数，小数
onkeyup="value=value.replace(/[^\d.]/g,'')"
只能是数字
<input type='text' onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');" />
<input type='text' onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" />
只能两位
$("#proCount").on("input propertychange",function(){
if($(this).val().length>2){
$(this).val($(this).val().substr(0,2));
}
})
<input type="text" id="keywordt" name="keyword" value="" style="" placeholder="请询问服务员后输入" autocomplete="off" />
> placeholder 提示信息
> autocomplete 允许浏览器预测对字段的输入
文本框：<input type="text" name="txt1" value="默认值" placeholder="提示语" maxlength="最大字符数" ><br 文本输入框的默认宽度是20个字符/>
搜索框：<input type="search" name="user_search" placeholder="Search W3School" maxlength="最大字符数" />
密码框：<input type="password" name="txt2" maxlength="最大字符数"><br />
单选按钮(默认选中)：<input type="radio" name="sex" value="man" checked="checked">Man<br />
复选框(默认选中)：<input type="checkbox" name="vehicle" value="Che" checked="checked">I have a vehicle<br />
按钮：<input type="button" value="按钮" onclike="单击事件"><br />
提交按钮：<input type="submit" value="提交" /><br submit专门用于提交表单的Button/>
重置按钮：<input type="reset" value="重置"><br />
图像域：<input type="image" src="图像地址"><br />
文件域：<input type="hidden" value="重置"><br />
隐藏域：<input type="file"><br />
文本域：<textarea rows="行数" cols="长度" >文本域(多行文本)</textarea><br />
下拉列表：<select name="selectList">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option> <!-- 默认选中 -->
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br/>
//输入时触发
$("#username").bind('input propertychange', function () {
if ($("#username").val().length > 0) $("#username_empty").css("display", "inline-block");
else $("#username_empty").css("display", "none");
});
*******************************************************************************************************************************
Label select 下拉列表
下拉列表
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option> <!-- 默认选中 -->
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
var obj = document.getElementByIdx_x(”testSelect”); //定位id
var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值
jQuery中获得选中select值
第一种方式
$('#testSelect option:selected').text();//选中的文本
$('#testSelect option:selected').val();//选中的值
$("#testSelect ").get(0).selectedIndex;//索引
第二种方式
$("#tesetSelect").find("option:selected").text();//选中的文本
$(".area_box").change(function(){
var selectValue = $('.area_box option:selected').text();
});
设置select元素的选中项：
document.getElementById("sel")[2].selected=true;
*******************************************************************************************************************************
Label checkbox 复选框
<input type="checkbox" name="cb_swimming" value="游泳" />游泳
$("input[@name='cb_swimming']").prop("checked","checked"); //设置选中 注意使用的是prop而不是attr
$("input[@name='cb_swimming']").removeAttr("checked"); //取消选中
*******************************************************************************************************************************
扫一扫
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
