.net框架和c#程序设计第一次测试

一、html整体结构

首先，代码的一个整体结构，可以通过输入一个英文!来实现

加个备注：

<!DOCTYPE html> <!-- 声明文档类型为 HTML -->
<html lang="en"> <!-- 标识文档语言为英语 -->
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置移动设备的视口宽度和初始缩放比例 -->
    <title>Document</title> <!-- 设置网页标题为 "Document" -->
</head>
<body>
    <!-- 这里是网页的主体内容，可以在这里添加文本、图像、视频等元素 -->
</body>
</html>

二、常使用的一些标签

1、段落标记：p

    <p>段落名</p>

截图：

网页中的显示：

2、换行标签：br

    <br>

例：

网页中的显示：

3、项目列表：ul、li

    <ul>
        <li>项目名称</li>
    </ul>

例：

网页中的显示：

4、超链接：a

    <a href="链接">链接名称</a>

有两种使用方式：

使用的网页链接：网页中的显示：
使用的是本地的文件：网页中的显示：

这里链接地址是图片，按理说应该直接是显示图片的，但是这里为什么没有直接显示图片，而只是链接呢，等会再搜搜原因。

5、图片引用标签：img

    <img src="图片名" alt="">

例：在这个新建网页下的文件夹中的1.png：

网页中的显示：

6、空链接：#

    <a href="#">名称</a>

例：

网页中的显示：

7、生成随机文本：lorem

    lorem*n   <!-- 这里的n表示生成n行随即文本 -->

例：这里生成的以lorem开头，然后生成相应的行数。

8、锚记链接

（1）作用：简单的总结就是可以方便的跳转到所需的地方。

（2）使用方法：这里直接举个例子进行演示。

题目要求：就以前面生成的随机文本为例，该文本分成3个段，然后在文本的最前面显示一二三段，点击后直接跳到相应的段落。

实现步骤：

首先在每个段落前面使用name锚记和a标签标记每个段落：
然后在最前面写上想要跳转的位置：

当然，这个跳转是在文本很长的情况下才会显示出跳转的那个过程，如果文本过短，是看不出跳转的过程的。

9、块状元素：div

（1）作用：通常做布局使用，每个div里面的文本独占一行

（2）使用方式：

    <div>文本内容</div>

例：

网页中的显示：

三、样式位置

常用的样式位置分为三种：行内样式span、内部样式、链接式。（通过谷歌彩蛋案例说明三种你样式位置之间的区别）

示例一：谷歌彩蛋案例

1、行内样式

（1）作用

通常做修饰用，多个span里面的文本共享一行

（2）使用方式

<标记 style="样式表">内容</标记>

（3）行内元素：span

    <span>文本内容</span>

例：

网页中的显示：

（4）示例

修改文本的颜色：

    <span style="color:blue;">G</span>
    <span style="color:rgb(29, 207, 201);">o</span>
    <span style="color:rgb(212, 121, 16);">o</span>
    <span style="color:rgb(180, 12, 121);">g</span>
    <span style="color:rgb(246, 13, 168);">l</span>
    <span style="color:rgb(245, 11, 11);">e</span>

显示的结果：

但是可以看得出来，这个字母很小，如果想要调整大小，可以使用div和span结合使用：

    <div style="font-size: 24px;">
        <span style="color:blue;">G</span>
        <span style="color:rgb(29, 207, 201);">o</span>
        <span style="color:rgb(212, 121, 16);">o</span>
        <span style="color:rgb(180, 12, 121);">g</span>
        <span style="color:rgb(246, 13, 168);">l</span>
        <span style="color:rgb(245, 11, 11);">e</span>
    </div>

显示的结果：

问题：如果说一个html中有很多修改Google中的某个字母的颜色，使用行内样式修改的内容太多，所以，这是就可以使用到下面的一个样式了。

2、内部样式

（1）定义

在</head>和<body>之间.类型名{属性：属性名}，写的时候，要写在<style></style>之间。

（2）调用

使用class="类型名"进行调用。

（3）示例

定义代码（要放在</head>和<body>之间）

</head>
<style>
    .g1{
        color:antiquewhite;
    }
    .o1{
        color:rgb(212, 132, 26);
    }
    .o2{
        color:rgb(64, 189, 6);
    }
    .g2{
        color:rgb(49, 7, 217);
    }
    .l1{
        color:rgb(221, 5, 131);
    }
    .e1{
        color:rgb(217, 15, 15);
    }
</style>
<body>

调用代码（在body中）：

    <span class="g1">G</span>
    <span class="o1">o</span>
    <span class="o2">o</span>
    <span class="g2">g</span>
    <span class="l1">l</span>
    <span class="e1">e</span>

显示界面：

（4）注意优先级问题

