你的位置:首页 > 网页设计

[网页设计]html和css基础


背景:

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

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

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

1.展示信息的html元素

<html><head>  <title>常用元素标签</title>  <style type="text/css">  /*CSS样式一般写在这儿,这是CSS注释*/  body{    color:red;  }  </style></head><body>  <!-- html中的注释格式 -->  <h1>1级标题</h1>  <h2>2级标题</h2>  <h3>3级标题</h3>  <h4>4级标题</h4>  <h5>5级标题</h5>  <h6>6级标题</h6>  <em>斜体文字(一般歪果仁强调语义的字体)</em>  <br /><!-- 换行符(空标签) -->  <strong>粗体文字(一般中果仁强调语义的字体)</strong>  <p>段落</p>  <q>简单的引用</q>  <blockquote>对长文本引用,左右会有缩进的效果</blockquote>  <span>没有语义,用于表示特殊的样式</span>  <!-- html代码忽略回车,以及1个以上的空格,多个空格应使用"&nbsp;",例子如下 -->  <p>没想到输入&nbsp;空格&nbsp;这么麻烦,23333</p>  <hr /><!-- 不华丽的分割线(空标签) -->  <address>电子邮件,住址,签名,文档的作者身份</address>  <code>加入一行代码,var = "hello world";</code>  <!-- pre元素,保留语言代码段,保留空格,回车,例子如下 -->  <pre>  foreach(var item in strArray){    Console.writeLine(item);  }  </pre>  <ul>    <li>ul-li,无序的信息列表    </li>    <li>ul-li,无序的信息列表    </li>  </ul>  <ol>    <li>ol-li,有序的信息列表:1    </li>    <li>ol-li,有序的信息列表:2    </li>  </ol>  <table summary="HakunaMatata摘要是不会显示出来的)">    <caption>表格标题</caption>     <tbody>     <tr>       <th>名字</th>      <th>爱好</th>    </tr>    <tr>      <td>彭彭</td>      <td>吃</td>    </tr>    <tr>      <td>丁满</td>      <td>跳舞</td>    </tr>    </tbody>  </table>  <!-- target="_blank" 使用新页面打开 -->  <a href="http://www.baidu.com" title="鼠标滑过显示" target="_blank">打开百度</a>  <!-- mailto可以发邮件,关键字有,cc(抄送地址),bcc(蜜饯抄送地址),;(多个隔开),     subject(邮件主题),body(邮件内容)   第一个关键字用?分割,后面的用&分割-->  <a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感。body=你好,对此评论有些想法。">对此影评有何感想,发送邮件给我</a>  <img src="图片http地址" alt="图片无法显示,用此文字替代" title="电影介绍" > </body></html>

 

2.表单(与后台交互)

<html><head>  <title>表单</title></head><body>  <!-- method可以选择"get/post"2种,action是提交表单后执行交互的页面 -->  <form method="post" action="save.php">    <!-- label标签的for属性,与其他控件的name进行关联,在点击label时,把焦点移到与之关联的控件上 -->    <label for="username">用户名:</label>    <!-- id属性,是后台获取值时使用的. type是控件类型 -->    <input type="text" name="username" id="username" value="" />    <label for="pass">密码:</label>    <input type="password" name="pass" id="pass" value="" />    <!-- 表单有2个按钮,submit确定,reset重置 -->    <input type="submit" value="确定" name="submit" />    <input type="reset" value="重置" name="reset" />    <textarea cols="50" rows="10">在文本域中输入内容,在这里输入内容...</textarea>    <!-- 单选,注意name标签,一定要一致 -->    <input type="radio" name="loveChoose" value="喜欢" checked="checked">    <input type="radio" name="loveChoose" value="不喜欢">    <input type="radio" name="loveChoose" value="无所谓">    <!-- 多选 -->    <input type="checkbox" name="checkbox1" value="跑步" checked="checked">    <input type="checkbox" name="checkbox2" value="游泳">    <input type="checkbox" name="checkbox3" value="拳击" checked="checked">    <!-- 下拉列表框 -->    <select>      <option value="看书">看书</option>      <option value="旅游" selected="selected">旅游</option>      <option value="运动">运动</option>      <option value="购物">购物</option>    </select>    <!-- 下拉列表框,按住ctrl可多选,不直观,鬼知道要按ctrl -->    <select multiple="multiple">      <option value="看书">看书</option>      <option value="旅游">旅游</option>      <option value="运动">运动</option>      <option value="购物">购物</option>    </select>  </from></body></html>

3.CSS样式的3种写法

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

4.CSS选择器

<html><head>  <title>CSS的选择器</title>  <style type="text/css">  /*  CSS的选择器一般使用下面的这种格式  选择符{  属性1:值;  属性2:值;  }  */  /*例1,匹配<p>元素*/  p{    font-size:20px;/*设置文字字号*/  }  /*例2,类选择器,匹配class为"apple1"的元素*/  .apple1{    color:red;/*设置文字颜色*/  }  .apple2{    font-size:50px;  }  /*例3,ID选择器,匹配id为"potato"的元素*/  #potato{    font-size:15px;  }  /*例4,子选择器,用>符号,匹配first第一代后代生效,第二代之后不生效*/  span{    color:red; /*给span一个默认的样式*/  }  .first>span{    color:blue; /*只有first类的第一代span才有的蓝色样式*/  }  /*例5,包含选择器,用空格符号,匹配"second"类下的所有"span"元素*/  .second span{    border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/  }  /*例6,通用选择器,匹配html中的所有标签元素*/  *{    color:green;/*绿色*/  }  /*例7,伪类选择符,用:符号,如在超链接鼠标滑过时改变css样式*/  a:hover{    color:pink;    font-size:30px;  }  /*例8,分组选择符,用逗号,匹配".firstDiv"类,"secondDiv"元素*/  .firstDiv,.secondDiv{    color:purple;  }  </style></head><body>  <p>匹配到(例1)</p>  <p class="apple1">匹配到(例2)</p>  <span class="apple1 apple2">类选择器词列表方法(例2)</span>  <p id="potato">匹配到(例3)</p>  <p class="first">    <span>蓝一代(例4)      <span>红二代(例4)      </span>    </span>  </p>  <p class="second">    <span>第一代(例5)      <span>第二代(例5)      </span>    </span>  </p>  <a href="http:www.baidu.com">百度(例7)</a>  <div class="firstDiv">分组匹配,firstDiv类(例8)</div>  <div class="secondDiv">分组匹配,secondDiv类(例8)</div></body></html>

5.

未完待续...