背景:

最近公司开发BS架构的项目,公司主要业务也不是做BS开发的,没有项目经理,没有美工,没有前端,界面丑的不要不要的,哈哈哈

然后咧,使用asp.net用着用着,技术老大觉得界面怎么可以这么丑,不行换一个,换了一个叫devexpress的插件,这玩意用着是好看,可是相关的资源挺少的,查国外的资料也是很麻烦,新疆的网挂代理也慢的不行,而且大学的时候,网页设计的知识都还给老师了,导致好多js代码看不懂,还有AJAX回调机制是什么鬼,好像叫什么异步刷新啥玩意,这个devexpress控件还是挺麻烦的,学这个东西首先要html+css+JavaScript的基础是吧,那就学呗.

现在已经差不多明白了html+css的基础内容,这里做一些总结,以备未来查阅使用.

本篇内容大多数取自慕课网的教程,我嫌那个教程以后查询起来太麻烦,又总结了一遍加深记忆,如果侵权被追究了,给我发私信哈.我撤下来

1.展示信息的html元素

  1. <html>
  2. <head>
  3.     <title>常用元素标签</title>
  4.     <style type="text/css">
  5.     /*CSS样式一般写在这儿,这是CSS注释*/
  6.     body{
  7.         color:red;
  8.     }
  9.     </style>
  10. </head>
  11. <body>
  12.     <!-- html中的注释格式 -->
  13.     <h1>1级标题</h1>
  14.     <h2>2级标题</h2>
  15.     <h3>3级标题</h3>
  16.     <h4>4级标题</h4>
  17.     <h5>5级标题</h5>
  18.     <h6>6级标题</h6>
  19.     <em>斜体文字(一般歪果仁强调语义的字体)</em>
  20.     <br /><!-- 换行符(空标签) -->
  21.     <strong>粗体文字(一般中果仁强调语义的字体)</strong>
  22.     <p>段落</p>
  23.     <q>简单的引用</q>
  24.     <blockquote>对长文本引用,左右会有缩进的效果</blockquote>
  25.     <span>没有语义,用于表示特殊的样式</span>
  26.     <!-- html代码忽略回车,以及1个以上的空格,多个空格应使用"&nbsp;",例子如下 -->
  27.     <p>没想到输入&nbsp;空格&nbsp;这么麻烦,23333</p>
  28.     <hr /><!-- 不华丽的分割线(空标签) -->
  29.     <address>电子邮件,住址,签名,文档的作者身份</address>
  30.     <code>加入一行代码,var = "hello world";</code>
  31.     <!-- pre元素,保留语言代码段,保留空格,回车,例子如下 -->
  32.     <pre>
  33.     foreach(var item in strArray){
  34.         Console.writeLine(item);
  35.     }
  36.     </pre>
  37.     <ul>
  38.         <li>ul-li,无序的信息列表
  39.         </li>
  40.         <li>ul-li,无序的信息列表
  41.         </li>
  42.     </ul>
  43.     <ol>
  44.         <li>ol-li,有序的信息列表:1
  45.         </li>
  46.         <li>ol-li,有序的信息列表:2
  47.         </li>
  48.     </ol>
  49.     <table summary="HakunaMatata摘要是不会显示出来的)">
  50.         <caption>表格标题</caption>
  51. 　　　　 <tbody>
  52. 　　　　 <tr>
  53. 　　　　     <th>名字</th>
  54.             <th>爱好</th>
  55.         </tr>
  56.         <tr>
  57.             <td>彭彭</td>
  58.             <td>吃</td>
  59.         </tr>
  60.         <tr>
  61.             <td>丁满</td>
  62.             <td>跳舞</td>
  63.         </tr>
  64.         </tbody>
  65.     </table>
  66.     <!-- target="_blank" 使用新页面打开 -->
  67.     <a href="http://www.baidu.com" title="鼠标滑过显示" target="_blank">打开百度</a>
  68.     <!-- mailto可以发邮件,关键字有,cc(抄送地址),bcc(蜜饯抄送地址),;(多个隔开),
  69.          subject(邮件主题),body(邮件内容)
  70.     第一个关键字用?分割,后面的用&分割-->
  71.     <a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感。body=你好，对此评论有些想法。">对此影评有何感想，发送邮件给我</a>
  72.     <img src="图片http地址" alt="图片无法显示,用此文字替代" title="电影介绍" > 
  73.  
  74. </body>
  75. </html>

