美文网首页
2018-10-22熟悉前端页面元素

2018-10-22熟悉前端页面元素

作者: YW祥 | 来源:发表于2018-10-22 18:45 被阅读0次

    一、熟悉标记语言的格式

    • html:“超本文”就是指页面内可以包含图片、链接、甚至音乐、程序的非文字元素。
    • 超文本标记语言的结构包括“头”部分(英语:Head)、和“主题”部分(英语:Body),其中“头部”提供关于网页的信息“主题”部分提供网页的具体内容。

    二、常用标签

    • input
    • select 下拉框
    • a:超链接
    • img:图片
    • audio:音频
    • video:视频
      例子:
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>第一个练习htal页面逃之夭夭</title>
        </head>
        
        <body>
            <h1>这是一个h1标签</h1>
            <h2>这是一个h1标签</h1>
            <h3>这是一个h1标签</h1>
            </br>
            <td>姓名</td>     
            <input type='text'> 
            <br>         
            <td>性别</td>
            <input type='number'>
            <br>
            <td>密码</td>
            <input type='possword' value='密码'>               
            <td>单选框</td>
            <input type='radio' name='sex'>
            <td>男</td>
            <input type='radio' name='sex'>
            <td>女</td>
            <input type='radio' name='set'>
            <td>其他</td>      
            <br>
            <br>         
            <td>班级</td>
            <input type='radio' name='class'>
            <td>1810</td>
            <input type='radio' name='class'>
            <td>1808</td>       
            <br>
            <td>多选框</td>
            <input type='checkbox' name='class'>
            <td>A</td>
            <input type='checkbox' name='class'>
            <td>B</td>
            <input type='checkbox' name='class'>
            <td>C</td>
            <input type='checkbox' name='class'>
            <br>
            <td>普通按钮</td>
            <input type='button' value='按钮'>
            <br>
            <td>日期<td>
            <input type='date'>
            <br>
            <td>时间</td>
            <input type='time'>
            <br>
            <td>文本输入区</td>
            <textarea></textarea>
            <td>下拉框<td>
            <select>
            <option>李<option>
            <option>赵<option>
            <option>张<option>
            </select>
            </br>
            <td>超链接</td>
            <td>
            <a  href='http://www.jianshu.com'>简书</a>
            <td>
            </br>
            <td>reset:重置按钮</td>
            <input type='reset' value='重置'>
            </br>
            <td>supmit:提交按钮</td>
            <input type='submit' value='提交'>
            </br>
            <td>img:图片</td>
            <img src="../picture/111.png">
            <br>
            <td>audio:音频</td>
            <audio controls=""  loop="true">
            <source src='../media/mp3/a.mp3'  type="audio/mpeg">
            </audio>
            <br>
            <td>video:视频</td>
            <video controls="">
            <source src='../media/mp4/StartMenu_Win10.mp4' type=video/mp4>
            </video>
     </body>
    
    
    </html>
    

    截图:


    熟悉页面前端元素.png

    相关文章

      网友评论

          本文标题:2018-10-22熟悉前端页面元素

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