坚持学前端的4day

1.

        1.1补充前一天的表达元素的属性：

type: 设置输入框的类型

name：设置表单域的名称

value: 设置表单域的当前值

type: 设置输入框的类型
 

         1.2 H5新增属性：

placeholder: 占位符 默认提示

autofocus: 自动获取焦点，推荐加在第一个表单元素上

示例： 

<!--checked: 默认被选中，配合单选框和复选框使用 checked = "checked" 简写checked

disabled:禁用

readonly: 只读 -->

<!--1.checked  这里默认是选中了男生-->

<input type="radio"  name = "sex" id = "men" checked><label for="men" >男</label>
<input type="radio"  name = "sex" id = "women"><label for="women">女</label>

<!--disabled 这里设置了禁用文本域 -->

文本域：<input type="text" disabled>

<!--readonly 这里设置了文本域为只读模式 -->

只读： <input type=" text" readonly>

<!--seleted 下拉选项默认显示（天津）-->

<select name="" id="">
        <option value="">北京</option>
        <option value="">南京</option>
        <option value="" selected>天津</option>
        <option value="">山西</option>
</select>

效果如下： 

2.div

2.1div布局逻辑

练习：小米官方网页商城部分截图

 第一步 ：划分盒子

 第二步 ：分盒子写代码：

<h3>布局练习</h3>
    <!-- 最外层红色盒子 -->
        <div>
            <!-- 居中最大的盒子 -->
            <div>
                <!-- 居中靠左的盒子 -->
                <div></div>
                <!-- 居中靠右的盒子 -->
                <div>
                    <!-- 耳机部分上层盒子 -->
                    <div></div>
                    <!-- 耳机部分下层盒子 -->
                    <div>
                        <!-- 下层耳机左边蓝色盒子 -->
                        <div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        <!-- 下层右边深红色盒子 -->
                        <div>
                            <!-- 深红色里面的两个蓝色盒子 -->
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

2.2 h5新增语义化布局标签     

<header>头部</header>      

<nav>导航</nav>            

<section>定义文档中的节。比如章节、页眉、页脚或文档中的其它部分 </section>    

<aside>侧边栏</aside>        

<footer>页脚</footer>  

<article>代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。 </article>

       <!-- article-例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等 -->

应用：

<div>
      <!-- 标题 -->
      <header></header>
      <!-- 导航 -->
      <nav></nav>
         <!-- 主体 -->
         <div>
             <!-- 文章 -->
             <article>
                 <!-- 部分 -->
                 <section></section>
             </article>
             <!-- 侧边栏 -->
             <aside></aside>
         </div>
      <!-- 页脚 -->
      <footer></footer>
</div>  

效果图：（添加样式后的图：）

 3.视频和音频

        3.1视频

       1)标签

            <video src="">

                您的浏览器不支持播放视频，请升级

            </video>

        2)属性

            src :路径 必须属性

            autoplay 自动播放

            loop:   循环播放

            controls: 显示控制面板

            muted:静音

            poster:规定视频正在下载时显示的图像，直到用户点击播放按钮。

            width:宽

            height:高

        3）应用

<!-- 视频 -->
    <!--  手动控制面板 静音播放 循环播放 播放器前放置图片/动画-->
    <video src="../images/video2.mp4"  controls muted loop poster="../images/img5.gif" width="300" >该版本过低不支持视频播放，请升级！</video>
    <!-- 自动播放 控制面板 静音 循环播放 宽 -->
    <!-- 说明：由于谷歌设置了取消自动播放因此使用了控制面板 -->
    <video src="../images/video2.mp4" autoplay controls muted loop  width="300" >该版本过低不支持视频播放，请升级！</video>

        效果就不展示了 大家可以自行体会

        若使使用ie浏览器8或更低版本的则不适宜播放（音频同理） 会出现如图：

 3.2音频

  1)标签

            <audio src="">

                您的浏览器不支持播放音频，请升级

            </audio>

        2)属性

            src :路径 必须属性

            autoplay 自动播放

            loop:   循环播放

            controls: 显示控制面板

            muted:静音  

        3）应用

<!-- 音频 -->
    <audio src="../images/大花轿.mp3" autoplay controls muted loop >该版本过低不支持音频播放，请升级！</audio>

 效果：

SHIPIN

好啦 到此为止html的笔记就整理完毕 顺顺小手给孩子点个赞吧！谢谢收看，如有错误，欢迎指正。