一、HTML规范

  1、一个html文件开始标签和结束标签   <html>  </html>

  2、html包含两部分内容

    (1).  <head>设置相关信息</head>

    (2). <body>显示在页面上的内容都写在body里面</body>

  3、html的标签又开始标签,也要有结束标签

    - <head></head>

  4、html代码不区分大小写

  5、有些标签,没有结束标签,在标签内结束

    - <br/>(换行)        <hr/>(直线)

二、HTML的操作思想

   网页中有很多数据,不同的数据需要不同的显示效果,这时需要使用标签把要操作的数据封装起来,通过修改标签的属性值实现标签内数据的变化。

   一个标签相当于一个容器,需要修改容器内数据段样式,只需要修改容器内数据样式的变化。

三、文字标签和注释标签

  -文字标签:修改文字的样式、

       -<font></font>

       -属性:

        * size: 文字的大小  取值范围1-7,超出了7,默认还是7

        *color: 文字颜色

            -两种表达方式

              ** 英文单词:red  blue  green  black  white  yellow  gray

              **使用十六进制表示:#ffffff  :RGB

                        -通过工具实现不同的颜色   #66cc66

 

  -注释标签:html注释:<!--  html的注释 -->   ****     ! 必须是英文的符号

四、标题标签和水平标签和特殊字符

  -标题标签: <h1>标题1</h1>    <h2>标题2</h2>......<h6>标题6</h6>

        - 从h1到h6,大小依次变小,同时会自动换行

  -水平标签: <hr/>

        -属性

           ** size

           ** color

        -  <hr size="6"  color="red" />

  -特殊字符:

        -想要在网页上显示这样的内容   <html>:是网页的开始

        -需要对特殊字符进行转义

        -     <    &lt;

        -     >   &gt;

           -     空格   &nbsp;

五、列表标签

   - <dl> </dl>;  表示列表的范围

     ** 在dl里面  <dt></dt>   上层内容

     ** 在dl里面 <dd></dd>   下层内容

     代码:

      <dl>

             <dt>某某大学</dt>

              <dd>教务处</dd>

            <dd>财务处</dd>

            <dd>后勤部</dd>

       </dl>

      显示效果: 某某大学

               教务处

               财务处

               后勤部

    - <ol></ol>;表示有序列表的范围

      ** 在<ol>标签里面 <li>具体内容</li>

      **属性:type  设置排序方式:1(默认) a  i

     代码:

      <ol  type="1">

              <li>教务处</li>

            <li>财务处</li>

            <li>后勤部</li>

       </ol>

             

    显示效果: 某某大学

               教务处

               财务处

               后勤部

 

    -显示效果:

               特殊符号 教务处

                 特殊符号 财务处

               特殊符号 后勤部

         ** <ul></ul>;无序列表的范围

                **  属性 type: 空心圆:circle, 实心圆 (默认) :disc ,实心方块: squrate;

         **  在ul里面 <li></li>;

       代码: <ul   trpe="disc">

            <li>教务处</li>

            <li>财务处</li>

            <li>后勤部</li>

                   </ul>

 

六、超链接标签(******)

  - 连接资源

    ** <a href="连接到资源的路径"> 显示在页面上的内容 </a>

      - 属性:href: 链接资源的地址

          target:设置打开的方式,  默认是当前页打开。

                                     _blank:在一个新窗口打开  

             _self:在当前页打开

      - 当超链接不需要跳转到任何页面时候,设置href="#"

  - 定位资源

   * 如果想要定位一个资源:首先定义一个位置  <a name="top"> 顶部 </a>

        * 回到这个位置  <a href="#top">回到顶端</a>

    * 引入一个标签  pre:原样输出   <pre>  </pre>

七、表格标签 **

  * 可以对数据进行格式化,使数据显示更加清晰

  *<table></table>  表示表格的范围

      - border:表格线

      -bordercolor:表格线的颜色

                 - cellspacing:单元格之间的距离

      - width:表格的宽度

      - height:表格的高度

     * 在table里面 <tr></tr>  表示表格的行

      -设置对齐方式:align: left  center  right

     * 在tr里面 <td></td>  表示行里面的单元格

                -设置对齐方式:  align: left  center  right

     *<th></th>:可以实现单元格  实现居中加粗

     * 表格的标题 : <caption></caption>

  *操作技巧:先数有多少行,在数每行有多少个单元格

       

            

   代码: <table border="1"  bordercolor="red"  cellspacing="0"  width="100"  height="150">

      <caption>人员信息</caption>

        <tr align="center">

            <td >姓名</td>

            <td>年龄</td>

        </tr>

                       <tr>

            <tdalign="left" >张三</td>

            <td>22</td>

        </tr>

             </table>

   *合并单元格:

     - rowspan:跨行         <td   rowspan="3">20</td>

     - colspan: 跨列     <td   colspan="3">人员信息</td>

八、图片标签

  <img src=""  width=""  height="'/>

九、表单标签

  * 提交数据到服务器,可以使用表单标签来实现。

  *<form></form>: 定义一个表单的范围

            属性:action:  提交到的地址   默认提交到当前页面

    **输入项:可以输入内容或者选择内容   <input type="输入项内容"/>     必须有name属性

          普通输入项: 手机号码:<input type="text" name="phonenumber"/>  

                 密码:<input type="password"/>

                 性别:<input type="radio" name="sex1 value="nv"/>女  <input type="radio" name="sex1"value="nan"/ />男   name是属性值必须相同  必须由value值

                              复选输入项:<input type="checkbox" name="love"/>足球  <input type="checkbox" name="love"/>羽毛球   必须由value值

                 文件输入项:<input type="file"/>   文件上传

                 下拉输入项:<select  name="birth">

                          <option value="0">请选择</option>

                          <option value="1992">1992</option>

                          <option value="1993">1993</option>

                       </select>

                文本域:<textarea cols="10" rows="5"></textarea>

                隐藏项: <input type="hidden"/>

                提交按钮: <input  type="submit" value="注册"/>