C#学习日记07——HTML和CSS

最新推荐文章于 2023-03-21 21:29:05 发布

向上的青春233

最新推荐文章于 2023-03-21 21:29:05 发布

阅读量407

点赞数 1

分类专栏： c# 文章标签： html css web

本文链接：https://blog.csdn.net/weixin_44006686/article/details/114330614

版权

c# 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先说概念：
HTML是一种超文本标记语言
在HTML当中存在着大量的标签，我们用HTML提供的标签，将要显示在网页中的内容包含起，构成我们的网页
HTML控制网页上显示的内容，CSS控制网页上显示的效果
HTML+CSS=静态网页

HTML基本的框架标签：

<html>
        <head>  <!--头指针-->
               <title></title>
        <head>
        <body>
        </body>
</html>

2.HTML中常用的标签（要注意有始有终）

p标签：段落标签
&nbsp:空格
h#：标题标签
<!--要注释的内容-->：注释符
<img/>：图片标签，用来显示图片。
src：表示被显示的图片的路径
height：图片高度
 width：图片宽度
 alt：当图片由于某些原因显示失败的时候所显示的文本
title：当光标移动到图片的时候显示的文本
<hr/>:水平线
<br.>：拆行
(&gt):>号
(&gt):<号
&(&amp):&号
&(nbsp):空格
<font>:字体标签 size：1~7 color：颜色
<b>:定义粗体文本
<i>:定义意大利斜体
<tt>:定义打字机文本
<u>:定义下划线文本
<sup><sub>:定义上下标
<s>:定义加删除线的文本
<pre>:自定义格式标签
<a>:超链接标签  <a href="http"//www.baidu.com" target="_blank">百度</a>
_blank“：表示打开一个新窗口  _self表示在当前界面打开窗口
第二个作用：实现界面内部的跳转（回到顶端和回到底端）
<a name="顶端" href="#底端">回到底端</a>
<a name="底端 " href="#顶端">回到顶端</a>

3.body常用的属性
text属性：文本的颜色
link属性：（链接的颜色）（如果改成白色谁都看不到）
alink属性：点击时候的颜色
vlinl属性：点击之后的颜色
bgcolor属性：背景颜色
background属性：背景图片，平铺

4.无序列表和有序列表

<ul>无序列表	 
<ol>有序列表  使用方式基本一样
<ul>
      <li> 星期一吃鲍鱼</li>
       <li>星期二吃龙虾</li>
</ul>

运行效果如下
在这里插入图片描述
5.表格

<table>单元格
border：表格边框
cellspaciong属性：设置单元格与边框的距离
cellpadding属性：设置文本和单元格的距离
<tr>表示一行
<th>表示一个标题单元格(字体比普通的单元格更黑)
<td>表示一个普通单元格
<td colspan="2">：表示单元格占了两列
<td rowspan="2">:表示单元格占了两行
<td align="conter">：内容居中（也可以左右）
<td valign="         ">:内容上下调节

6.表单：表单在HTML当中使用应该算是非常多的了

 <form action ="http://www.baidu.com" method="get">
  用户名：<input type ="text" name="txtNameame"/><br/>
  密  码：<input type ="password" name ="txtPwd"/><br/>
 <input type = "submit" value="提交到百度"/>
 <input type="reset" value ="清空"/><br/>

div标签：层级标签
noresize属性：禁止移动
运行结果：在这里插入图片描述

HTML重要的东西暂且到这，接下来是一部分CSS的内容，以及一个简单的小设计。

CSS
1.CSS实现了网页内容和页面效果的彻底分离

2.css写入代码的的三种方式
内联样式表：在标签内设置元素的样式(比较灵活，但是多了很麻烦)
嵌入样式表：需要在head标签内写

3…样式规则的选择器（六种）
HTML Selector ：可以选择标签去做

 <style type ="text/css">
      p{
          background-color=red
      }
      tt {
          background-color:green;
      }
  </style>

Class Selector（类选择器）：选择一类是使用

<style type="text/css">
        tt.tt1 {
        background-color:black;
        }
    </style>
<tt class="tt1">床前明月光，疑是地上霜。举头望明月，低头思故乡</tt>

ID Selector(ID选择器): 尽量不要给标签赋值同一个ID，尽量单个使用

<style type ="text/css">
        #p1 {
        background-color:red;
        }
        #p2 {
        background-color:green;
        }
        #p3 {
        background-color:white;
        }
    </style> 
 <p id="p1">今天天气好晴朗，处处好风光</p>  <!--内联样式表-->
    <p id="p2">今天天气好晴朗，处处好风光</p>
    <p id="p3">今天天气好晴朗，处处好风光</p>
    <p id="p4">今天天气好晴朗，处处好风光</p>

