html5

回顾html5

初识HTML

  • HTML : Hyper Text Markup Language(超文本标记语言)

  • W3C:world wide web consortion(万维网联盟),成立于1994年,国际中立性技术标准机构

  • W3C标准包括:结构化标准语言(html、xml),表现标准语言(css),行为标准(dom、ECMAScript)

  • 基本结构

    <!DOCTYPE html><!--告诉浏览器,我们要使用的规范 -->
    <html lang="en">
    <head><!--头部 -->
        <meta charset="UTF-8"><!--描述性标签 -->
        <title>Title</title><!--页面标题 -->
    </head>
    <body><!--网页主体 -->
    	
    </body>
    </html>
    <!--注释 -->
    

HTML标签

  • 标题标签:

  • 短路标签:

  • 换行标签:

  • 水平线标签:


  • 字体样式标签:粗体 , 斜体

  • 特殊符号:空格 &nbsp; &gt > ;&lt <; &copy 版权符号;可以通过&+字母去查看其它特殊符号

  • 图像标签: img ;src:可以给相对地址或绝对地址

    <img src="path" alt="text" title="name" width="100" height="100">
    
  • 链接标签:

    <a href="path" target="目标窗口位置">链接文本或者图片</a>
    <!--锚链接  也可以进行页面直接的条件-->
    <a href="#top">回到顶部</a> 
    <!--功能性链接  邮件链接:mailto
    -->
    <a href="mailto:邮箱地址">点击联系我</a> 
    
  • 行内元素和块元素

    • 块元素:无论内容多少,该元素独占一行;例如:p、h1-h6…
    • 行内元素:内容撑开宽度,左右都是行内元素的可以在排在一行;例如:a、strong、em …
  • 列表

    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能够更快捷地获得相应的信息
    • 列表分为:无序列表、有序列表、定义列表;
    <!--有序列表-->
    <ol>
        <li>Java</li>
        <li>Python</li>
        <li>C++</li>
    </ol>
    <!-- 无序列表-->
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>C++</li>
    </ul>
    <!-- 自定义列表-->
    <dl>
        <dt>学科</dt>
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>C++</dd>
    
        <dt>位置</dt>
        <dd>洛阳</dd>
        <dd>深圳</dd>
        <dd>上海</dd>
    </dl>
    
  • 表格

    • 结构稳定,简单通用
    • 基本结构:单元格,行,列,跨行,跨列
    <!-- 表格   行 tr 列 td-->
    <table border="1px">
        <tr>
            <!--跨列 colspan-->
            <td colspan="4">1-1</td>
        </tr>
        <tr>
            <!--跨列 colspan-->
            <td rowspan="3">2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
        <tr>
    		<td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
        </tr>
        <tr>
    		<td>4-2</td>
            <td>4-3</td>
            <td>4-4</td>
        </tr>
    </table>
    
  • 视频和音频

    <!-- 音频和视频
        src : 资源路径
        controls :控制条
        autoplay :自动播放
        -->
        <video src="../resources/video/你的答案.mkv" controls ></video>
        <audio src="../resources/video/清空.mp3" controls></audio>
    
  • 页面结构分析

    元素名描述
    header标题头部区域的内容(用于页面或页面中的一块区域)
    footer标记脚部区域的内容(用于整个页面或者页面的一块区域)
    sectionWeb页面中一块独立区域
    article独立的文章内容
    aside相关内容或应用(常用于侧边栏)
    nav导航类辅助内容
  • iframe内联框架

    <!--src:引用页面地址,name:框架标识名 -->
        <iframe src="path" name="mainFrame" frameborder="0"></iframe>
        <iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    
  • 表单语法

    • get方式提交:我们可以在url中看到我们提交的信息,不安全,高效。
    • post:比较安全,传输大文件。
    属性说明
    type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text
    name指定表单元素名称
    value元素的初始值。type为radio时必须指定一个值
    size指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
    maxlengthtype为text或password时,输入的最大字符数
    checkedtype为radio或checkbox时,指定按钮是否是被选中
    <!--  method:规定如何发送表单数据常用值:get|post,
          action:表示向何处发送表单数据
           radio:单选框,text:文本输入框,
           password:密码框,checkbox:多选框-->
    <from method="post" action="MyHome.html">
        <p>名字:<input type="text" name="name"></p>
        <p>密码:<input type="password" name="pass"></p>
        <p>性别: <input type="radio" value="boy" name="sex"><input type="radio" value="girl" name="sex"></p>
        <p>爱好:
            <input type="checkbox" value="sleep" name="hobby">睡觉
            <input type="checkbox" value="code" name="hobby" checked="checked">敲代码
            <input type="checkbox" value="chat" name="hobby">聊天
        </p>
        <!-- 按钮 -->
        <p>
            <input type="button" name="btn1" value="点击变长"/>
            <input type="image" name="" src="../resources/image/1.jpg"/>
        </p>
    
        <!-- 下拉框,列表框 -->
        <p>
            <select name="列表名称" id="">
                <option value="选项的值" selected>中国</option>
                <option value="选项的值">美国</option>
                <option value="选项的值">俄罗斯</option>
                <option value="选项的值">英国</option>
            </select>
        </p>
    
        <!-- 文本域 -->
        <p>反馈:
            <textarea name="textarea" id="te" cols="50" rows="50">文本内容</textarea>
        </p>
    
        <!-- 选中文件 -->
        <p>反馈:
            <input name="file" type="file">选中文件</input>
            <input type="button" value="上传" name="upload"></input>>
        </p>
    
        <!-- 邮件验证 -->
        <p>邮箱:
            <input type="email" name="email"></input>>
        </p>
    
        <!-- URL -->
        <p>url:
            <input type="url" name="url" ></input>>
        </p>
    
        <!-- 数字 -->
        <p>商品数量:
            <input type="number" name="num" max="100" min="0"></input>>
        </p>
    
        <!-- 滑块-->
        <p>滑块:
            <input type="range" name="voice" max="100" min="0" step="2"></input>>
        </p>
    
        <!-- 搜索框-->
        <p>搜索:
            <input type="search" name="search" ></input>>
        </p>
        <p>
            <input type="submit" name="Button" value="提交"/>
            <input type="reset" name="Reset" value="重填"/>
        </p>
    </from>
    
  • 表单的应用

    • 隐藏域:hidden
    • 只读:readonly
    • 禁用:disabled
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值