Html&CSS

一、JavaSE的C/S软件架构与JavaEE的B/S软件架构

  • JavaSE即JavaStandard Edition，允许支持开发部署在桌面、服务器、嵌入式环境和实时环境中的Java应用程序，包含了支持Web服务的一些API，为JavaEE提供了基础
    1. C/S软件架构，客户端部署在桌面-----------服务器端
  • JavaEE即JavaEnterprise Edition，JavaEE是在JavaSE的基础上构建的，提供了web服务
    1. B/S软件架构，客户端：浏览器--------------服务器端：Web服务器

二、网页的三大组成部分

  1. 内容：即在网页中所能看到的数据，用Html技术进行展示
  2. 表现：即网页中各项表格，文本等的具体样式，用CSS技术进行完成　
  3. 行为：即网页与用户进行交互产生的响应，用JavaScript技术进行展示

三、Html

  1. 概念：Html（Hyper type makeup language）超文本标记语言，通过不同的标签来告诉浏览器我所要展示的内容，本身也是一种文本文件，可以在标签内添加标记符告诉浏览器如何展示
  2. 书写规范： 
    <html>                            <!--html页面的开始-->
  <head>                          <!--头信息-->
    <title>$Title$</title>        <!--html文件的标题-->
  </head>
  <body>
                                  <!--页面的主题内容-->
  </body>
</html>
  3. 标签
    • 格式：<标签名>封装的数据</标签名>
      • 标签名大小写不敏感
    • 属性：基本属性、事件属性
      • 基本属性如color,bgcolor等
      • 时间属性如onClick,onblur等，可设置时间响应后的代码　　
    • 分类
      • 单标签：<br/> 换行符    <hr/>水平线     <img src = '路径'/>
      • 双标签：<p></p>   <div></div>   <span></span>
    • 语法
      • 标签必须正确闭合
      • 标签不能交叉嵌套
      • 注释内容不能嵌套在标签体内(<!-- 这是html注释 -->)
    • 常用的标签介绍
      • <font color='red' size='7' face='微软雅黑' >我是字体标签</font>
      • 特殊字符：
        1. <       &lt
        2. >       &gt
        3. 空格  &nbsp
      • <h1>标题标签</h1>
      • <a href='网址' target='_self'>超链接</a>
      • 无序列表<ur type='none'>
          • <li>列表项
          • </li>   　　
        • </ul>
      • 图片<img src=''></img>
      • 表格 
        <table align='center' cellspacing='0'>表格标签
    <tr>行标签
        <td>单元格标签
        </td>
    </tr>
</table>
        • 跨行跨列--- <table colspan='2' rowspan='2'>
      • iframe框架<iframe src='' height='' width='' name=''></iframe>在html页面中显示一个单独的窗口，设置name属性时，可成为超链接跳转的target目标地点
      • 表单：用来收集用户所有信息的元素的集合并提交给服务器 
        <form action="http://local:8080/ " method="get">
    用户名：<input type="text" name="username" value="默认的文本框中的值"/><br/>
    密码：<input type="password" name="password" value=""><br/>
    性别：男<input type="radio" name="sex" value="man" checked="checked">女<input type="radio" name="sex" value="woman"><br/>
    兴趣爱好：cpp<input type="checkbox" name="hobby" value="cpp"><br/>
    java<input type="checkbox" name="hobby" value="java"><br/>
    js<input type="checkbox" name="hobby" value="js"><br/>
    国家：
    <select>
        <option value="none">----请选择国籍----</option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="德国">德国</option>
        <option value="日本">日国</option>
    </select><br/>
    自我评价：
    <textarea name="desc" rows="10" cols="10">我是默认文本框中的值</textarea>
    <button type="submit" >提交</button>
</form>
        • action设置提交的服务器地址
        • method是提交方法，默认是get，可设置为post
        • 成功提交后（以get请求为例）action?name=value&name=value
        • 表单没有成功提交的情况
          • 表单项没有name属性值
          • 单选，复选要设置value属性值
          • 不在form标签内
      • 其他标签<div>默认独占一行</div>     <span>默认是文本的长度</span>     <p>段落标签，前后会空出一行，如已空行，则不空行</p>

四、CSS

　　概念：CSS即层叠样式表单，是允许网页内容与样式信息相分离的一种标记性语言。

　　语法： 选择器{ color:red;属性:值;属性:值; }

　　　　浏览器根据选择器所标记的受样式信息确定被影响的标签

　　　　属性和值之间用冒号分开，结尾用分号结束

　　　　多个声明之间也可用分号分割

　　　　注释：/*注释内容*/

　　CSS与HTML的结合方式

    • 第一种：在标签的style属性中进行设置 
      <div style="height: 9px;color: blue;size: A4">我是DIV</div>
      • 说明：这样设置代码缺乏重用性，且容易造成混乱与冗杂，代码量十分庞大
    • 第二种：在<head>的<style type="text/css">标签中进行设置 
      <style type="text/css">
        div{
            border: 1px red solid;
        }
        span{
            border: 1px red solid;
        }
</style>
      • 说明：仅能在同一页面中设置样式，若页面庞大则需要每个页面中都设置样式信息，代码不好维护，重用性还有待提高。
    • 第三种：将CSS样式写成一个单独的文件，需要时再引用
      • 说明：<link rel="stylesheet" type="text/css" href="./styles.css/" />   link标签专门用于引入CSS代码

　　选择器

    1. 标签名选择器：可以决定哪些标签被动的使用这个样式
    2. id选择器 #id{ 属性:值; 属性:值; }   可以通过标签的id属性决定当前标签的样式信息
    3. 类选择器 .class{ 属性:值; 属性:值; }    可以通过标签的class属性决定当前标签的样式信息
    4. 组合选择器  #id,.class{ 属性:值; 属性:值; } 

　　常用样式

    1. color:颜色;
    2. width:?px;
    3. height:?px;
    4. font-size:?px;
    5. background-color:颜色
    6. border:?px 颜色 线条
    7. maigin-left:auto;DIV标签中的属性
    8. margin-right:auto;DIV标签中的属性
    9. text-align:center;
    10. text-decoration:none;超链接去下划线
    11. list-style:none;列表去下划线

 

 

　　　　

 

posted @ 2020-11-24 14:24  arraySet  阅读(66)  评论(0)    收藏  举报