zoukankan      html  css  js  c++  java
  • HTML and CSS学习概述

    一·Web浏览器是一个连接到Web服务器,向Web服务器请求信息,然后解析返回来的HTML标记,并将其显示在浏览器窗口内的程序。
    1.
    Microsoft
    2.Internet Explorer(IE)
    3.
    Mozilla系列的FireFox

    二.网页的表现形式:
    字体大小、字体颜色、版面布局、背景等等,所有这些用来改变内容外观的东西,我们称之为“表现形式”。
    在网页中,用来对编写文档表现形式的语言是CSS(层叠样式表)。

    三.网页的行为
    网页与用户交互,响应鼠标或者按键事件,校验用户的输入,甚至动态地在网页运行时添加、更改文档内容、表现形式以及结构-----------网页的行为
    W3C组织定义的标准网页
    行为语言ECMAScript以及DOM编写。

    四.Web应用程序的组成部分2:Web服务器
    1.nternet存放网页的计算机称为Web服务器。
    2.
    Web服务器上通常会运行一个专门用来提供网页服务的Web服务器软件
    Apache   
    Tomcat   
    IIS
    . . .

    3.Web服务器本质上是一个可以提供网页浏览
     服务的可执行软件,Web服务器启动后,该软件就一直运行,并监听为操作系统为该软件分配的端口(操作系统为Web服务器分配的端口通常为80或8080)。

    五.Web应用程序的组成部分3:Web浏览器
    1.Web浏览器是一个连接到Web服务器,向Web服务器请求信息,然后解析返回来的HTML标记,并将其显示在浏览器窗口内的程序。
     
    Microsoft   Internet Explorer(IE)  
    Mozilla系列的FireFox
    。。。

    2.对Web标准的支持不同,造成跨浏览器网页编程的困难

    六.Web应用程序的组成部分4:HTTP协议
    1.浏览器和Web服务器之间如何通讯?
    2.
    Web服务器和Web浏览器都讲同一种语言,叫做超文本传输协议HTTP(HyperText Transfer Protocol)。
    3.
    HTTP协议是一套规则和过程,它使计算机能够通过Web交换信息。有了HTTP协议,那么不管这些计算机在哪个地方,使用的是什么操作系统,运行的是什么Web服务器软件,
      使用的是什么浏览器产品,它们都可以通过HTTP相互通讯。

    七.网页的分类
    1.静态网页:以.html或.htm文件保存,包含图像声音等媒体信息,不包含任何客户交互的动态内容,访问效率高,开发容易。
    2.客户端动态网页
    web服务器将原始的html界面和一组包含逻辑的脚本、组件
    等一起发送到客户端,这些脚本和组件包含如何与用户交互并产生动态内容的指令。由客户端的浏览器及其附带的插件解析html页面并执行这些指令。典型的客户端包括
    Javascript  Active控件  JavaApplet.

    3.服务器端动态网页
    web服务器在客户不同的请求下,动态的生成相应的内容。

    八:Web项目的分工
      专业的网页设计师负责网页的设计、版面布局、图像制作、网页元素颜色搭配等有关设计的工作,
    Web程序员则负责客户端脚本或者服务器段脚本的编码工作。

    Web文档主要由结构、表现和行为三个部分组成。对应于此结构,一般Web文档的表现部分即CSS,由网页设计师负责编写。而网页的行为部分,一般由Web程序员负责。
    而文档的结构,则是二者都关心的部分。
    在当今Web2.0时代,精通XHML/CSS/JavaScript的UI工程师或者用户体验工程师,已经成为一个非常时髦的职业。

    九:客户端网页编程工具
           1. Dreamweaver   2.
    WebStorm



                                                       xhtml 基础

    一.1.XHTML元素分为块级元素和内嵌元素两种类型,二者的不同之处在于块级元素定义的文本是换行的,而内嵌元素定义的文本是不换行的。
    常见的块级元素包括div.blockquote、
         列表元素(dl、ol、ul)、fieldset、form、h1-h6、hr、p、pre、table等。
    内嵌元素包括:span、a、img、label、所有的表单输入元素、iframe、object等。


       2.如果是内嵌元素,下一个元素就显示在该元素同一行上的后续位置。
    如果是块级元素,下一个元素就在浏览器下一行显示。
    二..1.在XHTML中标记名称必须小写
        
    2.在XHTML中属性必须小写
        
    3.在XHTML中标记必须正确嵌套
        
    4.在XHTML中标记必须关闭(标记成对出现)
        
    5.在XHTML中即使是空元素也必须关闭

        6.在XHTML中属性值必须用双引号括起来

    三.文档总体结构

    <html
    >

        <head>
        
           <title>网页文档标题</title>
        
    </head>

           <body>
           文档正文...
           
    </body>

    </html>

    2.用<!-- -->在文中做备注,不会显示在网页上
    3.<html>定义一个空白页 <head>元素定义XHTML的标题部分 他的元素中可以包括文档标题,元数据信息,文档脚本,样式信息。

    四.所有的XHTML都必须声明他们所使用的编码语言
       <meta http-equiv="content-type" content="text/html" charset="GB2312"/>
       GB2312:简体中文 也可用BIG5:繁体中文

    五: h1  h2  h3  h4  h5  h6 六个元素支持6个级别的正文标题 文字大小和重要性逐级递减

    1.<p>元素(paragraph)定义一个段落
      <blockquote>元素将段落缩进事其于周围文字偏离。
    2.列表
      <ol>(Ordered List)有序列表<ol> <li> </li> </ol>
      <ul>(Unorderd List)无序列表<ul> <li> </li> </ul>
      <dl>(Defiend List)定义列表<dl> <dt> </dt> </dl>
    3.<pre>自定义标签
    4.<div>(division)     <span>跨字符

    5.特殊字符:&nbsp;空格
               &lt;      左尖括号<或小于号
               &gt;      右尖括号>或大于号
               &copy; 版权符号©
               &reg;  已注册符号®
               &amp;  and符号&
               &#151; 长破折号

    5、<a>创建超链接  <a href="URL">描述文本</a>
       <a>标记的属性还包括title  accesskey  tabintex
    title:为所设置的文本工具提示。 accesskey:给超链接设置一个快捷键。tabintex:设置页面上的tab次序。

    六:在网页中显示图形
    网页中使用的图像只有GIF(Graphical Interchange Format)和
     JPG(也称JPEG. Joint Photographic Expert Grounp)两种
    用<img>标记  src告诉计算机想要显示的图像文件名。
    alt指定图像不能显示时应现实的文本。(图像不能显示时,鼠标移到图像上
    就会显示alt文本值)
    <img src="" alt="" />

    七:插入多媒体信息
    1)添加一个Flash文件
    <object type="application/x-shockwave-flash"
      data="flash文件路径" width="flash宽度" height="flash高度" id="对象在网页标识号">
    <param name="movie" value="flash文件的路径" />
    <param name="allowScriptAcess" value="sameDomain" />
    <param name="quality" value="best" />
    <param name="bgcolor" value="#FFFFFF" />
    <param name="scale" value=noScale />
    <param name="salign" value="TL" />
    <param name="FlashVars" value="playerMode=embedded" />
    </object>

    八:添加视频文件
    <object type="video/x-ms-wmv" data="wmv文件的地址" width="320" height="260">
     <param name="src" value="wmv文件的地址" />
     <param name="autostart" value="true" />
     <param name="controller" value="true" />
    </object>

    九:表格状数据
    <table>标记   <tr>标记嵌在<table>内    <th>做标题列嵌在 <tr>内          <td>嵌在<tr>内          


    border设置边框


    示例1、<table border="1">
         <tr>
            
            <td>数据单元格1</td>
     
            <td>数据单元格2</td>

            <td>数据单元格3</td>
        
         </tr>
        
         <tr>
            
            <td>数据单元格4</td>
            
            <td>数据单元格5</td>
            
            <td>数据单元格6</td>
        
         </tr>
       
    </table>

    示例2、<table border="1">

            <tr>
            
                   <th>标题</th>
            
                   <th>另一标题</th>
        
                </tr>
        
                <tr>
            
                   <td>行 1, 列 1</td>
            
                   <td>行 1, 列 2</td>
        
                </tr>    
                <tr>
            
                   <td>行 2, 列 1</td>
            
                   <td>行 2, 列 2</td>
        
                </tr>
          
    </table>
    示例3、创建空白单元格<table border="1">
        
                                  <tr>
            
                                      <th>标题</th>    
                                      <th>另一标题</th>
        
                                  </tr>
        
                                  <tr>
            
                                      <td>行 1, 列 1</td>
                                      <td>行 1, 列 2</td>
        
                                  </tr>
        
                                  <tr>
            
                                     <td>行 2, 列 1</td>
               
                                     <td></td>
        
                                  </tr>
                       
    </table>   


    示例4、<table border="1">
        合并单元格
           <tr>
           
               <th colspan="2">科目</th>
            colspan:合并列
               <th>J2EE</th>
            
               <th>.NET</th>
            
               <th>SQL</th>
        
           </tr>
        
           <tr>
            
               <td rowspan="3">总成绩</td>
                 rowspan:合并行
               <td>初级</td>
            
               <td>90</td>
            
               <td>100</td>

               <td>89</td>
        
               </tr>

        <tr>

           <td>中级</td>
            
               <td>98</td>

           <td>80</td>
            
               <td>89</td>
        </tr>

        <tr>
            
              <td>高级</td>

          <td>86</td>
            
              <td>98</td>
        
          <td>78</td>
        
           </tr>

        </table>



    十:框架结构

    如果我们想在一个网页中调入一个外部网页,可以使用iframe元素。iframe嵌入的网页我们常称为内部框架。使用iframe的好处在于:可以在一个html网页中嵌入
    另一个html网页,这里两个网页的内容相互融洽,成为一个整体;此外,还可以多次在一个网页内显示同一内容,再不必重复些内容,甚至可以再同一html文件中嵌
    入多个html文件。iframe元素的基本
    语法为:
    <iframe
     src="URL"
     width="x" height="x"
     scrolling="auto/yes"
     frameborder="0/1"
     name="内部框架的名称" >
    <iframe>
    其中:
    *src是指调用的外部网页文件的路径,既可以是html文件,也可以是文本、JSP等;
    *width、height:内部框架区域的宽度和高度;
    *scrolling:当src的指定的外部文件在指定区域显示不完的滚动选项。如果设为no,则不出现滚动条;如果为auto:则自动出现滚动条;如果是yes,则显示滚动条;
    *frameBorder:区域边框的宽度,可选值为0或者1。
    *name:框架的名字,用来进行识别。
    例如,下面的代码使用iframe在网页内部嵌入了w3c网站的首页:
    <iframe src="http://www.w3c.org" width="250" height="200" scrolling="auto"frameborder="0" name="main"></iframe>
    如果要在网页上放置一个超级链接,当点击超级链接时,在网页上打开另外一个网页,
    那么,我们需要给iframe的name属性命名,并将超级链接a标记的target属性设置为iframe的
    name属性值。例如:
    <a href="http://www.w3c.org" target="main" >在本网页中打开w3c网站</a>
    <iframe   width="250" height="200" scrolling="auto" frameborder="0"name="main" ></iframe>




                                                                XHTML中的表单


    一.HTML表单元素和属性可以分为两种类型:
    1.
    定义表单整体结构,使浏览器知道如何处理表单数据的元素;
    创建输入控件的元素。
    2.
    基本表单结构
    用form标记创建表单
    form标记对内包括表单元素和其它XHTML元素。
    3.基本格式:<form action="表单处理程序的URL" method="get|post">
    4.<form>标记的其它属性:accept  
    accept-charset  
    enctype
    name和id
    5、用来创建HTML输入控件的元素有三种:<
    input
    type=""/>
       
    select和option:创建一个下拉列表。
       
    textarea:多行输入的文本框。
    6、文本框   type=“text”
    属性
    size :大小。
    maxlength 输入的最大长度。
    value返回值。
    7、口令输入框   type=“password”
    属性

    size :大小。
    maxlength 输入的最大长度。
    value返回值。

    8、单选按钮   type=“radio”
    属性
    name名字   
    checked默认值   
    value返回值
    9、复选框    type=“checkbox”
    属性
    name名字   
    checked默认值   
    value返回值
    10、隐藏字段    type=“hidden”
    属性
    name名字   value返回值

    11、文件上传控件  type=“file”
    form表单属性
    enctype =“enctype ”
     method=“post”
    12、下拉列表    select和option标记   
    select元素中的name属性给整个列表命名   
    multiple="multiple“   
    size  
        
    option元素中的value给每个选项一个唯一值。
    13、多行文本框    textarea标记   
    属性
    cols和rows设置大小
    14、提交和重置 <input type="submit" value"提交" />
                  
    <input type="reset" value="重置" />

    15、图片提交和重置按钮    type=“image” <input type="image" src="submit.gif" value="submit" alt="发送" />

                                            <input type="image" src="reset.gif" value="reset" alt="清除" />
        
    属性
    value=“submit”(提交)   /value=“reset”(重置)
        
    alt提供一个可选的文本
    16、命令按钮 type=“button”
    属性
    value<input type=“button” value=“增加” />

                                   <input type="button" value="删除" />
    17、<lable for="">与网页的可访问性有关
    18、fieldset和legend元素
        <fieldset>       
                <legend>标题</legend>          <fieldset>表示周围一个细边的盒子<legend>在盒子上加一个标题
        </fieldset>

    19、在文本框增加一个readonly属性readonly="readonly" ,可以防止修改文本框中的数据。
                       
    disabled属性disabled="disabled" 可以使输入控件不可用

    20、
        <form id="" name="" action="URL" method="get/post"></form> id不可重复

  • 相关阅读:
    【iCore4 双核心板_FPGA】例程八:乘法器实验——乘法器使用
    【iCore4 双核心板_ARM】例程十一:DMA实验——存储器到存储器的传输
    【iCore1S 双核心板_FPGA】例程八:触发器实验——触发器的使用
    【iCore4 双核心板_ARM】例程十:RTC实时时钟实验——显示时间和日期
    【iCore4 双核心板_ARM】例程九:ADC实验——电源监控
    WebBrowser的Cookie操作之流量刷新机
    网站受攻击的常用手段
    八爪鱼招标网的百度权重升为2了,独立IP也从0快速发展为1000
    网站添加数据出错,原来是MS SQL Server2008日志文件占据空间过大导致的
    当你的网站被疯狂攻击时你能做什么?
  • 原文地址:https://www.cnblogs.com/Spirit612/p/3930007.html
Copyright © 2011-2022 走看看