HTML_02

##语义化标签

        <header>我就是网页的头部</header>
        <main>我是主体</main>
        <footer>我是尾部</footer>
        <nav>导航</nav>
        <aside>侧边栏</aside>
        <article>文章</article>
        <section>独立的区块</section>

##超链接

超链接a 用来跳转到新页面或者本页其他位置

 href属性：指定跳转的目标地址

         target属性：打开的位置
            _blank  在新的页面打开超链接
            _self    在自己的页面打开超链接

<a href="https://www.baidu.com">百度</a>

a元素属于行内元素  可以嵌套除它自身以外的任何元素

       例： <a href="./index.html"><div>首页</div></a>
               <a href="./index.html"><img src="./img/1.png" alt=""></a>

锚点链接：
            <a href="#">回顶部</a>
            
            <div id="div1">我是div，没有语义</div>
            <a href="#div1">回到div</a>

占位符： #  javescript：；

相对路径 ./或../
         ./或者不写 就是同一个路径下
         ../ 当前文件所在目录的上一级

##图片标签

        用于向页面当中引入一个外部图片 
        属性 src 引用外部图片路径
        alt 替换文本 搜索引擎根据alt内容识别
        title 提示文本 鼠标放图片上不动出现的文字
        width 照片宽度 单位px像素
        border 边框

        图片格式
            jpeg 简写jpg 支持颜色丰富 不支持透明和动图，一般用来表示照片
            png 支持颜色丰富，支持透明，不支持动图
            gif 支持颜色较少，支持简单透明，支持动图

            webp 具备其他的所有优点，体积小，但兼容性不好
            base64 将图片用base64进行编码，对数据进行加密，把图片转成了字符

##列表     

   <!-- iframe内联框架  （把别人的网页搬到自己网页里来）-->
    <!-- audio音频文件 -->
    <audio src="./source/使命.mp3" controls autoplay>使命</audio>
    <!-- video视频文件 -->
    <video src="./source/fish.mp4" controls title="水族馆" height="300">水族馆视频</video>
    <hr>
    <!-- 列表
     ol 有序列表
     ul 无序列表            
     dl 自定义列表
        dt 标题
        dd描述
     -->
    <h1>购物清单</h1>
    <ol>
        <li>菜刀</li>
        <li>牙膏</li>
        <li>洗衣液</li>
        <li>馒头</li>
    </ol>
    <ul type="circle">
        <li>菜刀
            <ul>
                <li>粉色</li> 
                <li>砍骨头</li>
            </ul>
        </li>
        <li>牙膏</li>
        <li>洗衣液</li>
        <li>馒头</li>
    </ul>
    <h2>我是自定义列表</h2>
    <dl>
        <dt>
            计算机
        </dt>
        <dd>用来计算的仪器</dd>
        <dt>显示器</dt>
        <dd>以视觉方式显示信息的装置</dd>
    </dl>

##表格

        <!-- table表格
         caption表格标题
         thead表头  tr行 th单元格
         tbody表内容 tr 表示行 td 表示单元格
         tfoot表尾部 tr 表示行 td 表示单元格
         
         行合并（纵向合并）rowspan
         列合并（横向合并）colspan
         注意：被合并的行或列一定要删除
         
         表格啥都能嵌套
         
         -->

##表单

        <!-- form 表单 
                action 用于提交服务器地址
                method 提交表单时用到的http方法
                        get方法 表单数据在地址栏可见（适用于少量数据提交）
                        post方法 比较安全 地址栏看不到表单数据
                input元素：
                    type text文本框 checkbox多选框 radio单选框 file文件上传 password密码
                        minlenth maxlenth placeholder（提示） require必填项
                        name必须指定
                radio单选
                    name属性相同 value必须有
                checkbox多选
                    name属性相同 value必须有
                select 下拉选项
                    name属性 是select标签的属性
                    option value
                file 上传文件
                    multiple 选多个文件   accept选择类型
                button 按钮
                    submit提交 reset重置
                textarea 文本域
                label 定义标注
        -->