学习web前端第二天

最新推荐文章于 2024-07-25 09:24:40 发布

qq_39449982

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量53

点赞数

分类专栏：前端学习文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_39449982/article/details/121531227

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

目标：

1.能够书写表格
2.能够写出无序列表
3.能够写出3-4个常用input表单类型
4.能够写出下拉列表表单
5.能够使用表单元素实现注册页面
6.能够独立查阅W3C文档

表格标签

样式

align	left、center、right	表格周围元素对齐方式
border	1或""	表格是否有边框，默认值为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认像素2px
width	像素值或百分比	规定表格的宽度

结构

    <thead></thead> 标签表格的头部区域 内部必须要有<tr>标签，一般位于第一行
    <tbody></tbody> 标签表格的主体区域 用于存放数据本体

合并

    rowspan="合并单元格的个数" 跨行合并
    colspan="合并单元格的个数" 跨列合并

列表标签

    ul 表示无序列表，一般会以项目符号呈现列表表项，只能嵌套<li>
    ol 表示有序列表，列表排列以数字来显示，只能嵌套<li>
        li 定义列表项,能容纳所有元素

    dl 表示自定义列表，定义描述列表（或定义列表），该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用
        dt dd 定义列表项,能容纳所有元素

<form action="url地址" method="提交方式(get/post)" name="表单域名称">各种表单元素空间</form>

表单标签

表单域是一个包含表单元素的区域
在HTML标签中,< form >标签用于定义表单域，以实现用户信息的收集和传递。
< form > 会把他范围内的表单元素信息提交给服务器。

属性	值	含义
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

表单元素

< input > 输入表单元素

type	属性值
button	定义点击按钮
checkbox	定义复选框
file	定义输入字段"浏览"按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字段被隐藏
radio	定义单选字段 name必须一样才能多选一
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20格字符

属性	属性值	含义
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

1.name 和 value 是每个表单元素都有的属性值，主要给后台人员使用
2.name 表单元素的名字，要求按钮和复选框要有相同的name值
3.checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素
4.maxlength是用户可以在表单元素输入的最大字符数，一般较少使用

< label> 标签为input元素定义标注(标签) 用于绑定一个表单元素，当点击
< lable>内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验
核心: < lable>标签的for属性应当与相关元素的id属性相同
< select> 下拉表单元素至少包含一对< option>
< option> 中定义selected="selected"时，当前选项为默认选项
< textarea> 文本域元素输入内容较多时使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center" border="1px" cellpadding="0" cellspacing="0" width="500" hight="250">
        <!-- 行 -->
        <tr>
            <!-- 列 th内容加粗居中表示 一般用于表格的第一行或者第一列-->
            <th>班级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>照片</th>
        </tr>
        <tr>
            <td>一班</td>
            <td>小明</td>
            <td>123456</td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td>二班</td>
            <td>小黄</td>
            <td>123456</td>
        </tr>
        <tr>
            <td>谁更帅</td>
            <td colspan="3">小明</td>
        </tr>
    </table>
   

    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
    <dl>
        <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
    </dl>
    <!-- 
        列表标签
        ul 表示无序列表，一般会以项目符号呈现列表表项，只能嵌套<li>
        ol 表示有序列表，列表排列以数字来显示，只能嵌套<li>
            li 定义列表项,能容纳所有元素

        dl 表示自定义列表，定义描述列表（或定义列表），该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用
            dt dd 定义列表项,能容纳所有元素
     -->

    <form action="xxx.php" method="get">
        用户名:<input type="text" name="username" value="请输入用户名" maxlength="5"> <br>
        密  码:<input type="password" name="pwd"> <br>
        性  别: <label for="nan">男</label><input type="radio" name="sex" value="男" id="nan" checked="checked"> <label for="nv">女</label>  <input type="radio" name="sex" value="女" id="nv"> 人妖<input type="radio" name="sex" value="人妖"><br>
        爱  好: 吃饭<input type="checkbox" name="hobby" value="吃饭" checked="checked">睡觉<input type="checkbox" name="hobby" value="睡觉">打豆豆<input type="checkbox" name="hobby" value="打豆豆"><br>
        
        <!-- 点击了提交按钮，就可以把表单域中的表单元素提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <input type="reset" value="重置">
        <input type="button" value="获取短信验证"> <br>
        上传头像:<input type="file">
        选择:<select name="" id="">
            <option value="">选项一</option>
            <option value="" selected>选项二</option>
            <option value="">选项三</option>
        </select><br>
        自我介绍:<textarea rows="3" cols="20">文本内容</textarea>
    
    </form>

</body>

</html>

资料查询：
百度：https://www.baidu.com
W3C：http://www.w3school.com.cn
MDN： http://developer.mozilla.org/zh-CN

qq_39449982

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习web前端第二天

目标：1.能够书写表格2.能够写出无序列表3.能够写出3-4个常用input表单类型4.能够写出下拉列表表单5.能够使用表单元素实现注册页面6.能够独立查阅W3C文档表格标签样式alignleft、center、right表格周围元素对齐方式border1或""表格是否有边框，默认值为""，表示没有边框cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素cellspacing像素值规定单元格之间的空白，默认像素2pxwi
复制链接

扫一扫