0X01常用html标签

input标签单行输入

  • 输入框
<form action="s14.html" method="post">
    <input type="text" name="user" value="赵凡"/>
    <input type="password" name="passwd" value="赵凡"/>
    <input type="button" value="登录1" />
    <input type="submit" value="登录2" />
</form>
<!--    
input type='text'     - name属性,value="赵凡" 
input type='password' - name属性,value="赵凡" 
input type='submit'   - value='提交' 提交按钮,表单
input type='button'   - value='登录' 按钮
-->
  • 单选多选
<form action="s14.html" method="get">
    <div>
        <p>请选择性别:</p>
        男:<input type="radio" name="gender" value="1" checked="checked"/>
        女:<input type="radio" name="gender"  value="2"/>
        <input type="submit" value="提交"/>
        <p>爱好:</p>
        篮球:<input type="checkbox" name="favor" value="1"/>
        足球:<input type="checkbox" name="favor" value="2" checked="checked" />
        台球:<input type="checkbox" name="favor" value="3"/>
        网球:<input type="checkbox" name="favor" value="4" checked="checked" />
        <p>技能:</p>
        开车:<input type="checkbox" name="skill" value="1"/>
        画画:<input type="checkbox" name="skill" value="2"/>
        <input type="submit" value="注册" />
    </div>
</form>
<!--    
input type='radio'    - 单选框 value,checked="checked" 默认选中,name属性(name相同则互斥)
input type='checkbox' - 复选框 value, checked="checked" 默认选中,name属性(批量获取数据)
input type='rest'     - 重置
-->
  • 上传文件
<form action="/" enctype="multipart/form-data">
    <p>上传文件</p>
    <input type="file" />
    <input type="submit" value="上传文件" />
</form>

<!-- 
input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"
-->
  • textarea标签多行输入
<form>
    <textarea name="key">默认值</textarea>
    <input type="submit" value="提交" />
</form>
<!--
<textarea >默认值</textarea>  - name属性
-->
  • select下来框选项
<form action="/">
    <select name="city">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
    </select>
    <input type="submit" value = "提交"/>
</form>
<!--
select标签  - name,内部option value, 提交到后台,size,multiple
-->
  • a标签
<a href="https://www.baidu.com" target="_blank">百度</a>
<!-- 超链接跳转到指定url-->

<a href="#i1">第一章</a>
<div id="i1">第一章内容</div>
<!-- 锚 href='#某个标签的ID'    标签的ID不允许重复-->