前面我们说了两种颜色的定义方式，一个是直接一个一个定义，一个是使用内部样式一次定义。那么就会出现两种定义方式一起出现的情况，这时候就需要考虑到优先级了。它们两的优先级谁高呢，那么就来实际操作观察一下吧。

就是用Google中的e作为例子吧。

内部样式中定义为红色：

行内样式中定义为绿色：

最终结果：

可以看到，最终结果为绿色，所以行内样式的优先级是高于内部优先级的。

使用内部样式能够解决一次性修改多个字母的问题，如果出现新的要求：在多个网页中显示与这个相同的内容，那么就得每次都复制一遍，所以，下面得样式就能解决这个每次都复制的问题，实现只定义一次。

3、链接式

（1）定义

新建一个后缀为.css的文件，然后在里面编辑，内容就和内部样式style里面的内容一样。

（2）使用

先将内部样式style中的内容存到.css文件中
在.html（即网页代码）中的题目</title>后面写上调用.css的文件名。即（以css.css文件为例）
```
    <link rel="stylesheet" href="css.css">
```
截图：

（3）示例

结果显示：

那么这种方式和行内样式对比，哪个优先级高呢？依旧以e为例，设置行内样式的e为red

最终结果：

可以看到颜色变成了红色，所以，行内样式的优先级比链接式高。

再判断一下，内部样式和链接式的优先级（但是没啥必要，只是好奇）

内部样式，定义为红色：

链接式，定义为紫色：

最终结果，是红色。

所以，内部样式的优先级高于链接式。

样式位置优先级

根据三种样式位置的优先级按从高到低为：

行内样式>内部样式>链接式

四、样式类型

常用的样式类型有四种：类别选择器、标记选择器、ID选择器、伪类选择器。

１、类别选择器

自定义的一种类型

（1）定义：.类型名{属性：属性值；}

（2）调用：class=”类型名“

感觉内部样式和链接式就属于类别选择器的一种，不知道理解对不对，先记一下吧。

２、标记选择器

改变html标记的默认效果

（1）定义

html标记{属性：属性值；}

（2）调用

不需要调用

（3）示例

如果放在网页中，即.html文件下:

可以看到span是不会变色的，就说明在这里面不能使用，要在.css文件中使用：

结果演示：

可以看到，只要实在span中的内容，都会变成我们在.css中设置的span的格式，即实现了html默认模式下的格式。

（4）几种字体大小

常用的字体大小有5中，用h来表示，根据h后的数字不同，大小不同，一共有h1,h2,h3,h4,h5物种，h1最大，h5最小。

例：

    <h1>111</h1>
    <h2>222</h2>
    <h3>333</h3>
    <h4>444</h4>
    <h5>555</h5>

结果演示：

３、ID选择器

一般用来布局，具有唯一性（原则上不能重名）。

（1）定义

在.css文件中，定义为#ID{属性，属性值；}

（2）调用

id="类型名"

（3）示例

在.html文件中调用：

效果图：

（4）设置某ID下的格式

例：#top a{}

在.html文件下：

    <div id="top">
        top
        <a href="http://jwc.shzu.edu.cn">石河子大学教务处</a>
    </div>

在.css文件下：

#top a{
    color:rgb(0, 255, 89);
}

结果演示：

#ID ul{}

首先查看未设置top下ul的格式：

.html文件中：

    <div id="top">
        top
        <br>
        <a href="http://jwc.shzu.edu.cn">石河子大学教务处</a>
        <br>
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
    </div>

结果：

然后在.css文件下设置：

#top ul{
    list-style-type: none; 
    /* 表示将top类型下的ul标签的默认格式清零*/
}

结果如下：

4、伪类选择器

（1）定义

    <a href="#">内容</a>

（2）类型

有四种类型（在.css文件下使用），如下：

a:link { /* 选择处于未访问状态的超链接 */
    color: aqua; /* 设置超链接文字颜色为青色 */
}

a:visited { /* 选择处于已访问状态的超链接 */
    color: brown; /* 设置已访问超链接文字颜色为棕色 */
}

a:hover { /* 选择鼠标悬停在超链接上的状态，即鼠标经过状态*/
    color: chartreuse; /* 设置鼠标悬停时超链接文字颜色为黄绿色 */
}

a:active { /* 选择用户点击超链接但还未释放鼠标按钮的状态 ，即长按状态*/
    color: red; /* 设置活动中（被点击）超链接文字颜色为红色 */
}

（3）示例

结果：

未点击：

已点击：

鼠标经过：

鼠标长按：

五、盒子模型

任何对象有宽度和高度
任何对象都有边框border
对象内容和边框之间的距离叫做内边距padding。 padding:10px(表示上下左右均为10px) padding:10px 20px 30px 40px(顺序是：上右左下) padding-top:10px(表示与上边的距离是10px)

