html第一天0407 html基础 表格表单

• HTML(HyperText Markup Language)：超文本标记语言，一种纯文本类型的语言
  • 使用带有尖括号的“标记”将网页中的内容标识出来 
    • 用来设计网页的标记语言
    • 用该语言编写的文件，以.html或者.htm为后缀
    • 由浏览器解释执行
    • HTML页面上，可以嵌套用脚本语言编写的程序段
  • 标记语法 
    • 封闭类型标记（也叫双标记）：必须成对出现
      • <标记>内容</标记>
    • 非封闭类型标记，也叫做空标记，或者单标记 
    • <标记/>或者<标记>
  • 元素，即标记 
    • 元素嵌套 ：元素之间可以相互嵌套，形成更为复杂的语法 
  • 属性和值
    • 多个属性之间用空格隔开 多个属性之间不区分先后顺序
    • 属性和属性的值之间用等号连接 
    • 属性的值包含在引号中 
    • 绝大多数元素都支持的属性，称为标准属性
  • <!-- html注释 -->
  • <!-- 强制换行标签br，单标签 -->
  • <!-- 不换行标签nobr，双标签 -->
  • <!-- font标签，设置颜色、尺寸 -->
  • <!-- 标题标签，h1最大，h6最小 -->
  • <!-- 水平线hr -->
  • <!-- 居中标签 center -->
    • <center>hello</center>
    • <p align="center">hello</p>
    • <div align="center">hello</div>
  • <!-- ul:unordered list -->
    • <ul type="disc">
    • <ul type="square">
    • <ul type="circle">
  • <!-- ol:ordered list -->
    • <ol type="A" start="2">
    • <ol type="i">
  • <!-- dl: definition list -->
    • <!-- dt: 定义标题 -->
    • <!-- dd：定义内容 -->
  • <!-- 超链接 a-->
    • <!-- href 表示连接的目标 -->
    • <!-- target 表示打开超链接的位置，_self表示在本窗口打开，_blank表示在新窗口打开 -->
  • <!-- 发送邮件 -->
    • <a href="mailto:52605560@qq.com">发邮件</a>
  • <!-- img -->
    • <img src="img/htmlcssjs.jpg" alt="我的图片" width="100px"/>
  • <!-- 字符实体 -->
    •   等
  • 表格
    • <!-- 表格的构成：table、tr、td、th、caption -->
    • <!-- 表格的最基本构成：table、tr、td -->
      • <table border="1px" cellspacing="0px" align="center" width="600px" height="200px" bordercolor="red" >
    • <!-- rowspan 一个单元格占用几行 -->
    • <!-- colspan 一个单元格占用几列 -->
      • <td rowspan="4"> </td>
  • 锚点
    • <h2><a href="#chap1"> </a></h2>
    • <h2><a name="chap1"> </a></h2>
  • iframe
    • <a href="1基本元素.html" target="ifm1">基本元素</a>
    • <iframe name="ifm1" width="900px" height="300px" frameborder="0"></iframe>
  • 表单 表单是一个包含表单元素的区域  在WEB页面内创建用户控件，收集用户的输入
    • 控件以名称-值对的形式呈现并使用 
    • <!-- form 即表单，主要作用收集用户的输入信息  -->
      • <!-- method: 设置表单提交方式，get(默认)、post -->
      • <!-- action：设置处理表单数据的url(网址) -->
        • <form name="myform1" method="get" action="1基本元素.html">
    • input
      • <!-- 文本框、文本控件 -->
        • text password
      • <!-- value,设置该控件的默认值 -->
        • <!-- placeholder,占位符，提示作用 -->
      • <!-- 复选框，只提交被选中项的name和value -->
        • <!-- 同一组复选框使用相同的name -->
        • <input type="checkbox" name="hobby" value="climb" />爬山
      • <!-- 单选框，同一组单选框使用相同name -->
        • <input type="radio" name="sex" value="fmale"/>女
      • <!-- 隐藏域，即隐藏的文本框 -->
        • <input type="hidden" name="sit" value='middle' /><br />
    • <!-- 文本域，大文本框 -->
      • <textarea name="desc" cols="10" rows="10">请留下您的宝贵意见</textarea>
    • <!-- 选择域 -->select
      • <!-- name属性设置在select标签 -->
      • <!-- value属性设置在各个option标签 -->
      • <!-- optgroup对各option分组，使用label属性显示各分组标题 -->
    • <!-- fieldset将一组域放到一起，使用legend属性设置标题 -->
      • <fieldset style="width: 400px;">
        • <legend align="center">用户信息模块</legend>
        • 用户名<input type="text" name="user" /><br />
        • 密码<input type="password" name="pwd" /><br />
      • </fieldset>