HTML知识了解

作者: Mg明明就是你 | 来源:发表于2016-09-04 21:32 被阅读49次
    • web时代

    web时代.png
    • 网页的组成:

      • HTML:网页的内容和结构
      • CSS:网页的样式(美化网页最重要的一块)
      • JavaScript:网页的交互效果。比如:对用户鼠标事件做出响应
    • HTML的基本样式:

    <!--根标签-->
    <html>
         <!--头部-->
        <head>
             <!--标题标签-->
            <title>明哥的HTML标题</title>
            <!--设置编码-->
            <meta charset="UTF-8">
        </head>
        <!--主要内容-->
        <body>
            <div>MG的空间</div>
        </body>
    </html>
    
    • 常见标签

    <h>标题标签</h> 1~6
    <hr> 线条
    
     <!--input标签-->
    <input placeholder="我是占位文字"> 输入框
    
    <input value="我是默认文字">
    
    <input type="date"> 选择日期
    
    <input type="file">选择文件
    
    <input type="color">选择颜色
    
    <input type="radio">单选
    
    <input type="checkbox">复选框
    
    ---------------------------------------------------------------------------------
    
    <!--段落标签--> 新闻详情页
    
    <p>我是段落</p>
    
    ---------------------------------------------------------------------------------
    
    <!--头像标签--> 图片
    
    <!--
    
        绝对路径和相对路径:
    
        相对路径:资源在当前的项目中 ./   ../   ././
    
        绝对路径:资源从服务器那边获取 网络:http://  https://  ftp://  file:///
    
    -->
    <img src="图片路径" alt="给用户一个提示">
    
    ---------------------------------------------------------------------------------
    
    <!--换行标签-->  换行
    <br>
    ---------------------------------------------------------------------------------
    
    <!--容器标签-->  容器
    <div></div>
    <span></span>
    
    ---------------------------------------------------------------------------------
    
    <!--表格标签-->  表格
    <table> 
    <tr>
    <td>
    ---------------------------------------------------------------------------------
    
    <!--列表标签-->  列表
    ** ul、** uo、**  li **
    <!--列表标签-->
        <ul>
            <li>有序列表</li>
            <li>有序列表</li>
        </ul>
    <!--列表标签-->
        <ol type='排序的类型'>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
    ---------------------------------------------------------------------------------
    
    <!--超链接标签-->  #跳转到当前界面
    <a  href="#">我是超链接</a>
    <a  href="http://baidu.com"  target="" >百度一下,你就知道</a>
    <!--
        target:
            _top:回到顶部
            _self:当前界面跳转
            _blank:空白界面
            parent:父窗口面跳转
    -->
    ---------------------------------------------------------------------------------
    

    HTML5新增标签

    - HTML5新增了27个标签,废弃了16个标签元素,主要包括**结构性标签、级块性标签。行内语义标签、交互标签**
    
    • 结构性标签

      • 负责Web上下文结构的定义,确保HTML文档,包括:
        • article:文章主题内容(一盘博客、一篇论坛帖子、一段用户评论、插件)
        • header:标记头部区域内容
        • footer:标记尾部区域内容
        • section:区域章节描述
        • nav:菜单导航,链接导航
    进度条.png
    • 行内语义性标签

      • 完成Web页面具体内容的引用和表达,丰富展示内容,包括:
        • meter:特定范围内的数值,如工资,数量,百分比
        • time:时间值
        • progress:进度条,可用max,min,step进行控制,完成对进度的表示和监听
        • video:视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式
        • audio:音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式

    音视频的使用.png

    相关文章

      网友评论

        本文标题:HTML知识了解

        本文链接:https://www.haomeiwen.com/subject/xcalettx.html