2.表单(与后台交互)

  1. <html>
  2. <head>
  3.     <title>表单</title>
  4. </head>
  5. <body>
  6.     <!-- method可以选择"get/post"2种,action是提交表单后执行交互的页面 -->
  7.     <form method="post" action="save.php">
  8.         <!-- label标签的for属性,与其他控件的name进行关联,在点击label时,把焦点移到与之关联的控件上 -->
  9.         <label for="username">用户名:</label>
  10.         <!-- id属性,是后台获取值时使用的. type是控件类型 -->
  11.         <input type="text" name="username" id="username" value="" />
  12.         <label for="pass">密码:</label>
  13.         <input type="password" name="pass" id="pass" value="" />
  14.         <!-- 表单有2个按钮,submit确定,reset重置 -->
  15.         <input type="submit" value="确定" name="submit" />
  16.         <input type="reset" value="重置" name="reset" />
  17.         <textarea cols="50" rows="10">在文本域中输入内容,在这里输入内容...</textarea>
  18.         <!-- 单选,注意name标签,一定要一致 -->
  19.         <input type="radio" name="loveChoose" value="喜欢" checked="checked">
  20.         <input type="radio" name="loveChoose" value="不喜欢">
  21.         <input type="radio" name="loveChoose" value="无所谓">
  22.         <!-- 多选 -->
  23.         <input type="checkbox" name="checkbox1" value="跑步" checked="checked">
  24.         <input type="checkbox" name="checkbox2" value="游泳">
  25.         <input type="checkbox" name="checkbox3" value="拳击" checked="checked">
  26.         <!-- 下拉列表框 -->
  27.         <select>
  28.             <option value="看书">看书</option>
  29.             <option value="旅游" selected="selected">旅游</option>
  30.             <option value="运动">运动</option>
  31.             <option value="购物">购物</option>
  32.         </select>
  33.         <!-- 下拉列表框,按住ctrl可多选,不直观,鬼知道要按ctrl -->
  34.         <select multiple="multiple">
  35.             <option value="看书">看书</option>
  36.             <option value="旅游">旅游</option>
  37.             <option value="运动">运动</option>
  38.             <option value="购物">购物</option>
  39.         </select>
  40.     </from>
  41. </body>
  42. </html>

3.CSS样式的3种写法

  1. <html>
  2. <head>
  3.     <title>CSS的3种写法</title>
  4.     <!-- 关于3中CSS写法的优先级,本例子中,内联式 > 嵌入式 > 外部式;
  5.     总结:距离被设置元素越近的,优先级越高 -->
  6.     <!-- 写法1"外部式CSS样式":href可修改,文件后缀.css,其他都是固定写法 -->
  7.     <link href="style.css" rel="stylesheet" type="text/css" />
  8.     <!-- 写法2"嵌入式CSS样式" -->
  9.     <style type="text/css">
  10.     p{
  11.         font-size:20px;/*设置文字字号*/
  12.     }
  13.     </style>
  14. </head>
  15. <body>
  16.     <p>好好学习,天天开心</p>
  17.     <br />
  18.     <!-- 写法3"内联式CSS样式" -->
  19.     <p style="color:blue">好好学习,天天向上</p>
  20. </body>
  21. </html>

