结构分析

2022-05-31 14:00:11 作者：互联网

<header><h2>网页头部</h2></header>

<section><h2>网页主体</h2></section>


<footer><h2>网页尾巴</h2></footer>



iframe内联框架
在一个网站中嵌套另一个网站

<body>

<iframe src="https://www.baidu.com" frameborder="0" width="800px" height="1000px"></iframe>

</body>




表单


<!--表单 form
action:表单提交位置，可以是网站，也可以是一个请求处理地址

-->

<h1>注册</h1>
<form action="2.html网页学习.html"method="get">
<p> 名字：<input type="text"name="username"></p>
<p> 密码：<input type="password"name="pwd"></p>

<p>
    <input type="submit">
    <input type="reset">
    
</p>
</form>
</body>
</html>



单选框


    <p>
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl"name="sex">女
    </p>

<p>
    <input type="submit">
    <input type="reset">
    
</p>
</form>

<!--文本输入框：input type = "text"

value="大王饶命"    默认初始值
maxlength ="8"     最长输入字符数
size ="30"         文本框长度
单选框
input type="radio"
value:单选框的值
name：组
-->
</body>

多选框

<!--多选框
input type ="checkbox"
-->

    <p>爱好
        <input type="checkbox"value="sleep"name="hobby">睡觉
        <input type="checkbox"value="eat"name="hobby">吃
        <input type="checkbox"value="palygame"name="hobby">打游戏
        <input type="checkbox"value="studay"name="hobby">学习
        <input type="checkbox"value="run"name="hobby">跑步
    </p>



按钮

<!--按钮标签
input type ="button" 普通按钮
input type ="image"  图像按钮
input type ="submit" 提交按钮
input type "reset"   重置按钮
value:给按钮赋值
-->

<p>
    <input type="button"name="but1"value="点击变长">
    <input type="image" src="../resources/image/1.jpg">
</p>


类表框文本

<!--下拉框，列表框-->

<p>
    <select name="列表名称" id="无">

        <option value="china">中国</option>
        <option value="usa">美国</option>
        <option value=jep>日本</option>
        <option value="yde">印度</option>

    </select>

</p>


文本域文件域


<!--文本域-->

    <p>反馈：
        <textarea name="textarea"  cols="30" rows="10">内容</textarea>
    </p>

<!--文件域
  input type ="file" name="files"
  -->
    <p>
        <input type="file" name="files">
        <input type="button"value="上传" name="upload">
    </p>


功能标签



<!--邮箱验证-->
    <p>
        <input type="email" name="email">
    </p>
    
<!--URL-->
    <p>
    <input type="url"name="url">
    </p> 
    
 <!--数字验证-->
    <p>
        <input type="number"name="number" max="100" min="0" step="2">
    </p>

<!--滑块-->
    <p>
        <input type="range" min="0" max="100"step="2">
    </p>

<!--搜索框-->
    <p>
        <input type="search"name="search">
    </p>


标签应用

<!--
增强鼠标可用性
隐藏域    hidden
只读     readonly
禁用2    disable

-->

表达初级验证
repuire 不能为空
placeholder 提示信息
pattern 正则式表达

标签：分析,单选框,--,value,按钮,input,type,结构
来源： https://www.cnblogs.com/xyzaa/p/16330209.html