首页 > 代码库 > html学习笔记

html学习笔记

2024-08-17 05:07:17   233人阅读

1.编码(html文件编码成字节用的码表和浏览器读取这一系列字节所用的码表必须相同):

技术分享

技术分享

2.<a>标签的小细节:提供文件下载!在href中如果给的是文件的路径,那么点击超链接将会下载文件!

　<a>标签的属性target: -self 在当前页面打开连接  _blank:在新的页面打开连接

 3.table的colspan和rolspan属性

<table border="1">
        <tr>
            <th>年度</th>
            <th>班级</th>
        </tr>
        <tr>
            <!-- rowspan表示表格的列跨3行,在接下来的其他两行中将不需要声明这个td
                colspan则表示表格的列横跨三个列
             -->
            <td rowspan="3">2014</td>
            <td>JAVAEE 12</td>
        </tr>
        <tr>
            <td>JAVAEE 13</td>
        </tr>
        <tr>
            <td>JAVAEE 14</td>
        </tr>
    </table>

4.form表单的多选框和单选框

<form>
            喜欢:<br />
            <!--
                radio表示单选框,name属性必须相同才能起到单选的效果.
                value:内定值
            -->
            <input type="radio" name="like" value="yan">抽烟
            <input type="radio" name="like" name="jiu">喝酒
            <input type="radio" name="like" name="toufa" checked="checked">烫头发<br />
            <!--
                checkbox为复选框,name可以相同,可以不同.
                实际上如果后台取出name参数的时候,如果相同,取出的是name数组
            -->
            爱好:
            <input type="checkbox" name="id1" value="eat"/>吃饭饭
            <input type="checkbox" name="id2" value="sleep"/>睡觉觉
            <input type="checkbox" name="id3" value="doudou"/>打豆豆
</form>

5.隐藏域(供服务器查看使用):

技术分享

6.select和option标签

<!--
                select的name属性为下面几个option的name属性,
                select的value属性没有任何意义!!!!
                option本身没有name属性,option的value属性给select用.
-->
            <select id="select" name="select" value="helloselect">
                <option value="本科">大学本科</option>
                <option value="专科">大学专科</option>
                <option value="高中学历">高中学历</option>
            </select><br />

7.html中的模拟mata相应消息头.格式如下:
<META> 是放於 <HEAD> 与 </HEAD>之间的标记，功用与变化等对，大致如下:
<meta name="Description" content="This is Chris‘s Home Page">
该网页的描述，作用於寻找引擎的登录
<meta name="Keywords" content="Chris, Web, Music, photo">
该网页的关键字，作用於寻找引擎的登录
<meta http-equiv="Expires" content="Tue, 09 Dec 1997 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
以上行功能相同，都是要浏览器重新载入该页，不要使用快取档案，当然可以修 改该 Expire 时间。
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
设定这是 HTML 文件及其编码语系，中文网页请使用 big5 那行，或者不设编码亦 可，纯英文网页建议使用 iso-8859-1。
<meta name="GENERATOR" content="Mozilla/4.04 [en] (Win95; I) [Netscape]">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
这只表示该网页由甚堋编辑器写成。
<meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">
这一行较为实用，能於预定秒数内自动转到指定的网址。原始码中 10 表示 10秒。
8.frameset标签在html5中已经过时,但是有需要注意的一部分.第一,frameset标签不能放在body中,否则无法显示.可以放在head和body之间.第二,rows,cols标签的*表示分配完宽度后,剩下的就是我的.例子如下:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>用户注册登录</title>
    </head>
        <frameset  rows="15%,*">
            <frame src="top.html" name="top"/>
            <frameset cols="15%,*">
                <frame src="left.html" name="left" />
                <frame src="userregist.html" name="regist" />
            </frameset>
        </frameset>
    <body>
    </body>
</html>

9.frameset和标签的target属性完成联动:
<frameset>可以对页面进行划分,可以通过在左边点击超链接,而在右边完成对于页面的解析.只需在右边的页面设置<frame name="right>而在左边的标签的target里填写right即可.具体操作如下:
主页面:

<frameset rows="20%,*">
        <frame src="top.html"/>
        <frameset cols="20%,*">
            <frame src="left.html"/>
            <frame name="right"/>
        </frameset>
</frameset>

左侧页面:

<html>
    <head>
        <meta charset="UTF-8">
        <title>下拉选项框</title>
    </head>
    <body>
        <ul>
            <li>请选择你所需要进行的操作:</li>
            <li><a href="userlogin.html" target="right">点击进行登录</a></li>
            <li><a href="userregist.html" target="right">点击进行注册</a></li>
        </ul>
    </body>
</html>

10.html标记的属性可以使用单引号或者双引号,或者不用引号
11.在head中也可以定义<a>标签也可以在浏览器中看到内容,但是一般不建议这么用.
12.html中的base属性:可以在base属性中定义html文件中所有链接所需要的共同操作,文件中的超链接标签在被点击时候将会参考它

<html>
    <head>
        <meta charset="UTF-8">
        <title>测试base</title>
        <base href="index.html" target="_blank"/>
    </head>
    <body>
        <a href="">点我去主页哦</a>
        <a href="">点我才去主页哦</a>
        <a href="">只有点我才能去主页哦!!/a>
    </body>
</html>

13.input中的image属性:image属性也提供了提交的功能,可以通过src来点击图片完成提交(可以替代submit)

<form action="index.html">
            用户名1:<input type="text" name="username"/>
            用户名2:<input type="text" name="username"/>
            用户名3:<input type="text" name="username"/>
            <input type="image" name="submit" src="img/title2.jpg"/>提交
    
</form>

14.strong标签:和b标签的效果相同,基本都达到了加粗的效果
15.frameset的属性只能显示完整的页面,即这个组合的页面(frameset所在的页面)不会有任何下拉选框.有下拉选框的只有各个部分(frame)的页面.(即frameset所做出的页面的尺寸一般不会发生变化)

html学习笔记


联系
我们