虽然上面的知识感觉自己都会，但是如果真的要设置一个简单的网页，那么我还是会出很多错，所以，下面就开始一步一步练习吧。

六、常用属性

1、margin

外边距：边框与边框外部的内容距离。

margin：10px；表示上下左右外边距均为10px

margin:0px auto；表示上下为0，左右为自适应

如果两个部分都设置外边距了，那么这两个部分之间的距离该怎么计算呢？

规则：两部分为上下关系时：求两者margin的最大值作为两者的距离；

两部分为左右关系时：求两者的和作为两者的距离。

2、padding

内边距：边框里面的内容和边框之间的距离。

padding-top:表示内容的上边距。

3、background

修改背景相关的属性。

说明： background-image:url(图片名) 用来将该图片设置为网页的背景。

但是，需要注意的是，默认的是图片无限的填充形成整个背景，如果想要值填充一行或者一列的话，就可以使用padding-repeat:x(表示填充背景图片为横向的一行)；padding-repeat:y表示填充背景图片为纵向的一行。

4、font-size

设置字体大小。例如：font-size：10px;

5、color

设置颜色。例如：color：blue;

6、text-align

设置内容的对齐方式。

center：居中对齐

justify：两边对齐

这两者的区别就是，居中的时候不管一行中字数的多少，都是居中。

7、float

表示浮动，常用的有两种，left和right。

left	向左浮动
right	向右浮动

如果想详细了解，可以参考这位博主的文章（侵权联系删除）：

html----float属性详解，小白学习笔记_htmlfloat属性-CSDN博客

8、width、height

内容的宽度和高度。

七、实际操作

示例一：设置三部分

设置三部分，然后中间的部分分为左部分和右部分。即（忽略掉箭头）：

实现过程：

首先，需要先分三个部分，上中下，然后再到中间的部分进行划分。

实现这个功能，就需要在.css文件中使用定义三个ID选择器，然后在.html文件中使用id="ID名"来调用。两部分代码如图所示（这里就不加代码了，直接发个图片，后面实现了，再将代码全部粘上来）

下面，将中间的部分进行分块。分块方式和前面的三个部分没什么区别，只是前面的三个是在body中间直接使用块状元素div，而这个分块是在中间部分进行调用。所以，按照这个思路进行分块，设置名称就为left和right。

但是，设置left和right的宽度的时候就需要计算了，因为它们两个是共同分配中间部分了。如果中间部分没有设置内边距的话，就直接将两部分相加得到总的值就可。

但是一般情况下，是会设置内边距的，这样就需要减掉两个内边距。像这个例子中，总的是1000px,内边距为10px,左右都有，所以就是可以分配的距离为1000px-20px=980px,然后将这两者分成480px和500px。

但是我发现，我的这个结果出来的时候两部分之间有空隙，所以就是说明，我的计算可能出错了。

所以，我就重新去学习怎么计算了……

设置的width和height是内容的宽度和高度，所以减掉的应该就是这两部分左右的边框，左右最后会重合，所以是减3，总长即为997。（暂时理解是这样，后面请教一下别人，在修改吧。）

.html文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>

<body>

    <div id="top">
        top
    </div>
    <div id="content">
        
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
    <div id="bottom">
        bottom
    </div>


</body>
</html>

.css文件内容：


#top { /* 选择id为 "top" 的元素 */
    
    width: 1000px; /* 设置元素宽度为 300 像素 */
    height:200px; /* 设置元素高度为 100 像素 */
    border: 1px solid black; /* 设置边框为 1像素宽的实线黑色边框 */
    padding:10px;
    text-align: center;
}
#content {  
    width: 1000px; 
    height:500px; 
    border: 1px solid black;
    padding:10px;
    /* margin: 10px; */
    text-align: justify;
}
#left{
    width: 497px; 
    height:500px; 
    border: 1px solid black;
    /* padding:10px; */
    float: left; /*设置向左浮动*/
    text-align: center;
}
#right{
    width: 500px; 
    height:500px; 
    border: 1px solid black;
    /* padding:10px 20px 30px 40px; */
    float: right;
    text-align: center;
}
#bottom{ 
    
    width: 1000px; 
    height:200px; 
    border: 1px solid black; 
    padding:10px;
    text-align: center;
}

最终结果：

示例二：生成一个简单的网页

要求的最终效果：

出现的问题：

问题一：为什么设置了 list-style-type: none;但是依旧是竖直排列？

出错点：修改的是ul而不是li，要清除li的默认格式，才会成功取消。

问题二：为什么在content中输入的字是靠右的，而不是靠左？

出错点：不清楚

解决办法：先输入文字内容，然后使用<br>换行。

问题三：如何解决content的right中的文字的大小格式？

如果按照h3和h2的话，是有点错位的。