4.CSS选择器

  1. <html>
  2. <head>
  3.     <title>CSS的选择器</title>
  4.     <style type="text/css">
  5.     /*
  6.     CSS的选择器一般使用下面的这种格式
  7.     选择符{
  8.     属性1:值;
  9.     属性2:值;
  10.     }
  11.     */
  12.     /*例1,匹配<p>元素*/
  13.     p{
  14.         font-size:20px;/*设置文字字号*/
  15.     }
  16.     /*例2,类选择器,匹配class为"apple1"的元素*/
  17.     .apple1{
  18.         color:red;/*设置文字颜色*/
  19.     }
  20.     .apple2{
  21.         font-size:50px;
  22.     }
  23.     /*例3,ID选择器,匹配id为"potato"的元素*/
  24.     #potato{
  25.         font-size:15px;
  26.     }
  27.     /*例4,子选择器,用>符号,匹配first第一代后代生效,第二代之后不生效*/
  28.     span{
  29.         color:red; /*给span一个默认的样式*/
  30.     }
  31.     .first>span{
  32.         color:blue; /*只有first类的第一代span才有的蓝色样式*/
  33.     }
  34.     /*例5,包含选择器,用空格符号,匹配"second"类下的所有"span"元素*/
  35.     .second span{
  36.         border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
  37.     }
  38.     /*例6,通用选择器,匹配html中的所有标签元素*/
  39.     *{
  40.         color:green;/*绿色*/
  41.     }
  42.     /*例7,伪类选择符,用:符号,如在超链接鼠标滑过时改变css样式*/
  43.     a:hover{
  44.         color:pink;
  45.         font-size:30px;
  46.     }
  47.     /*例8,分组选择符,用逗号,匹配".firstDiv"类,"secondDiv"元素*/
  48.     .firstDiv,.secondDiv{
  49.         color:purple;
  50.     }
  51.     </style>
  52. </head>
  53. <body>
  54.     <p>匹配到(例1)</p>
  55.     <p class="apple1">匹配到(例2)</p>
  56.     <span class="apple1 apple2">类选择器词列表方法(例2)</span>
  57.     <p id="potato">匹配到(例3)</p>
  58.     <p class="first">
  59.         <span>蓝一代(例4)
  60.             <span>红二代(例4)
  61.             </span>
  62.         </span>
  63.     </p>
  64.     <p class="second">
  65.         <span>第一代(例5)
  66.             <span>第二代(例5)
  67.             </span>
  68.         </span>
  69.     </p>
  70.     <a href="http:www.baidu.com">百度(例7)</a>
  71.     <div class="firstDiv">分组匹配,firstDiv类(例8)</div>
  72.     <div class="secondDiv">分组匹配,secondDiv类(例8)</div>
  73. </body>
  74. </html>

