zoukankan      html  css  js  c++  java
  • HTML基础笔记

    html基础
      (1)什么是html?超文本标记语言
        用于开发网页的语言,由浏览器解释执行
      (2)html文件的基本结构
      <html>
        <head>
        <title></title>
          <!--用于模拟http消息头-->
          <!--比如以下消息头的作用,是告诉浏览器,返回的是一个html,并应该以utf-8的编码来显示该页面-->
          <!--html文件保存的编码应该与meta声明的编码一致-->
          <meta http-equiv="content-type" content="text/html;charset=utf-8">
          <!--引入脚本-->
        <script>
          <!--定义样式-->
        <style>
          <!--引入外部样式-->
        <link>
        </head>
        <body>
          <!--页面显示的数据-->
        </body>
      </html>
      (3)web开发标准
          w3c建议,开发一个页面,应该这样设计:页面的结构(包括了数据),由html文档来负责;
          页面的外观,由css文档来负责;
          页面的行为,由javascript文档来负责。
      (4)链接
        a、基本使用:<a href="url地址" target="_blank">链接的描述</a>
           target="_blank"在一个新的空白的页面打开
           target="_self"在当前窗口打开(默认的)
        b、使用图片作为链接
          <img src="图片地址" width="" height="" border=""/>
        c、使用热点
          <img XXXX usemap="#Map">
          <map name="Map">
            <area shape="rect" coords="1,1,1,1",href="url地址">
          </map>
          当shape=“rect”(矩形)时,coords的值为左右个顶点的值,当shape=“circle” 圆形时,一个坐标一个半径长度
        d、使用锚点:再用一个页面内部跳转
          <a name="top"></a>
          举例:
            <a name="top">some data...</a>
            <div style="height:900px;"></div>
            <a href="#top">to Top</a>
        e、发送邮件
          <a href="mailto:邮箱地址?subject=hello"></a>
        f、链接中的伪样式(css中再讲)
      (5)列表
        a、无序列表
          <ul>
            <li><a href="test.html">1</a></li>
            <li><a href="#">2</a></li>
            <!--#表示当前页面-->
            <li>3</li>
          </ul>
        b、有序列表
          <ol>
            <li><a href="test.html">1</a></li>
            <li><a href="#">2</a></li>
            <li>3</li>
          </ol>
        c、列表嵌套
          <ul>
            <li><a href="test.html">item1</a></li>
            <ul>
              <li><a href="#">item2</a></li>
              <li>item3</li>
            </ul>
            <li>item3</li>
          </ul>
    (6)表格
        a、基本使用:<tr>:行 <td>;列
          <table border="3px" width="40%" cellpadding="3" cellspacing="10">
            <tr>
              <td align="center">id</td>
              <td>name</td>
              <td>sal</td>
            </tr>
            <tr>
              <td>001</td>
              <td>java</td>
              <td>20.00</td>
            </tr>
          </table>
          border:边框的宽度
          cellpadding:单元格里面的数据与单元格边框之间的距离
          cellspacing:单元格之间的距离
          width:50%或者500,宽度
          align:left、center、right,水平位置
          valign:top、middle、bottom ,垂直位置
        b、不规则的表格
          cospan:跨列合并
          rowspan:跨行合并
          举例:
            <table border="3px" width="40%" cellpadding="3" cellspacing="0">
              <tr>
                <td colspan="2" align="center">单元格1</td>
              </tr>
              <tr>
                <td rowspan="2" align="center" valign="top">单元格2</td>
                <td>单元格3</td>
              </tr>
              <tr>
                <td>单元格4</td>
              </tr>
            </table>
        c、表格的另一种写法:
            <table>
              <caption>标题</caption>
              <thead></thead>
              <tfoot></tfoot>
              <tbody></tbody>
              <tbody></tbody>
            </table>
            thead:表头,0/1
            tfoot:表脚,0/1
            fbody:表体,1/n
          d、表格可以嵌套
            <table border="3px" width="40%" cellpadding="3" cellspacing="0">
              <tr>
                <td>abc</td>
                <td>abc2</td>
              </tr>
              <tr>
                <td>abc3</td>
                <td>
                  <table border="1" width="80% cellpadding="3" cellspacing="0"> 

                    <tr><td>1</td><td>2</td></tr>
                    <tr><td>3</td><td>4</td></tr>
                  </table>
                </td>
              </tr>
            </table>
     (
    7)表单:用于收集用户的信息,比如登陆表单,可以让用户输入用户名、密码,这些信息会提交给服务器做验证
          <form>
            <input type="text"/>
          </form>
        input标记:
          type="text":文本输入框
          type="submit":提交按钮
          type="reset":重置按钮
          type="password":密码输入框
          type="radio":单选
          type="checkbox":多选
          type="file":上传文件(给form添加一个属性 enctype=”multipart/form-data“)
          type="hidden":隐藏域
        非input标记:
          <textarea>:多行文本输入框
          <select>:下拉列表/多选框
    (8)框架
      什么是框架:用来将一个窗口划分成多个子窗口
      a、<frameset>,<frame>
        注意:frameset不能写在<body>里,可以嵌套使用。
      b、<iframe>
        可以使用在<body>里,表示嵌入一个子窗口
    (9)其他标记
      <h1>...<h6>:标题
      行内标记:不单独占一行的标记----<span></span>、<strong></strong>
      块级标记:另起一行的标记----<h1>...<h6>、<table>、<form>、<p></p>、<div>
    (10)实体
      在html页面中,出现了空格、>、<、"、& 应该用实体来代替
      &nbsp; 空格
      &gt; >
      &lt; <
      &quot; "
      &amp; &
    (11)html/xhtml:
      xhtml:扩展的超文本标记语言

  • 相关阅读:
    RabbitMQ核心组件及应用场景
    集群架构和CentOS7安装RabbitMQ集群(单机版)
    CentOS7下安装单机版RabbitMQ及权限赋予
    Spring事务管理
    java服务器图片压缩的几种方式及效率比较
    Spring中通过java的@Valid注解和@ControllerAdvice实现全局异常处理。
    go语言调度器源代码情景分析之三:内存
    go语言调度器源代码情景分析之二:CPU寄存器
    go语言调度器源代码情景分析之一:开篇语
    面试官:swoole 的认识和强大之处你不知道?回去吧!!!
  • 原文地址:https://www.cnblogs.com/sylovezp/p/4137959.html
Copyright © 2011-2022 走看看