实训中学到的HTML基础知识(7)
发布日期:2021-06-29 02:31:36
浏览次数:3
分类:技术文章
本文共 2385 字,大约阅读时间需要 7 分钟。
1、form表单的基础介绍
A.格式 <form action="http://www.baidu.com" method="get"> ... </form> B.属性 a. action存放的是URL 网址.(把表单项"输入框"当中的数据,提交到网址对应的服务器上) b. method 设置请求的方式 get请求和post请求 get特点: 在地址栏有参数信息,数据量小,不安全 post特点: 在地址栏没有参数信息,数据量大,安全 C.注意 如果要提交数据到地址栏,必须设置 【name】属性 2、input标签 A.type属性 根据type属性的取值不同,表单项当中的类型就不一样 a. text 用户名的输入框 b. password 密码的输入框 c. radio 性别的单选按钮 d. checkbox 爱好的多选按钮 e. submit 提交按钮 f. button 普通按钮 和后期JavaScript 组合使用 g. image 图片按钮 h. file 上传的文件选择框 i. hidden 隐藏域.看不到UI界面,但是存在. j. date 选择日历的 k.datetime l.datetime-local m.email B.name属性 a. 提交地址栏上面的name.给服务器进行识别的标志 b. 对于单选按钮radio而言,设置相同的name属性,表示在同一组当中 c. 对于多选按钮checkbox而言,设置相同的name属性,表示在同一组当中 C.value属性 给我们那些不能让用户输入的 表单项,设置的值 D.id属性 a.可以给后面的CSS设置样式的识别器 b.可以给后面的JS设置识别具体是哪一个标签需要加特效. E.placeholder属性 增强用户体验,给出默认提示信息的. 3、select 下拉列表 A.格式 <select> <option value="China"> 中国 </option> <option value="USA"> 美国 </option> <option value="England"> 英国 </option> </select> 4、textare 文本域 A.格式 (例如:自我介绍) <textarea cols="20" rows="5"></textarea> 第二章 CSS样式 1、CSS引入的三种方式 A.内联样式 a.作用域:在当前的标签上面 b.格式: <font style="font-size: 88px;color: #FF9900"> 你是真的不错!心有多大,字有多大 </font> B.内部样式 a.作用域:在当前的HTML页面上面 b.格式: <head> <meta charset="UTF-8"> <title>CSS入门</title><style type="text/css">
font{ font-size: 66px; color: #0000FF } </style> </head> <body> <font style="font-size: 88px;color: #FF9900"> 你是真的不错!心有多大,字有多大 </font> <br><br> <font> 牛逼啊 </font> <br><br> <font> 我的哥就是你哥 倪歌(你哥) </font> </body> C.外部样式 a.作用域: 只要你引入了外部样式,整个页面都可以使用.(需要在外部新建CSS文件) b.格式: <!-- HTML 代码 --> <head> <meta charset="UTF-8"> <title>CSS入门</title><link rel="stylesheet" href="css/a.css">
</head> <body> <font> 牛逼啊 </font> <br><br> <font> 我的哥就是你哥 倪歌(你哥) </font> </body> <!-- CSS 代码 --> font{ font-size: 44px; color: #FF0000 } 2、三种基本的选择器 A.ID选择器 a.含义: (单独针对于某个HTML标签)"在一个HTML当中id要唯一" b.语法: #id的名称{} B.类选择器 a.含义: (设置同一个类的,可以是不同的标签类型) b.语法: .class的名称{ } C.元素选择器(设置的是同一类的标签) div{} 3、常见属性 border: #FF9900 1px solid; /*设置边框*/ height: 120px;/*设置高度*/ width: 480px;/*设置宽度*/ float: left; /*浮动,脱离原始文档流*/ text-align:center; /*内容居中*/ line-height:80px;/*行高*/ font-size: x-large; /*字体的大小large大字体(想一想衣服的尺码) */ color: #0000FF;/*设置颜色*/ 4、盒子模型 A.外边距: margin 左上右下 B.内边距: padding 左上右下 5、推荐的CSS设置.忽略边框不计算 *{ box-sizing: border-box;} /*忽略边框不计算*/ ———————————————— 版权声明:本文为CSDN博主「Bao_Joy」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/Bao_Joy/article/details/82688049带有 placeholder 文本的搜索字段:
转载地址:https://blog.csdn.net/yyyyyang525/article/details/117767103 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2024年04月15日 21时09分21秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
推荐一个Idea查看字节码的插件
2019-04-29
Adaptor适配器模式
2019-04-29
jquery select下拉选项判断被选中,获取被选中项里面的值
2019-04-29
git第一次提交代码到远程仓库
2019-04-29
写了两个关于 bio和 nio的小程序
2019-04-29
nginx多层代理java获取客户端真实ip
2019-04-29
IntelliJ Idea及其同系列产品解决网页查看源码Html排版样式乱了
2019-04-29
oracle查找指定范围月份中的统计数据
2019-04-29
Jquery结合css写开关按钮,拨动开关
2019-04-29
nginx反向代理去除前缀
2019-04-29
解决window系统nginx造成很多TIME_WAIT访问变慢
2019-04-29
处理vue elementui图片回显编辑/修改/删除
2019-04-29
iview-admin关于打包的输出路劲问题
2019-04-29
java基础类java.lang.RunTime
2019-04-29
一个全栈开发工程师写的2021年第一篇
2019-04-29
完美解决input 类型checkbox复选框不显示的问题
2019-04-29
css flex布局超长自动换行
2019-04-29