关联选择器：

 <style type="text/css">
        p em {
        background-color:red;
        }
    </style>
 <p><em>今天天气好晴朗，处处好风光</em></p>

组合选择器：

<style type="text/css">
        h1, h2, h3, h4, h5, h6, td {
        background-color:red;
        }
    </style>
 <h1>我是你爹</h1>
     <h2>我是你爹</h2>

伪元素选择器：伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式在这里插入图片描述
4.盒子模型

一个简单的小网页：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type ="text/css">
        * {
        margin:0px;
        font-size:12px;
        
        }
        div.divIndex {
        height:380px;
        width:290px;
        background-color:#F8F8F8;
        margin:0px auto;
      
        }
        div.div1 {
        height:35px;
        width:290px;
        background-color:blue;
        color:white;
        text-align:center;
        }
        div.div p {
         font-size:18px;
         padding:8px;
        }
        #table1 {
        width:290px;
        }
        td.td1 {
        font-weight:bolder;
        }
        td.td2 {
        color:#246DB2;
        padding:6px;
        border-bottom:1px dashed #CCCCCC;
        }
        td.td3 {
        color:red;
        font-weight:bolder;
         border-bottom:1px dashed #CCCCCC;
         text-align:right;
        }
        td.td4 {
         color:blue;
        font-weight:bolder;
         border-bottom:1px dashed #CCCCCC;
         text-align:right;
        }
        div.divtable {
        
        }

    </style>
</head>
<body>
    <div class="divIndex" >
        <table id="table1">
            <tr>
                <td><div class ="div1"><p>.NET开班培训信息</p></div></td>
            </tr>
            <tr>
                <td>
                   <div class="divtable">
                    <table width="290px">
                        <tr>
                            <td class="td1">.NET基础班 </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class ="td2">安国---2021年1月3号</td>
                            <td class="td3">预约报名中</td>
                        </tr>
                        <tr>
                            <td  class ="td2">北京---3月6号</td>
                            <td class="td4">爆满已开班</td>
                        </tr>
                        <tr>
                            <td  class ="td2">广州---5月20号</td>
                            <td class="td3">预约报名中</td>
                        </tr>
                        <tr>
                            <td  class ="td2">广州---4月12号</td>
                            <td class="td4">爆满已开班</td>
                        </tr>
                        <tr>
                            <td class="td1">.NET就业班</td>
                            <td></td>
                        </tr>
                          <tr>
                            <td  class ="td2">北京---2014年4月26号</td>
                            <td class="td3">预约报名中</td>
                        </tr>
                          <tr>
                              <td  class ="td2">北京---2014年4月26号</td>
                            <td class="td4">爆满已开班</td>
                        </tr>
                         <tr>
                            <td  class ="td2">北京---2014年4月26号</td>
                            <td class="td3">预约报名中</td>
                        </tr>
                          <tr>
                              <td  class ="td2">北京---2014年4月26号</td>
                            <td class="td4">爆满已开班</td>
                        </tr>
                         <tr>
                            <td class="td1">.NET远程班</td>
                            <td></td>
                        </tr>
                          <tr>
                            <td  class ="td2">北京---2014年4月26号</td>
                            <td class="td3">基础班预约报名中</td>
                        </tr> 
                          <tr>
                              <td  class ="td2">北京---2014年4月26号</td>
                            <td class="td3">基础班预约报名中</td>
                           
                         </tr>
                    </table>
                       </div>
                </td>
            </tr>
        </table>

    </div>
</body>
</html>

网页效果：
在这里插入图片描述
这是一种经常在网页上见到的效果，其实就是利用了div和table实现的效果
将该界面当作一个table，第一个以及基础班，就业班，远程班各占一行，其余的都是一行两个小的td元素。

其实个人觉得html相对于其他语言来说是比较简单的，不过要背的东西很多，各种属性各种控件想要熟练掌握免不了多练。

共勉。

向上的青春233

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
C#学习日记07——HTML和CSS

首先说概念：HTML是一种超文本标记语言在HTML当中存在着大量的标签，我们用HTML提供的标签，将要显示在网页中的内容包含起，构成我们的网页HTML控制网页上显示的内容，CSS控制网页上显示的效果HTML+CSS=静态网页HTML基本的框架标签：<html> <head>  <title></title> <head> .
复制链接

扫一扫