首页 > 代码库 > HTML基础笔记

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="http://www.mamicode.com/url地址" target="_blank">链接的描述</a>
       target="_blank"在一个新的空白的页面打开
       target="_self"在当前窗口打开(默认的)
    b、使用图片作为链接
      <img src="http://www.mamicode.com/图片地址" width="" height="" border=""/>
    c、使用热点
      <img XXXX usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="1,1,1,1",href="http://www.mamicode.com/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="http://www.mamicode.com/#top">to Top</a>
    e、发送邮件
      <a href="mailto:邮箱地址?subject=hello"></a>
    f、链接中的伪样式(css中再讲)
  (5)列表
    a、无序列表
      <ul>
        <li><a href="http://www.mamicode.com/test.html">1</a></li>
        <li><a href="http://www.mamicode.com/#">2</a></li>
        <!--#表示当前页面-->
        <li>3</li>
      </ul>
    b、有序列表
      <ol>
        <li><a href="http://www.mamicode.com/test.html">1</a></li>
        <li><a href="http://www.mamicode.com/#">2</a></li>
        <li>3</li>
      </ol>
    c、列表嵌套
      <ul>
        <li><a href="http://www.mamicode.com/test.html">item1</a></li>
        <ul>
          <li><a href="http://www.mamicode.com/#">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:扩展的超文本标记语言

HTML基础笔记