HTML5教程

前端入门笔记02

本文主要是介绍前端入门笔记02,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

表格:

    <table border=1 align="center">【表格边框为1】【align = left center right】局左中右

        <tr>【<th>居中加粗显示,用于表头单元格】

            <td>

                

            </td>

        </tr>

    </table>

一个table表示一个表格。

一个tr表示一行

一个td表示一个单元格

table>tr*n>td*m 【自动创建一个m列n行的表格】

cellpadding 单元格内容与边框距离。默认1像素

cellspacing 单元格与单元格之间的距离,默认2像素

width / height 单元格宽度

列表:

无序列表:

ul>li*n 【li里面的元素可以无序排列】

<ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

有序列表:

ol>li*n 【li里面的元素有排列顺序要求】

<ol>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ol>

自定义列表:

        ui>li

表单:

用于收集用户信息(注册登录界面)

表单域:一个包含表单元素的区域,【<form>】

<form>标签用于定义表单域,用于收集用户信息。

<form>会将标签范围内的表单元素信息反馈给后台服务器</form>

<form type=""></form>

    <form>

        <!-- text为文本框,用户可输入任意内容 -->

        用户名:<input type="text"><br />

        <!-- password为密码框,用于密码输入 -->

        密&nbsp;&nbsp;&nbsp;码:<input type="password"><br />

        <!-- radio为单选按钮,多旋一 -->

        性别:<input type="radio">男<input type="radio">女<br />    

        <!-- checkbox为多选按钮,可同时选择若干个选项 -->

        <!--注册页面同意XXX条款为多选框-->

        爱好:<input type="checkbox">抽烟<input type="checkbox">喝酒<input type="checkbox">烫头发<br />

        <!-- checkbox为多选按钮,可同时选择若干个选项 -->

    </form>

 

value : 输入框提示输入,后台用于输入管理

<form>

用户名:<input type="text" value="请输入用户名">

</form>

都可以用于文本框文字提示。
"value"需要手动删除
"placeholder"不需要手动删除

name: 属性值, 单选按钮跟多选框 各个选项的name值要相同。

性别:<input type="radio" name="sex" valut="男" checked="checked">男<input type="radio" name="sex" valut="女">女

爱好:<input type="checkbox" name="hobby" valut="抽烟">抽烟<input type="checkbox" name="hobby valut="喝酒">喝酒<input type="checkbox" name="hobby valut="烫头发">烫头发<br />

checked:用于单选按钮和多选框,设置页面打开的时候默认选项。

checked="checked"

maxlength : 最大输入长度

maxlength="12"(用户名最长只能输入12位)

max + length 最大输入长度

min + length 最小输入长度

submit : 提交按钮。把表格内容提交给后台

<input type="submit" value="叫爸爸就可以注册">

reset : 重新填写表单。恢复默认设置

<input type="reset" >

button : 后期配合JS搭配使用

<input type="button" >

文件域:

file: 上传文件

上传头像:<input type="file">

<label>input元素定义标注,提升用户体验

用于绑定表单元素,点击标签内文件时,浏览器会自动将焦点选择对应的表单元素上,

<input type="radio" name="sex" id="sex" />

<label for="sex">男</label>

<label>标签中"for"的值与<input>中的"ID"要一致。

<select>下拉元素

 

快捷输入select>option*n

省份:<select>

<option>xxxxx</option>

<option>xxxxx</option>

<option>xxxxx</option>

<option>xxxxx</option>

</select>

<textarer>文本域【用于网站介绍,论坛回复,评论区等】

这篇关于前端入门笔记02的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!