2013-11-18 html第一课

最新推荐文章于 2024-04-22 08:01:56 发布

西瓜烧肉

最新推荐文章于 2024-04-22 08:01:56 发布

阅读量1k

点赞数

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/u012874738/article/details/16826023

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、设置字符集、边框间距与内部文字距边框距离

<meta charset="utf-8"><!--字符编码方式-->

<table width="800px" height="300px" align="center" border="1" cellspacing="15px" cellpadding="15px">

margin/cellspacing 外边框距离 padding/cellpadding内框边距

2、合并行列

<td rowspan="3" valign="top" align="center" style="font-family: serif;font-weight: bold">
         合并行
 </td>
<td colspan="2">
合并列
</td>

3、设置外边框合并

<style type="text/css">
        table{
            border-collapse: collapse;
        }
</style>

4、style属性

table{}对所有table应用

.table{} 对class="table"的生效

#table{} 对 id="table"的生效

也可以在里面直接添加：

<td rowspan="3" valign="top" align="center" style="font-family: serif;font-weight: bold">

图片添加方式：

background-image: url("../images/image.jpg")

5、页面中增加按钮与按钮事件

添加按钮：

<input type="button" value="点我" οnclick="test()" />

事件：

<script type="text/javascript">
        /*function test(){
            if(confirm("你饿了吗？")){
                alert("饿了就吃士力架!");
            }*/
</script>

6、可以在工程中新建一个*.css文件引用style

在前面先用以下代码引用.js .css文件内容

<link type="text/css" href="css/style.css" rel="stylesheet">
<script src="js/test.js" type="text/javascript"></script>

源代码：

01.html

<!DOCTYPE html>
<html>
<head>
    <title>就不告诉你，就不告诉你</title>
    <meta charset="UTF-8">


    <link type="text/css" href="css/style.css" rel="stylesheet">
    <script src="js/test.js" type="text/javascript"></script>


    <style type="text/css">
              /* .style1{font-family:    serif;font-weight: bold;}
                #style2{font-family: sans-serif}*/
    </style>


    <script type="text/javascript">
        /*function test(){
            if(confirm("这是第一个JavaScript程序!")){
                alert("饿了就吃士力架!");
            }*/


    </script>


    <style type="text/css">
        table{
            /*border-collapse: collapse;*/
        }
    </style>
</head>                                                                 <!--margin padding-->
<body>                                                                     <!-- utf-8 gbk gb18030 gb2312 IOS8859-1-->
    <table width="800px" height="300px" align="center" border="1" cellspacing="15px" cellpadding="15px">
        <tr>
            <td class="style1">
                交大京颐交大京颐交大京颐交大京颐
            </td>
            <td id="style2">
                交大京颐交大京颐交大京颐交大京颐
            </td>
            <td rowspan="3" valign="top" align="center" style="font-family: serif;font-weight: bold">
                交大京颐交大京颐交大京颐交大京颐
            </td>
        </tr>
        <tr>
            <td>

            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td>

            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td colspan="2">

            </td>
            <td>

            </td>
        </tr>
    </table>
       <input type="button" value="点我" οnclick="test()" />
</body>
</html>

style.css

    .style1{font-family: serif;font-weight: bold;
        background-color: darkred;background-repeat: no-repeat;}
    #style2{font-family: sans-serif;font-weight: bold;
        background-image: url("../images/image.jpg")}

test.js

/**
 * Created with JetBrains WebStorm.
 * User: KIMI
 * Date: 13-11-18
 * Time: 下午6:46
 * To change this template use File | Settings | File Templates.
 */
function test(){
    if(confirm("这是第一个JavaScript程序!")){
        alert("饿了就吃士力架!");
    }
}