HTML&&JS小常识

最新推荐文章于 2022-03-30 16:55:36 发布

wangfishes

最新推荐文章于 2022-03-30 16:55:36 发布

阅读量101

点赞数

分类专栏： JAVASCRIPT&&DHTML 文章标签： HTML CSS IE JavaScript ViewUI

本文链接：https://blog.csdn.net/wangfishes/article/details/83433469

版权

JAVASCRIPT&&DHTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文分享了一系列实用的HTML与CSS技巧，包括如何设置文档属性、防止网页被保存、使用CSS内嵌JavaScript代码、保持文本框内容在刷新后不变、表单元素的readonly与disabled区别、利用HTML标签美化页面布局及表格间距的应用。

摘要由CSDN通过智能技术生成

别人的笔记，转载下

1.几个document属性
document.title                 //设置文档标题等价于HTML的<title>标签
document.bgColor               //设置页面背景色
document.fgColor               //设置前景色(文本颜色)
document.linkColor             //未点击过的链接颜色
document.alinkColor            //激活链接(焦点在此链接上)的颜色
document.vlinkColor            //已点击过的链接颜色
document.URL                   //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate       //文件建立日期，只读属性
document.fileModifiedDate //文件修改日期，只读属性
document.fileSize             //文件大小，只读属性
document.cookie                //设置和读出cookie
document.charset               //设置字符集简体中文:gb2312

2.禁止保存
<noscript><iframe src="*.html"></iframe></noscript>

3.IE6最简单的无提示关闭窗口
<input type="button" onClick="window.opener = 'xxx';window.close();" value="IE6最简单的无提示关闭窗口" >

4.居然能用CSS中能写JS代码
<style type="text/css">
body{
height:200px;
background:url(javascript:alert("上帝来了!")); /*居然能用CSS中能写JS代码*/
}
</style>

5.刷新后不变的文本框
<STYLE>
.sHistory {behavior:url(#default#savehistory);} /*刷新后不变的文本框*/
</STYLE>
<INPUT class=sHistory type=text id=oPersistInput>

6.Readonly与disabled的区别
Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而 readonly会将该值传递出去。

7.favicon.ico介绍
<br/>
<link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标
<link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

8.label的妙用
<label for="id_name">Name</label><input type="checkbox" name="name" id="id_name" size="20"/>
Label的“For”属性要和Input元素的ID相一致

9.一些不常用但很有用的HTML标签
<fieldset style="width:20%">
<legend>Person</legend>
<label>Name</label>
<select name="age">
<optgroup label="baby">
<option>0-2</option>
<option>3-5</option>
</optgroup>
<optgroup label="kid">
<option>6-10</option>
<option>10-15</option>
</optgroup>
<optgroup label="adult">
<option>16-30</option>
<option>31-40</option>
<option>41-60</option>
</optgroup>
</select>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="gender" id="male" /><label for="male">Male</label><br>
<input type="radio" name="gender" id="female" /><label for="female">Female</label>
</fieldset>
</fieldset>

10.表格属性cellspacing，cellpadding的妙用
一、一个象素宽的分隔线
<table width="100%" cellspacing="0" border="0" bgcolor="#000000" height="1" cellpadding="0">
<tr>
<td></td>
</tr>
</table>

二、利用“cellspacing”属性制作边框为1px的表格：
<table width="160" cellspacing="1" border="0" bgcolor="#000000" height="40">
<tr>
<td bgcolor="#FFFFFF">
<div align="center">表格A</div>
</td>
<td bgcolor="#FFFFFF">
<div align="center">表格B</div>
</td>
</tr>
</table>

三、利用“cellpadding”属性制作等间距细线表格
<table width="420" border="0" cellspacing="2" cellpadding="1" height="40">
<tr>
<td bgcolor="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>