5.继承

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. /*有的CSS样式是可以继承的,有的是不可以的*/
  5. p{
  6.     color:red;
  7.     border:1px solid red;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <!-- (继承例子)<p>的字体为红色,也有红色边框,但是对于<p>标签内的<span>,只有字体为红色被继承了 -->
  13. <p>我今早起床睡意浓,睡眼尚迷蒙;<span>我忽然想起今日是</span>,假日好时光</p>
  14. </body>
  15. </html>

6.权值的优先级

  1. <style type="text/css">
  2. /*权值大的优先,权值相等的就进,这个没有例子,哈哈,自行体会.*/
  3. p{color:red;} /*权值为1*/
  4. p span{color:green;} /*权值为1+1=2*/
  5. .warning{color:white;} /*权值为10*/
  6. p span.warning{color:purple;} /*权值为1+1+10=12*/
  7. #footer .note p{color:yellow;} /*权值为100+10+1=111*/
  8. p{color:red!important;} /*使用!important,获得最高权值*/
  9. </style>

7.字体的CSS

  1. <style type="text/css">
  2. /*字体*/
  3. body{
  4.  font-family:"Microsoft Yahei";
  5.  /*或者用这个,font-family:"微软雅黑"*/
  6.  font-size:12px; /*字体大小(像素)*/
  7.  color:#654; /*颜色为:#665544,左边是简写*/
  8.  font-weight:bold; /*粗体*/
  9.  font-style:italic;/*斜体*/
  10.  text-decoration:underline;/*下划线*/
  11.  text-decoration:line-through;/*删除线*/
  12. }
  13. p{
  14.  text-indent:2em;/*缩进*/
  15.  line-height:2em;/*行高*/
  16.  word-spacing:50px;/*单词间隔*/
  17.  letter-spacing:50px;/*字母或汉字间隔*/
  18. }
  19. </style>

8.CSS盒模型

类型 元素标签 特点 写法
块级元素

<div>;<p>;

<h1>...<h6>;

<ol>;<ul>;<dl>;

<table>;<address>;

<blockquote>;<form>;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

a{

/*将内联元素转化为块级元素*/

display:block

}
内联元素

<a>;<span>;<br>;

<i>;<em>;<strong>;

<label>;<q>;<var>;

<cite>;<code>;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

4.当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。(解决方法：写在一行，之间不要有空格之类的符号。)

p{

/*将块级元素转化为内联元素*/

display:inline;

}
内联块状元素 <img>;<input>

意思就是有内联元素和块级元素的特点.

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

a{

/*将内联元素转化为内联块状元素*/

display:inline-block;

}

上代码:

  1. <html>
  2. <head>
  3.     <style type="text/css">
  4.     a{
  5.         /*将内敛元素a转化为,块级元素,这
  6.         样<a>就有块级元素的特点了*/
  7.         display:block;
  8.     }
  9.     /*模型盒-样式-缩写*/
  10.     .border1{
  11.         border:2px solid red;
  12.     }
  13.     .border2{
  14.         border-width:2px; /*边框宽度(像素)*/
  15.         /*border-style(边框样式)常见样式有:dashed(虚线)|dotted(点线)|solid(实线)*/
  16.       border-style:solid;
  17.       border-color:red; /*边框颜色*/
  18.     }
  19.     .border3{
  20.         background-color:pink; /*border3,粉色背景*/
  21.         /*填充,上右下左的顺序*/
  22.         padding: 20px 10px 15px 30px; /*内填充*/
  23.         /*边界,上右下左的顺序*/
  24.         margin:20px 10px 15px 30px; /*外边距*/
  25.     }
  26.     .border4{
  27.         background-color:blue; /*border3,粉色背景*/
  28.         /*也可以这样填充*/
  29.         padding-top:20px; /*上方内填充*/
  30.         padding-right:10px; /*右*/
  31.         padding-bottom:15px; /*下*/
  32.         padding-left:30px; /*左*/
  33.         /*也可以这样边距*/
  34.         margin-top:20px; /*上方外边距*/
  35.         margin-right:10px; /*右*/
  36.         margin-bottom:15px; /*下*/
  37.         margin-left:30px; /*左*/
  38.     }
  39.     .border5{
  40.         /*为一个方向上的边框设置样式*/
  41.         border-bottom:1px dotted #ccc;
  42.     }
  43.     </style>
  44. </head>
  45. <body>
  46.     <a href="http://www.baidu.com">打开百度(超级链接变为块级元素)</a>
  47.     <div class="border1">模型盒缩写形式</div>
  48.     <div class="border2">模型盒完整形式</div>
  49.     <div class="border3">border3,粉色背景</div>
  50.     <div class="border4">border4,蓝色背景</div>
  51.     <div class="border5">border5,仅设置一个方向上的边</div>
  52. </body>
  53. </html>

9.CSS布局模型

布局这个玩意,对于我个人来说,了解就行了,没兴趣研究.到时候用到的时候摆一摆看看效果也就知道怎么回事了

布局模型 内容 写法
流动模型(flow)

html默认的布局模型

1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，
因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行
的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度
显示为100%。

2.在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

  不需要写.默认的
浮动模型(float)

left:盒子浮动到左边，文字跑到盒子右边

none:网页元素将按照他们自身的出现方式排列，一般是靠边对齐，按照文本流执行先后顺序排列.

right:盒子浮动到右边，文字跑到盒子左边

float:left;

float:none;

float:right;
层模型(layer)

1.绝对定位:使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

2.相对定位:偏移前的位置保留不动,进行相对位移,如果看不懂,去写代码试试

3.固定定位:就像,网页上的广告那样,滚动条不管滚到哪,都在网页中显示

position: absolute;

position: relative;

position: fixed

10.简写与数值

  1. <style type="text/css">
  2. /*盒模型代码简写:*/
  3. .divBoxCss{
  4.     margin:10px 15px 12px 14px;
  5.     padding:10px 15px 12px 14px;
  6. }
  7. /*有3种简写情况:*/
  8. .div1{
  9.     /*1.如果top、right、bottom、left的值相同，如下面代码：*/
  10.     margin:10px 10px 10px 10px;
  11.     margin:10px;
  12. }
  13. .div2{
  14.     /*2.如果top和bottom值相同、left和 right的值相同，如下面代码：*/
  15.     margin:10px 20px 10px 20px;
  16.     margin:10px 20px;
  17. }
  18. .div3{
  19.     /*3.如果left和right的值相同，如下面代码：*/
  20.     margin:10px 20px 30px 20px;
  21.     margin:10px 20px 30px;
  22. }
  23.  
  24. /*颜色值缩写*/
  25. /*例子1*/
  26. p{color:#000000;}
  27. p{color: #000;}
  28. /*例子2*/
  29. p{color: #336699;}
  30. p{color: #369;}
  31.  
  32. /*字体缩写*/
  33. /*一般写法*/
  34. body{
  35.     font-style:italic;
  36.     font-variant:small-caps;
  37.     font-weight:bold;
  38.     font-size:12px;
  39.     line-height:1.6em;
  40.     font-family:"宋体",sans-serif;
  41. }
  42. /*缩写*/
  43. body{
  44.     font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
  45. }
  46. /*
  47. 注意：
  48. 1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的
  49. 属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
  50. 2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
  51. */
  52.  
  53. /*一般中文网站的字体缩写*/
  54. body{
  55.     font:12px/1.5em  "宋体",sans-serif;/*sans-serif无衬线字体,一个字体种类*/
  56. }
  57.  
  58. /*颜色值*/
  59. /*1、英文命令颜色:*/
  60. p{color:red;}
  61. /*2、RGB颜色*/
  62. p{color:rgb(133,45,200);}
  63. p{color:rgb(20%,33%,25%);}
  64. /*3、十六进制颜色*/
  65. p{color:#00ffff;}
  66.  
  67. /*长度值*/
  68. /*1.像素px,显示器上的小点*/
  69. /*
  70. 2.em,本元素给定font-size值
  71. 假如font-size:12px,
  72. 则1em=12px
  73. 0.5em=6px
  74. */
  75. </style>

完结

html和css基础的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  3. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  4. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  5. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. css基础不扎实

    写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...

  9. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  10. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

随机推荐

  1. docker 源码分析 一（基于1.8.2版本），docker daemon启动过程；

    最近在研究golang,也学习一下比较火的开源项目docker的源代码,国内比较出名的docker源码分析是孙宏亮大牛写的一系列文章,但是基于的docker版本有点老:索性自己就git 了一下最新的代 ...

  2. 【LeetCode OJ】Minimum Depth of Binary Tree

    Problem Link: http://oj.leetcode.com/problems/minimum-depth-of-binary-tree/ To find the minimum dept ...

  3. iOS真机UI调试利器——Reveal

    做iOS的开发,UI是非常非常重要的一环.调试时我们一般用模拟器,提交前用真机做测试.用模拟器来调试UI效果虽然快捷方便,但有时仍然希望有更强大 的工具来帮助分析UI,尤其是专注在UI的效果调试时.最 ...

  4. 机械键盘那些事[我用过的minila Filco cherry 3494 阿米洛87]

    用过几月下来.最终现在还能流畅使用的,就剩下3494 跟 minila了. 想起购买的初衷.cherry是泰斗,红轴轻柔,所以三把全红轴. 之后,觉得携带外出不方便,所以就又入了个MINILA. 再后 ...

  5. Cacti-安装和使用详解

    Cacti是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具.Cacti是通过 snmp get来获取数据,使用 RRDtool绘画图形,而且你完全可以不需要了解RR ...

  6. Nim游戏变种——取纽扣游戏

    (2017腾讯实习生校招笔试题)Calvin和David正在玩取纽扣游戏,桌上一共有16个纽扣,两人轮流来取纽扣,每人每次可以选择取1个或3个或6个(不允许不取),谁取完最后的纽扣谁赢.Cavin和D ...

  7. .Net操作Excel

    先去官网:http://npoi.codeplex.com/下载需要引入dll(可以选择.net2.0或者.net4.0的dll),然后在网站中添加引用. .Net导出代码: /// <summ ...

  8. 将WeX5部署到自己的Tomcat服务器上

    页面服务UIServer布署 WeX5自带页面服务UIServer的是标准Web应用,可以部署在Java Web应用服务器上.下面介绍如何在Tomcat和WebLogic中部署WeX5的UIServe ...

  9. Cannot find executable for CFBundle 解决办法

    出错日志为:2013-12-29 01:17:49.785 Displaying Alerts with UIAlertView[419:70b] Cannot find executable for ...

  10. Hadoop学习11--Ha集群配置启动

    理论知识: http://www.tuicool.com/articles/jameeqm 这篇文章讲的非常详细了: http://www.tuicool.com/articles/jameeqm 以 ...