码迷,mamicode.com
首页 > Web开发 > 详细

web前端-html

时间:2019-12-02 17:15:11      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:输入   pwd   src   text   描述   一个   多选   后台   常用   

HTML 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言,HTML 运行在浏览器上,由浏览器来解析

<!DOCTYPE html>
<html lang="en">
<!--head标签中的除了title可以展示,其余的无法在页面中展示-->
<head>
<!--    自闭和标签<meta charset="UTF-8"> 只有开头标签,没有结尾标签-->
    <meta charset="UTF-8">
<!--    主动闭合标签-->
    <title>标题</title>
    <meta name="description" content="网页描述">
<!--    引入css-->
    <link rel="stylesheet" href="demo.css">
<!--引入js和编写js-->
    <script src="demo.js"></script>
</head>
<!--只有 <body> 区域  才会在浏览器中显示-->
<body>
    <h1>这是一个标题</h1>
    <h2>这是另一个标题</h2>
    <p1><a href="http://www.baidu.com">跳转至百度</a></p1>
<!--    换行符-->
    <br>
    <p1><a href="http://www.qq.com">跳转至腾讯</a></p1>
<!--div是块级标签,无论自己有多大,都占满屏幕,称为伪白板标签-->
    <div>这是div标签</div>
<!--    span是行内标签又叫内联标签,自己有多大就占多大,也叫白板标签-->
    <span>这是span标签</span>
    <br>
    <p1>用户名:</p1>
<!--    属性写在标签内部的<>之间的;标签名之后的;属性与属性之间空格分割
        空格:&nbsp 大于号:&gt 小于号: &lt -->
    <input type="text" placeholder="输入用户名">
    <br>
    <p1>&nbsp&nbsp&nbsp&nbsp码:</p1>
    <input type="password" placeholder="输入密码">
    <br>
    <p1>&nbsp&nbsp&nbsp&nbsp试:</p1>
    <input type="text" value="默认填充的">
    <br>
    <input type="button" value="登录">
<!--    submit如果在<form></form>中可以跟后台交互 例如跳转至百度-->
    <form method="get" action="http://www.baidu.com">
        <input type="submit" value="提交跳转至百度">
    </form>
    <br>
<!--    下面的提交会刷新整个页面且会清空text里面的内容,目前常用的是异步提交 ajax-->
    <form method="get">
        <input type="text">
        <input type="submit" value="提交">
    </form>
    <br>
<!--    button需要绑定事件,如下面点击登录会有提示-->
    <form method="get">
        <input type="button" value="button-登录" onclick="alert(‘提示语‘)">
        <input type="submit" value="button-提交">
    </form>
<!--    多选和单选按钮,name的value一样的化单选按钮会互斥;上传文件;重置reset必须在form表单里才起作用刷新页面
        checked=checked是默认勾选的意思,-->
    <br>
    <form method="get">
        <span>足球</span><input type="checkbox" checked="checked">
        <span>篮球</span><input type="checkbox">
        <span></span><input type="radio" name="sex" checked="checked">
        <span></span><input type="radio" name="sex">
        <span>上传文件:</span><input type="file">
        <span>刷新:</span><input type="reset" value="重置">
    </form>
    <br>
<!--    前后台的交互 name后面的就是接口的入参,可以称为key,与后台交互的都有name属性-->
    <form method="post" action="http://192.168.4.240:8080/api/login">
        <span>username</span><input type="text" name="username">
        <span>pwd</span><input type="password" name="pwd">
        <input type="submit" value="登录">
    </form>
<!--    点击用户名获取光标-->
    <label for="user">用户名</label><input type="text" id="user">
<!--下拉框select,selected="selected"默认选择
    1,宝马,2,奔驰,3,奥迪 (1,2,3枚举值)name也是key 结果可能是{xxxx:1}-->
    <br>
    <select name="xxxx">
        <option value="1">宝马</option>
        <option value="2">奔驰</option>
        <option value="3" selected="selected">奥迪</option>
    </select>
    <br>
    <a href="http://www.163.com" target="_blank">新打开页面跳转至网易</a>
    <br>
    <textarea>多行文本</textarea>
<!--    显示图片-->
<!--    <img src="test.png">-->

</body>
</html>

 

web前端-html

标签:输入   pwd   src   text   描述   一个   多选   后台   常用   

原文地址:https://www.cnblogs.com/mhmh007/p/11971291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!