前端开发(1)-HTML入门与实践4

发表于
字数统计 983 | 阅读时长 3

系列课程地址：戳这里。此部分视频网页没有。具体查看这里：https://pan.baidu.com/s/1exZQc9bXadphQfd3k_vYJQ（提取码：7sk1）。
系列课程共分为三部分：阶段 1：HTML+CSS；阶段 2：JavaScript；阶段 3：开发工具；阶段 4：前端框架；阶段 5：移动及服务端开发。
这里介绍阶段 1：HTML+CSS中的第一部分：HTML入门与实践；

HTML5新标签

常用新标签

w3c 手册中文官网 : http://w3school.com.cn/

  • header：定义文档的页眉 头部

  • nav：定义导航链接的部分

  • footer：定义文档或节的页脚 底部

  • article：定义文章。

  • section：定义文档中的节（section、区段）

  • aside：定义其所处内容之外的内容 侧边

    1
    2
    3
    4
    5
    6
    <header> 语义 :定义页面的头部  页眉</header>
    <nav>  语义 :定义导航栏 </nav> 
    <footer> 语义: 定义 页面底部 页脚</footer>
    <article> 语义:  定义文章</article>
    <section> 语义： 定义区域</section>
    <aside> 语义： 定义其所处内容之外的内容 侧边</aside>

  • datalist 标签定义选项列表。请与 input 元素配合使用该元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <input type="text" value="输入明星" list="star"/> <!--  input里面用 list -->
    <datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->  
        		<option>刘德华</option>
        		<option>刘若英</option>
        		<option>刘晓庆</option>
        		<option>郭富城</option>
        		<option>张学友</option>
        		<option>郭郭</option>
    </datalist>

  • fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

    1
    2
    3
    4
    5
    <fieldset>
        		<legend>用户登录</legend>  <!-- 标题 -->
        		用户名: <input type="text"><br /><br />
        		密　码: <input type="password">
    </fieldset>

新增的input type属性值：

类型 使用示例 含义
email 输入邮箱格式
tel 输入手机号码格式
url 输入url格式
number 输入数字格式
search 搜索框（体现语义化）
range 自由拖动滑块
time 小时分钟
date 年月日
datetime 时间
month 月年
week 星期 年

常用新属性

属性 用法 含义
placeholder 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus 规定当页面加载时 input 元素应该自动获得焦点
multiple 多文件上传
autocomplete 规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮
2.这个表单您必须给他名字
required 必填项 内容不能为空
accesskey 规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式

多媒体标签

  • embed：标签定义嵌入的内容

  • audio：播放音频

  • video：播放视频

多媒体 embed

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多媒体。

多媒体 audio

HTML5通过< audio >标签来解决音频播放的问题。可以通过附加属性可以更友好控制音频的播放，如：
autoplay 自动播放

controls 是否显不默认播放控件

loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环

多媒体 video

HTML5通过< video >标签来解决视频播放的问题。

同样，通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

注：转载文章请注明出处，谢谢~