Web前端11.14-11.16笔记

页面跳转：

                   1.制作出跳转页面 01.html

                    2.制作原页面（音频示例：阿卡贝拉 ）

                                       音频示例：<a href="01.html">阿卡贝拉</a>

插入音频  <audio arc="......" controls> </audio>

插入视频  <video arc="......" width="..." height="..." controls>

输入短框  <input type="text" name="username">

输入大框  <textarea name="" id="" cols="30" rows="10"> </textarea>

单选    男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex"             value="女">

多选  <input type="checkbox" name="hobby" id="">

下拉框  <select name="city" id="">

              <option value="上海">上海</option>

              <option value="北京">北京</option>

              </select>

作用按钮   <button>提交</button>

划分区域（无含义）div

表格标签  

<table border="1px" cellspacing="0" width="300px" height="200px">
    <caption>学生信息表<caption>
       <thead height="100px" align="left/center/right" valign="top/middle/bottom">
           <tr>
              <th>....</th>
              <th>....</th>
           </tr>
       </thead>
       <tbody>
           <tr bgcolor="pink">
               <td>....</td>
               <td>....</td>
           </tr>
           <tr>
               <td>....</td>
               <td>....</td>
           </tr>
        </tbody>
        <tfood>
           <tr>
                <td>....</td>
           </tr>
        </tfood>

       #合并单元格

             1.先找出需要合并的第一个单元格

<td rowspan="2">
     跨行
    colspan 跨列
   

               2.删除剩下的几个需要合并的单元格

iframe框架（嵌入其他页面）

<iframe src="https://www.taobao.com" frameborder="o" width="800px"></iframe>


<a href="..." targe="ee">我的表格</a>
<iframe name="ee"></iframe>

其余标签

1.<dialog open> 生成一个可以关闭的对话框
       <form action="#">
       用户名：<input type="text" value="">
       </from>
  </dialog>
2.<details>
       <summary>关于文章</summary>
        关于文章的具体信息
  </deyails>

全局属性（所有标签都可以用，标签都可以用）

1.<div class="test" title="...">...</div>
  <div class="test test2">...</div>
  <p class="test">...</p>


2.<input type="text" name="" id="">
  <div tabindex="1" contenteditable="True">...</div>
  <a href="#">

H5新标签

<header>定义页面或区域的头部
<dooter>定义页面或区域的底部
<nav>定义导航菜单
<aside>定义和页面内容相关的辅助信息，通常用于放置侧栏

表单补充

<form action="#">
     性别:<label><input type="radio" name="sex" id="">男</label>
          <input type="radio" name="sex" id="nv"><label for="nv">女</label>

特殊字符

  &nbsp  空格
&lt;  <
&gt;  >
&copy;  

CSS的引入

<link rel="stylesheet" href="./....">

基本选择器

1.标签选择器
       div{
           ....;
        }
2.类选择器
       .box1{
             ...:
        }
3.id选择器
       #box1{
             ....;
        }
4.通配选择器
       *{
         。。。；
       }

包含选择器

.ul1>li{
        ....;
   }

后代选择器

.ul1 li{
        ...;
   }

复合选择器

p,
div{
    ....;
 }

属性选择器

input[type="ur1"]{
                  ....;
    }
input[name]{
            ....;
    }
input[type^="pa">{
                  ...;
    }
input[type$="1"]{
                 ....;
    }
input[type*="a"]{
                 ....;
    }

伪类选择器

a:hover+div{            悬停
        .......;
  }
a:focus{                获取焦点
        .......;
  }

其他选择器

ul li:nth-child(3){
                  ......;
   }
ul li:nth-of-type(4){
                  ......;
   }
ul li:first-child{
                  ......;
   }
ul li:last-child{
                  ......;
   }
ul li:nth-child(2n-1){
                  ......;
   }

伪元素选择器

ul li::before{
        content:"666";
      }
ul li::after{
        content:"666";
      }
p::selection{
          background-color:...;
      }