前端学习笔记

来源：互联网发布：java easyui tree例子编辑：程序博客网时间：2024/05/22 01:33

最近在学前端（hml+css+js），整理了一些比较常用的知识点，作为笔记方便以后查阅。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body bgcolor="ffffff">    1.文字与段落标记    <p><font face="宋体" size="10" color="000000">你好啊</font></p> <!--字体类型、字号大小、字体颜色-->    <p><strong>你好</strong></p><!--两种字体加粗的方式-->    <p><b>大家好</b></p>    <p><i>田伟</i></p><!--三种斜体的方式-->    <p><em>田伟</em></p>    <p><cite>田伟</cite></p>    <p>a<sup>2</sup></p><!--上标标记 一般用于数学公式符号 如a^2-->    <p>a<sub>2</sub></p><!--下标标记 一般用于数学符号表示 如a2-->    <p><big>毛泽东</big></p><!--增大一级字体  可以嵌套使用  几层嵌套表示增大几级-->    <p><small>邓小平</small></p><!--减小一级字体-->    <p><small><small>邓小平</small></small></p>    <p><u>下划线</u></p><!-- 下划线标记-->    <p>段落标记</p><!-- 段落标记 -->    <br><!-- 换行标记-->    <nobr>不换行标记</nobr><!-- no + br不换行标记-->    <hr width="100" swize="3" noshade color="dddddd" align="left"><!--水平线  宽度 高度  无阴影 颜色 排列方式-->    <p>  周恩来</p><!--空格(特殊符号）如 & <  > ... -->    2.使用图像    <img src="images/田伟.png" alt="提示文字" width="512" height="512" border="5" vspace="5" hspace="5">    <!--地址  提示文字  宽度 高度  边界宽度  图像与文字的垂直边距   图像与文字的水平边距    -->    <a href="链接地址"><img src="images/田伟.png"></a>    <!-- 为图片添加链接    链接地址   图片   还可以对图片的特定区域添加链接 -->    3.使用列表    <ol type="1" start="1"><!--有序列表  序号类型  起始数值-->        <li>有序列表</li>        <li>有序列表</li>    </ol>    <ul type="Disc"> <!-- 无序列表 序号类型 此处为黑点 用Disc表示-->        <li>无序列表</li>        <li>无序列表</li>    </ul>    <dir><!-- 目录列表标记-->        <li>目录列表标记</li>        <li>目录列表标记</li>    </dir>    <dl><!-- 定义列表标记-->        <dt>定义条件</dt><!-- 定义条件-->        <dd>定义描述</dd><!-- 定义描述-->        <dt>定义条件</dt><!-- 定义条件-->        <dd>定义描述</dd><!-- 定义描述-->    </dl>    <menu><!--菜单列表标记-->        <li>菜单列表标记</li>        <li>菜单列表标记</li>        <li>菜单列表标记</li>    </menu>    4.使用表格    <table width="50" height="50" border="1" bordercolor="cccccc" align="center" cellspacing="5" cellpadding="3" bgcolor="bbbbbb" background="">    <!-- 表格的宽度  高度  边界宽度  边界颜色 对齐方式  表格内部单元格间距  文字与边框间距   表格背景颜色  表格背景图片 -->        <caption>表格标题</caption>        <th>表头</th><!-- 第一个单元格-->        <th>表头</th>        <tr height="100" width="100" bordercolor="aaaaaa" bgcolor="eeeeee" background="" align="left">        <!-- 一行  可单独为某一行设定 宽高度 边界颜色  背景颜色  背景图片  文字对齐属性-->            <td height="100" width="100" colspan="1" rowspan="1" align="left" valign="top" bgcolor="dddddd" background="" brodercolor="cccccc" bordercolorlight="aaaaaa" bordercolordark="222222">单元格</td>            <!-- 一格-- 可单独为某一单元格设定 宽高度  水平跨度  垂直跨度 水平对齐方式 垂直对齐方式  背景颜色 背景图片 边框颜色  亮边框  暗边框-->            <td>单元格</td>        </tr>        <tr><!-- 一行-->            <td>单元格</td><!-- 一格-->            <td>单元格</td>        </tr>    </table>    <table width="50" height="50" border="1"><!-- 把表格分为表头 主体 表尾三部分 每部分最多有一个 可分别自定义样式和属性 可以没有  -->        <thead><!-- 表首标记-->        <tr>            <td>名称</td>            <td>价格</td>        </tr>        </thead>        <tobody><!-- 表主体标记-->            <tr>                <td>毛巾</td>                <td>25</td>            </tr>        </tobody>        <tfoot><!-- 表尾标记-->            <tr>                <td>表尾标记</td>                <td>表尾标记</td>            </tr>        </tfoot>    </table>            5.建立超链接    <a href="链接地址(目标)" target="_blank">内部链接</a>    <!--内部链接     地址  目标地址的打开方式  -->    <a name="2"></a><!-- 锚点链接  锚点的名称  -->    <!-- 锚点链接  内部链接 (链接到本页面的位置）（项目内部跳转）-->    <a name="锚点名称">建立锚点</a><!-- 跳转的目标位置（ 建立锚点）-->    <a href="#锚点名称">链接锚点</a><!-- 引发跳转的位置 （创建连接）-->    <!-- 锚点链接 内部链接(链接到其他页面的位置）（项目内部跳转）-->    <a name="锚点名称">建立锚点</a><!-- 跳转的目标位置（ 建立锚点）-->    <a href="文件位置#锚点名称">链接锚点</a><!-- 引发跳转的位置 （创建连接）-->    <!-- 锚点链接 外部链接 （当前网站之外的资源中）-->    <a name="锚点名称">建立锚点</a><!-- 跳转的目标位置（ 建立锚点）-->    <a href="网址#锚点名称">链接锚点</a><!-- 引发跳转的位置 （创建连接）-->    <!-- 链接到email -->    <a href="mailto:邮件地址" ></a>    <!-- 链接到FTP  一个FTP站点通常包含一些容易上传和下载文件的目录 -->    <a href="ftp://ftp地址" ></a>    <!-- 链接到Telnet  专门登录Telnet网站 -->    <a href="telnet://地址">...</a>    <!-- 链接到下载网站(下载文件） -->    <a href="路径">下载</a>    6.添加多媒体    <marquee direction="left" behavior="slide" scrollamount="3" scrolldelay="时间间隔" loop="滚动次数" width="600" height="20" bgcolor="333333" hspace="水平范围" vspace="垂直范围" >滚动标记</marquee>    <!-- 滚动标记  滚动方向  滚动方式  滚动速度  滚动拖延    滚动次数       滚动宽度和高度       滚动背景颜色           空白空间 即为周围文字与滚动文字的距离（水平和垂直） -->    <embed src="文件地址" width="多媒体的宽度" height="多媒体的高度" loop="播放次数"></embed>    <!-- 插入多媒体文件（flash动画 音频  视频） -->    <bgsound src="地址">    <!-- 插入背景音乐 -->                    </body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    7.使用框架    <!-- 框架结构 -->    <frameset rows="50%,50%" frameborder="yes" border="1"(framespacing="1")  bordercolor="123456">        <!-- 框架集(水平分割窗口)   框架窗口的高度，高度....(像素或者百分比 可以无限分)  有无边框  边框宽度 边框颜色 -->        <frame >        <frameset cols="60,70,80" .....></frameset>        <!-- 框架集的嵌套  此处为垂直分割窗口 框架窗口的宽度，宽度....(像素或者百分比 可以无限分)-->        <frame src="地址" name="页面名称" noresize marginwidth="5"  marginheight="5" scrolling="yes">        <!-- 窗口属性  地址  页面名称  禁止调整页面尺寸  边框与页面内容的水平边距  ..垂直边距   是否显示滚动条 -->    </frameset>    <noframes><!-- 不支持框架效果 -->        不支持框架效果    </noframes>    <iframe src="地址" width="宽" height="高" align="对齐方式" scrolling="有无滚动条">        <!-- 浮动框架(可以自定义位置)-->    </iframe>    <a href="地址" target="目标框架" >名称</a><!-- 普通框架链接(浮动框架与之类似）-->    8.使用表单    <form action="表单处理程序的地址" name="表单名称" method="表单传送方法" enctype="编码方式" target="目标打开方式">    <!-- 传送方法分为get(表单数据被传送到指定的url，然后新的url被送到处理程序) 和 post (表单数据被包含在表单主体，后在送到处理程序)-->        <input name="字段名称" type="插入类型" value="默认值" size="文本框长度" maxlength="最多可输入字符数"/>        <input name="name" type="text" size="15"/><!--文字字段text-->        <input name="password" type="password" value="123456" size="10" maxlength="6"/><!--密码域password-->        <input name="单选按钮名称" type="radio" value="按钮取值" checked="checked"/><!--单选按钮radio(checked为默认选中的按钮)-->        <input name="复选框名称" type="checkbox" value="checkbox" checked="checked"/><!--复选框-->        <input type="submit" name="submit" value="关闭窗口" onclick="window.close()"/><!--普通按钮button  -->        <input type="submit" name="按钮名称" value="按钮的取值"/><!--提交按钮-->        <input type="reset" name="按钮名称" value="取值"/><!--重置按钮reset-->        <input name="图像域名称" type="image" src="图像路径"/><!--图像域image(以图像作为按钮)-->        <input name="隐藏域名称" type="hidden" value="隐藏域的取值"/>        <!--隐藏域hidden(隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息)-->        <input name="文件域名称" type="file" size="控件的长度" maxlength="最长字符数"/>        <!--文件域file 用于上传图片和文件-->    </form>    <!--菜单和列表-->    <select name="下拉菜单的名称"><!--下拉菜单-->        <option value="选项值" selected></option>选项显示内容        ......    </select>    <select name="列表项名称" size="显示的列表项数" multiple><!--列表项-->        <option value="选项值" selected></option>选项显示内容    </select>    <textarea name="文本域名称" cols="列数" rows="行数"></textarea>    <!--文本域标记textarea 注意不能使用value显示默认值-->    <id=元素的标识名><!--id标记-->    9.使用XHTML    XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。、    10.使用CSS样式表    <!--CSS的基本语法-->    选择符{样式属性：取值；样式属性：取值；样式属性：取值；......}<br>    <!--添加CSS的四种方法-->    1.链接外部样式表<br>    2.内部样式表<br>    3.导入外部样式表<br>    4.内嵌样式<br>    <!--字体属性-->    font-family:"字体1，字体2，..."<!--字体font-family -->    font-size:大小的取值 <!--字号font-size-->    font-style:样式的取值<!--字体风格style-->    font-weight:字体粗细值<!--加粗字体font-weight-->    font-variant:取值<!--小写字母变为大写-->    font:字体取值<!--字体符合属性   可以取值大小 风格  加粗...-->    <!--颜色和背景属性-->    color:颜色取值<!--颜色属性color-->    background-color:颜色取值<!--背景颜色background-color-->    background-image:url(图像地址)<!--背景图像background-image-->    background-repeat:取值<!--背景重复background-repeat（如何设置背景图像平铺)-->    background-attachment:scroll/fixed<!--背景附件属性background-attachment(设置图像是随对象滚动还是固定不动)-->    background-position:位置取值<!--背景位置background-position-->    background：取值<!--背景复合属性  背景颜色 背景图像 背景重复......-->    <!--段落属性-->    word-spacing:取值<!--单词间隔word-spacing-->    letter-spacing:取值<!--字符间隔letter-spacing-->    text-decoration:取值<!--文字修饰text-decoration-->    text-align:排列值<!--水平对齐方式text-align-->    vertical-align:排列值<!--垂直对齐方式vertical-align-->    text-transfrom:转换值<!--文本转换text-transform-->    text-indent:缩进值<!--文本缩进text-indent-->    line-height:行高值<!--文本行高line-height-->    white-space:值<!--处理空白while-space  normal:默认属性  pre:原文中的空格和换行符被保留  nowwrap:强制在同一行内显示文本-->    unicode-bidi:bidi-override | normal | embed<!--文本反排  unicode属性 -->    direction:ltr | rtl | inherit<!--文本反排  direction属性-->    <!--外边距与内边距属性  CSS盒子模型由 内容  内边距  边框 外边距四部分组成-->    margin-top margin-buttom margin-left margin-right<!--上下左右外边距-->    margin:长度值 | 百分值 | auto<!--外边距复合属性(':'后为表示方式) 次序为上下左右-->    padding-top padding-bottom padding-left padding-right<!--上下左右内边距-->    padding:长度值|百分比 <!--内边距复合属性 次序为上下左右-->    <!--边框属性-->    border-style:样式值<!--边框样式-->    border-top-style border-bottom-style border-left-style border-right-style <!--上下左右边框样式-->    border-width:宽度值<!--边框宽度-->    border-top-width border-bottom-width border-left-width border-right-width <!--上下左右边框宽度-->    border-color <!--边框颜色-->    border-top-color border-bottom-color border-left-color border-right-color <!--上下左右边框颜色-->    border:边框宽度 边框样式 颜色值 <!--边框属性-->    border-top border-bottom border-left border-right <!--上下左右边框属性-->    <!--定位属性-->    position:static | absolute | fixed | relative <!--定位方式position   默认值  绝对路径  页面滚动元素不随之滚动  相对定位-->    top:auto(自动) | 长度值 | 百分比（ bottom left right ）<!--元素位置 上下左右-->    <!--层叠顺序 （设置层的先后顺序和覆盖关系  z-index属性越高，层就越靠上）z-index-->    z-index:auto | 数字    float:none | left | right <!--浮动属性-->    clear:none | left | right | both <!--清除属性  用于指定越高元素是否允许有其他元素漂浮在它的周围-->    clip:auto | rect(数字) <!--可视区域-->    width（或height）:auto | 长度值 <!--层的宽度或高度-->    overflow:visible | auto | hidden | scroll    <!--超出范围  设置当层内的内容超出层所容纳的范围时的显示方式  自动显示 超出才显示滚动条 隐藏超出内容 总是显示滚动条-->    visibility:inherit |visible | hidden <!--可见属性（针对嵌套层）-->    <!--列表属性-->    list-style-type:值 <!--列表符号-->    list-style-image:none | url(图像地址) <!--图像符号-->    list-style-position:outside | inside <!--列表缩进-->    list-style:list-style-image | list-style-position | list-style-type <!--列表复合属性-->    <!--光标属性-->    cursor:auto | 形状取值 | url(图像地址)    <!--过滤属性-->    filter:alpha <!--不透明度-->    filter:blur(add=参数值，direction=参数值，streng=参数值 <!--动感模糊-->    filter:chroma(color=颜色代码或颜色关键字) <!--对颜色进行透明处理-->    dropShadow(color=阴影颜色，offX=参数值，offY=参数值，positive=参数值) <!--阴影效果-->    filter:FlipH <!--水平方向翻转对象-->    filter:flipV <!--垂直方向翻转对象-->    filter:Glow(color=颜色代码，strength=强度值)    filter:gray <!--灰度处理-->    filter:invert <!--反相-->    filter:xray <!--X光效果-->    filter: Mask(color=颜色代码) <!--遮照效果-->    filter: wave(add=参数值，freq=参数值，lightstrength=参数值，phase=参数值，strength=参数值) <!--波形滤镜--></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style >        .h{            font-family: 楷体;            font-size:xx-large;        }    </style></head><body class="h">    12.JavaScript脚本基础    <script language="JavaScript">        for(a=1;a<=7;a++)            document.write("<font size="+a+">圣诞节的故事<br></font size="+a+">");    </script>    <!--onclick事件-->    <div align="center"><img src="images/bg.jpg"><!--div块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。-->        <input type="button" name="fullsreen" value="全屏" onclick="window.open(document.location,'big','fullsreen=yes')">        <input type="button" name="close" value="还原" onclick="window.close()">    </div>    <!--onchange事件  onchange事件在文本输入区域外部点击 会提示警告框（alert）-->    <textarea name="textarea" cols="50" rows="5" onchange=alert("输入留言内容")></textarea>    <!--onselected 光标放在文本框上时触发的事件 -->    <input name="stra" id="stra" tabINdex="1" value="选择输入的名称" size="16" onselect=alert("选择输入的名称")>    <!--onFocus事件.... 事件太多 再次不一一列举  都是一个模式-->    <!--浏览器的内部对象-->    <!--浏览器对象navigator  存取浏览器的相关信息 如名字: appName-->    <!--document对象  JavaScript的输出可通过document对象实现（write和writeln方法)  document对象主要 包含了 anchor锚对象  links链接对象 form窗体对象 -->    <!--windows对象 对象最顶端  提供处理navigator窗口的方法好属性与 js的输入  -->    <!--Location对象 静态对象  描述某个窗口打开的地址-->    <!--history对象  浏览器的浏览历史--></body></html>

阅读全文

0 0