解决办法：我现在唯一想到的办法就是修改h2、h3的字体大小了。等后面再有办法再改吧。

根据我薄弱的基础，我最终生成的结果如下（中间的有一部分我没有做，因为看起来和前面的字体一样，如果我的方法是错误的，那么也没有做的必要，等到我学会其他比较好的方法，再继续吧）：

.html文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>

<!-- <style>
    .e1{
    color:rgb(254, 63, 5);
    }
</style> -->

<body>

    <div id="top">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Experiences</a></li>
            <li><a href="#">Achievement</a></li>
            <li><a href="#">Skills</a></li>
        </ul>
    </div>
    <div id="content">
        <span>Hi,I'm Draco the Dragon</span>
        <br><br>
        <div id="left"></div>
        <div id="right">
            <span><h3>I LIVE IN</h3></span>
            <span><h2>FAR NORTHERN SKY</h2></span>

        </div>
    </div>
    <div id="bottom">
    <h5>Draco is a constellation in the far northern sky.Its name is Latin for dragon.Draco is
    <br>
    circumpolar(that is,never setting)for many observers in the northern hemisphere.It was
    <br>
    one of the 48 constellations listed by the 2nd century astronomer Ptolemy.
    </h5>
    <h4>~~~~~~</h4>

    <h2>Work</h2>
    <h2>EXPERIENCES</h2>

    <h4>2014-2015</h4>
    <h5>PT Traveloka Indonesia</h5>
    <h4>Web Designer</h4>

    <br>
    <h4>2013-2014</h4>
    <h5>Wego</h5>
    <h4>UI/UX Desig ner</h4>

    <br>
    <h4>2014-2015</h4>
    <h5>Garuda Indonesia</h5>
    <h4>System Designer</h4>
    <br>
    <h4>~~~~~~</h4>
    <br>


    </div>
    <div id="di">
        <div id="shang"></div>
        <div id="xia">
            <div id="zuo">
                Handcrafted by Afnizar Nur Ghifari
            </div>
            <div id="you">
                <div id="tb"></div>
            </div>
        </div>
    </div>


</body>
</html>

.css文件内容：

 body{ /*这里将默认模式下的格式清0 */
    margin:0px;
    padding:0px;
}
#top { /* 选择id为 "top" 的元素 */
    
    width: 900px; /* 设置元素宽度为 300 像素 */
    height:80px; /* 设置元素高度为 100 像素 */
    border: 1px solid black; /* 设置边框为 1像素宽的实线黑色边框 */
    padding:10px;
    text-align: center;
    margin:0px auto;
}
#top li{ /*这里设置li*/
    list-style-type: none;/*将竖行的项目变成横向的样式*/
    float:left;
    margin:10px 60px;
}
#content {  
    width: 900px; 
    height:130px; 
    border: 1px solid black;
    padding:10px;
    /* margin: 10px; */
    text-align: justify;
    margin:0px auto;
    background-image: url(draco.png);
}
#left{
    width: 83px; 
    height:82px; 
    border: 1px solid black;
    /* padding:10px; */
    float: left;/* 设置向左浮动*/
    text-align: center;
    background-image: url(girl.png);
}
#right{
    width: 814px; 
    height:82px; 
    border: 1px solid black;
    /* padding:10px 20px 30px 40px; */
    float: right;
    text-align: justify;
}
#right h3{
    font-size: 16px;
}
#right h2{
    font-size: 20px;  
}
#bottom{ 
    width: 900px; 
    height:800px; 
    border: 1px solid black; 
    padding:10px;
    text-align: justify;
    margin:0px auto;
}
#bottom h5{
    font-size: 14px;
    color: rgb(16, 15, 15);
}
#bottom h4{
    font-size: 13px;
    color: rgb(142, 147, 150);
}
#di{
    width: 900px; 
    height:425px; 
    border: 1px solid black; 
    padding:10px;
    text-align: center;
    margin:0px auto;
}
#shang{
    width: 900px; 
    height:375px; 
    border: 1px solid black; 
    text-align: center;
    margin:0px auto;
    background-image: url(bottom.png);
}
#xia{
    width: 900px; 
    height:47px; 
    border: 1px solid black; 
    text-align: center;
    margin:0px auto;
}
#zuo{
    width: 500px; 
    height:27px; 
    border: 1px solid black; 
    float: left;
    margin:0px auto;
    padding: 10px 0px;
    font-size: 18px;
    color:darkgray;
}
#you{
    width: 397px; 
    height:47px; 
    border: 1px solid black; 
    margin:0px auto;
    float: right;

}
#tb{
    width: 131px; 
    height:26px; 
    background-image: url(tb.PNG);
    text-align: center;

加油吧，毕竟别人一遍过的东西，我敲好几遍也不一定会用，还有什么理由摆烂呢？加油加油，都会好的。。。