WEB front-end notes 2

Element display mode

<!-- 元素显示模式：
  块元素：独占一行  div   宽、高、边距可以设置
  行内元素：一行多个  span    不能设置
  行内块元素：一行多个，而且能设置宽高
  -->

sheet

 <!-- 表格 -->
  <table border="1px" width="500px" heigth="200px" cellspacing="0">
    <!-- 表头 
    table:border 只控制最外围大小，width、heigth、cellsapcing 
    caption：通过css改
    thead、tr、tbody、tfoot：height、align、valign
    跨行：rowspan
    跨列：colspan
    -->
    <caption>学生信息</caption>
   
    <!-- 第一行标题 -->
    <thead height="400px" align="center" valign="bottom">
    <tr height="500px" align="" valign="">
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>民族</th>
      <th>政治面貌</th>
    </tr>
    </thead>
    
    <!-- 表内容 -->
    <tbody height="500px" align="" valign="">
      <tr>
        <td rowspan="2">张三</td>
        <td>张三</td>
        <td>张三</td>
        <td>张三</td>
        <td>张三</td>        
      </tr>

      <tr>
          <td>张三</td>
          <td>张三</td>
          <td>张三</td>
          <td>张三</td>        
        </tr>
    </tbody>

    <!-- 脚注 -->
    <tfoot height="500px" align="" valign="">
      <tr>
        <td colspan="4"></td>
        <td>共计一人</td>
      </tr>
    </tfoot>
  </table>

Label

<!-- details：详情标签    配合summary使用 -->
  <details>
    <summary>优质青年</summary>
    here good man
  </details>


  <!-- tabindex:让本不能tab的元素被能tab 可以为负数，0，正数-->
  <input type="text"><br>
  <a href="#">qubaidu</a>
  <div tabindex="0">dsjalk</div>

form

<!-- 表单：网页交互区，收集用户信息 
  action:将数据交给谁处理
  name:必有属性
  method:提交方式   ajax
  
  <form action="#">
    <!-- 文本框 maxlength:最大长度 placeholder：提示词-->
    用户名：<input type="text" name="user" value:"dzy"><br>
    <!-- 密码 -->
    密码：<input type="password" name="pwd">
    <!-- 单选框 value：提交后显示什么 -->
    <input type="radio" name="gander" value="nan">男
    <input type="radio" name="gander" value="nv">女<br>
    <!-- 多选框  label标签：增加选择判定区-->
    <input type="checkbox" name="eat" id="chi"><label for="chi">吃</label>
    <label><input type="checkbox" name="eat">喝</label>
    <!-- checked：默认选择 -->
    <input type="checkbox" name="eat" checked>玩
    <!-- 隐藏域 -->
    <input type="hidden" name="hid" value="123"><br>
    <!-- 提交按钮 -->
    <input type="submit">
    <!-- 重置按钮 -->
    <input type="reset">
    <!-- 普通按钮 -->
    <input type="button">没用<br>
    <!-- 文本域 -->
    <textarea cols="10" rows="10"></textarea><br>
    <!-- 下拉菜单 -->
    <select name="jiguan">
      <option value="nanjing">南京</option>
      <!-- selected：默认选择 -->
      <option value="shanghai" selected>上海</option>
      <option value="wuxi">无锡</option>
    </select>
  </form>
  -->

css style

	/* css基本结构
    选择器{
      属性名：属性值；
    }
    */

	<!-- 行内样式 -->
    <div style="width:200px;height:200px;background-color:gray">我是灰色</div>

	<!-- 外部样式 -->
  <link rel="stylesheet" href="外部样式.css">
	
	 <!-- 内部样式 -->
  <style>
    .box1{
    
    
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    </style>

css selector

	/* 标签选择器 ：标签+{} */

    /* id选择器 ：#+id+{} */

    /* 类选择器 ：.+类名+{} */

    /* 通配符选择器 ：*+{} */

    /* 后代选择器：.类名+“ ”+li+{}    选中所有后代*/

    /* 子代选择器：.类名+“>”+li+{}    选中亲儿子*/

    /* 复合选择器：
    div，
    p，
    span{}
    */

    /* 属性选择器：
    input[type="password"]{}

    div[id]{}
    */

font style

	/* 字体样式
    字体大小  font-size：10px；
    字体粗细  font-weight：bold；
    字体风格  font-style：；
             font-family：“微软雅黑”；
    简写  font：italic 900 70px “微软雅黑”
    */

    /* 首行缩进2个：text-indent：2em */