html基础笔记

utf-8 国际标准字符集：常用语言与符号。
课时3：HTML文字标记及换 行，图片标记讲解。
知识点：
  1:-html文字标记。
2--html<br/><p><img><hr><hn>
3--html实体
4---




1》普通文字在页面上正常显示。
2》字体标记：
    <i></i>:双标记，标记斜体  
        例：<i>我</i>;
    <strong></strong> 文本加粗；
   小写上标；
   小写下标；（用于写提示符）；
  <font ></font>
   font 中的属性：
   size="值"——1~6；
   color="#FF0000" 文本颜色；
   face="隶书" 书法体；
二：html <br/><p><img><hr><hn>
  a:<br/> 换行标记，浏览器解释大段空白，只认为是一个空格，
  b:<p></p> 段落标记  上下都加空行，而且换行；
  c:<hr/> 画线标记
   属性：
   color="#FF0000" 颜色
   width="400" 长短
   size="50"  高度
  d：<hn> 标题标记；范围1~6大小依次减小。
    <h1>今天</h1> 
  e:<img src=" "/> 图片标记；
   属性：
   src="图片路径"
    路径规则：
      1:->绝对路径；盘符+所有路径；
      2：->相对路径  index.html-->imgs
           1)同一目录下,平级：直接写文件名
           2）在index.html目录下级：目录名称/文件名称
           3）在index.html上级：../文件名
三：html实体：
   出现与html语言相同的语句；
   把字符与控制符进行转换的；
   1:查实体html帮助手册或敲一个&符号；
    例 单引号->&prime(英文版)；
       ":&quot;
       <:&lt;
       >:&gt;
四：html<a>
   超链接：点击后发生页面跳转的文字，图片
   <a>页面上显示的元素</a>
   1.本地跳外网：路径必须是全路径；
    用属性 href="写全属性 "；
      例：<a herf="http://www.baidu.com">百度</a>
   2.跳内网：内网跳转遵循相对路径规则：
   3.图片作为超链接：
    例：
    <a href="http://www.sohu.com"><img src="imgs/1.jpg"></a>
     


课时5：实例讲解table表格及其中属性
     知识点：
     一.table
     二.form表单
一：table
    <table></table> 表格标记；
     <tr></tr> 行元素
     <td></td> 列元素
  1.. table包含行，行包含列；
   属性：
    border="1"  表格边框
    align="center"  表格的水平位置left左  center中  right右
    width="600"  表格宽度
    height="300" 表格高度
    cellpadding="20" 文字距离左边框的最小距离
    callspacing="30" 边框距离；
    bgcolor="#FF0000"     背景色；
    background="imgs/1.jpg"
       当背景图宽度和高度<表格的宽度和高度 背景图会在横向和纵向平铺（重复）；
         当背景图宽度和高度>表格的宽度和高度  表格从左上角开始引用图片的一部分（和表格的宽度和高度相同。）
   2..tr属性：只控制该行内容
    align="center"  left center right行中内容的左中右
     height="100"  行高
     valign="bottom"  行中内容的上中下 top middle bottom
   3..td属性：只控制该列内容
     align="right"  left center right行中内容的左中右
     valign="top"   行中内容的上中下 top middle bottom
     width="100"    列宽（影响整行的列宽）
     height="40"    行高（影响整行的宽）；
  最后是td的align和valign
  height遵循行高。
   标记具有就近原则。
 
    写在td中：
       colspan="列数"合并列
       rowspan="行数"合并行
   注意：行和列都合并：先列后行。


二：form表单：主要是用来和用户交互的；
    <form></form> 表单
  1.input
        <input type="元素名称"/>
       普通按钮 button:value="按钮文字" js/jquery代码
       复选框： checkbox:value="隐藏起来" 
       默认选中项：checked="checked" 处理和传递时用；
       file  上传控件
       hidden 隐藏域，value="" 和php脚本
       image： 图片提交按钮；src="图片路径"；
             <form>  
                     action="处理页面"  b.html；
                     method=“post/get”
                     get:传递数据相当于坐着拖拉机，慢而少；
                     post：传递数据相当于坐着和谐号，快而多；
      
      submit 图片提交按钮，与image功能一样，是按钮形态的 有一个value的值；
        password：


        radio： 单选框，具有排他效果，添加name="相同"的属性；
              一般是单项选择：
        text 文本框：
        reset 重置，把所有表单元素 还原成默认状态 value="按钮上的文字"；
    2.非input:
   a. <select></select>  下拉列表
   <select>
       <option>北京</option>
         <option>天津</option>
       <option selected="selected">上海</option>            selected="selected" 默认选项
   </select>  
  
    b.   <textarea></textarea> 文本域
       属性：
          cols="文本列数"   最大列数  
          rows="文本行数"   最大行数










课时7  table表格加form表单实例讲解注册页面的搭建
         一：demo 注册页（table+form）
   






课时8：HTML中框架集的讲解及实例布局网站后台页面；
   知识点：
    一：demo 注册页（table+form）
    二：框架集 frameset
     <frameset></frameset>写网站后台
        div、css、table，框架集
    属性： 
       rows="val1,val2,val3....*" val值有几个意味着页面上有几行 val表示行高，*：表示剩余的全部。
       cols="val1,val2,val3....*" .................
    
     <frame src="链接页面的路径">
        frame中的属性：
              frameborder="0"  框架边框
              scrolling="no"    没有滚动条
              noresize="noresize" 不能重新改变框架集的大小
       


    在框架集的主干部分添加name="名字"属性，为其命名；
      target="名字"；