一、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="注册"/>

                  

优质内容筛选与推荐>>
1、eq,neq,gt,lt等表达式缩写
2、【Python】如何安装easy_install?
3、iOS- <项目笔记>UI控件常见属性总结
4、Servlet
5、贪心算法


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号