bi ji

1.插入图片：<img scr="../" alt="" width="" align="middle" hspace="200px">
align="middle"图片居中

2.超链接：<a href="网址/文件">name</a>

3.锚链接：<a herf="#+(id)">name</a>
                 <h1 id="name">name</h1>

4.<div>****</div>
   注：div只用来划分页面区域，无具体含义

5.span标签：<span>***</span>
  注：无具体含义，借助class改变具体样式

6.视频标签：<video scr="东西" controls autoplay muted loop width="400xp"></video>
controls（进度条）, autoplay (自动播放)配合muted使用 ,loop（循环）

7.表单：
(1)输入文字：<input type="text" name="" placeholder="">
注：name在使用前必填       placeholder提示字
(2)输入数字：<input type="password" name="password"> 
(3)单项选择：<input type="radio" name="sex" value="男" checked>
注：checked是预选择
(4)多选：<input type="checkbox" name="hobby">
(5)设置提交按钮：<input type="submit" name="submit">
<button>点击提交</button>
(6)输入框：<textarea name="" id="" cols="30" rows="10"></textarea>
(7)选项框：<select name="city" id="">
                        <option value="西安">西安</option>
                  </slect>
注selected 默认选中 disable 禁用
(8)创建表单：<form action="#"></form>

8.表格标签：
<table> </table> 创建表格
注border:创建格子  cellspacing:去掉间隙 width 宽 height 高
caption 标题

<tr>
<td></td>
</tr>
创建表格内容
注：第一行也可以用th
rowspan 跨行
cilspan 跨列

9.ifrane框架
<iframe src="./02练习.html" frameborder="1" width="800px" height="800px"></iframe>
iframe 嵌入页面

10.其余标签
details省略 summary标题

11.全局属性
<!-- 全局属性：所有标签都能使用的属性 -->
    <!-- class后期配合css使用，给不同标签同时加样式，命以相同的class -->
    <!-- title鼠标悬停显示名称 -->
    <!-- tabindex使用tab键可以使用 -->
    <!-- contenteditable="True"使用户可以更改 -->

12.html的新标签
<!-- header 定义页面或者区域头部 -->
<!-- footer定义页面或者区域底部  -->
<!-- nav定义导航菜单  -->
<!-- aside定义页面内容相关的辅助信息，通常用于放置侧栏  -->

13.选择器
基本选择器：标签选择器，类选择器，id选择器，通配符选择器
包含选择器
/* 子代选择器 */
        .u1>li{
            background-color: aqua;
        }
        /* 后代选择器 */
        .u1 li{
            background-color: brown;
        }
符合选择器
p,div{
            color: brown;
        }
属性选择器
/* input[type="password"] {  */
            /* background-color: yellow; */
        /* } */
        /* input[name] { */
            /* background-color: red; */
        /* } */
        /* 注type后面^是首位，$是末尾 */
伪类选择器
a:hover{
            color: pink;
        }
        /* 使链接被选中后变为粉色 */
其他选择器
ul li:nth-child(3){
            background-color: pink;
        }
        /* 找到第三个，使其背景变成粉色 */
        ul li:nth-last-of-type(3){
            background-color: aqua;
        }
        /* 找到第三个li，使其变色 */
伪元素选择器
 ul li::before{
            content: "666";
        }
        /* 在每一个li前面加666 */
        /* after 在每一个li之后 */
        ul p::selection{
            background-color: pink;
        }
        /* 鼠标选中变成粉色 */