首页 > Web开发 > 详细

web前端2020/1/20学习笔记

时间:2020-01-21 00:02:18      阅读:98      评论:0      收藏:0      [点我收藏+]

一,列表和表单

1,列表标签(重点)

1.1无序列表ul(重点)
无序列表的各个列表项之间没有顺序级别之分,是并列的
其基本语法格式如下:
< ul>
< li>列表项1< /li>
< li>列表项2< /li>
< li>列表项3< /li>
< li>...< /li>
< /ul>

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>
<body>
<ul>
<li>水果</li>
<li>蔬菜</li>
<li>腊肉</li>
<li>干果</li>
</ul>
    
</body>
</html>

1.2有序列表ol(了解)

格式:< ol>
< li>列表项1< /li>
< li>列表项2< /li>
< li>列表项3< /li>
< li>列表项4< /li>
< li>...< /li>

< /ol>
例子:

<h1>有序列表</h1>
<ol>
<li>美国</li>
<li>中国</li>
<li>日本</li>
<li>德国</li>
</ol>

1.3自定义标签:


定义列表常常用于对术语或名词进行描述和解释,定义列表的列表项前没有任何项目符号,举例:

<h1>自定义列表</h1>
<dl>
<dt>城市</dt>
<dd>重庆</dd>
<dd>成都</dd>
<dd>北京</dd>
<dd>广州</dd>
<dd>杭州</dd>
</dl>

1.4列表总结

标签名 定义 说明
< ul>< /ul> 无序标签 里面只能包含li没有顺序,我们以后布局中最常用的列表
< ol>< /ol> 有序标签 里面只能包含li,有顺序,使用情况较少
< dl>< /dl> 自定义列表 里面有两个兄弟,dt和dd

2,表单标签(掌握)

2.1 input控件(重点)
语法:< input type="属性值" value="你好" >
(1)input输入的意思
(2)< input/>单标签
(3)type属性设置不同的属性值用来指定不同的控件类型
(4)除了type属性还有别的属性

常用属性:

技术分享图片

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 表单</title>
</head>
<body>
用户名:
    <input type="text" name="请输入用户名"><br/>
    密码:
    <input type="password">
</body>
</html>

常用属性值介绍(重点)
(1)radio单选框,表示只能选择其中一个
(2)checkbox复选框,表示可以多选
(3)举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 表单</title>
</head>
<body>
用户名:
    <input type="text" name="请输入用户名"><br/>
    密码:
    <input type="password">

    性别:
    男<input type="radio" name="sex" />
    女<input type="radio" name="sex" /><br/>
    爱好
    打篮球<input type="checkbox" name="hobby" />
    玩耍<input type="checkbox" name="hobby" />
    打羽毛球<input type="checkbox" name="hobby" />
    踢足球<input type="checkbox" name="hobby" />
</body>
</html>

运行结果:

技术分享图片

(4)举例(列出所用属性的用法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单属性</title>
</head>
<body>
用户名:
<input type="text" name="name" value="请输入用户名" /><br/>
密码:
<input type="password" name="password" /><br/>
性别:
男<input type="radio" name="sex" />
女<input type="radio" name="sex" />
未知<input type="radio" name="sex" checked="checked"><br/>
爱好:
打篮球<input type="checkbox" name="hobby" checked="checked">
踢足球<input type="checkbox" name="hobby">
玩泥巴<input type="checkbox" name="hobby"><br/>

<input type="button"  value="button">
<input type="submit" >
<input type="reset" ><br/>


<input type="image" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579522310728&di=5042e889c497070d55693fe057e3f270&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D2870245419%2C560778467%26fm%3D214%26gp%3D0.jpg" name="提交"><br/>

<input type="file" name="file"><br/>
</body>
</html>

运行结果:

技术分享图片
技术分享图片

小结:

技术分享图片

2.2 label标签


作用:
通过绑定元素后,当鼠标点击label标签里面的文字时,光标会定位到指定的表单里面
有两种绑定方法(掌握)
举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label</title>
</head>
<body>
<!-- label第一种绑定方法 -->
<label>姓名:<input type="text" name="name"></label><br/>
<!-- label第二种绑定方法 -->
<label for="nc">昵称:</label><input type="text" name="nicheng" id="nc">
    
</body>
</html>

运行结果:

技术分享图片

2.3 textarea标签


语法:< textarea> < /textarea>


2.4 select下拉列表


目的:
如果有多个选项让用户选择,为了节约空间,我们可以使用select控件定义下拉列表
语法:
< select>
< option>选项1< /option>
< option>选项1< /option>
< option>选项1< /option>
< option>选项1< /option>
...
< /select>
举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select</title>
</head>
<body>
籍贯:
<select>
<option>--请选择省市--</option>
<option>北京市</option>

<option>重庆市</option>

<option>天津市</option>

<option>山东省</option>

</select>
<select>
<option>--请选择城市--</option>
<option>威海市</option>
<option>昌平市</option>
<option>海淀市</option>
<option>新关村</option>

</select>
    
</body>
</html>

技术分享图片

注意:
在option中定义selected=“selected”时,当前项即为默认选项。

2.5 form表单域

(1)搜集的用户信息通过form表单域传递给服务器(2)目的:
在HTML中,form标签被用于定义表单域,以实现用户信息的搜集和传递,form中所有内容都会被提交到服务器
语法:
< form action="url地址" method="提交方式" name="表单名称">
< /form>

技术分享图片

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select</title>
</head>
<body>
<form action="" method="get" name="">
username:
<input type="text" name="username">
password:
<input type="password" name="password">
<input type="submit" name="xinxi">
<input type="reset" name="re">

</form>
    
</body>
</html>
运行结果:

技术分享图片

web前端2020/1/20学习笔记

原文:https://www.cnblogs.com/-believe-me/p/12219843.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!