前端笔记3

HTML5之列表标签

列表即是用于布局的，特点是整齐，有序
列表分为三大类：无序列表，有序列表，自定义列表

• 无序列表
  ul:unordered lists的缩写，即无序列表。
  用ul包含， 列表项用li表示

• <ul>
    <li>首页</li>
    <li>秒杀</li>
    <li>优惠劵</li>
    <li>网上商城</li>
  

• 首页
• 秒杀
• 优惠劵
• 网上商城
• (1)ul标签的属性：（但一般会在CSS中设置样式）

• disc：实心圆(默认值)
  circle：空心圆
  square：实心矩形
  none：不显示标识

  (2)ul内只能嵌套li，不可直接放文字，也不可放置其他标签，li内可以放置任何元素
  (3)无序列表中各个列表项没有顺序级别之分，是并列的

• 有序列表（了解）

• ordered listsde的缩写，即有序列表。
  用ol包含， 列表项用li表示

  <h3>
     最近热门电影排行
  </h3>
  <ol>
     <li>蜘蛛侠：英雄远征</li>
     <li>狮子王</li>
     <li>银河补习班</li>
     <li>千与千寻</li>
  </ol>
  

•  - type：列表标识的类型
  
          1：数字
          a：小写字母
          A：大写字母
          i：小写罗马字符
          I：大写罗马字符
  
  

//列表标识的起始编号默认为1。

• 自定义列表
  自定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。
  语法格式：

  <dl>
         <dt>名词1</dt>
         <dd>名词1的解释1 </dd>
          <dd>名词1的解释2 </dd>
  </dl>
  

  dl用于定义描述列表，该标签会与dt(定义项目/名字）和dd(描述每一个项目/名字）一起使用。
  dt和dd没有个数限制，一般一个dt对应多个dd，dt与dd是并列关系，并非包含关系

  HTML5之表单
  表单常由表单域，表单控件（表单元素），提示信息，三个部分构成。
  表单域是一个包含表单元素的区域
  用form定义
  表单域定义
   

  <form action="demo.php" method="POST" name="yrr">
  ......各种内容.....
    </form>
  

  表单元素：input标签：用于收集用户信息（1）input type属性：

   

  <form action="demo.php" method="POST" name="yrr">
          用户名：<input type="text" name="username" value="请输入用户名"> <br>
          
          密&nbsp&nbsp码 ：<input type="password" name="password" value="请输入密码"> <br>
          
          <!--radio单选按钮-->
          性&nbsp&nbsp别 ：<input type="radio" name="sex">女 <input type="radio" name="sex">男<br>
          
           <!--checkbox多选按钮/复选框-->
          爱&nbsp&nbsp好：睡觉<input type="checkbox" name="hobby"> 
                         学习<input type="checkbox" name="hobby"> 
                         篮球<input type="checkbox" name="hobby"> <br>
                         
          日期：<input type="datetime-local">
      </form>
  

  2）input 其他属性：
  （1）name属性 ：元素的名称；
  （2）size属性 ：元素的宽度；很多人都知道在HTML中，常见的宽度是用 width 表示的，而在input中 width 属性只使用与 type=“image” 时使用，input元素的宽度需要通过size属性来设定，size的值为数字，数字越大input元素越长，数字越小input元素越短；
  （3）value属性：定义input元素的默认值；
  当 input type=“text”、“password”、“hidden” 时，定义输入字段的初始值；
  当 input type=“button”, “reset”, “submit” 时，定义按钮上的显示的文本；
  当 input type=“checkbox”, “radio”, “image” 时，定义与输入相关联的值；
  注意：input type=“checkbox” 和 input type=“radio” 中必须设置 value 属性；value属性无法与 input type=“file” 一同使用。
  （3）maxlength属性：定义input元素中可输入的最长字符数；如 maxlength=“50” 表示最多可以输入50个字符；
  （4）style属性 ：为input元素设定CSS样式；
  （5）width属性 ：当 input type="image"时，通过width属性控制元素的宽度；
  （6）height属性：当 input type="image"时，通过width属性控制元素的高度；
   

  <input type="submit" value="提交"> <!--提交按钮-->
   <input type="reset" value="重置"> <!--重置按钮，可还原表单的默认元素-->
   <input type="button" value="1"> <!--与js搭配使用-->
   <input type="file"> <!--上传文件-->
  

  （3）Lable标签：
  lable标签用于绑定一个表单元素，当点击lable标签内的文本时，浏览器会自动将焦点定位到对应表单元素上，增加用户体验
  for的值必须等于Id值

  <label for="sex">性&nbsp&nbsp别 </label>
          <input type="radio" id="sex" checked="checked" value="女"/> 
          <input type="radio" id="sex" value="男"/>
  

  （3）select表单元素：
  下拉表单

                   <select>
                         <option>a</option>
                         <option>b</option>
                         <option selected="selected">c</option>
                   </select>     
  

  select内至少包含一个option
  在option中定义selected="selected"时，当前项即为默认选中项

• （3）textarea表单元素：
  文本域:

          <textarea rows="3" cols="5">
            abcdefghi
          </textarea>     
  

  //rows，cols定义文本域的行数和列数（但一般不用，用CSS规定）

查阅文档网站：

W3C:链接: link
MDN:链接: link